diff --git a/src/Features/ThemeChange/ThemeChange.js b/src/Features/ThemeChange/ThemeChange.js index 13c6a8e..2acb6a0 100644 --- a/src/Features/ThemeChange/ThemeChange.js +++ b/src/Features/ThemeChange/ThemeChange.js @@ -471,7 +471,11 @@ const initialState = { notes: false, SignatureImage: '', BillName: '', - SelectedHeaderColor: '#000000', + SelectedHeaderColour: false, + SelectedTableHeaderColour: false, + SelectedTableBodyColour: false, + SelectedFooterColour: false, + SelectedNetAmountColour: false, allColors: [], allColorsCat: [], LayoutOverallColorsList: [], @@ -552,6 +556,17 @@ const initialState = { ScanTemplate: {}, CustThemeData: 'Layout2', PrinterMappingDtls: [], + SelectedHeaderColor: '#ffffff', + SelectedHeaderFontColor: '#000000', + SelectedTableHeaderColor: '#ffffff', + SelectedTableHeaderFontColor: '#000000', + SelectedTableBodyColor: '#ffffff', + SelectedTableBodyFontColor: '#000000', + SelectedFooterColor: '#ffffff', + SelectedFooterFontColor: '#000000', + SelectedNetAmountColor: '#ffffff', + SelectedNetAmountFontColor: '#000000', + rowType: 'odd', }; const ThemeSlice = createSlice({ @@ -2149,7 +2164,43 @@ const ThemeSlice = createSlice({ state.BillName = action?.payload; }, changeSelectedHeaderColor: (state, action) => { - state.SelectedHeaderColor = action?.payload; + state.SelectedHeaderColor = action?.payload?.background; + state.SelectedHeaderFontColor = action?.payload?.font; + }, + changeSelectedTableHeaderColor: (state, action) => { + state.SelectedTableHeaderColor = action?.payload?.background; + state.SelectedTableHeaderFontColor = action?.payload?.font; + }, + changeSelectedTableBodyColor: (state, action) => { + state.SelectedTableBodyColor = action?.payload?.background; + state.SelectedTableBodyFontColor = action?.payload?.font; + }, + changeSelectedFooterColor: (state, action) => { + state.SelectedFooterColor = action?.payload?.background; + state.SelectedFooterFontColor = action?.payload?.font; + }, + // toggles indicating whether each colour option should actually be applied in print + changeSelectedHeaderColour: (state, action) => { + state.SelectedHeaderColour = action?.payload; + }, + changeSelectedTableHeaderColour: (state, action) => { + state.SelectedTableHeaderColour = action?.payload; + }, + changeSelectedTableBodyColour: (state, action) => { + state.SelectedTableBodyColour = action?.payload; + }, + changeSelectedFooterColour: (state, action) => { + state.SelectedFooterColour = action?.payload; + }, + changeSelectedNetAmountColour: (state, action) => { + state.SelectedNetAmountColour = action?.payload; + }, + changeRowType: (state, action) => { + state.rowType = action?.payload; + }, + changeSelectedNetAmountColor: (state, action) => { + state.SelectedNetAmountColor = action?.payload?.background; + state.SelectedNetAmountFontColor = action?.payload?.font; }, changeCurrentColor: (state, action) => { const { color } = action?.payload; @@ -2687,6 +2738,16 @@ export const { changeActiveTheme, changeScanTemplate, changeSelectedHeaderColor, + changeSelectedTableHeaderColor, + changeSelectedTableBodyColor, + changeSelectedFooterColor, + changeSelectedHeaderColour, + changeSelectedTableHeaderColour, + changeSelectedTableBodyColour, + changeSelectedFooterColour, + changeSelectedNetAmountColour, + changeRowType, + changeSelectedNetAmountColor } = ThemeSlice.actions; export const GlobalPricingAppPricingName = (state) => @@ -2711,14 +2772,38 @@ export const GlobalprintSignature = (state) => state.theme?.Signature; export const GlobalprintCashierName = (state) => state.theme?.CashierName; export const GlobalprintLogo = (state) => state.theme?.Logo; export const GlobalprintCredit = (state) => state.theme?.Credit; -export const GlobalprinttermsAndConditions = (state) => - state.theme?.termsAndConditions; +export const GlobalprinttermsAndConditions = (state) => state.theme?.termsAndConditions; export const GlobalthemeFormat = (state) => state.theme?.themeFormat; +// selectors for colour toggles (true when the user has chosen that colour field) +export const GlobalSelectedHeaderColour = (state) => state.theme?.SelectedHeaderColour; +export const GlobalSelectedTableHeaderColour = (state) => state.theme?.SelectedTableHeaderColour; +export const GlobalSelectedTableBodyColour = (state) => state.theme?.SelectedTableBodyColour; +export const GlobalSelectedFooterColour = (state) => state.theme?.SelectedFooterColour; +export const GlobalSelectedNetAmountColour = (state) => state.theme?.SelectedNetAmountColour; export const Globalnotes = (state) => state.theme?.notes; export const GlobalSignatureImage = (state) => state.theme?.SignatureImage; export const GlobalBillName = (state) => state.theme?.BillName; export const GlobalSelectedPrintHeaderColor = (state) => state.theme?.SelectedHeaderColor; +export const GlobalSelectedPrintHeaderFontColor = (state) => + state.theme?.SelectedHeaderFontColor; +export const GlobalSelectedTableHeaderColor = (state) => + state.theme?.SelectedTableHeaderColor; +export const GlobalSelectedTableHeaderFontColor = (state) => + state.theme?.SelectedTableHeaderFontColor; +export const GlobalSelectedTableBodyColor = (state) => + state.theme?.SelectedTableBodyColor; +export const GlobalSelectedTableBodyFontColor = (state) => + state.theme?.SelectedTableBodyFontColor; +export const GlobalSelectedFooterColor = (state) => + state.theme?.SelectedFooterColor; +export const GlobalSelectedFooterFontColor = (state) => + state.theme?.SelectedFooterFontColor; +export const GlobalSelectedNetAmountColor = (state) => + state.theme?.SelectedNetAmountColor; +export const GlobalSelectedNetAmountFontColor = (state) => + state.theme?.SelectedNetAmountFontColor; +export const GlobalRowType = (state) => state.theme?.rowType; export const changeCurrentColorValue = (state) => state.theme?.CurrentColor; export const changeCurrentTextValue = (state) => state.theme?.CurrentText; diff --git a/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx b/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx index 7bb7913..6945e2b 100644 --- a/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx +++ b/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx @@ -6,7 +6,7 @@ import React, { forwardRef, useImperativeHandle, } from 'react'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { Form, Checkbox, @@ -69,12 +69,34 @@ import { changeSelectedCredit, changeSelectedTax, changeSelectedHeaderColor, + changeSelectedTableHeaderColor, + changeSelectedTableBodyColor, + changeSelectedFooterColor, + changeRowType, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalRowType, + changeSelectedNetAmountColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, + changeSelectedHeaderColour, + changeSelectedTableHeaderColour, + changeSelectedTableBodyColour, + changeSelectedFooterColour, + changeSelectedNetAmountColour, } from '../../../../Features/ThemeChange/ThemeChange'; import '../../../../Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss'; import { useAuth } from '../../../../AuthContext.jsx'; import { InputField } from '../../../../Components/Forms/InputField.jsx'; import ColorPicker from '../../../../Components/Forms/ColorPicker.jsx'; import { FaChevronDown, FaChevronUp } from 'react-icons/fa'; +import ColorsSelected from '../UtillComponents/ColorsSelected.jsx'; const subDirectory = import.meta.env.BASE_URL; @@ -92,6 +114,13 @@ const SelectionComponent = forwardRef((props, ref) => { } }; + // helper to read a color object from the newer `PrintColors` array + const getColor = (printColors, key) => { + if (!printColors || !Array.isArray(printColors)) return {}; + const entry = printColors.find((c) => c && c[key]); + return entry ? entry[key] : {}; + }; + useImperativeHandle(ref, () => ({ doSomething, })); @@ -138,6 +167,10 @@ const SelectionComponent = forwardRef((props, ref) => { const [isTermscondChecking, setisTermscondChecking] = useState(false); const [isSignatureChecking, setisSignatureChecking] = useState(false); const [isheadercolour, setisheadercolour] = useState(false); + const [isTableHeaderColour, setisTableHeaderColour] = useState(false); + const [isTableBodyColour, setisTableBodyColour] = useState(false); + const [isFooterColour, setisFooterColour] = useState(false); + const [isNetAmountColour, setisNetAmountColour] = useState(false); const [showMore, setShowMore] = useState(false); const visibleConfigs = showMore ? styleData : styleData.slice(0, 4); const defaultImage = @@ -150,6 +183,25 @@ const SelectionComponent = forwardRef((props, ref) => { const [previewTitle, setPreviewTitle] = useState(''); const [Notes, setNote] = useState(''); const [BillName, setBillName] = useState(''); + const [openColorModal, setOpenColorModal] = useState(false); + const [bgColor, setBgColor] = useState("#ffffff"); + const [fontColor, setFontColor] = useState("#000000"); + const [selectedHeaderFontColor, setSelectedHeaderFontColor] = useState("#ffffff"); + const [colorModalTarget, setColorModalTarget] = useState(null); // 'header' | 'tableHeader' | 'tableBody' | 'footer' + const rowType = useSelector(GlobalRowType); + + // derived from global store + const headerColor = useSelector(GlobalSelectedPrintHeaderColor); + const headerFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const tableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const tableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const tableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const tableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const footerColor = useSelector(GlobalSelectedFooterColor); + const footerFontColor = useSelector(GlobalSelectedFooterFontColor); + const netAmountColor = useSelector(GlobalSelectedNetAmountColor); + const netAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + const items = [ { @@ -358,6 +410,66 @@ const SelectionComponent = forwardRef((props, ref) => { ); setisSignatureChecking(checkedList?.includes(CheckSignature?.ConfigId)); setisheadercolour(checkedList?.includes(headerColour?.ConfigId)); + setisTableHeaderColour( + checkedList?.includes( + sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour') + ?.ConfigId + ) + ); + setisTableBodyColour( + checkedList?.includes( + sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour') + ?.ConfigId + ) + ); + setisFooterColour( + checkedList?.includes( + sizeCheckList.find((item) => item.ConfigName === 'Footer Colour') + ?.ConfigId + ) + ); + setisNetAmountColour( + checkedList?.includes( + sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour') + ?.ConfigId + ) + ); + + // update global toggle states as well so print components can read them + if (checkedList?.includes(headerColour?.ConfigId)) { + dispatch(changeSelectedHeaderColour(true)); + } else { + dispatch(changeSelectedHeaderColour(false)); + dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' })); + } + const tblHdr2 = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId; + if (checkedList?.includes(tblHdr2)) { + dispatch(changeSelectedTableHeaderColour(true)); + } else { + dispatch(changeSelectedTableHeaderColour(false)); + dispatch(changeSelectedTableHeaderColor({ background: '', font: '' })); + } + const tblBody2 = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId; + if (checkedList?.includes(tblBody2)) { + dispatch(changeSelectedTableBodyColour(true)); + } else { + dispatch(changeSelectedTableBodyColour(false)); + dispatch(changeSelectedTableBodyColor({ background: '', font: '' })); + } + const ftr2 = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId; + if (checkedList?.includes(ftr2)) { + dispatch(changeSelectedFooterColour(true)); + } else { + dispatch(changeSelectedFooterColour(false)); + dispatch(changeSelectedFooterColor({ background: '', font: '' })); + } + const net2 = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId; + if (checkedList?.includes(net2)) { + dispatch(changeSelectedNetAmountColour(true)); + } else { + dispatch(changeSelectedNetAmountColour(false)); + dispatch(changeSelectedNetAmountColor({ background: '', font: '' })); + } }; const fetchInitialData = async () => { @@ -422,7 +534,30 @@ const SelectionComponent = forwardRef((props, ref) => { Signature: item.Signature, PrintType: item.PrintType, PrintHdrName: item.PrintHdrName, - PrintHdrColor: item.PrintHdrColor, + // legacy fields are filled from the array so older code still works + PrintHdrColor: + item.PrintHdrColor || getColor(item.PrintColors, 'headerColor')?.background, + PrintHdrFontColor: + item.PrintHdrFontColor || getColor(item.PrintColors, 'headerColor')?.font, + TableHeaderColor: + item.TableHeaderColor || getColor(item.PrintColors, 'tableHeaderColor')?.background, + TableHeaderFontColor: + item.TableHeaderFontColor || getColor(item.PrintColors, 'tableHeaderColor')?.font, + TableBodyColor: + item.TableBodyColor || getColor(item.PrintColors, 'tableBodyColor')?.background, + TableBodyFontColor: + item.TableBodyFontColor || getColor(item.PrintColors, 'tableBodyColor')?.font, + footerColor: + item.footerColor || getColor(item.PrintColors, 'footerColor')?.background, + footerFontColor: + item.footerFontColor || getColor(item.PrintColors, 'footerColor')?.font, + netAmountColor: + item.netAmountColor || getColor(item.PrintColors, 'netAmtColor')?.background, + netAmountFontColor: + item.netAmountFontColor || getColor(item.PrintColors, 'netAmtColor')?.font, + rowType: + item.rowType || getColor(item.PrintColors, 'tableBodyColor')?.rowType || 'odd', + PrintColors: item.PrintColors, Notes: item?.Notes, PageSize: item?.PageSize?.trim() || '3inch', PrintTypeId: item?.PrintTypeId, @@ -474,6 +609,7 @@ const SelectionComponent = forwardRef((props, ref) => { OptionDetails, PrintTypeId, PrintHdrColor, + PrintColors } = row; if (index >= 4) setShowMore(true); if (index <= 4) setShowMore(false); @@ -487,7 +623,11 @@ const SelectionComponent = forwardRef((props, ref) => { setNote(Notes); setBillName(PrintHdrName); setEdit(true); - setSelectedColour(PrintHdrColor); + // load existing header color, falling back to array + setSelectedColour( + PrintHdrColor || getColor(PrintColors, 'headerColor')?.background || '#000000' + ); + // setSelectedHeaderFontColor(PrintHdrFontColor); setSelectedStyleId(StyleId); if (Signature) { @@ -538,6 +678,44 @@ const SelectionComponent = forwardRef((props, ref) => { dispatch(changeNotes(helperFunction('Notes'))); dispatch(changeSignatureImage(Signature)); dispatch(changeBillName(PrintHdrName)); + // derive color objects; prefer the legacy fields but fall back to the PrintColors array + const hdr = getColor(PrintColors, 'headerColor'); + const tblHdr = getColor(PrintColors, 'tableHeaderColor'); + const tblBody = getColor(PrintColors, 'tableBodyColor'); + const ftr = getColor(PrintColors, 'footerColor'); + const net = getColor(PrintColors, 'netAmtColor'); + + dispatch( + changeSelectedHeaderColor({ + background: PrintHdrColor || hdr.background, + font: hdr.font, + }) + ); + dispatch( + changeSelectedTableHeaderColor({ + background: tblHdr.background || row.TableHeaderColor, + font: tblHdr.font || row.TableHeaderFontColor, + }) + ); + dispatch( + changeSelectedTableBodyColor({ + background: tblBody.background || row.TableBodyColor, + font: tblBody.font || row.TableBodyFontColor, + }) + ); + dispatch(changeRowType(tblBody.rowType || row.rowType || 'odd')); + dispatch( + changeSelectedFooterColor({ + background: ftr.background || row.footerColor, + font: ftr.font || row.footerFontColor, + }) + ); + dispatch( + changeSelectedNetAmountColor({ + background: net.background || row.netAmountColor, + font: net.font || row.netAmountFontColor, + }) + ); dispatch( changeSelectedprintStyle({ ConfigId: StyleId, @@ -613,6 +791,8 @@ const SelectionComponent = forwardRef((props, ref) => { setSelectedStyleName( styleData.find((item) => item.ConfigId === e)?.ConfigName ); + // reset rowType when selecting a new style + dispatch(changeRowType('odd')); dispatch( changeSelectedprintStyle({ ConfigId: e, @@ -733,13 +913,42 @@ const SelectionComponent = forwardRef((props, ref) => { ) ? dispatch(changeNotes(true)) : dispatch(changeNotes(false)); - - checkedValues?.includes( - sizeCheckList.find((item) => item.ConfigName === 'Header Colour') - ?.ConfigId - ) - ? setisheadercolour(true) - : setisheadercolour(false); + const hdrId = sizeCheckList.find((item) => item.ConfigName === 'Header Colour')?.ConfigId; + if (checkedValues?.includes(hdrId)) { + dispatch(changeSelectedHeaderColour(true)); + } else { + dispatch(changeSelectedHeaderColour(false)); + // reset colours when option disabled + dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' })); + } + const tblHdrId = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId; + if (checkedValues?.includes(tblHdrId)) { + dispatch(changeSelectedTableHeaderColour(true)); + } else { + dispatch(changeSelectedTableHeaderColour(false)); + dispatch(changeSelectedTableHeaderColor({ background: '', font: '' })); + } + const tblBodyId = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId; + if (checkedValues?.includes(tblBodyId)) { + dispatch(changeSelectedTableBodyColour(true)); + } else { + dispatch(changeSelectedTableBodyColour(false)); + dispatch(changeSelectedTableBodyColor({ background: '', font: '' })); + } + const ftrId = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId; + if (checkedValues?.includes(ftrId)) { + dispatch(changeSelectedFooterColour(true)); + } else { + dispatch(changeSelectedFooterColour(false)); + dispatch(changeSelectedFooterColor({ background: '', font: '' })); + } + const netId = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId; + if (checkedValues?.includes(netId)) { + dispatch(changeSelectedNetAmountColour(true)); + } else { + dispatch(changeSelectedNetAmountColour(false)); + dispatch(changeSelectedNetAmountColor({ background: '', font: '' })); + } }; const handleOptions = async () => { @@ -790,13 +999,28 @@ const SelectionComponent = forwardRef((props, ref) => { PrintHdrName: BillName, PrintType: PrintType ? 'S' : 'C', PrintTypeId: segmentValue, - PrintHdrColor: getConcatenatedArray().some( + // Header color (background) and font + PrintHdrColor: getConcatenatedArray()?.some( (e) => e?.ConfigName?.toLowerCase() == 'header colour' ) - ? selectedColour + ? (headerColor || selectedColour) : null, + PrintHdrFontColor: getConcatenatedArray()?.some( + (e) => e?.ConfigName?.toLowerCase() == 'header colour' + ) + ? (headerFontColor || selectedHeaderFontColor) + : null, + // Table header / body / footer / net amount colors + TableHeaderColor: tableHeaderColor || null, + TableHeaderFontColor: tableHeaderFontColor || null, + TableBodyColor: tableBodyColor || null, + TableBodyFontColor: tableBodyFontColor || null, + footerColor: footerColor || null, + footerFontColor: footerFontColor || null, + netAmountColor: netAmountColor || null, + netAmountFontColor: netAmountFontColor || null, + rowType: rowType || 'odd', }); - // Validation if (isSignatureChecking && fileList?.length === 0) return message.warning('Please upload Signature'); @@ -865,7 +1089,39 @@ const SelectionComponent = forwardRef((props, ref) => { StyleId: item.StyleId, SetasDefault: item.SetasDefault, SetasDefaultInvoice: item.SetasDefaultInvoice, - PrintHdrColor: item.PrintHdrColor, + PrintHdrColor: [ + { + headerColor: { + background: item.PrintHdrColor, + font: item.PrintHdrFontColor, + }, + }, + { + tableHeaderColor: { + background: item?.TableHeaderColor, + font: item?.TableHeaderFontColor, + }, + }, + { + tableBodyColor: { + background: item?.TableBodyColor, + font: item?.TableBodyFontColor, + rowType: rowType, + }, + }, + { + footerColor: { + background: item?.footerColor, + font: item?.footerFontColor, + }, + }, + { + netAmtColor: { + background: item?.netAmountColor, + font: item?.netAmountFontColor, + }, + }, + ], PrintTypeId: item?.PrintTypeId, SizeDetails: item.OptionDetails.map((item) => ({ OptionId: item.ConfigId, @@ -1045,6 +1301,37 @@ const SelectionComponent = forwardRef((props, ref) => { // } + const handleColorSave = (colors) => { + // common handler called when ColorsSelected modal returns values + console.log("Received from modal:", colors); + switch (colorModalTarget) { + case 'header': + dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font })); + setSelectedColour(colors.background); + setSelectedHeaderFontColor(colors.font); + break; + case 'tableHeader': + dispatch(changeSelectedTableHeaderColor({ background: colors.background, font: colors.font })); + break; + case 'tableBody': + dispatch(changeSelectedTableBodyColor({ background: colors.background, font: colors.font })); + break; + case 'footer': + dispatch(changeSelectedFooterColor({ background: colors.background, font: colors.font })); + break; + case 'netAmount': + dispatch(changeSelectedNetAmountColor({ background: colors.background, font: colors.font })); + break; + default: + dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font })); + break; + } + // update local previews as well (not strictly necessary if UI reads from store) + setBgColor(colors.background); + setFontColor(colors.font); + setOpenColorModal(false); + setColorModalTarget(null); + }; return ( <> { )} {isheadercolour && ( - // {isheadercolour && SelectedStyleName == 'TaxInvoice' && (
Header Color - { - setSelectedColour(color); - dispatch(changeSelectedHeaderColor(color)); +
)} + {isTableHeaderColour && ( +
+ + Table Header Colour + + +
+ )} + {isTableBodyColour && ( +
+ + Table Body Colour + + + + + dispatch(changeRowType(checked ? "even" : "odd"))} + /> + +
+ )} + {isFooterColour && ( +
+ + Footer Colour + + +
+ )} + + {isNetAmountColour && ( +
+ + Net Amount Colour + + +
+ )} + {openColorModal && ( + setOpenColorModal(false)} + onSave={handleColorSave} + initial={{ + background: + colorModalTarget === 'header' + ? headerColor + : colorModalTarget === 'tableHeader' + ? tableHeaderColor + : colorModalTarget === 'tableBody' + ? tableBodyColor + : colorModalTarget === 'footer' + ? footerColor + : colorModalTarget === 'netAmount' + ? netAmountColor + : bgColor, + font: + colorModalTarget === 'header' + ? headerFontColor + : colorModalTarget === 'tableHeader' + ? tableHeaderFontColor + : colorModalTarget === 'tableBody' + ? tableBodyFontColor + : colorModalTarget === 'footer' + ? footerFontColor + : colorModalTarget === 'netAmount' + ? netAmountFontColor + : fontColor, + }} + /> + )} + {isTermscondChecking && (
diff --git a/src/Pages/BookingScreen/Components/UtillComponents/ColorsSelected.jsx b/src/Pages/BookingScreen/Components/UtillComponents/ColorsSelected.jsx new file mode 100644 index 0000000..92a4acb --- /dev/null +++ b/src/Pages/BookingScreen/Components/UtillComponents/ColorsSelected.jsx @@ -0,0 +1,130 @@ +import { Modal } from "antd"; +import { CloseOutlined, PlusOutlined } from "@ant-design/icons"; +import { SwatchesPicker } from "react-color"; +import { useEffect, useState } from "react"; +import Buttons from "../../../../Components/Forms/Buttons"; + +const ColorsSelected = ({ open, onClose, onSave, initial = {} }) => { + const [colorType, setColorType] = useState("background"); + const [bgColor, setBgColor] = useState(initial.background || "#ffffff"); + const [fontColor, setFontColor] = useState(initial.font || "#000000" ); + + // reset when modal is opened with different initial colors + useEffect(() => { + if (initial.background) setBgColor(initial.background); + if (initial.font) setFontColor(initial.font); + }, [initial, open]); + + const handleColorChange = (color) => { + if (colorType === "background") { + setBgColor(color.hex); + } else { + setFontColor(color.hex); + } + }; + + const handleSave = () => { + onSave({ + background: bgColor, + font: fontColor, + }); + onClose(); + }; + + return ( + <Modal + open={open} + title="Colors" + onCancel={onClose} + closeIcon={<CloseOutlined />} + footer={null} + width={400} + > + + + {/* ✅ Selected Color Preview */} + <div + style={{ + display: "flex", + justifyContent: "space-between", + border: "1px solid #ccc", + padding: "10px", + borderRadius: "8px", + marginBottom: "15px", + }} + > + <div + style={{ + display: "flex", + justifyContent: "space-between", + gap:'10px', + }} +> + {/* Background Preview */} + <div + onClick={() => setColorType("background")} + style={{ + cursor: "pointer", + padding: "5px", + borderRadius: "6px", + border: + colorType === "background" + ? "2px solid #901D77" + : "1px solid transparent", + }} + > + <p style={{ fontSize: 12, fontWeight: 600 }}> + Background + </p> + <div + style={{ + + width: 40, + height: 25, + backgroundColor: bgColor, + borderRadius: 5, + border: "1px solid #000", + }} + /> + </div> + + {/* Font Preview */} + <div + onClick={() => setColorType("font")} + style={{ + cursor: "pointer", + padding: "5px", + borderRadius: "6px", + border: + colorType === "font" + ? "2px solid #901D77" + : "1px solid transparent", + }} + > + <p style={{ fontSize: 12, fontWeight: 600 }}> + Font + </p> + <div + style={{ + width: 40, + height: 25, + backgroundColor: fontColor, + borderRadius: 5, + border: "1px solid #000", + }} + /> + </div> +</div> + </div> + + {/* Color Picker */} + <SwatchesPicker onChange={handleColorChange} /> + + <button className="colorBtn" onClick={handleSave}> + SAVE + </button> + </Modal> + ); +}; + +export default ColorsSelected; \ No newline at end of file diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintA4Standard.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintA4Standard.jsx index 714df55..892d818 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintA4Standard.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintA4Standard.jsx @@ -23,6 +23,17 @@ import { Globalnotes, GlobalthemeFormat, GlobalBillName, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from "../../../Features/ThemeChange/ThemeChange"; import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss"; import QRCode from "react-qr-code"; @@ -63,6 +74,12 @@ const PurPrintA4Standard = ({ index, const Amount = FieldDetails?.["Amount"]; const HsnCode = FieldDetails?.["HsnCode"]; const Qrcodet = FieldDetails?.["Qrcode"]; + 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 GlobalSlNo = useSelector(GlobalprintSlNo); const GlobalItem = useSelector(GlobalprintItem); const GlobalMRP = useSelector(GlobalprintMRP); @@ -79,6 +96,17 @@ const PurPrintA4Standard = ({ index, const GlobalIsnotes = useSelector(Globalnotes); const GlobalthemeFormatr = useSelector(GlobalthemeFormat) const GlobalBilltext = useSelector(GlobalBillName) + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); const keysLength = Object.keys(table2Data ?? {}).length; console.log(GlobalDiscount, Discount, "Discount"); @@ -118,10 +146,6 @@ const PurPrintA4Standard = ({ index, const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`; - const TakeawayData = table2Data?.productDetails?.filter( - (item) => item.BookingTypeName?.toLowerCase() === "takeaway" - - ); const productsData = table2Data?.[0]?.ProductDetails || []; const offers = table2Data?.OrderOfferDetails || []; @@ -209,7 +233,51 @@ const PurPrintA4Standard = ({ index, ); }; - ; + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( @@ -565,18 +633,17 @@ const PurPrintA4Standard = ({ index, <div className={`invoice-wrapper container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : (isMobile ? "auto" : "275mm") : "", pageBreakInside: "avoid", }} key={chunkIndex}> {/* <div className="invoice-wrapper"> */} - {/* Header */} + {/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */} - <div className="header" style={{ position: "relative", width: "100%" }}> - <div className="header-section"> + <div className="header" style={{ position: "relative", width: "100%", }}> + <div className="header-section" style={{...headerStyle}}> <h1 className="company-name">{companyName}</h1> <p>{ table2Data?.customerAddress}</p> <div>Phone: {table2Data?.customerMobile}</div> <div>Email: {companyEmail}</div> {(companyGSTIN) && <div style={{ fontSize: "16px", fontWeight: "600" }}>GSTIN: {companyGSTIN}</div>} </div> - {/* Invoice Title */} <div className="invoice-title"> @@ -594,9 +661,6 @@ const PurPrintA4Standard = ({ index, </div> )} </div> - - - {table2Data?.CustomerDetails?.length > 0 && <div className="billing-grid"> <div className="billing-left"> <h3 className="section-title">Details of Receiver | Billed to</h3> @@ -631,31 +695,39 @@ const PurPrintA4Standard = ({ index, <thead> <tr className="table-header"> { - SLNO == true && <th className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>S.No</th>} - + SLNO == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "center", fontFamily: "sans-serif" }}>S.No</th>} { - Item == true && <th className="table-header-cell" style={{ fontFamily: "sans-serif" }}>Item</th>} - - + Item == true && <th className="table-header-cell" style={{...tableHeaderStyle, fontFamily: "sans-serif" }}>Item</th>} { - HsnCode == true && <th className="table-header-cell" style={{ fontFamily: "sans-serif" }}>HSN </th>} + HsnCode == true && <th className="table-header-cell" style={{ ...tableHeaderStyle,fontFamily: "sans-serif" }}>HSN </th>} - { Quantity == true && <th className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}>Qty</th>} + { Quantity == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "center", fontFamily: "sans-serif" }}>Qty</th>} - { MRP == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>MRP</th>} + { MRP == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>MRP</th>} - { Rate == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Rate</th>} + { Rate == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Rate</th>} - { Discount == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Dis</th>} + { Discount == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Dis</th>} - { Amount == true && <th className="table-header-cell" style={{ textAlign: "right", fontFamily: "sans-serif" }}>Amount</th>} + { Amount == true && <th className="table-header-cell" style={{...tableHeaderStyle, textAlign: "right", fontFamily: "sans-serif" }}>Amount</th>} </tr> </thead> <tbody> {(dataChunk || []).map((item, idx) => ( - <tr key={idx} className="table-row"> + <tr key={idx} className="table-row" + style={ + idx % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : idx % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO == true && ( <td className="table-header-cell" style={{ textAlign: "center", fontFamily: "sans-serif" }}> {chunkIndex * chunkSize + idx + 1} @@ -1223,7 +1295,7 @@ const PurPrintA4Standard = ({ index, <div id={`SQA4Standard`} className="invoice-container"> <div className="invoice-wrapper"> {/* Header */} - <div className="header-section"> + <div className="header-section" style={{...headerStyle}}> <h1 className="company-name">{GlobaldummyData ? "Company Name" : companyName}</h1> <p>{companyAddress}</p> <div>Phone: {GlobaldummyData ? "999999XXXX" : companyPhone}</div> @@ -1340,62 +1412,52 @@ const PurPrintA4Standard = ({ index, <tr className="table-header"> {GlobaldummyData ? GlobalSlNo && <th className="table-header-cell">S.No</th> : - SLNO == true && <th className="table-header-cell">S.No</th>} + SLNO == true && <th style={{...tableHeaderStyle,}} className="table-header-cell">S.No</th>} {GlobaldummyData ? GlobalItem && <th className="table-header-cell">Item</th> : - Item == true && <th className="table-header-cell">Item</th>} - - + Item == true && <th style={{...tableHeaderStyle,}} className="table-header-cell">Item</th>} {GlobaldummyData ? GlobalHsnCode && <th className="table-header-cell">HSN </th> : - HsnCode == true && <th className="table-header-cell">HSN </th>} - + HsnCode == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">HSN </th>} {GlobaldummyData ? GlobalQuantity && <th className="table-header-cell">Qty</th> - : Quantity == true && <th className="table-header-cell">Qty</th>} + : Quantity == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Qty</th>} {/* <th className="table-header-cell">UOM</th> <th className="table-header-cell">UOM</th> */} - {GlobaldummyData ? GlobalMRP && <th className="table-header-cell">MRP</th> - : MRP == true && <th className="table-header-cell">MRP</th>} + : MRP == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">MRP</th>} {GlobaldummyData ? GlobalRate && <th className="table-header-cell">Rate</th> - : Rate == true && <th className="table-header-cell">Rate</th>} + : Rate == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Rate</th>} {GlobaldummyData ? GlobalDiscount && <th className="table-header-cell">Dis</th> - : Discount == true && <th className="table-header-cell">Dis</th>} + : Discount == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Dis</th>} {GlobaldummyData ? GlobalAmount && <th className="table-header-cell">Amount</th> - : Amount == true && <th className="table-header-cell">Amount</th>} - - {/* <th className="table-header-cell">Taxable</th> - <th className="table-header-cell-center" colSpan="2">IGST</th> - <th className="table-header-cell-last">Total</th> */} + : Amount == true && <th style={{...tableHeaderStyle,}}className="table-header-cell">Amount</th>} </tr> - {/* <tr className="table-header"> - <th className="table-header-cell"></th> - <th className="table-header-cell"></th> - <th className="table-header-cell"></th> - <th className="table-header-cell"></th> - <th className="table-header-cell"></th> - <th className="table-header-cell"></th> - <th className="table-header-cell"></th> - <th className="table-header-cell"></th> - <th className="table-header-cell"></th> - <th className="table-header-cell-center">Rate</th> - <th className="table-header-cell-center">Amount</th> - <th className="table-header-cell-last"></th> - </tr> */} + </thead> <tbody> {((GlobaldummyData ? products : productsData) || []).map((item, idx) => ( - <tr key={idx} className="table-row"> + <tr key={idx} className="table-row" + style={ + idx % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : idx % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {GlobaldummyData ? GlobalSlNo && ( <td className="table-header-cell" style={{ textAlign: "center" }}> @@ -1513,6 +1575,7 @@ const PurPrintA4Standard = ({ index, fontSize: "10px", flexWrap: "wrap", gap: "2px", + ...netAmountStyle }} > <div @@ -1537,20 +1600,13 @@ const PurPrintA4Standard = ({ index, {" "} Qty:{GlobaldummyData ? "9" : totalQuantity} </div> - {/* {ExtraChargeTotal > 0 && <p style={{ margin: 0, padding: 0, fontSize: "12px" }}> Extra Charges:{ExtraChargeTotal}</p>} */} - - - {/* {(TotalOfferAmount > 0 || table2Data?.OverallDisc > 0) && ( - <p style={{ margin: 0, padding: 0, fontSize: "10px", fontWeight: "600" }}> - Off :{(Number(TotalOfferAmount || 0) + Number(table2Data?.OverallDisc || 0)).toFixed(2)} - </p> - )} */} <div style={{ margin: 0, padding: 0, fontSize: "10px", fontWeight: "600", + }} > Amount :₹ diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyle12.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyle12.jsx index 91b2df2..8c36a4f 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyle12.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyle12.jsx @@ -4,21 +4,22 @@ import QrImage from '../../../Images/qrcode.jpg'; import Logo from '../../../Images/Logo.jpg' import { extractLastNumber, extractLastNumberOrderId, printDiv } from '../../../Services/Others'; import { - - changeReprintDataFound, - GloabalFieldDetails, - GlobalprintSignature, GlobalprinttermsAndConditions, - GlobalSignatureImage, - Globalnotes, - GlobalthemeFormat, - GlobalBillName, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, + GlobalPritdummyData, + GlobalSelectedPrintHeaderColor, } from '../../../Features/ThemeChange/ThemeChange' -import { GlobalUpiIDprint } from '../../../Features/BookingScreen/BookingData/BookingData'; import '../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12.scss' -import QRCode from 'react-qr-code'; -import signature from "../../../Images/signatureimage.jpg" import { ApplicationPreferences } from '../../../Features/BrachLogin/BranchLogin'; import { isMobile } from 'react-device-detect'; @@ -28,8 +29,19 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua OrderDetailGST, OrderDetailIGST, OrderDetailVAT, table2Data, PaymentStatus, PrintGreeting, printDatas }) => { const dispatch = useDispatch(); - const GlobalUpiID = useSelector(GlobalUpiIDprint) // const FieldDetails = useSelector(GloabalFieldDetails); + const GlobaldummyData = useSelector(GlobalPritdummyData); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => { acc[item.ConfigName] = true; @@ -44,13 +56,14 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua const Rate = FieldDetails?.["Rate"]; const Amount = FieldDetails?.["Amount"]; const HsnCode = FieldDetails?.["HsnCode"]; - + 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 GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); - const appPreferences = useSelector(ApplicationPreferences); - - - let TermsAndConditions = printDatas?.TermsandConditions let SignatureImg = printDatas?.Signature let Notestext = printDatas?.Notes @@ -229,20 +242,61 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua const PrintA4 = async () => { await printDiv("SQPrintStyle12", style12, 'FontApply'); }; - console.log(table2Data, 'Address1'); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> { FormatTheme ? <div id="SQPrintStyle12" onClick={PrintA4} className='PrintStyle12MasterDiv' style={{ fontFamily: "'Courier New', Courier, monospace", position: "relative", width: "100%", minHeight: isMobile ? (PageSize === "A5" ? "210mm" : "297mm") : "auto" }}> - {paginatedChunks.map((dataChunk, chunkIndex) => ( <div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}> - - - <div className="header" style={{ position: isMobile ? "fixed" : "", top: 0, width: "100%" }}> + <div className="header" style={{ position: isMobile ? "fixed" : "", top: 0, width: "100%", ...headerStyle }}> <div className='PrintStyle12-firstDiv'> <div style={{ display: "flex", flexDirection: "column" }}> @@ -257,22 +311,15 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua return <div key={index}>{parts}</div>; })} </div> - <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}> Mobile : +91 {table2Data?.customerMobile}</div> - - { <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}>Customer Name : {table2Data?.customerName} </div> } - {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}>Customer : {table2Data?.CustSuppName} </div> } - - - {table2Data?.OrderType === "E" && <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)", fontWeight: '600' }}>Estimate </div>} </div> <div style={{ display: "flex" }}> <img style={{ width: "60px", height: "60px" }} src={base64Image} alt='image' /></div> @@ -292,19 +339,29 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua <table className="PrintStyle12-print-table"> <thead> <tr> - {SLNO && <th>S.No</th>} - {Item && <th>Des</th>} - {Quantity && <th style={{ textAlign: "right" }}>Qty</th>} - {MRP && <th style={{ textAlign: 'right' }}>MRP</th>} - {Rate && <th style={{ textAlign: "right" }}>Rate</th>} - {HsnCode && <th style={{ textAlign: "right" }}>HSN</th>} - {Discount && <th style={{ textAlign: 'right' }}>(%)</th>} - {Amount && <th style={{ textAlign: "right" }}>Amt</th>} + {SLNO && <th style={{ ...tableHeaderStyle }}>S.No</th>} + {Item && <th style={{ ...tableHeaderStyle }}>Des</th>} + {Quantity && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Qty</th>} + {MRP && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>MRP</th>} + {Rate && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Rate</th>} + {HsnCode && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>HSN</th>} + {Discount && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>(%)</th>} + {Amount && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Amt</th>} </tr> </thead> <tbody> {dataChunk?.map((item, index) => ( - <tr key={index}> + <tr key={index} style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO && <td>{index + 1}</td>} {Item && ( <td style={{ display: 'flex', flexDirection: 'column' }}> @@ -383,7 +440,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua <hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px solid rgb(0, 0, 0)' }} /> - <div style={{ display: "flex", justifyContent: "space-between" }}> + <div style={{ display: "flex", justifyContent: "space-between" ,...netAmountStyle}}> <div style={{ width: '45%', fontWeight: "600" }}> Amount </div> @@ -391,9 +448,6 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua <div style={{ padding: '0rem 1rem', display: "flex", justifyContent: "flex-end", fontWeight: "600", width: '35%' }}> {Number(table2Data?.[0]?.NetAmount || 0).toFixed(2)} </div> - - {console.log(table2Data?.[0]?.NetAmount, 'table2Data?.NetAmount') - } </div> <div> @@ -562,6 +616,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -663,7 +718,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua <hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px solid rgb(0, 0, 0)' }} /> - <div style={{ display: "flex", justifyContent: "space-between" }}> + <div style={{ display: "flex", justifyContent: "space-between",...netAmountStyle }}> <div style={{ width: '45%', fontWeight: "600" }}> Amount </div> @@ -820,6 +875,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -861,14 +917,9 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </div> } - </div> - - - : + </div> : <div id={`SQPrintStyle12`} className='PrintStyle12MasterDiv' style={{ fontFamily: "'Courier New', Courier, monospace" }}> - <div className='PrintStyle12-firstDiv'> - - {/* <h3>{table2Data?.BrName}</h3> */} + <div className='PrintStyle12-firstDiv' style={{ ...headerStyle }}> <div style={{ display: "flex", flexDirection: "column" }}> <hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px dashed rgb(0, 0, 0)' }} /> @@ -886,19 +937,9 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}>Customer : {table2Data?.CustSuppName} </div> } - - - {table2Data?.BookingTypeName == 'Dine In' && - <div> - Waiter : {table2Data?.SalesTableLinkDetails?.[0]?.WaiterName} - </div>} - {table2Data?.OrderType === "E" && <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)", fontWeight: '600' }}>Estimate </div>} </div> <div style={{ display: "flex" }}> <img style={{ width: "60px", height: "60px" }} src={base64Image} alt='image' /></div> </div> - {/* <div style={{ display: "flex", justifyContent: "left", marginTop: '5px' }}> - <p style={{ marginTop: '5px', padding: 0, fontSize: "17px", fontWeight: "600" }}>{table2Data?.PaymentTypeName}  Payment :  {Number(table2Data?.NetAmount).toFixed(2)}/- </p> - </div> */} <div className='PrintStyle12-SecondDiv'> <div style={{ fontWeight: '600', fontSize: "clamp(0.9286rem, 2.5vw, 1rem)" }}>Bill No : {table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div> <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)", padding: '0 1rem' }}>{Date1}</div> @@ -913,20 +954,30 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua <table className="PrintStyle12-print-table"> <thead> <tr> - {SLNO && <th>S.No</th>} - {Item && <th>Des</th>} - {Quantity && <th style={{ textAlign: "right" }}>Qty</th>} - {MRP && <th style={{ textAlign: 'right' }}>MRP</th>} - {Rate && <th style={{ textAlign: "right" }}>Rate</th>} - {HsnCode && <th style={{ textAlign: "right" }}>HSN</th>} - {Discount && <th style={{ textAlign: 'right' }}>(%)</th>} - {Amount && <th style={{ textAlign: "right" }}>Amt</th>} + {SLNO && <th style={{ ...tableHeaderStyle }}>S.No</th>} + {Item && <th style={{ ...tableHeaderStyle }}>Des</th>} + {Quantity && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Qty</th>} + {MRP && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>MRP</th>} + {Rate && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Rate</th>} + {HsnCode && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>HSN</th>} + {Discount && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>(%)</th>} + {Amount && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Amt</th>} </tr> </thead> <tbody> {TakeawayData?.map((item, index) => { return ( - <tr key={index}> + <tr key={index} style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO && <td>{index + 1}</td>} {Item && ( <td style={{ display: 'flex', flexDirection: 'column' }}> @@ -1010,7 +1061,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua <hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px solid rgb(0, 0, 0)' }} /> - <div style={{ display: "flex", justifyContent: "space-between" }}> + <div style={{ display: "flex", justifyContent: "space-between",...netAmountStyle}}> <div style={{ width: '45%', fontWeight: "600" }}> Amount </div> @@ -1173,6 +1224,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA4.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA4.jsx index fda981a..febd14f 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA4.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA4.jsx @@ -7,7 +7,22 @@ import { printDiv } from "../../../Services/Others"; import '../../../Styles/BookingScreen/PrintTemplates/A4/PrintA4Style11.scss' import { useSelector } from 'react-redux'; -import { GloabalFieldDetails, GlobalBillName, Globalnotes, GlobalprintAmount, GlobalprintDiscount, GlobalprintHsnCode, GlobalprintItem, GlobalprintMRP, GlobalprintQrcodet, GlobalprintQuantity, GlobalprintRate, GlobalprintSignature, GlobalprintSlNo, GlobalprinttermsAndConditions, GlobalPritdummyData, GlobalSignatureImage, GlobalthemeFormat } from '../../../Features/ThemeChange/ThemeChange'; +import { + GloabalFieldDetails, GlobalBillName, Globalnotes, + GlobalprintQrcodet, GlobalprintSignature, GlobalprintSlNo, GlobalprinttermsAndConditions, GlobalPritdummyData, + GlobalSignatureImage, GlobalthemeFormat, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, + GlobalSelectedPrintHeaderColor, +} from '../../../Features/ThemeChange/ThemeChange'; import signature from "../../../Images/signatureimage.jpg" import QRCode from 'react-qr-code'; import { isMobile } from 'react-device-detect'; @@ -19,6 +34,17 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t const GlobalSignature = useSelector(GlobalprintSignature); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); // const FieldDetails = useSelector(GloabalFieldDetails); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => { acc[item.ConfigName] = true; return acc; @@ -37,6 +63,12 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t const Qrcodet = FieldDetails?.["Qrcode"]; const Signature = FieldDetails?.["signature"]; const TermsnAdCondition = FieldDetails?.["terms&conditions"]; + 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 GlobalQrcodet = useSelector(GlobalprintQrcodet); const GlobaldummyData = useSelector(GlobalPritdummyData); const GlobalBilltext = useSelector(GlobalBillName) @@ -87,7 +119,51 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > 6; + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <div style={{ display: "flex", @@ -101,7 +177,7 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: isMobile ? (FormatTheme ? "297mm" : "auto") : '257mm' }} className="print-page" key={chunkIndex}> <div className="page-headerA4Style11" style={{ textAlign: "center" }}> - <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}> + <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left', ...headerStyle }}> <div style={{ display: 'flex', @@ -149,18 +225,6 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <div className="print-body"> {TakeawayData?.length > 0 && ( <> - <div - style={{ - display: "flex", - width: "100%", - justifyContent: "center", - alignItems: "center", - fontSize: "12px", - fontWeight: "600", - }} - > - Take Away - </div> <table className="A4TableStyle11" style={{ width: '100%' }}> <thead> <tr> @@ -178,21 +242,21 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <table style={{ width: "99%", margin: "auto" }} className='A4TableA4Style11'> <thead> <tr style={{ background: '#373B44', color: '#fff', }}> - {SLNO == true && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>} - {Item == true && <th>Item</th>} + {SLNO == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>S.No</th>} + {Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>} {HsnCode == true && ( - <th style={{ width: '10%', textAlign: "center" }}>HSN</th> + <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>HSN</th> )} {Quantity == true && ( - <th style={{ width: '10%', textAlign: "center" }}>Qty</th> + <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Qty</th> )} - {MRP == true && <th style={{ width: '10%', textAlign: "center" }}>MRP</th>} - {Rate == true && <th style={{ width: '10%', textAlign: "center" }}>Rate</th>} + {MRP == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>MRP</th>} + {Rate == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Rate</th>} {Discount == true && ( - <th style={{ width: '10%', textAlign: "center" }}>Dis </th> + <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Dis </th> )} {Amount == true && ( - <th style={{ width: '10%', textAlign: "center", textAlign: "right" }}> + <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center", textAlign: "right" }}> Amt </th> )} @@ -201,7 +265,18 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <tbody> {dataChunk?.map((item, index) => ( - <tr key={index}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO == true && ( <td style={{ textAlign: "center" }}> {chunkIndex * chunkSize + index + 1} @@ -304,7 +379,7 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t {(TotalOfferAmount > 0 || table2Data?.OverallDisc) ? (<div>{Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>) : ""} </div> </div> - <div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div> + <div className='total-Amount' style={{...netAmountStyle, fontSize: "25px", fontWeight: "600", padding: "10px", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div> </div> </div> <hr className="PrintA4Style11-print-dottline" /> @@ -356,51 +431,32 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div> </div> </> - {GlobaldummyData ? GlobalIsnotes && - (<div> - <p style={{ padding: "0rem 1rem" }}>Notes : 10 days Return policy</p> - - <hr className="PrintA4Style11-print-dottline" /> - </div>) : - Notestext && (<div> + <div style={{ ...footerColorStyle }}> + {Notestext && (<div> <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p> <hr className="PrintA4Style11-print-dottline" /> </div>) - } + } - <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> - {GlobaldummyData ? GlobaltermsAndConditions && - (<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> - Terms & Conditions - </p> - <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> - <li>Once goods are sold, they are not exchangeable or refundable.</li> - <li>Please check the product before leaving the counter.</li> - </ol> - </div>) - : - (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> + <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> + {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> Terms & Conditions </p> <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))} - {/* <li>Please check the product before leaving the counter.</li> */} </ol> </div>) - } + } - {GlobaldummyData ? GlobalSignature && (<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", paddingBottom: "1rem" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> - <img style={{ width: "70px", height: "40px" }} src={GlobalSignatureImages ? GlobalSignatureImages : signature} alt="" /> - </div>) : Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> - <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> - </div>)} + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> + <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> + </div>)} + </div> </div> </div>} <hr className="PrintA4Style11-print-dottline" /> @@ -447,7 +503,7 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t </div> </div> - <div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{GlobaldummyData ? "1066" : Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div> + <div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", ...netAmountStyle, textAlign: "center" }}>Amount :{GlobaldummyData ? "1066" : Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div> </div> </div> @@ -545,51 +601,32 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div> </div> </> - {GlobaldummyData ? GlobalIsnotes && - (<div> - <p style={{ padding: "0rem 1rem" }}>Notes : 10 days Return policy</p> - - <hr className="PrintA4Style11-print-dottline" /> - </div>) : - Notestext && (<div> + <div style={{ ...footerColorStyle }}> + {Notestext && (<div> <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p> <hr className="PrintA4Style11-print-dottline" /> </div>) - } + } - <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> - {GlobaldummyData ? GlobaltermsAndConditions && - (<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> - Terms & Conditions - </p> - <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> - <li>Once goods are sold, they are not exchangeable or refundable.</li> - <li>Please check the product before leaving the counter.</li> - </ol> - </div>) - : - (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> + <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> + {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> Terms & Conditions </p> <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))} - {/* <li>Please check the product before leaving the counter.</li> */} </ol> </div>) - } + } - {GlobaldummyData ? GlobalSignature && (<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", paddingBottom: "1rem" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> - <img style={{ width: "70px", height: "40px" }} src={GlobalSignatureImages ? GlobalSignatureImages : signature} alt="" /> - </div>) : Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> - <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> - </div>)} + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> + <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> + </div>)} + </div> </div> </div> )} @@ -633,7 +670,7 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t </div> </div> - <div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{GlobaldummyData ? "1066" : Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div> + <div className='total-Amount' style={{...netAmountStyle, fontSize: "25px", fontWeight: "600", padding: "10px",textAlign: "center" }}>Amount :{GlobaldummyData ? "1066" : Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div> </div> </div> @@ -731,51 +768,33 @@ const PurPrintStyleA4 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div> </div> </> - {GlobaldummyData ? GlobalIsnotes && - (<div> - <p style={{ padding: "0rem 1rem" }}>Notes : 10 days Return policy</p> - <hr className="PrintA4Style11-print-dottline" /> - </div>) : - Notestext && (<div> + <div style={{ ...footerColorStyle }}> + {Notestext && (<div> <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p> <hr className="PrintA4Style11-print-dottline" /> </div>) - } + } - <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> - {GlobaldummyData ? GlobaltermsAndConditions && - (<div style={{ margin: "8px 0", padding: "8px", fontFamily: "sans-serif", width: "100%" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> - Terms & Conditions - </p> - <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> - <li>Once goods are sold, they are not exchangeable or refundable.</li> - <li>Please check the product before leaving the counter.</li> - </ol> - </div>) - : - (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> + <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> + {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> Terms & Conditions </p> <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))} - {/* <li>Please check the product before leaving the counter.</li> */} </ol> </div>) - } + } - {GlobaldummyData ? GlobalSignature && (<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", paddingBottom: "1rem" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> - <img style={{ width: "70px", height: "40px" }} src={GlobalSignatureImages ? GlobalSignatureImages : signature} alt="" /> - </div>) : Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> - <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> - </div>)} + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> + <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> + </div>)} + </div> </div> </div> </div> diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA5.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA5.jsx index 9f184f6..97e6aea 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA5.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyleA5.jsx @@ -10,7 +10,21 @@ import { printDiv } from "../../../Services/Others"; // import HpyImg from "../../../Images/happyemoji.png" import '../../../Styles/BookingScreen/PrintTemplates/A4/PrintA4Style11.scss' import { useSelector } from 'react-redux'; -import { GloabalFieldDetails, GlobalBillName, Globalnotes, GlobalprintAmount, GlobalprintDiscount, GlobalprintHsnCode, GlobalprintItem, GlobalprintMRP, GlobalprintQrcodet, GlobalprintQuantity, GlobalprintRate, GlobalprintSignature, GlobalprintSlNo, GlobalprinttermsAndConditions, GlobalPritdummyData, GlobalSignatureImage, GlobalthemeFormat } from '../../../Features/ThemeChange/ThemeChange'; +import { + Globalnotes, GlobalprintRate, GlobalprintSignature, GlobalprinttermsAndConditions, GlobalSignatureImage, GlobalthemeFormat, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, + GlobalPritdummyData, +} from '../../../Features/ThemeChange/ThemeChange'; import signature from "../../../Images/signatureimage.jpg" import QRCode from 'react-qr-code'; import { isMobile } from 'react-device-detect'; @@ -21,13 +35,24 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t const GlobalSignature = useSelector(GlobalprintSignature); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); // const FieldDetails = useSelector(GloabalFieldDetails); - const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => { - acc[item.ConfigName] = true; - return acc; - }, {}); + const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => { + acc[item.ConfigName] = true; + return acc; + }, {}); const GlobalIsnotes = useSelector(Globalnotes); const GlobalSignatureImages = useSelector(GlobalSignatureImage); - console.log(FieldDetails, "FieldDetails") + const GlobaldummyData = useSelector(GlobalPritdummyData); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); const SLNO = FieldDetails?.["Sl.No"]; const Item = FieldDetails?.["Item"]; const MRP = FieldDetails?.["MRP"]; @@ -40,6 +65,12 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t const Signature = FieldDetails?.["signature"]; const TermsnAdCondition = FieldDetails?.["terms&conditions"]; const isNotes = FieldDetails?.["Notes"]; + 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 currentDate = new Date(); console.log(FieldDetails, "FieldDetails") @@ -88,7 +119,51 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > 6; + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <div style={{ @@ -100,10 +175,10 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <div className="PrintA4Style11-MasterDiv" style={{ position: "relative", width: "100%", minHeight: isMobile ? '297mm' : "257mm" }} id={`SQPrintStyleA5`}> {paginatedChunks.map((dataChunk, chunkIndex) => ( - <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height:isMobile ? (FormatTheme ? "297mm" : "") : '257mm' }} className="print-page" key={chunkIndex}> + <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: isMobile ? (FormatTheme ? "297mm" : "") : '257mm' }} className="print-page" key={chunkIndex}> <div className="page-headerA4Style11" style={{ textAlign: "center" }}> - <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}> + <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left', ...headerStyle }}> <div style={{ display: 'flex', @@ -113,20 +188,20 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t borderBottom: '1px solid black' }}> {/* Logo Image */} - {/* {base64Image && ( - <div style={{ marginRight: '20px' }}> - <img - className='PrintA4Style11-BrandImage' - src={base64Image} - alt='Brand Logo' - style={{ - width: '100px', - height: 'auto', - objectFit: 'contain' - }} - /> - </div> - )} */} + {base64Image && ( + <div style={{ marginRight: '20px' }}> + <img + className='PrintA4Style11-BrandImage' + src={base64Image} + alt='Brand Logo' + style={{ + width: '100px', + height: 'auto', + objectFit: 'contain' + }} + /> + </div> + )} {/* Store Info */} <div style={{ @@ -139,7 +214,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', marginBottom: '4px' }}> - {table2Data?.[0]?.BranchName} + {table2Data?.[0]?.BranchName} </div> {/* Address */} @@ -157,7 +232,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t return <div key={index}>{parts}</div>; })} <br /> - Mobile: +91 {table2Data?.customerMobile} + Mobile: +91 {table2Data?.customerMobile} </div> {/* Order Type */} @@ -167,19 +242,6 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t </div> </div> - - {/* <div > - <div style={{ marginTop: '4px', fontSize: '13px', fontWeight: 600 }}> - {table2Data?.OrderType === "E" - ? "Estimate" - : (GlobaldummyData - ? "Cash" - : PaymentStatusSuccess?.length === 1 - ? PaymentStatusSuccess?.[0]?.PaymentTypeName - : "") + table2Data?.OrderId && "Cash: " + extractLastNumberOrderId(table2Data?.OrderId, table2Data?.FYStatus)} {GlobaldummyData && "685"} - </div> - </div> */} - </div> @@ -211,7 +273,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t </div> - <table className="A4TableStyle11" style={{ width: '100%',marginTop:"2rem" }}> + <table className="A4TableStyle11" style={{ width: '100%', marginTop: "2rem" }}> <thead> <tr> <td> @@ -229,21 +291,21 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <table style={{ width: "99%", margin: "auto" }} className='A4TableA4Style11'> <thead> <tr style={{ background: '#373B44', color: '#fff', }}> - {SLNO == true && <th style={{ width: '10%', textAlign: "center" }}>S.No</th>} - {Item == true && <th>Item</th>} + {SLNO == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>S.No</th>} + {Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>} {HsnCode == true && ( - <th style={{ width: '10%', textAlign: "center" }}>HSN</th> + <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>HSN</th> )} {Quantity == true && ( - <th style={{ width: '10%', textAlign: "center" }}>Qty</th> + <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Qty</th> )} - {MRP == true && <th style={{ width: '10%', textAlign: "center" }}>MRP</th>} - {Rate == true && <th style={{ width: '10%', textAlign: "center" }}>Rate</th>} + {MRP == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>MRP</th>} + {Rate == true && <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Rate</th>} {Discount == true && ( - <th style={{ width: '10%', textAlign: "center" }}>Dis </th> + <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center" }}>Dis </th> )} {Amount == true && ( - <th style={{ width: '10%', textAlign: "center", textAlign: "right" }}> + <th style={{ ...tableHeaderStyle, width: '10%', textAlign: "center", textAlign: "right" }}> Amt </th> )} @@ -252,7 +314,18 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <tbody> {dataChunk?.map((item, index) => ( - <tr key={index}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO == true && ( <td style={{ textAlign: "center" }}> {chunkIndex * chunkSize + index + 1} @@ -357,7 +430,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */} </div> </div> - <div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div> + <div className='total-Amount' style={{ ...netAmountStyle,fontSize: "25px", fontWeight: "600", padding: "10px", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div> </div> </div> @@ -428,33 +501,36 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div> </div> </> - {Notestext && ( - <div> - <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p> - <hr className="PrintA4Style11-print-dottline" /> + <div style={{ ...footerColorStyle }}> + {Notestext && ( + <div> + <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p> + <hr className="PrintA4Style11-print-dottline" /> + </div> + )} + + + <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> + {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && ( + <div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> + <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> + Terms & Conditions + </p> + <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> + {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))} + </ol> + </div> + )} + {Signature == true && ( + <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> + <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> + </div> + )} + </div> - )} - - - <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> - {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && ( - <div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> - Terms & Conditions - </p> - <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> - {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))} - </ol> - </div> - )} - {Signature == true && ( - <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> - <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> - </div> - )} - </div> + </div>} <hr className="PrintA4Style11-print-dottline" /> @@ -509,7 +585,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */} </div> </div> - <div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div> + <div className='total-Amount' style={{ ...netAmountStyle,fontSize: "25px", fontWeight: "600", padding: "10px", textAlign: "center" }}>Amount :{Number(dataSource?.[0]?.NetAmt).toFixed(2)}</div> </div> </div> @@ -580,32 +656,34 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div> </div> </> - {Notestext && ( - <div> - <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p> - <hr className="PrintA4Style11-print-dottline" /> + <div style={{ ...footerColorStyle }}> + {Notestext && ( + <div> + <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p> + <hr className="PrintA4Style11-print-dottline" /> + </div> + )} + + + <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> + {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && ( + <div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> + <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> + Terms & Conditions + </p> + <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> + {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))} + </ol> + </div> + )} + {Signature == true && ( + <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> + <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> + </div> + )} + </div> - )} - - - <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> - {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && ( - <div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> - Terms & Conditions - </p> - <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> - {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))} - </ol> - </div> - )} - {Signature == true && ( - <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> - <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> - </div> - )} - </div> </div> )} @@ -648,7 +726,7 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */} </div> </div> - <div className='total-Amount' style={{ fontSize: "25px", fontWeight: "600", padding: "10px", backgroundColor: "#fdc716", textAlign: "center" }}>Amount :{Number(table2Data?.NetAmount).toFixed(2)}</div> + <div className='total-Amount' style={{...netAmountStyle, fontSize: "25px", fontWeight: "600", padding: "10px", textAlign: "center" }}>Amount :{Number(table2Data?.NetAmount).toFixed(2)}</div> </div> </div> @@ -719,33 +797,36 @@ const PurPrintStyleA5 = ({ index, ExtraChargeTotal, UpiId, Date1, base64Image, t <div className='PrintA4Style11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div> </div> </> - {Notestext && ( - <div> - <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p> - <hr className="PrintA4Style11-print-dottline" /> + <div style={{ ...footerColorStyle }}> + {Notestext && ( + <div> + <p style={{ padding: "0rem 1rem", textAlign: "center" }}>{Notestext}</p> + <hr className="PrintA4Style11-print-dottline" /> + </div> + )} + + + <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> + {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && ( + <div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> + <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> + Terms & Conditions + </p> + <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> + {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))} + </ol> + </div> + )} + {Signature == true && ( + <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> + <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> + </div> + )} + </div> - )} - - - <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> - {(TermsnAdCondition == true && TermsAndConditions?.length > 0) && ( - <div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> - Terms & Conditions - </p> - <ol style={{ fontSize: "12px", paddingLeft: "18px", margin: 0, lineHeight: "1" }}> - {TermsAndConditions?.map(item => (<li style={{ textAlign: "start" }}>{item?.TermsandConditions}</li>))} - </ol> - </div> - )} - {Signature == true && ( - <div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> - <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> - <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> - </div> - )} - </div> + </div> </div> )} diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle1.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle1.jsx index 365dcb6..6d1f95d 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle1.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle1.jsx @@ -8,6 +8,17 @@ import { Globalnotes, GlobalthemeFormat, GlobalBillName, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from "../../../Features/ThemeChange/ThemeChange"; import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss"; import { ApplicationPreferences } from "../../../Features/BrachLogin/BranchLogin"; @@ -36,7 +47,6 @@ const PurPrintStyle1 = ({ // console.log(FieldDetailss, "FieldDetails") const SLNO = FieldDetails?.["Sl.No"]; const Item = FieldDetails?.["Item"]; - console.log(Item, "Item") const MRP = FieldDetails?.["MRP"]; const Discount = FieldDetails?.["Discount"]; const Quantity = FieldDetails?.["Quantity"]; @@ -44,8 +54,17 @@ const PurPrintStyle1 = ({ const Amount = FieldDetails?.["Amount"]; const HsnCode = FieldDetails?.["HsnCode"]; - - + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); const GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); const GlobalIsnotes = useSelector(Globalnotes); @@ -65,9 +84,14 @@ const PurPrintStyle1 = ({ let PageSize = printDatas?.PageSize const Signature = FieldDetails?.["signature"]; const TermsnAdCondition = FieldDetails?.["terms&conditions"]; + 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 dataSource = table2Data?.[0]?.ProductDetails; - console.log(table2Data, "dataSource") if (keysLength > 0) { dispatch(changeReprintDataFound(true)); } @@ -135,7 +159,51 @@ const PurPrintStyle1 = ({ console.log(paginatedChunks, "paginatedChunkspaginatedChunkspaginatedChunks") const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10); - console.log(PageSize == "A5" ? '210mm' : "297mm", "aggregatedPaymentsaggregatedPayments"); + const headerStyle ={ + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle ={ + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle ={ + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData? SelectedRowType: tableBodyColor?.rowType; + const footerColorStyle ={ + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle ={ + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( @@ -149,10 +217,9 @@ const PurPrintStyle1 = ({ {paginatedChunks.map((dataChunk, chunkIndex) => ( <div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : (isMobile ? "257mm" : "257mm") : "", }} key={chunkIndex}> - {console.log(dataChunk, "dataChunkdataChunkdataChunk")} {/* <div className="header" style={{ position: GlobaldummyData ? "absolute" : "fixed", top: 0, width: "100%" }}> */} <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> - <div className="PrintStyle1-print" > + <div className="PrintStyle1-print" style={{...headerStyle}} > <div style={{ fontSize: "clamp(2rem, 2.5vw, 2rem)", fontWeight: "600" }} > @@ -229,12 +296,6 @@ const PurPrintStyle1 = ({ </div> </div> - {/* orderdetails */} - - {/* <hr className="PrintStyle1-print-dottline" /> */} - - {/* itemdata (loop) */} - </div> <div style={{ marginTop: GlobaldummyData ? "9rem" : "0rem" }} className="print-body"> @@ -257,21 +318,21 @@ const PurPrintStyle1 = ({ <table className="PrintStyle1-print-table"> <thead> <tr> - {SLNO == true && <th style={{ width: "10px" }}>S.No</th>} - {Item == true && <th>Item</th>} + {SLNO == true && <th style={{...tableHeaderStyle,width: "10px" }}>S.No</th>} + {Item == true && <th style={{...tableHeaderStyle}}>Item</th>} {HsnCode == true && ( - <th style={{ width: "10px" }}>HSN</th> + <th style={{...tableHeaderStyle, width: "10px" }}>HSN</th> )} {Quantity == true && ( - <th style={{ width: "10px" }}>Qty</th> + <th style={{...tableHeaderStyle, width: "10px" }}>Qty</th> )} - {MRP == true && <th style={{ width: "10px" }}>MRP</th>} - {Rate == true && <th style={{ width: "10px" }}>Rate</th>} + {MRP == true && <th style={{...tableHeaderStyle, width: "10px" }}>MRP</th>} + {Rate == true && <th style={{...tableHeaderStyle, width: "10px" }}>Rate</th>} {Discount == true && ( - <th style={{ width: "10px" }}>Dis </th> + <th style={{...tableHeaderStyle, width: "10px" }}>Dis </th> )} {Amount == true && ( - <th style={{ width: "10px", textAlign: "right" }}> + <th style={{...tableHeaderStyle, width: "10px", textAlign: "right" }}> Amt </th> )} @@ -282,7 +343,18 @@ const PurPrintStyle1 = ({ {dataChunk?.map( (item, index) => ( - <tr key={index}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO == true && ( <td style={{ textAlign: "center" }}> {chunkIndex * chunkSize + index + 1} @@ -392,11 +464,12 @@ const PurPrintStyle1 = ({ style={{ display: "flex", justifyContent: "space-around", - width: "95%", + width: "100%", whiteSpace: "nowrap", fontSize: "10px", flexWrap: "wrap", - gap: "2px" + gap: "2px", + ...netAmountStyle }} > <div @@ -607,13 +680,7 @@ const PurPrintStyle1 = ({ marginTop: "5px", }} > - </div> - - - - - {/* <hr className="PrintStyle1-print-dottline" /> */} <div className="page-footerA4Style11" @@ -622,6 +689,7 @@ const PurPrintStyle1 = ({ pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -690,11 +758,12 @@ const PurPrintStyle1 = ({ style={{ display: "flex", justifyContent: "space-around", - width: "95%", + width: "100%", whiteSpace: "nowrap", fontSize: "10px", flexWrap: "wrap", - gap: "2px" + gap: "2px", + ...netAmountStyle }} > <div @@ -918,6 +987,7 @@ const PurPrintStyle1 = ({ pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -974,11 +1044,12 @@ const PurPrintStyle1 = ({ style={{ display: "flex", justifyContent: "space-around", - width: "95%", + width: "100%", whiteSpace: "nowrap", fontSize: "10px", flexWrap: "wrap", - gap: "2px" + gap: "2px", + ...netAmountStyle }} > <div @@ -1198,6 +1269,7 @@ const PurPrintStyle1 = ({ pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -1254,16 +1326,12 @@ const PurPrintStyle1 = ({ } </div > : - - - - <div className="PrintStyle1MasterDiv" id={`SQPrintStyle1`} style={{ fontFamily: "'Courier New', Courier, monospace" }} > - <div className="PrintStyle1-print"> + <div className="PrintStyle1-print" style={{...headerStyle}}> <div style={{ fontSize: "clamp(2rem, 2.5vw, 2rem)", fontWeight: "600" }} > @@ -1340,7 +1408,18 @@ const PurPrintStyle1 = ({ <tbody> {(TakeawayData)?.map( (item, index) => ( - <tr key={index}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO == true && ( <td style={{ textAlign: "center" }}> {index + 1} @@ -1447,11 +1526,12 @@ const PurPrintStyle1 = ({ style={{ display: "flex", justifyContent: "space-around", - width: "95%", + width: "100%", whiteSpace: "nowrap", fontSize: "10px", flexWrap: "wrap", - gap: "2px" + gap: "2px", + ...netAmountStyle }} > <div @@ -1659,11 +1739,6 @@ const PurPrintStyle1 = ({ > </div> - - - - - <hr className="PrintStyle1-print-dottline" /> <div className="page-footerA4Style11" @@ -1672,6 +1747,7 @@ const PurPrintStyle1 = ({ pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle10.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle10.jsx index bf1e842..2dd3af9 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle10.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle10.jsx @@ -4,7 +4,18 @@ import { useDispatch, useSelector } from "react-redux"; import { GlobalPritdummyData, changeReprintDataFound, - GlobalprinttermsAndConditions + GlobalprinttermsAndConditions, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../Features/ThemeChange/ThemeChange' import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.scss"; @@ -13,7 +24,7 @@ import { isMobile } from "react-device-detect"; const PurPrintStyle10 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, CashierName, totalQuantity, OrderDetailGST, OrderDetailIGST, OrderDetailVAT, table2Data, PaymentStatus, PrintGreeting, printDatas }) => { -console.log(OrderDetailGST,'OrderDetailGST'); + console.log(OrderDetailGST, 'OrderDetailGST'); const dispatch = useDispatch(); @@ -30,11 +41,26 @@ console.log(OrderDetailGST,'OrderDetailGST'); const Rate = FieldDetails?.["Rate"]; const Amount = FieldDetails?.["Amount"]; const HsnCode = FieldDetails?.["HsnCode"]; - + 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 GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); - + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); let TermsAndConditions = printDatas?.TermsandConditions let SignatureImg = printDatas?.Signature @@ -75,7 +101,51 @@ console.log(OrderDetailGST,'OrderDetailGST'); } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? @@ -89,7 +159,7 @@ console.log(OrderDetailGST,'OrderDetailGST'); <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> - <div className="PrintStyle10-print"> + <div className="PrintStyle10-print" style={{ ...headerStyle }} > <div className="ShopName" style={{ fontWeight: "600", @@ -124,20 +194,31 @@ console.log(OrderDetailGST,'OrderDetailGST'); <table className="PrintStyle10-print-table"> <thead> <tr> - {SLNO && <th style={{ width: '10px' }}>S.N</th>} - {Item && <th style={{ width: '10px' }}>Item</th>} - {Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>} - {HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>} - {MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>} - {Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>} - {Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>} - {Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>} + {SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.N</th>} + {Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>} + {Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>} + {HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>} + {MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>} + {Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>} + {Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>} + {Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>} </tr> </thead> <tbody> {dataChunk?.map((item, index) => { return ( - <tr key={index}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO && <td style={{ width: '10px', textAlign: 'center' }} >{chunkIndex * chunkSize + index + 1}</td>} {Item && <td style={{ display: 'flex', flexDirection: 'column' }}> <div>{item?.ProdName}</div> @@ -179,9 +260,9 @@ console.log(OrderDetailGST,'OrderDetailGST'); display: "flex", flexDirection: "column", rowGap: "0.1rem", - fontSize: "clamp(0.7rem, 2.5vw, 1rem)" - - , fontWeight: '600' + fontSize: "clamp(0.7rem, 2.5vw, 1rem)", + fontWeight: '600', + ...netAmountStyle }} > <div className="PrintStyle10-items" > @@ -359,6 +440,7 @@ console.log(OrderDetailGST,'OrderDetailGST'); pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -428,9 +510,9 @@ console.log(OrderDetailGST,'OrderDetailGST'); display: "flex", flexDirection: "column", rowGap: "0.1rem", - fontSize: "clamp(0.7rem, 2.5vw, 1rem)" - - , fontWeight: '600' + fontSize: "clamp(0.7rem, 2.5vw, 1rem)", + fontWeight: '600', + ...netAmountStyle }} > <div className="PrintStyle10-items" > @@ -607,6 +689,7 @@ console.log(OrderDetailGST,'OrderDetailGST'); pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -651,7 +734,7 @@ console.log(OrderDetailGST,'OrderDetailGST'); id={`SQPrintStyle10`} style={{ fontFamily: "'Courier New', Courier, monospace" }} > - <div className="PrintStyle10-print"> + <div className="PrintStyle10-print" style={{ ...headerStyle }}> <div className="ShopName" style={{ fontWeight: "600", @@ -673,8 +756,6 @@ console.log(OrderDetailGST,'OrderDetailGST'); {<div style={{ textTransform: 'uppercase' }}>{BillName}</div>} </div> - - </div> <div style={{ fontSize: '9.27px', fontWeight: '600', textAlign: 'right' }}> {Date1} </div> <hr class="straightline" /> @@ -685,20 +766,31 @@ console.log(OrderDetailGST,'OrderDetailGST'); <table className="PrintStyle10-print-table"> <thead> <tr> - {SLNO && <th style={{ width: '10px' }}>S.N</th>} - {Item && <th style={{ width: '10px' }}>Item</th>} - {Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>} - {HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>} - {MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>} - {Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>} - {Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>} - {Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>} + {SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.N</th>} + {Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>} + {Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>} + {HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>} + {MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>} + {Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>} + {Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>} + {Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>} </tr> </thead> <tbody> {(TakeawayData)?.map((item, index) => { return ( - <tr key={index}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO && <td style={{ width: '10px', textAlign: 'center' }} >{index + 1}</td>} {Item && <td style={{ display: 'flex', flexDirection: 'column' }}> <div>{item?.ProdName}</div> @@ -739,9 +831,9 @@ console.log(OrderDetailGST,'OrderDetailGST'); display: "flex", flexDirection: "column", rowGap: "0.1rem", - fontSize: "clamp(0.7rem, 2.5vw, 1rem)" - - , fontWeight: '600' + fontSize: "clamp(0.7rem, 2.5vw, 1rem)", + fontWeight: '600', + ...netAmountStyle }} > <div className="PrintStyle10-items" > @@ -918,6 +1010,7 @@ console.log(OrderDetailGST,'OrderDetailGST'); pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle11.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle11.jsx index bd0e9c8..895e519 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle11.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle11.jsx @@ -4,7 +4,18 @@ import { useDispatch, useSelector } from "react-redux"; import { GlobalPritdummyData, changeReprintDataFound, - GlobalprinttermsAndConditions + GlobalprinttermsAndConditions, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../Features/ThemeChange/ThemeChange'; import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle11.scss"; import { extractLastNumber } from "../../../Services/Others"; @@ -29,11 +40,26 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua const Rate = FieldDetails?.["Rate"]; const Amount = FieldDetails?.["Amount"]; const HsnCode = FieldDetails?.["HsnCode"]; + 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 GlobaldummyData = useSelector(GlobalPritdummyData); + const GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); - + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); let TermsAndConditions = printDatas?.TermsandConditions let SignatureImg = printDatas?.Signature @@ -70,39 +96,85 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? <div className="PrintStyle11MasterDiv" id={`SQPrintStyle11`} - style={{ fontFamily: "'Courier New', Courier, monospace", position: "relative", width: "100%", minHeight:isMobile ? (PageSize === "A5" ? "210mm" : "297mm") : "auto" }} + style={{ fontFamily: "'Courier New', Courier, monospace", position: "relative", width: "100%", minHeight: isMobile ? (PageSize === "A5" ? "210mm" : "297mm") : "auto" }} > {paginatedChunks.map((dataChunk, chunkIndex) => ( <div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}> {/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */} - <div className="header" style={{ position: isMobile ? "fixed" : "", top: 0, width: "100%" }}> - <div className="PrintStyle11-print"> - {base64Image ? <img className='PrintStyle11-BrandImage' src={ base64Image} alt='image' style={{ width: '40px', height: '40px', }} /> : null} - <div> - <div style={{ - fontWeight: '600', - // fontFamily: "Lemon", - fontSize: 'clamp(1rem, 2.5vw, 2.5rem)' - }}> - { table2Data?.[0]?.BrName} + <div className="header" style={{ position: isMobile ? "fixed" : "", top: 0, width: "100%" }}> + <div style={{ ...headerStyle }}> + <div className="PrintStyle11-print" style={{ ...headerStyle }}> + {base64Image ? <img className='PrintStyle11-BrandImage' src={base64Image} alt='image' style={{ width: '40px', height: '40px', }} /> : null} + <div> + <div style={{ + fontWeight: '600', + // fontFamily: "Lemon", + fontSize: 'clamp(1rem, 2.5vw, 2.5rem)' + }}> + {table2Data?.[0]?.BrName} + </div> + </div> - </div> - </div> - <hr style={{ margin: '0.1rem 0rem' }} /> - <div className='PrintStyle11-print-SecondDiv' > - <div style={{ fontSize: "12px", fontWeight: '600' }}> - { - (table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '')} + <hr style={{ margin: '0.1rem 0rem' }} /> + <div className='PrintStyle11-print-SecondDiv' > + <div style={{ fontSize: "12px", fontWeight: '600' }}> + { + (table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '')} + </div> + <div style={{ fontSize: "11px", fontWeight: '600' }}> MOBILE NO :{table2Data?.[0]?.BrMobile}</div> </div> - <div style={{ fontSize: "11px", fontWeight: '600' }}> MOBILE NO :{table2Data?.[0]?.BrMobile}</div> </div> <hr style={{ margin: '0.1rem 0rem' }} /> <div style={{ margin: '0rem 0.5rem', display: 'flex', justifyContent: 'center', fontWeight: '600', textTransform: 'capitalize' }} className='PrintStyle11-print-BillNO' >{BillName} </div> @@ -111,28 +183,39 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </div> - <div style={{ marginTop: "0rem" }} className="print-body"> - {(TakeawayData?.length > 0 ) && + <div style={{ marginTop: "0rem" }} className="print-body"> + {(TakeawayData?.length > 0) && <> <table className="PrintStyle11-print-table"> <thead> <tr> - {SLNO && <th style={{ width: '10px' }}>S.N</th>} - {Item && <th style={{ width: '10px' }}>Item</th>} - {Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>} - { HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>} - { MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>} - { Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>} - { Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>} - { Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>} + {SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.N</th>} + {Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>} + {Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>} + {HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>} + {MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>} + {Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>} + {Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>} + {Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>} </tr> </thead> <tbody> {dataChunk?.map((item, index) => { return ( - <tr key={index}> - { SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>} + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> + {SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>} {Item && <td style={{ display: 'flex', flexDirection: 'column' }}> <div>{item?.ProdName}</div> <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"}){item?.BrandName !== null ? item?.BrandName : ""}  @@ -149,8 +232,8 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua {HsnCode && <td style={{ textAlign: 'right' }}>{item?.HSN}</td>} {MRP && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} {Discount && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} - { Rate && <td style={{ textAlign: 'right' }}>{item?.Price}</td>} - { Amount && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>} + {Rate && <td style={{ textAlign: 'right' }}>{item?.Price}</td>} + {Amount && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>} </tr> ) })} @@ -158,14 +241,14 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </table> </> } - + </div> {((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme && <> <hr className="PrintStyle11-print-dottline" /> <div className='PrintStyle11-print-ThirdDiv'> - <div> + <div style={{ ...netAmountStyle}}> <div className='PrintStyle11-print-ThirdDivSub'> <div style={{ display: 'flex', flexDirection: 'column', }}> <div style={{ fontSize: "15px", fontWeight: '600' }}>Qty</div> @@ -177,15 +260,15 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua <div>ROUND OFF</div> */} </div> <div style={{ textAlign: 'right', display: 'flex', flexDirection: 'column', fontSize: "13px", fontWeight: '500' }}> - <div>{ totalQuantity}</div> + <div>{totalQuantity}</div> <div>{totalQuantityFilter?.length}</div> {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && - <div>{ Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div> + <div>{Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div> } - + </div> </div> - + <div style={{ textAlign: 'right', fontWeight: '600', fontSize: '18px' }}>Amount :{Number(table2Data?.[0]?.NetAmount).toFixed(2)}/-</div> </div> </div> @@ -317,23 +400,23 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </div> </div> </div> - + <div style={{ display: 'flex', justifyContent: "space-between", width: '92%' }}> <div style={{ margin: '0.5rem 0.5rem', display: 'flex', flexDirection: 'column', gap: '0.5rem', fontWeight: '600' }}> - - + + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div className='PrintStyle11-print-InfoDivsub'>Customer : {table2Data?.CustSuppName} </div> } - + <div className='PrintStyle11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div> </div> - + </div> <hr className="PrintStyle11-print-dottline" /> @@ -344,6 +427,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -368,7 +452,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </div>) } - { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> </div>)} @@ -376,7 +460,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </div> </div> - + </> } @@ -406,7 +490,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua <> <hr className="PrintStyle11-print-dottline" /> <div className='PrintStyle11-print-ThirdDiv'> - <div> + <div style={{ ...netAmountStyle}}> <div className='PrintStyle11-print-ThirdDivSub'> <div style={{ display: 'flex', flexDirection: 'column', }}> <div style={{ fontSize: "15px", fontWeight: '600' }}>Qty</div> @@ -427,7 +511,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua {/* <div>{GlobaldummyData ? '1,066' : Number(table2Data?.NetAmount).toFixed(2) ? Number(table2Data?.NetAmount).toFixed(2) : 0}</div> */} </div> </div> - + <div style={{ textAlign: 'right', fontWeight: '600', fontSize: '18px' }}>Amount :{Number(table2Data?.[0]?.NetAmount).toFixed(2)}/-</div> </div> </div> @@ -560,19 +644,19 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </div> </div> </div> - + <div style={{ display: 'flex', justifyContent: "space-between", width: '92%' }}> <div style={{ margin: '0.5rem 0.5rem', display: 'flex', flexDirection: 'column', gap: '0.5rem', fontWeight: '600' }}> - - + + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div className='PrintStyle11-print-InfoDivsub'>Customer : {table2Data?.CustSuppName} </div> } - + <div className='PrintStyle11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div> </div> @@ -598,6 +682,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > {GlobaldummyData ? GlobalIsnotes && @@ -648,7 +733,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </div> </div> - + </> </div> @@ -658,7 +743,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua : <div className="PrintStyle11MasterDiv" id={`SQPrintStyle11`} style={{ fontFamily: "'Courier New', Courier, monospace" }} > - <div className="PrintStyle11-print"> + <div className="PrintStyle11-print" style={{ ...headerStyle }}> {base64Image ? <img className='PrintStyle11-BrandImage' src={base64Image} alt='image' style={{ width: '40px', height: '40px', }} /> : null} <div> <div style={{ @@ -674,7 +759,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </div> </div> <hr style={{ margin: '0.1rem 0rem' }} /> - <div className='PrintStyle11-print-SecondDiv' > + <div className='PrintStyle11-print-SecondDiv' style={{ ...headerStyle }} > <div style={{ fontSize: "12px", fontWeight: '600' }}> {GlobaldummyData ? 'BranchAddress, Town- 635XXX City - State' : @@ -693,21 +778,32 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua <table className="PrintStyle11-print-table"> <thead> <tr> - {SLNO && <th style={{ width: '10px' }}>S.N</th>} - {Item && <th style={{ width: '10px' }}>Item</th>} - {Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>} - { HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>} - { MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>} - { Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>} - { Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>} - { Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>} + {SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.N</th>} + {Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>} + {Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>} + {HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>} + {MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>} + {Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>} + {Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>} + {Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>} </tr> </thead> <tbody> - {( TakeawayData)?.map((item, index) => { + {(TakeawayData)?.map((item, index) => { return ( - <tr key={index}> - { SLNO && <td>{index + 1}</td>} + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> + {SLNO && <td>{index + 1}</td>} {Item && <td style={{ display: 'flex', flexDirection: 'column' }}> <div>{item?.ProdName}</div> <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"}){item?.BrandName !== null ? item?.BrandName : ""}  @@ -722,10 +818,10 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </td>} {Quantity && <td style={{ textAlign: 'right' }}>{item?.Qty}</td>} {HsnCode && <td style={{ textAlign: 'right' }}>{item?.HSN}</td>} - { MRP && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} - { Discount && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} - { Rate && <td style={{ textAlign: 'right' }}>{item?.Price}</td>} - { Amount && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>} + {MRP && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} + {Discount && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} + {Rate && <td style={{ textAlign: 'right' }}>{item?.Price}</td>} + {Amount && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>} </tr> ) })} @@ -733,10 +829,10 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </table> </> } - + <hr className="PrintStyle11-print-dottline" /> <div className='PrintStyle11-print-ThirdDiv'> - <div> + <div style={{ ...netAmountStyle}}> <div className='PrintStyle11-print-ThirdDivSub'> <div style={{ display: 'flex', flexDirection: 'column', }}> <div style={{ fontSize: "15px", fontWeight: '600' }}>Qty</div> @@ -753,10 +849,10 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div>{Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div> } - + </div> </div> - + <div style={{ textAlign: 'right', fontWeight: '600', fontSize: '18px' }}>Amount :{Number(table2Data?.[0]?.NetAmount).toFixed(2)}/-</div> </div> </div> @@ -888,24 +984,24 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </div> </div> </div> - - <div style={{ display: 'flex', justifyContent: "space-between", width: '92%' }}> - - <div style={{ margin: '0.5rem 0.5rem', display: 'flex', flexDirection: 'column', gap: '0.5rem', fontWeight: '600' }}> - - + <div style={{ display: 'flex', justifyContent: "space-between", width: '92%' }}> + + <div style={{ margin: '0.5rem 0.5rem', display: 'flex', flexDirection: 'column', gap: '0.5rem', fontWeight: '600' }}> + + + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div className='PrintStyle11-print-InfoDivsub'>Customer : {table2Data?.CustSuppName} </div> } - + <div className='PrintStyle11-print-InfoDivsub' style={{ textTransform: 'capitalize' }}>{Date1}</div> </div> - + </div> <hr className="PrintStyle11-print-dottline" /> @@ -916,6 +1012,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -948,7 +1045,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua </div> </div> - + </div> diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle2.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle2.jsx index 755b52b..7f3d5e9 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle2.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle2.jsx @@ -1,7 +1,5 @@ import React from "react"; import { useDispatch, useSelector } from "react-redux"; - - import { GlobalPritdummyData, @@ -9,6 +7,17 @@ import { GlobalprinttermsAndConditions, Globalnotes, GlobalthemeFormat, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from "../../../Features/ThemeChange/ThemeChange"; import { extractLastNumber } from "../../../Services/Others"; import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle2.scss"; @@ -32,9 +41,17 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie const HsnCode = FieldDetails?.["HsnCode"]; const GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); - - - + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); let TermsAndConditions = printDatas?.TermsandConditions let SignatureImg = printDatas?.Signature @@ -44,9 +61,12 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie let PageSize = printDatas?.PageSize const Signature = FieldDetails?.["signature"]; const TermsnAdCondition = FieldDetails?.["terms&conditions"]; - - - + 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 keysLength = Object.keys(table2Data ?? {}).length; const dataSource = table2Data?.[0]?.ProductDetails; if (keysLength > 0) { @@ -88,7 +108,51 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 13); - console.log(FormatTheme, "paginatedChunks") + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? @@ -101,7 +165,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie <div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}> {/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */} - <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> + <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%", ...headerStyle }}> <div className='PrintStyle2-fistDiv' > <div style={{ display: 'flex', flexDirection: 'row' }}> @@ -146,20 +210,31 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie <table className="PrintStyle2-print-table"> <thead> <tr> - {SLNO && <th style={{ width: '8px' }}>S.No</th>} - {Item && <th >Item</th>} - {HsnCode && <th style={{ width: '8px', textAlign: 'right' }}>HSN</th>} - {Quantity && <th style={{ width: '8px', textAlign: 'right' }}>Qty</th>} - {MRP && <th style={{ width: '8px', textAlign: 'right' }}>MRP</th>} - {Amount && <th style={{ width: '8px', textAlign: 'right' }}>Amt</th>} - {Discount && <th style={{ width: '8px', textAlign: 'right' }}>Dis </th>} - {Rate && <th style={{ width: '8px', textAlign: 'right' }}>Rate</th>} + {SLNO && <th style={{ width: '8px', ...tableHeaderStyle }}>S.No</th>} + {Item && <th style={{ ...tableHeaderStyle }} >Item</th>} + {HsnCode && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>HSN</th>} + {Quantity && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>Qty</th>} + {MRP && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>MRP</th>} + {Amount && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>Amt</th>} + {Discount && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>Dis </th>} + {Rate && <th style={{ width: '8px', textAlign: 'right', ...tableHeaderStyle }}>Rate</th>} </tr> </thead> <tbody> {dataChunk?.map((item, index) => { return ( - <tr key={index} > + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + } > {SLNO && <td className="Re-print-body-Rate">{chunkIndex * chunkSize + index + 1}</td>} {Item && <td className="Re-print-body-Product" style={{ display: 'flex', flexDirection: 'column' }}> @@ -196,7 +271,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie {((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme && <> - <div className='PrintStyle2-ThirdDivMaster'> + <div className='PrintStyle2-ThirdDivMaster' style={{...netAmountStyle}}> <div className='PrintStyle2-ThirdP'> <div> <div style={{ textAlign: 'left', fontWeight: '600' }}>Qty</div> @@ -362,16 +437,13 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie </div> - - - - <div className="page-footerA4Style11" style={{ marginTop: "auto", pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -442,7 +514,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie }} > <> - <div className='PrintStyle2-ThirdDivMaster'> + <div className='PrintStyle2-ThirdDivMaster' style={{...netAmountStyle}}> <div className='PrintStyle2-ThirdP'> <div> <div style={{ textAlign: 'left', fontWeight: '600' }}>Qty</div> @@ -622,6 +694,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -687,7 +760,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie <div className='PrintStyle2-fistDiv' > - <div style={{ display: 'flex', flexDirection: 'row' }}> + <div style={{ display: 'flex', flexDirection: 'row', ...headerStyle }}> {(base64Image && PrintLogo?.SettingValue === "Y") ? <img className='PrintStyle2-BrandImage' src={GlobaldummyData ? Logo : base64Image} alt='image' /> : null} </div> @@ -729,20 +802,31 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie <table className="PrintStyle2-print-table"> <thead> <tr> - {SLNO && <th style={{ width: '8px' }}>S.No</th>} - {Item && <th >Item</th>} - {HsnCode && <th style={{ width: '8px', textAlign: 'right' }}>HSN</th>} - {Quantity && <th style={{ width: '8px', textAlign: 'right' }}>Qty</th>} - {MRP && <th style={{ width: '8px', textAlign: 'right' }}>MRP</th>} - {Amount && <th style={{ width: '8px', textAlign: 'right' }}>Amt</th>} - {Discount && <th style={{ width: '8px', textAlign: 'right' }}>Dis </th>} - {Rate && <th style={{ width: '8px', textAlign: 'right' }}>Rate</th>} + {SLNO && <th style={{ ...tableHeaderStyle, width: '8px' }}>S.No</th>} + {Item && <th style={{ ...tableHeaderStyle }}>Item</th>} + {HsnCode && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>HSN</th>} + {Quantity && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>Qty</th>} + {MRP && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>MRP</th>} + {Amount && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>Amt</th>} + {Discount && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>Dis </th>} + {Rate && <th style={{ ...tableHeaderStyle, width: '8px', textAlign: 'right' }}>Rate</th>} </tr> </thead> <tbody> {(TakeawayData)?.map((item, index) => { return ( - <tr key={index} > + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO && <td className="Re-print-body-Rate">{index + 1}</td>} {Item && <td className="Re-print-body-Product" style={{ display: 'flex', flexDirection: 'column' }}> @@ -776,7 +860,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie </div> - <div className='PrintStyle2-ThirdDivMaster'> + <div className='PrintStyle2-ThirdDivMaster' style={{...netAmountStyle}}> <div className='PrintStyle2-ThirdP'> <div> <div style={{ textAlign: 'left', fontWeight: '600' }}>Qty</div> @@ -928,6 +1012,7 @@ const PurPrintstyle2 = ({ index, totalQuantityFilter, Date1, base64Image, Cashie pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle3.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle3.jsx index 218b84d..f4282ff 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle3.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle3.jsx @@ -8,6 +8,17 @@ import { Globalnotes, GlobalthemeFormat, GlobalBillName, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from "../../../Features/ThemeChange/ThemeChange"; import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.scss" import { extractLastNumber } from "../../../Services/Others"; @@ -37,6 +48,17 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ const GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); let TermsAndConditions = printDatas?.TermsandConditions @@ -47,7 +69,12 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ let PageSize = printDatas?.PageSize const Signature = FieldDetails?.["signature"]; const TermsnAdCondition = FieldDetails?.["terms&conditions"]; - + 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 keysLength = Object.keys(table2Data ?? {}).length; if (keysLength > 0) { @@ -60,28 +87,10 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ const year = currentDate.getFullYear().toString().slice(-2); const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`; - const TakeawayData = table2Data?.[0]?.ProductDetails - console.log(TakeawayData, "TakeawayData", table2Data) - - - - - let TotalOfferAmount = 0; - - // Calculate SalesWiseOffers total amount - - - - const chunkSize = PageSize == "A5" ? 11 : 16; - let dataSource = table2Data?.[0]?.ProductDetails; - - console.log(table2Data,"FieldDetailsFieldDetails") - - // Paginate the data const paginatedChunks = []; for (let i = 0; i < dataSource?.length; i += chunkSize) { @@ -89,9 +98,52 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10); - {console.log(TakeawayData,"TakeawayDataTakeawayData")} + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? @@ -101,91 +153,149 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ {/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */} <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> - <div className="PrintStyle3-print" > + <div className="PrintStyle3-print" style={{ ...headerStyle }} > <div style={{ fontSize: '30px', fontweight: '900' }}> - { table2Data?.[0]?.BrName} - + {table2Data?.[0]?.BrName} + </div> <div style={{ fontweight: '600' }}> {GlobaldummyData ? 'BranchAddress, Town- 635XXX City - State' : (table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '')} - {table2Data?.[0]?.BrGSTIN && <div>GST NO :{ table2Data?.[0]?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>} - <div style={{ fontWeight: '600' }}> Mobile : +91 { table2Data?.[0]?.BrMobile}</div> - { <div style={{ fontSize: "14px", margin: "2px 0 0 0", padding: 0, fontWeight: 600 }}>{BillName} </div>} + {table2Data?.[0]?.BrGSTIN && <div>GST NO :{table2Data?.[0]?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>} + <div style={{ fontWeight: '600' }}> Mobile : +91 {table2Data?.[0]?.BrMobile}</div> + {<div style={{ fontSize: "14px", margin: "2px 0 0 0", padding: 0, fontWeight: 600 }}>{BillName} </div>} </div> </div> <hr className="PrintStyle3-print-dottline" /> <div className="PrintStyle3-print-ordr-dtls"> <div style={{ lineheight: '50px' }}> <div style={{ fontSize: '14px', fontWeight: 600 }} > BILL NO : - { - table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo) - - } </div> - <div style={{ fontSize: '14px', fontWeight: 600 }} > { Date1}</div> + { + table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo) + + } </div> + <div style={{ fontSize: '14px', fontWeight: 600 }} > {Date1}</div> </div> </div> <hr className="PrintStyle3-print-dottline" /> </div> - <div className="print-body" style={{ marginTop: "0rem" }}> + <div className="print-body" style={{ marginTop: "0rem" }}> <div className="PrintStyle3-print-tableMaster"> - {(TakeawayData?.length > 0 ) && + {(TakeawayData?.length > 0) && <div style={{ width: '95%' }} className="PrintStyle3-print-table"> - <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}> - { SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div>} - { Item && <div style={{ width: '300%', textAlign: 'left', fontWeight: 600 }}>ITEM</div>} - { HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div>} - { MRP && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>MRP</div>} - { Quantity && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>QTY</div>} - { Rate && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>RATE</div>} - { Discount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>DIS </div>} - { Amount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>AMT</div>} + <div style={{ ...tableHeaderStyle, display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}> + {SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div>} + {Item && <div style={{ width: '300%', textAlign: 'left', fontWeight: 600 }}>ITEM</div>} + {HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div>} + {MRP && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>MRP</div>} + {Quantity && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>QTY</div>} + {Rate && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>RATE</div>} + {Discount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>DIS </div>} + {Amount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>AMT</div>} </div> <div style={{ marginTop: '5px' }}> - {dataChunk?.map((item, index) => ( - <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem' }}> - { SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>{chunkIndex * chunkSize + index + 1}</div>} - { Item && - <div style={{ display: 'flex', flexDirection: 'column', width: '300%', textAlign: 'left', fontWeight: 600 }}> - <div>{item?.ProdName}</div> - <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"}) -   {item?.BrandName !== null ? item?.BrandName : ""}  - {item?.ProductIdentifierDtls?.length > 0 ? (item?.ProductIdentifierDtls?.filter((items) => !(items.SerialNumber == "" || items.SerialNumber == null)) - ?.map(a => { return (<div>{a.SerialNumber}</div>) })) : ""} {item?.ProductIdentifierDtls?.length > 0 ? item?.ProductIdentifierDtls.filter((item1) => item1.IMEI1 !== "" || item1.IMEI2 !== "") - ?.map(item2 => { - const imei1 = item2.IMEI1 || ""; - const imei2 = item2.IMEI2 || ""; - return (<div>{[imei1, imei2].filter(Boolean).join(",")}</div>); - } - ) : ""} + {dataChunk?.map((item, index) => { + const isMatch = + (index % 2 === 0 && rowtypeStyle === "even") || + (index % 2 === 1 && rowtypeStyle === "odd"); + + return ( + <div + style={{ + display: "flex", + justifyContent: "space-between", + width: "100%", + gap: "0.2rem", + ...(isMatch ? tableBodyStyle : {}), + }} + > + {SLNO && ( + <div style={{ width: "100%", textAlign: "center", fontWeight: 600 }}> + {chunkIndex * chunkSize + index + 1} </div> - </div>} - { HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.HSN}</div>} - { MRP && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</div>} - { Quantity && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Qty}</div>} - { Rate && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Price}</div>} - { Discount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</div>} - { Amount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }} > {item?.NetAmt?.toFixed(2)}</div>} - </div> - ))} + )} + + {Item && ( + <div + style={{ + display: "flex", + flexDirection: "column", + width: "300%", + textAlign: "left", + fontWeight: 600, + }} + > + <div>{item?.ProdName}</div> + <div> + ({item?.Size ? item?.Size : "1"}{" "} + {item?.SinglePc === "Y" + ? "PCS" + : item?.Type !== "C" + ? item?.UomName + : "COMBO"}) +  {item?.BrandName ?? ""} + </div> + </div> + )} + + {HsnCode && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.HSN} + </div> + )} + + {MRP && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.SinglePc === "Y" ? item?.Price : item?.MRP} + </div> + )} + + {Quantity && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.Qty} + </div> + )} + + {Rate && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.Price} + </div> + )} + + {Discount && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.Type !== "C" + ? item?.OfferAmt || 0 + : item?.OfferValue || 0} + </div> + )} + + {Amount && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.NetAmt?.toFixed(2)} + </div> + )} + </div> + ); + })} </div> </div> } - + </div> - + </div> {((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme && <> - <div className="PrintStyle3-print-ttlovrl"> + <div className="PrintStyle3-print-ttlovrl" style={{...netAmountStyle}}> <div> <div style={{ fontWeight: '600' }}> Items : </div> <div style={{ fontWeight: '600' }}> Qty : </div> @@ -319,24 +429,15 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ </div> <hr className="PrintStyle3-print-dottline" /> - - <div className="PrintStyle3-print-stradrs" style={{ display: 'flex', justifyContent: 'space-between' }}> - <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: "100%" }}> - {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div style={{ fontSize: "14px", fontWeight: 600 }}>Customer : {table2Data?.CustSuppName} </div> } - - </div> - - </div> {/* <br/> */} - <hr className="PrintStyle3-print-dottline" /> <div className="page-footerA4Style11" @@ -345,6 +446,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -356,7 +458,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ } - <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: "flex-end", alignItems: "center" }}> + <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: "flex-end", alignItems: "center" }}> { (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> @@ -369,7 +471,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ </div>) } - { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> </div>)} @@ -378,7 +480,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ </div> - + </> } @@ -405,7 +507,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ }} > <> - <div className="PrintStyle3-print-ttlovrl"> + <div className="PrintStyle3-print-ttlovrl" style={{...netAmountStyle}}> <div> <div style={{ fontWeight: '600' }}> Items : </div> <div style={{ fontWeight: '600' }}> Qty : </div> @@ -413,10 +515,10 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ <div style={{ fontWeight: '600' }}> Amount : </div> </div> <div className="PrintStyle3-print-prdttl-amt"> - <div style={{ marginRight: '0.5rem', fontWeight: '600' }}>{ totalQuantityFilter?.length} </div> - <div style={{ marginRight: '0.5rem', fontWeight: '600' }}>{ totalQuantity} </div> - {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ marginRight: '0.5rem', fontWeight: '600' }}>{ Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)} </div>} - <div style={{ fontWeight: '600', marginRight: '0.5rem' }}> { Number(table2Data?.[0]?.NetAmount).toFixed(2)} </div> + <div style={{ marginRight: '0.5rem', fontWeight: '600' }}>{totalQuantityFilter?.length} </div> + <div style={{ marginRight: '0.5rem', fontWeight: '600' }}>{totalQuantity} </div> + {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ marginRight: '0.5rem', fontWeight: '600' }}>{Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)} </div>} + <div style={{ fontWeight: '600', marginRight: '0.5rem' }}> {Number(table2Data?.[0]?.NetAmount).toFixed(2)} </div> </div> </div> @@ -543,27 +645,27 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ {/* <br/> */} - + <div className="PrintStyle3-print-stradrs" style={{ display: 'flex', justifyContent: 'space-between' }}> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: "100%" }}> - - + + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div style={{ fontSize: "14px", fontWeight: 600 }}>Customer : {table2Data?.CustSuppName} </div> } - - </div> - + </div> + + </div> {/* <br/> */} - + <div className="page-footerA4Style11" style={{ @@ -571,6 +673,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -595,7 +698,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ </div>) } - { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> </div>)} @@ -604,7 +707,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ </div> - + </> </div> </div> @@ -614,79 +717,137 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ : <div className="PrintStyle3MasterDiv" id={`SQPrintStyle3`} style={{ fontFamily: "'Courier New', Courier, monospace" }}> - <div className="PrintStyle3-print" > + <div className="PrintStyle3-print" style={{ ...headerStyle }}> <div style={{ fontSize: '30px', fontweight: '900' }}>{table2Data?.[0]?.BrName}</div> <div style={{ fontweight: '600' }}> { (table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '')} - {table2Data?.[0]?.BrGSTIN && <div>GST NO :{ table2Data?.[0]?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>} - <div style={{ fontWeight: '600' }}> Mobile : +91 { table2Data?.[0]?.BrMobile}</div> - { <div style={{ fontSize: "14px", margin: "2px 0 0 0", padding: 0, fontWeight: 600 }}>{BillName}</div>} + {table2Data?.[0]?.BrGSTIN && <div>GST NO :{table2Data?.[0]?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>} + <div style={{ fontWeight: '600' }}> Mobile : +91 {table2Data?.[0]?.BrMobile}</div> + {<div style={{ fontSize: "14px", margin: "2px 0 0 0", padding: 0, fontWeight: 600 }}>{BillName}</div>} </div> </div> <hr className="PrintStyle3-print-dottline" /> <div className="PrintStyle3-print-ordr-dtls"> <div style={{ lineheight: '50px' }}> <div style={{ fontSize: '14px', fontWeight: 600 }} > BILL NO : - { - table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo) - - } - </div> - <div style={{ fontSize: '14px', fontWeight: 600 }} > { Date1}</div> + { + table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo) + + } + </div> + <div style={{ fontSize: '14px', fontWeight: 600 }} > {Date1}</div> </div> </div> <hr className="PrintStyle3-print-dottline" /> <div className="PrintStyle3-print-tableMaster"> {(TakeawayData?.length > 0) && <div style={{ width: '95%' }} className="PrintStyle3-print-table"> - <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}> - { SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div>} - { Item && <div style={{ width: '300%', textAlign: 'left', fontWeight: 600 }}>ITEM</div>} - { HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div>} - { MRP && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>MRP</div>} - { Quantity && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>QTY</div>} - { Rate && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>RATE</div>} - { Discount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>DIS </div>} - { Amount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>AMT</div>} + <div style={{ ...tableHeaderStyle, display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}> + {SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div>} + {Item && <div style={{ width: '300%', textAlign: 'left', fontWeight: 600 }}>ITEM</div>} + {HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div>} + {MRP && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>MRP</div>} + {Quantity && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>QTY</div>} + {Rate && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>RATE</div>} + {Discount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>DIS </div>} + {Amount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>AMT</div>} </div> <div style={{ marginTop: '5px' }}> - {( TakeawayData)?.map((item, index) => ( - <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem' }}> - { SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>{index + 1}</div>} - { Item && - <div style={{ display: 'flex', flexDirection: 'column', width: '300%', textAlign: 'left', fontWeight: 600 }}> - <div>{item?.ProdName}</div> - <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"}) -   {item?.BrandName !== null ? item?.BrandName : ""}  - {item?.ProductIdentifierDtls?.length > 0 ? (item?.ProductIdentifierDtls?.filter((items) => !(items.SerialNumber == "" || items.SerialNumber == null)) - ?.map(a => { return (<div>{a.SerialNumber}</div>) })) : ""} {item?.ProductIdentifierDtls?.length > 0 ? item?.ProductIdentifierDtls.filter((item1) => item1.IMEI1 !== "" || item1.IMEI2 !== "") - ?.map(item2 => { - const imei1 = item2.IMEI1 || ""; - const imei2 = item2.IMEI2 || ""; - return (<div>{[imei1, imei2].filter(Boolean).join(",")}</div>); - } - ) : ""} + {dataChunk?.map((item, index) => { + const isMatch = + (index % 2 === 0 && rowtypeStyle === "even") || + (index % 2 === 1 && rowtypeStyle === "odd"); + + return ( + <div + style={{ + display: "flex", + justifyContent: "space-between", + width: "100%", + gap: "0.2rem", + ...(isMatch ? tableBodyStyle : {}), + }} + > + {SLNO && ( + <div style={{ width: "100%", textAlign: "center", fontWeight: 600 }}> + {chunkIndex * chunkSize + index + 1} </div> - </div>} - { HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.HSN}</div>} - { MRP && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</div>} - { Quantity && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Qty}</div>} - { Rate && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Price}</div>} - { Discount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</div>} - { Amount && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }} > {item?.NetAmt?.toFixed(2)}</div>} - </div> - ))} + )} + + {Item && ( + <div + style={{ + display: "flex", + flexDirection: "column", + width: "300%", + textAlign: "left", + fontWeight: 600, + }} + > + <div>{item?.ProdName}</div> + <div> + ({item?.Size ? item?.Size : "1"}{" "} + {item?.SinglePc === "Y" + ? "PCS" + : item?.Type !== "C" + ? item?.UomName + : "COMBO"}) +  {item?.BrandName ?? ""} + </div> + </div> + )} + + {HsnCode && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.HSN} + </div> + )} + + {MRP && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.SinglePc === "Y" ? item?.Price : item?.MRP} + </div> + )} + + {Quantity && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.Qty} + </div> + )} + + {Rate && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.Price} + </div> + )} + + {Discount && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.Type !== "C" + ? item?.OfferAmt || 0 + : item?.OfferValue || 0} + </div> + )} + + {Amount && ( + <div style={{ width: "100%", textAlign: "right", fontWeight: 600 }}> + {item?.NetAmt?.toFixed(2)} + </div> + )} + </div> + ); + })} </div> </div> } - + </div> - + {/* <br/> */} - <div className="PrintStyle3-print-ttlovrl"> + <div className="PrintStyle3-print-ttlovrl" style={{...netAmountStyle}}> <div> <div style={{ fontWeight: '600' }}> Items : </div> <div style={{ fontWeight: '600' }}> Qty : </div> @@ -819,7 +980,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ } </div> - + {/* <br/> */} @@ -827,27 +988,28 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ <div className="PrintStyle3-print-stradrs" style={{ display: 'flex', justifyContent: 'space-between' }}> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: "100%" }}> - - + + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div style={{ fontSize: "14px", fontWeight: 600 }}>Customer : {table2Data?.CustSuppName} </div> } - + </div> - + </div> {/* <br/> */} - + <div className="page-footerA4Style11" style={{ marginTop: "auto", pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -859,7 +1021,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ } - <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: "flex-end", alignItems: "center" }}> + <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: "flex-end", alignItems: "center" }}> { (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}> @@ -872,7 +1034,7 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ </div>) } - { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> </div>)} @@ -880,8 +1042,8 @@ const PurPrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQ </div> </div> - - + + {/* <div onClick={Print}> print</div> */} </div>} </> diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle4.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle4.jsx index 6b20076..be97379 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle4.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle4.jsx @@ -4,6 +4,17 @@ import { GlobalPritdummyData, changeReprintDataFound, GlobalprinttermsAndConditions, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from "../../../Features/ThemeChange/ThemeChange"; import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.scss" import { extractLastNumber } from "../../../Services/Others"; @@ -28,12 +39,21 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie const Rate = FieldDetails?.["Rate"]; const Amount = FieldDetails?.["Amount"]; const HsnCode = FieldDetails?.["HsnCode"]; - - const GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); - - +// + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let TermsAndConditions = printDatas?.TermsandConditions let SignatureImg = printDatas?.Signature let Notestext = printDatas?.Notes @@ -42,7 +62,13 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie let PageSize = printDatas?.PageSize const Signature = FieldDetails?.["signature"]; const TermsnAdCondition = FieldDetails?.["terms&conditions"]; - + // + 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 keysLength = Object.keys(table2Data ?? {}).length; @@ -58,19 +84,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`; const TakeawayData = table2Data?.[0]?.ProductDetails - console.log(TakeawayData, "TakeawayData") - - - - - let TotalOfferAmount = 0; - - // Calculate SalesWiseOffers total amount - - - - const chunkSize = PageSize == "A5" ? 11 : 16; let dataSource = table2Data?.[0]?.ProductDetails; @@ -85,6 +99,52 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10); +// + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? @@ -95,7 +155,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie {/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */} <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> - <div className='PrintStyle4-fistDiv' style={{ flexDirection: 'column' }}> + <div className='PrintStyle4-fistDiv' style={{ flexDirection: 'column',...headerStyle, }}> <div style={{ fontSize: '20px', fontWeight: '600', width: '100%', textAlign: 'center' }}>{table2Data?.[0]?.BrName}</div> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', fontWeight: 600 }}> { @@ -129,20 +189,31 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie <table className="PrintStyle4-print-table"> <thead> <tr> - {SLNO && <th style={{ width: '10px' }}>S.No</th>} - {Item && <th>Item</th>} - {Quantity && <th style={{ width: '30px', textAlign: 'right' }}>Qty</th>} - {HsnCode && <th style={{ width: '30px', textAlign: 'right' }}>HSN</th>} - {MRP && <th style={{ width: '30px', textAlign: 'right' }}>MRP</th>} - {Discount && <th style={{ width: '30px', textAlign: 'right' }}>Dis </th>} - {Rate && <th style={{ width: '40px', textAlign: 'right' }}>Rate</th>} - {Amount && <th style={{ width: '30px', textAlign: 'right' }}>Amt</th>} + {SLNO && <th style={{ width: '10px',...tableHeaderStyle }}>S.No</th>} + {Item && <th style={{...tableHeaderStyle}}>Item</th>} + {Quantity && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Qty</th>} + {HsnCode && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>HSN</th>} + {MRP && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>MRP</th>} + {Discount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Dis </th>} + {Rate && <th style={{ width: '40px', textAlign: 'right',...tableHeaderStyle }}>Rate</th>} + {Amount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Amt</th>} </tr> </thead> <tbody> {dataChunk?.map((item, index) => { return ( - <tr key={index}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>} {Item && <td style={{ display: 'flex', flexDirection: 'column', marginLeft: "30px" }}> <div>{item?.ProdName}</div> @@ -196,7 +267,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie <> - <div className='PrintStyle4-ThirdDivMaster'> + <div className='PrintStyle4-ThirdDivMaster' style={{...netAmountStyle}}> <div className='PrintStyle4-ThirdP'> <div> <div style={{ fontWeight: '600' }}>Items </div> @@ -365,6 +436,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -425,7 +497,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie <> - <div className='PrintStyle4-ThirdDivMaster'> + <div className='PrintStyle4-ThirdDivMaster' style={{...netAmountStyle}}> <div className='PrintStyle4-ThirdP'> <div> <div style={{ fontWeight: '600' }}>Items </div> @@ -592,6 +664,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -657,20 +730,31 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie <table className="PrintStyle4-print-table"> <thead> <tr> - {SLNO && <th style={{ width: '10px' }}>S.No</th>} - {Item && <th>Item</th>} - {Quantity && <th style={{ width: '30px', textAlign: 'right' }}>Qty</th>} - {HsnCode && <th style={{ width: '30px', textAlign: 'right' }}>HSN</th>} - {MRP && <th style={{ width: '30px', textAlign: 'right' }}>MRP</th>} - {Discount && <th style={{ width: '30px', textAlign: 'right' }}>Dis </th>} - {Rate && <th style={{ width: '40px', textAlign: 'right' }}>Rate</th>} - {Amount && <th style={{ width: '30px', textAlign: 'right' }}>Amt</th>} + {SLNO && <th style={{ width: '10px',...tableHeaderStyle }}>S.No</th>} + {Item && <th style={{...tableHeaderStyle}}>Item</th>} + {Quantity && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Qty</th>} + {HsnCode && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>HSN</th>} + {MRP && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>MRP</th>} + {Discount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Dis </th>} + {Rate && <th style={{ width: '40px', textAlign: 'right',...tableHeaderStyle }}>Rate</th>} + {Amount && <th style={{ width: '30px', textAlign: 'right',...tableHeaderStyle }}>Amt</th>} </tr> </thead> <tbody> {(GlobaldummyData ? products : TakeawayData)?.map((item, index) => { return ( - <tr key={index}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO && <td>{index + 1}</td>} {Item && <td style={{ display: 'flex', flexDirection: 'column', marginLeft: "30px" }}> <div>{item?.ProdName}</div> @@ -716,7 +800,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie } - <div className='PrintStyle4-ThirdDivMaster'> + <div className='PrintStyle4-ThirdDivMaster' style={{...netAmountStyle}}> <div className='PrintStyle4-ThirdP'> <div> <div style={{ fontWeight: '600' }}>Items </div> @@ -883,6 +967,7 @@ const PurPrintstyle4 = ({ index, Date1, base64Image, totalQuantityFilter, Cashie pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle5.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle5.jsx index 35d1254..064a301 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle5.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle5.jsx @@ -4,6 +4,17 @@ import { GlobalPritdummyData, changeReprintDataFound, GlobalprinttermsAndConditions, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../Features/ThemeChange/ThemeChange' import '../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5.scss' import { extractLastNumber } from "../../../Services/Others"; @@ -33,6 +44,17 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C const GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); let TermsAndConditions = printDatas?.TermsandConditions @@ -61,10 +83,12 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C const TakeawayData = table2Data?.[0]?.ProductDetails console.log(TakeawayData, "TakeawayData", table2Data) - - - - + 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; let TotalOfferAmount = 0; // Calculate SalesWiseOffers total amount @@ -82,7 +106,51 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 2 : 10); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? @@ -91,8 +159,8 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C <div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}> {/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */} - <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> - <div className="PrintStyle5-Head"> + <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> + <div className="PrintStyle5-Head" style={{...headerStyle}}> <div> <div style={{ fontSize: 'clamp(2rem, 2.5vw, 2rem)', fontWeight: '600' }}>{table2Data?.[0]?.BrName}</div> @@ -104,9 +172,8 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C </div> <div style={{ fontSize: "14px", fontWeight: '600' }}> Mobile :{GlobaldummyData ? '1234567890' : table2Data?.[0]?.BrMobile} </div> {<div style={{ textTransform: 'uppercase' }}>{BillName} </div>} - - <hr /> </div> + <hr /> <div style={{ display: "flex", justifyContent: "space-between", fontSize: "14px", fontWeight: '600' }}> @@ -121,7 +188,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C <div style={{ marginTop: GlobaldummyData ? "9rem" : "0rem" }} className="print-body"> {(TakeawayData?.length > 0 || GlobaldummyData) && <> - <div style={{ display: "flex", justifyContent: "space-between", fontWeight: '600', fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem' }}> + <div style={{ display: "flex", justifyContent: "space-between", fontWeight: '600', fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem', ...tableHeaderStyle }}> {GlobaldummyData ? GlobalSlNo && <div style={{ width: '100%', textAlign: 'center' }}>S.No</div> : SLNO && <div style={{ width: '100%', textAlign: 'center' }}>S.No</div>} {GlobaldummyData ? (GlobalItem || GlobalQuantity) && <div style={{ width: '300%', textAlign: 'center' }} > {GlobaldummyData ? GlobalItem && 'ITEM /DES /' : 'ITEM /DES /'} {GlobaldummyData ? GlobalQuantity && 'QTY' : 'QTY'} </div> : @@ -136,7 +203,8 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C <hr className="hrline" /> {dataChunk?.map((item, index) => ( - <div key={index} className="PrintStyle5-print-prddtls" style={{ display: "flex", justifyContent: "space-between", fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', fontWeight: '600', width: '100%', gap: '0.5rem' }}> + <div key={index} className="PrintStyle5-print-prddtls" style={{ ...(rowtypeStyle === (index % 2 === 0 ? "even" : "odd")? tableBodyStyle + : {}),display: "flex", justifyContent: "space-between", fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', fontWeight: '600', width: '100%', gap: '0.5rem' }}> {SLNO && <div style={{ width: '100%', textAlign: 'center' }}>{chunkIndex * chunkSize + index + 1}</div>} { GlobaldummyData ? (GlobalItem || GlobalQuantity) && @@ -331,7 +399,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C <hr className="hrline" /> - <div className="align-style" style={{ fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div> + <div className="align-style" style={{...netAmountStyle, fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div> <hr className="hrline" /> {/* @@ -379,6 +447,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > {GlobaldummyData ? GlobalIsnotes && @@ -590,7 +659,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C <hr className="hrline" /> - <div className="align-style" style={{ fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.NetAmount).toFixed(2)}</div> </div> + <div className="align-style" style={{...netAmountStyle, fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.NetAmount).toFixed(2)}</div> </div> <hr className="hrline" /> @@ -634,6 +703,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -681,7 +751,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C : <div className="PrintStyle5-MasterDiv" id={`SQPrintStyle5`} style={{ fontFamily: "'Courier New', Courier, monospace" }} > - <div className="PrintStyle5-Head"> + <div className="PrintStyle5-Head" style={{...headerStyle}}> <div> <div style={{ fontSize: 'clamp(2rem, 2.5vw, 2rem)', fontWeight: '600' }}>{table2Data?.[0]?.BrName}</div> @@ -692,15 +762,9 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C </div> <div style={{ fontSize: "14px", fontWeight: '600' }}> Mobile :{GlobaldummyData ? '1234567890' : table2Data?.[0]?.BrMobile} </div> {<div style={{ textTransform: 'uppercase' }}>{BillName}</div>} - - <hr /> </div> - - - + <hr /> <div className="PrintStyle5-print-table"> - - <div style={{ display: "flex", justifyContent: "space-between", fontSize: "14px", fontWeight: '600' }}> {" "} <div> {GlobaldummyData ? formattedDate : Date1} </div>{" "} @@ -710,7 +774,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C <hr /> {(TakeawayData?.length > 0) && <> - <div style={{ display: "flex", justifyContent: "space-between", fontWeight: '600', fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem' }}> + <div style={{ display: "flex", justifyContent: "space-between", fontWeight: '600', fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', width: '100%', gap: '0.5rem', ...tableHeaderStyle }}> { SLNO && <div style={{ width: '100%', textAlign: 'center' }}>S.No</div>} { @@ -727,7 +791,8 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C <hr className="hrline" /> {(TakeawayData)?.map((item, index) => ( - <div key={index} className="PrintStyle5-print-prddtls" style={{ display: "flex", justifyContent: "space-between", fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', fontWeight: '600', width: '100%', gap: '0.5rem' }}> + <div key={index} className="PrintStyle5-print-prddtls" style={{ ...(rowtypeStyle === (index % 2 === 0 ? "even" : "odd")? tableBodyStyle + : {}), display: "flex", justifyContent: "space-between", fontSize: 'clamp(1rem, 2.5vw, 1.2rem)', fontWeight: '600', width: '100%', gap: '0.5rem' }}> {SLNO && <div style={{ width: '100%', textAlign: 'center' }}>{index + 1}</div>} { @@ -907,7 +972,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C <hr className="hrline" /> - <div className="align-style" style={{ fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div> + <div className="align-style" style={{...netAmountStyle, fontWeight: '600', fontSize: '19px' }}> <div>Amount </div> <div> : </div> <div>{GlobaldummyData ? '1,066' : Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div> <hr className="hrline" /> {/* @@ -964,6 +1029,7 @@ const PurPrintStyle5 = ({ index, ExtraChargeTotal, totalQuantityFilter, Date1, C pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle6.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle6.jsx index 97fb53d..5290b9a 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle6.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle6.jsx @@ -5,6 +5,17 @@ import { GlobalPritdummyData, changeReprintDataFound, GlobalprinttermsAndConditions, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from "../../../Features/ThemeChange/ThemeChange"; import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle6.scss"; import { extractLastNumber } from "../../../Services/Others"; @@ -44,10 +55,20 @@ const PurPrintstyle6 = ({ const Rate = FieldDetails?.["Rate"]; const Amount = FieldDetails?.["Amount"]; const HsnCode = FieldDetails?.["HsnCode"]; - - const GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + let TermsAndConditions = printDatas?.TermsandConditions @@ -58,6 +79,12 @@ const PurPrintstyle6 = ({ let PageSize = printDatas?.PageSize const Signature = FieldDetails?.["signature"]; const TermsnAdCondition = FieldDetails?.["terms&conditions"]; + 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 keysLength = Object.keys(table2Data ?? {}).length; @@ -90,19 +117,60 @@ const PurPrintstyle6 = ({ } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 13); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? <div id={`SQPrintStyle6`} className="PrintStyle6MasterDiv" style={{ fontFamily: "'Courier New', Courier, monospace", position: "relative", width: "100%", minHeight: isMobile ? (PageSize === "A5" ? "210mm" : "297mm") : "auto" }}> - {paginatedChunks.map((dataChunk, chunkIndex) => ( <div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}> - - {/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */} <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> - <div className="PrintStyle6-firstDiv"> + <div className="PrintStyle6-firstDiv" style={{...headerStyle}}> <div className="P6HdBrnchName" style={{ fontSize: 'clamp(1.2rem, 2.5vw, 1.8rem)', fontWeight: '600' }}> {GlobaldummyData ? "XYZ Shop" : table2Data?.[0]?.BrName} </div> @@ -140,31 +208,31 @@ const PurPrintstyle6 = ({ <table className="PrintStyle6-print-table"> <thead> <tr> - {SLNO && <th style={{ width: "10px", }}>S.No</th>} + {SLNO && <th style={{ width: "10px", ...tableHeaderStyle }}>S.No</th>} {( - <th style={{ width: "10px", }}> + <th style={{ width: "10px", ...tableHeaderStyle }}> {Item && "ITEM /DES/"}{" "} {Quantity && "QTY"} </th> )} {HsnCode && ( - <th style={{ width: "10px", textAlign: "right", }}>HSN</th> + <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>HSN</th> )} {MRP && ( - <th style={{ width: "10px", textAlign: "right", }}>MRP</th> + <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>MRP</th> )} {Discount && ( - <th style={{ width: "10px", textAlign: "right", }}> + <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}> Dis{" "} </th> )} {Rate && ( - <th style={{ width: "10px", textAlign: "right", }}> + <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}> Rate </th> )} {Amount && ( - <th style={{ width: "10px", textAlign: "right", }}> + <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}> Amt </th> )} @@ -174,7 +242,17 @@ const PurPrintstyle6 = ({ {dataChunk?.map( (item, index) => { return ( - <tr key={index}> + <tr key={index} style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>} {( <td @@ -381,7 +459,7 @@ const PurPrintstyle6 = ({ </div> - <div className="PrintStyle6-secondDiv"> + <div className="PrintStyle6-secondDiv" style={{...netAmountStyle}}> <div style={{ textAlign: "left", fontSize: "clamp(1rem, 2.5vw, 1.2rem)", fontWeight: '600' }}> Amount </div> @@ -449,6 +527,7 @@ const PurPrintstyle6 = ({ pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > {GlobaldummyData ? GlobalIsnotes && @@ -533,7 +612,7 @@ const PurPrintstyle6 = ({ <hr className="PrintStyle6-HrLine" /> - <div className="align-style6" style={{ display: "flex", alignItems: "center", justifyContent: "space-evenly", margin: "0rem 1.5rem", fontSize: "clamp(0.65rem, 2.5vw, 1rem)", fontWeight: '600' }}> + <div className="align-style6" style={{ ...netAmountStyle, display: "flex", alignItems: "center", justifyContent: "space-evenly", margin: "0rem 1.5rem", fontSize: "clamp(0.65rem, 2.5vw, 1rem)", fontWeight: '600' }}> <div> <div>Items :{GlobaldummyData ? "8" : totalQuantityFilter?.length} </div> </div> @@ -671,8 +750,8 @@ const PurPrintstyle6 = ({ - <div className="PrintStyle6-secondDiv"> - <div style={{ textAlign: "left", fontSize: "clamp(1rem, 2.5vw, 1.2rem)", fontWeight: '600' }}> + <div className="PrintStyle6-secondDiv"style={{...netAmountStyle}}> + <div style={{ textAlign: "left", fontSize: "clamp(1rem, 2.5vw, 1.2rem)", fontWeight: '600'}}> Amount </div> @@ -727,6 +806,7 @@ const PurPrintstyle6 = ({ pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -769,7 +849,7 @@ const PurPrintstyle6 = ({ </div> : <div id={`SQPrintStyle6`} className="PrintStyle6MasterDiv" style={{ fontFamily: "'Courier New', Courier, monospace" }}> - <div className="PrintStyle6-firstDiv"> + <div className="PrintStyle6-firstDiv" style={{...headerStyle}}> <div className="P6HdBrnchName" style={{ fontSize: 'clamp(1.2rem, 2.5vw, 1.8rem)', fontWeight: '600' }}> {table2Data?.[0]?.BrName} </div> @@ -782,8 +862,6 @@ const PurPrintstyle6 = ({ <div style={{ fontSize: "clamp(0.65rem, 2.5vw, 1rem)", }}> Mobile : {table2Data?.[0]?.BrMobile} </div> - - {<div style={{ textTransform: 'uppercase', fontSize: "clamp(0.75rem, 2.5vw, 1rem)", fontWeight: '600' }}>{BillName}</div>} </div> @@ -805,31 +883,31 @@ const PurPrintstyle6 = ({ <table className="PrintStyle6-print-table"> <thead> <tr> - {SLNO && <th style={{ width: "10px", }}>S.No</th>} + {SLNO && <th style={{ width: "10px", ...tableHeaderStyle }}>S.No</th>} {( - <th style={{ width: "10px", }}> + <th style={{ width: "10px", ...tableHeaderStyle }}> {Item && "ITEM /DES/"}{" "} {Quantity && "QTY"} </th> )} {HsnCode && ( - <th style={{ width: "10px", textAlign: "right", }}>HSN</th> + <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>HSN</th> )} {MRP && ( - <th style={{ width: "10px", textAlign: "right", }}>MRP</th> + <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>MRP</th> )} {Discount && ( - <th style={{ width: "10px", textAlign: "right", }}> + <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}> Dis{" "} </th> )} {Rate && ( - <th style={{ width: "10px", textAlign: "right", }}> + <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}> Rate </th> )} {Amount && ( - <th style={{ width: "10px", textAlign: "right", }}> + <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}> Amt </th> )} @@ -839,7 +917,18 @@ const PurPrintstyle6 = ({ {(TakeawayData)?.map( (item, index) => { return ( - <tr key={index}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> {SLNO && <td>{index + 1}</td>} {( <td @@ -906,7 +995,7 @@ const PurPrintstyle6 = ({ } - <div className="align-style6" style={{ display: "flex", alignItems: "center", justifyContent: "space-evenly", margin: "0rem 1.5rem", fontSize: "clamp(0.65rem, 2.5vw, 1rem)", fontWeight: '600' }}> + <div className="align-style6" style={{ ...netAmountStyle, display: "flex", alignItems: "center", justifyContent: "space-evenly", margin: "0rem 1.5rem", fontSize: "clamp(0.65rem, 2.5vw, 1rem)", fontWeight: '600' }}> <div> <div>Items :{GlobaldummyData ? "8" : totalQuantityFilter?.length} </div> </div> @@ -1045,8 +1134,8 @@ const PurPrintstyle6 = ({ {/* <div className="align-style"> <div>Qty : </div> <div>{GlobaldummyData ? '9' : totalQuantity}</div> </div> */} - <div className="PrintStyle6-secondDiv"> - <div style={{ textAlign: "left", fontSize: "clamp(1rem, 2.5vw, 1.2rem)", fontWeight: '600' }}> + <div className="PrintStyle6-secondDiv" style={{...netAmountStyle}}> + <div style={{ textAlign: "left", fontSize: "clamp(1rem, 2.5vw, 1.2rem)", fontWeight: '600'}}> Amount </div> @@ -1097,6 +1186,7 @@ const PurPrintstyle6 = ({ pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle7.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle7.jsx index 2780b01..1513837 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle7.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle7.jsx @@ -4,7 +4,18 @@ import { useDispatch, useSelector } from "react-redux"; import { GlobalPritdummyData, changeReprintDataFound, - GlobalprinttermsAndConditions + GlobalprinttermsAndConditions, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../Features/ThemeChange/ThemeChange'; import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle7.scss" import { extractLastNumber } from "../../../Services/Others"; @@ -16,10 +27,10 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C const dispatch = useDispatch(); - const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => { - acc[item.ConfigName] = true; - return acc; - }, {}); + const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => { + acc[item.ConfigName] = true; + return acc; + }, {}); const SLNO = FieldDetails?.["Sl.No"]; const Item = FieldDetails?.["Item"]; @@ -29,12 +40,27 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C const Rate = FieldDetails?.["Rate"]; const Amount = FieldDetails?.["Amount"]; const HsnCode = FieldDetails?.["HsnCode"]; - - + 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 GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + - let TermsAndConditions = printDatas?.TermsandConditions let SignatureImg = printDatas?.Signature let Notestext = printDatas?.Notes @@ -43,41 +69,66 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C let PageSize = printDatas?.PageSize const Signature = FieldDetails?.["signature"]; const TermsnAdCondition = FieldDetails?.["terms&conditions"]; - - const keysLength = Object.keys(table2Data ?? {}).length; if (keysLength > 0) { dispatch(changeReprintDataFound(true)); } - - - const TakeawayData = table2Data?.[0]?.ProductDetails - console.log(TakeawayData, "TakeawayData", table2Data) - - - - - + const TakeawayData = table2Data?.[0]?.ProductDetails let TotalOfferAmount = 0; - - - - - const chunkSize = PageSize == "A5" ? 8 : 11; let dataSource = table2Data?.[0]?.ProductDetails; - - - // Paginate the data const paginatedChunks = []; - for (let i = 0; i < dataSource?.length; i += chunkSize) { - paginatedChunks.push(dataSource?.slice(i, i + chunkSize)); + for (let i = 0; i < dataSource?.length; i += chunkSize) { + paginatedChunks.push(dataSource?.slice(i, i + chunkSize)); } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10); - { console.log(TakeawayData, "TakeawayDataTakeawayData") } + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> @@ -87,15 +138,15 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C <div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}> - <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> + <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> <hr class="star-line" /> - <div className="PrintStyle7-print"> - <div style={{ fontSize: '16px', fontWeight: '600' }}> { table2Data?.[0]?.BrName}</div> + <div className="PrintStyle7-print" style={{...headerStyle}}> + <div style={{ fontSize: '16px', fontWeight: '600' }}> {table2Data?.[0]?.BrName}</div> <div style={{ fontSize: '10px', fontWeight: '600' }} >{GlobaldummyData ? 'BranchAddress, Town- 635XXX City - State' : (table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '')} </div> - { <div style={{ fontSize: "12px", margin: "2px 0 0 0", textTransform: 'uppercase' }}>{BillName} </div>} + {<div style={{ fontSize: "12px", margin: "2px 0 0 0", textTransform: 'uppercase' }}>{BillName} </div>} </div> <hr className="PrintStyle7-print-dottline" /> @@ -115,7 +166,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C <div style={{ marginTop: GlobaldummyData ? "9rem" : "0rem" }} className="print-body"> <div className="PrintStyle7-print-table" > - {(TakeawayData?.length > 0 ) && + {(TakeawayData?.length > 0) && <> <div className="PrintStyle7-print-tableMaster"> @@ -123,30 +174,41 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C <table className="PrintStyle7-print-table"> <thead> <tr> - { SLNO == true && <th style={{ width: '10px', }}>S</th>} - { Item == true && <th>Item</th>} - { HsnCode == true && <th style={{ width: '10px', }}>HSN</th>} - { Quantity == true && <th style={{ width: '10px', }}>Qty</th>} - {GlobaldummyData ? GlobalMRP && <th style={{ width: '10px' }}>MRP</th> : MRP == true && <th style={{ width: '10px' }}>MRP</th>} - {GlobaldummyData ? GlobalRate && <th style={{ width: '10px' }}>Rate</th> : Rate == true && <th style={{ width: '10px' }}>Rate</th>} - { Discount == true && <th style={{ width: '10px' }}>Dis </th>} - { Amount == true && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>} + {SLNO == true && <th style={{ width: '10px', ...tableHeaderStyle }}>S.No</th>} + {Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>} + {HsnCode == true && <th style={{ width: '10px', ...tableHeaderStyle }}>HSN</th>} + {Quantity == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Qty</th>} + {GlobaldummyData ? GlobalMRP && <th style={{ width: '10px', ...tableHeaderStyle }}>MRP</th> : MRP == true && <th style={{...tableHeaderStyle, width: '10px' }}>MRP</th>} + {GlobaldummyData ? GlobalRate && <th style={{ width: '10px', ...tableHeaderStyle }}>Rate</th> : Rate == true && <th style={{...tableHeaderStyle, width: '10px' }}>Rate</th>} + {Discount == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Dis </th>} + {Amount == true && <th style={{ width: '10px', textAlign: 'right', ...tableHeaderStyle }}>Amt</th>} </tr> </thead> <tbody> {dataChunk?.map((item, index) => ( - <tr key={index} > - { SLNO == true && <td style={{ textAlign: 'center' }}>{chunkIndex * chunkSize + index + 1}</td>} - { Item == true && <td style={{ display: 'flex', flexDirection: 'column' }}> - <div>{item?.ProdName}</div> - <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})</div> - </td>} - { HsnCode == true && <td style={{ textAlign: 'center' }}>{item?.HSN}</td>} - { Quantity == true && <td style={{ textAlign: 'center' }}>{item?.Qty}</td>} - { MRP == true && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> + {SLNO == true && <td style={{ textAlign: 'center' }}>{chunkIndex * chunkSize + index + 1}</td>} + {Item == true && <td style={{ display: 'flex', flexDirection: 'column' }}> + <div>{item?.ProdName}</div> + <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})</div> + </td>} + {HsnCode == true && <td style={{ textAlign: 'center' }}>{item?.HSN}</td>} + {Quantity == true && <td style={{ textAlign: 'center' }}>{item?.Qty}</td>} + {MRP == true && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} {Rate == true && <td style={{ textAlign: 'right' }}>{item?.Price}</td>} - { Discount == true && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} - { Amount == true && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>} + {Discount == true && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} + {Amount == true && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>} </tr> ))} </tbody> @@ -161,10 +223,10 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C {((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme && <> <div className='PrintStyle7-SecondDiv3'> - <div className='PrintStyle7-SecondDivMaster'> - <div style={{ fontWeight: "600" }}>Items : { totalQuantityFilter?.length}</div> - <div style={{ fontWeight: "600" }}>Qty : { totalQuantity}</div> - {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : { Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>} + <div className='PrintStyle7-SecondDivMaster' style={{ ...netAmountStyle }}> + <div style={{ fontWeight: "600" }}>Items : {totalQuantityFilter?.length}</div> + <div style={{ fontWeight: "600" }}>Qty : {totalQuantity}</div> + {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : {Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>} </div> <div style={{ display: 'flex', justifyContent: 'center' }}> <div> @@ -294,11 +356,11 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C <div style={{ display: 'flex', justifyContent: 'center', fontSize: '16px', fontWeight: '600' }}>Amount : ₹{GlobaldummyData ? '1,066' : Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div> - - - - + + + + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div> <div style={{ marginLeft: '13px', padding: 0, fontSize: "8px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName}</div> @@ -315,6 +377,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -339,7 +402,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div>) } - { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> </div>)} @@ -349,7 +412,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C - + </> } </div> @@ -376,10 +439,10 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C > <> <div className='PrintStyle7-SecondDiv3'> - <div className='PrintStyle7-SecondDivMaster'> - <div style={{ fontWeight: "600" }}>Items : { totalQuantityFilter?.length}</div> - <div style={{ fontWeight: "600" }}>Qty : { totalQuantity}</div> - {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : { Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>} + <div className='PrintStyle7-SecondDivMaster' style={{ ...netAmountStyle }}> + <div style={{ fontWeight: "600" }}>Items : {totalQuantityFilter?.length}</div> + <div style={{ fontWeight: "600" }}>Qty : {totalQuantity}</div> + {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : {Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>} </div> <div style={{ display: 'flex', justifyContent: 'center' }}> <div> @@ -506,36 +569,28 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div> </div> - <div style={{ display: 'flex', justifyContent: 'center', fontSize: '16px', fontWeight: '600' }}>Amount : ₹{ Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> + <div style={{ display: 'flex', justifyContent: 'center', fontSize: '16px', fontWeight: '600' }}>Amount : ₹{Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div> - - + + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div> <div style={{ marginLeft: '13px', padding: 0, fontSize: "8px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName}</div> </div> } - - - - - - <div className="page-footerA4Style11" style={{ marginTop: "auto", pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > - - - <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> { (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> @@ -549,32 +604,27 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div>) } - { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> </div>)} </div> </div> - - - </> </div> </div> } </div> - - : <div className="PrintStyle7MasterDiv" id={`SQPrintStyle7`} style={{ fontFamily: "'Courier New', Courier, monospace" }}> <hr class="star-line" /> - <div className="PrintStyle7-print"> - <div style={{ fontSize: '16px', fontWeight: '600' }}> { table2Data?.[0]?.BrName}</div> + <div className="PrintStyle7-print" style={{...headerStyle}}> + <div style={{ fontSize: '16px', fontWeight: '600' }}> {table2Data?.[0]?.BrName}</div> <div style={{ fontSize: '10px', fontWeight: '600' }} >{ (table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '')} </div> - { <div style={{ fontSize: "12px", margin: "2px 0 0 0", textTransform: 'uppercase' }}>{BillName} </div>} + {<div style={{ fontSize: "12px", margin: "2px 0 0 0", textTransform: 'uppercase' }}>{BillName} </div>} </div> <hr className="PrintStyle7-print-dottline" /> @@ -582,7 +632,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C <div className='PrintStyle7-SecondDivMaster'> <div className='PrintStyle7-SecondDiv'> <div className='PrintStyle7-SecondDiv-wordings' style={{ fontSize: "10px", fontWeight: "600" }} >Bill No :{ - table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo) + table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo) }</div> </div> <div className='PrintStyle7-SecondDiv2'> @@ -604,30 +654,41 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C <table className="PrintStyle7-print-table"> <thead> <tr> - { SLNO == true && <th style={{ width: '10px', }}>S</th>} - { Item == true && <th>Item</th>} - { HsnCode == true && <th style={{ width: '10px', }}>HSN</th>} - { Quantity == true && <th style={{ width: '10px', }}>Qty</th>} - { MRP == true && <th style={{ width: '10px' }}>MRP</th>} - { Rate == true && <th style={{ width: '10px' }}>Rate</th>} - { Discount == true && <th style={{ width: '10px' }}>Dis </th>} - { Amount == true && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>} + {SLNO == true && <th style={{ width: '10px', ...tableHeaderStyle }}>S.No</th>} + {Item == true && <th style={{ ...tableHeaderStyle }}>Item</th>} + {HsnCode == true && <th style={{ width: '10px', ...tableHeaderStyle }}>HSN</th>} + {Quantity == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Qty</th>} + {MRP == true && <th style={{ width: '10px', ...tableHeaderStyle }}>MRP</th>} + {Rate == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Rate</th>} + {Discount == true && <th style={{ width: '10px', ...tableHeaderStyle }}>Dis </th>} + {Amount == true && <th style={{ width: '10px', textAlign: 'right', ...tableHeaderStyle }}>Amt</th>} </tr> </thead> <tbody> {(GlobaldummyData ? products : TakeawayData)?.map((item, index) => ( - <tr key={index} > - { SLNO == true && <td style={{ textAlign: 'center' }}>{index + 1}</td>} - { Item == true && <td style={{ display: 'flex', flexDirection: 'column' }}> - <div>{item?.ProdName}</div> - <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})</div> - </td>} - { HsnCode == true && <td style={{ textAlign: 'center' }}>{item?.HSN}</td>} - { Quantity == true && <td style={{ textAlign: 'center' }}>{item?.Qty}</td>} - { MRP == true && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> + {SLNO == true && <td style={{ textAlign: 'center' }}>{index + 1}</td>} + {Item == true && <td style={{ display: 'flex', flexDirection: 'column' }}> + <div>{item?.ProdName}</div> + <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})</div> + </td>} + {HsnCode == true && <td style={{ textAlign: 'center' }}>{item?.HSN}</td>} + {Quantity == true && <td style={{ textAlign: 'center' }}>{item?.Qty}</td>} + {MRP == true && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} {Rate == true && <td style={{ textAlign: 'right' }}>{item?.Price}</td>} - { Discount == true && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} - { Amount == true && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>} + {Discount == true && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} + {Amount == true && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>} </tr> ))} </tbody> @@ -638,10 +699,10 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div> <div className='PrintStyle7-SecondDiv3'> - <div className='PrintStyle7-SecondDivMaster'> - <div style={{ fontWeight: "600" }}>Items : { totalQuantityFilter?.length}</div> - <div style={{ fontWeight: "600" }}>Qty : { totalQuantity}</div> - {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : { Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>} + <div className='PrintStyle7-SecondDivMaster' style={{ ...netAmountStyle }}> + <div style={{ fontWeight: "600" }}>Items : {totalQuantityFilter?.length}</div> + <div style={{ fontWeight: "600" }}>Qty : {totalQuantity}</div> + {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ fontWeight: "600" }}>Off : {Number(TotalOfferAmount + table2Data?.OverallDisc).toFixed(2)}</div>} </div> <div style={{ display: 'flex', justifyContent: 'center' }}> <div> @@ -768,10 +829,10 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div> </div> - <div style={{ display: 'flex', justifyContent: 'center', fontSize: '16px', fontWeight: '600' }}>Amount : ₹{ Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> + <div style={{ display: 'flex', justifyContent: 'center', fontSize: '16px', fontWeight: '600' }}>Amount : ₹{Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div> - + @@ -791,6 +852,7 @@ const PurPrintStyle7 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle8.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle8.jsx index 9c09539..607419a 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle8.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle8.jsx @@ -4,7 +4,19 @@ import { useDispatch, useSelector } from "react-redux"; import { GlobalPritdummyData, changeReprintDataFound, - GlobalprinttermsAndConditions + GlobalprinttermsAndConditions, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, + } from '../../../Features/ThemeChange/ThemeChange'; import '../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8.scss'; import { extractLastNumber } from "../../../Services/Others"; @@ -27,11 +39,26 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B const Rate = FieldDetails?.["Rate"]; const Amount = FieldDetails?.["Amount"]; const HsnCode = FieldDetails?.["HsnCode"]; - + 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 GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); - + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); let TermsAndConditions = printDatas?.TermsandConditions let SignatureImg = printDatas?.Signature @@ -74,7 +101,51 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 13); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> @@ -85,8 +156,8 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B {/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */} - <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> - <div className='PrintStyle8-fistDiv' style={{}} > + <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> + <div className='PrintStyle8-fistDiv' style={{ ...headerStyle }} > {/* <h3>{table2Data?.[0]?.BrName}</h3> */} <div style={{ fontSize: "clamp(1.25rem, 2.5vw, 1.75rem)", fontWeight: '600', }} >{table2Data?.[0]?.BrName}</div> <div className='PrintStyle8-BrAddress' style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}> @@ -94,21 +165,19 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B (table2Data?.[0]?.AddressDetails?.[0]?.Address1 || '') + (table2Data?.[0]?.AddressDetails?.[0]?.City ? (table2Data?.[0]?.AddressDetails?.[0]?.Address1 && table2Data?.[0]?.AddressDetails?.[0]?.City ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.City : '') + (table2Data?.[0]?.AddressDetails?.[0]?.Zip ? (table2Data?.[0]?.AddressDetails?.[0]?.City && table2Data?.[0]?.AddressDetails?.[0]?.Zip ? '-' : '') + table2Data?.[0]?.AddressDetails?.[0]?.Zip : '') } </div> - <div className='PrintStyle8-BrAddress' style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}> - Mobile : +91 {GlobaldummyData ? '986XXXXXXX' : table2Data?.[0]?.BrMobile}</div> + <div className='PrintStyle8-BrAddress' style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}> + Mobile : +91 {GlobaldummyData ? '986XXXXXXX' : table2Data?.[0]?.BrMobile}</div> </div> - {<div className='PrintStyle4-FourthSpan' style={{ textTransform: 'uppercase', fontWeight: '600' }}> - {BillName}</div>} - + {<div className='PrintStyle4-FourthSpan' style={{ textTransform: 'uppercase', fontWeight: '600' }}>{BillName}</div>} <div className='PrintStyle8-SecondDiv'> <div style={{ fontWeight: '600' }}>Bill No :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div> - <div style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}>{ Date1}</div> + <div style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}>{Date1}</div> </div> <hr className="PrintStyle8-print-dottline" /> </div> - <div style={{ marginTop: "0rem" }} className="print-body"> + <div style={{ marginTop: "0rem" }} className="print-body"> {(TakeawayData?.length > 0) && <> @@ -116,32 +185,43 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B <table className="PrintStyle8-print-table"> <thead> <tr> - {SLNO && <th style={{ width: "10px", textAlign: "center" }}>S.No</th>} - {Item && <th>Des</th>} - {HsnCode && <th style={{ width: "10px", textAlign: "right" }}>HSN</th>} - {MRP && <th style={{ width: "10px", textAlign: "right" }}>MRP</th>} - {Rate && <th style={{ width: "10px", textAlign: "right" }}>Rt</th>} + {SLNO && <th style={{ width: "10px", textAlign: "center", ...tableHeaderStyle }}>S.No</th>} + {Item && <th style={{ ...tableHeaderStyle }}>Des</th>} + {HsnCode && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>HSN</th>} + {MRP && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>MRP</th>} + {Rate && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>Rt</th>} { - Discount && <th style={{ width: "10px", textAlign: "right" }}>(%)</th>} - {Quantity && <th style={{ width: "10px", textAlign: "right" }}>Qty</th>} - {Amount && <th style={{ width: "10px", textAlign: "right" }}>Amt</th>} + Discount && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>(%)</th>} + {Quantity && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>Qty</th>} + {Amount && <th style={{ width: "10px", textAlign: "right", ...tableHeaderStyle }}>Amt</th>} </tr> </thead> <tbody> {dataChunk?.map((item, index) => { return ( - <tr key={index}> - { SLNO && <td style={{ textAlign: 'center' }}>{chunkIndex * chunkSize + index + 1}</td>} + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> + {SLNO && <td style={{ textAlign: 'center' }}>{chunkIndex * chunkSize + index + 1}</td>} {Item && <td style={{ display: 'flex', flexDirection: 'column' }}> <div>{item?.ProdName}</div> - <div>({ item?.Type != "C" ? item?.UomName : "COMBO"})</div> + <div>({item?.Type != "C" ? item?.UomName : "COMBO"})</div> </td>} - { HsnCode && <td>{item?.HSN}</td>} - { MRP && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} - { Rate && <td style={{ textAlign: 'right' }}>{item?.Price}</td>} - { Discount && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} - { Quantity && <td style={{ textAlign: 'right' }}>{item?.Qty}</td>} - { Amount && <td style={{ width: "10px", textAlign: 'right' }}>{(table2Data?.[0]?.NetAmount).toFixed(2)}</td>} + {HsnCode && <td>{item?.HSN}</td>} + {MRP && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} + {Rate && <td style={{ textAlign: 'right' }}>{item?.Price}</td>} + {Discount && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} + {Quantity && <td style={{ textAlign: 'right' }}>{item?.Qty}</td>} + {Amount && <td style={{ width: "10px", textAlign: 'right' }}>{(table2Data?.[0]?.NetAmount).toFixed(2)}</td>} </tr> ) })} @@ -157,7 +237,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B <> <hr className="PrintStyle8-print-dottline" /> - <div style={{ fontSize: "12px" }}> + <div style={{ fontSize: "12px",...netAmountStyle }}> <div style={{ display: "flex", justifyContent: "space-between" }}> <div style={{ width: '40%' }}>Items </div> <div> : </div> @@ -311,12 +391,12 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B </div> - + <div className='PrintStyle8-Qr-Order'> <div className='PrintStyle8-OrderNo'> - + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div style={{ marginLeft: '14px', padding: 0, fontSize: "12px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName} </div> @@ -325,7 +405,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B </div> - + </div> @@ -335,8 +415,8 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", - }} - > + ...footerColorStyle + }} > { Notestext && (<div> <p style={{ padding: "0rem 1rem" }}>{Notestext}</p> @@ -344,8 +424,6 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B <hr className="PrintA4Style11-print-dottline" /> </div>) } - - <div style={{ display: "flex", width: "90%", padding: "0 1rem", justifyContent: GlobaltermsAndConditions ? "space-between" : "flex-end", alignItems: "center" }}> { (TermsnAdCondition == true && TermsAndConditions?.length > 0) && (<div style={{ margin: "8px 0", fontFamily: "sans-serif", width: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start" }}> @@ -359,16 +437,13 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B </div>) } - { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> </div>)} </div> </div> - - - </> } </div> @@ -395,7 +470,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B > <> <hr className="PrintStyle8-print-dottline" /> - <div style={{ fontSize: "12px" }}> + <div style={{ fontSize: "12px",...netAmountStyle }}> <div style={{ display: "flex", justifyContent: "space-between" }}> <div style={{ width: '40%' }}>Items </div> <div> : </div> @@ -549,18 +624,18 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B </div> - + <div className='PrintStyle8-Qr-Order'> <div className='PrintStyle8-OrderNo'> - - + + {CashierName && CashierName !== undefined && CashierName !== null && !GlobaldummyData && <div style={{ marginLeft: '14px', padding: 0, fontSize: "12px", fontWeight: "600" }}>Cashier : {CashierName} </div> } - + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div style={{ marginLeft: '14px', padding: 0, fontSize: "12px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName} </div> @@ -576,6 +651,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -600,7 +676,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B </div>) } - { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> </div>)} @@ -609,7 +685,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B </div> - + </> </div> </div> @@ -618,7 +694,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B </div> : <div id={`SQPrintStyle8`} className='PrintStyle8MasterDiv' style={{ fontFamily: "'Courier New', Courier, monospace" }}> - <div className='PrintStyle8-fistDiv' style={{}} > + <div className='PrintStyle8-fistDiv' style={{ headerStyle }} > {/* <h3>{table2Data?.[0]?.BrName}</h3> */} <div style={{ fontSize: "clamp(1.25rem, 2.5vw, 1.75rem)", fontWeight: '600', }} >{GlobaldummyData ? 'XYZ Shop' : table2Data?.[0]?.BrName}</div> <div className='PrintStyle8-BrAddress' style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}> @@ -626,18 +702,18 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B 'BranchAddress, Town- 635XXX City - State' : (BranchAddress || '') + (BranchCity ? (BranchAddress && BranchCity ? '-' : '') + BranchCity : '') + (BranchZip ? (BranchCity && BranchZip ? '-' : '') + BranchZip : '')} </div> - + <div className='PrintStyle8-BrAddress' style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}> Mobile : +91 {GlobaldummyData ? '986XXXXXXX' : table2Data?.[0]?.BrMobile}</div> - + </div> <div className='PrintStyle4-FourthSpan' style={{ textTransform: 'uppercase', fontWeight: '600' }}> - {BillName}</div> + {BillName}</div> <div className='PrintStyle8-SecondDiv'> <div style={{ fontWeight: '600' }}>Bill No :{ - table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div> - <div style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}>{ Date1}</div> + table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div> + <div style={{ fontSize: "clamp(0.63rem, 2.5vw, 1.2rem)" }}>{Date1}</div> </div> <hr className="PrintStyle8-print-dottline" /> @@ -648,22 +724,33 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B <table className="PrintStyle8-print-table"> <thead> <tr> - {SLNO && <th style={{ width: "10px", textAlign: "center" }}>S.No</th>} - {Item && <th>Des</th>} - {HsnCode && <th style={{ width: "10px", textAlign: "right" }}>HSN</th>} - {MRP && <th style={{ width: "10px", textAlign: "right" }}>MRP</th>} - {Rate && <th style={{ width: "10px", textAlign: "right" }}>Rt</th>} - {Discount && <th style={{ width: "10px", textAlign: "right" }}>(%)</th>} - {Quantity && <th style={{ width: "10px", textAlign: "right" }}>Qty</th>} - {Amount && <th style={{ width: "10px", textAlign: "right" }}>Amt</th>} + {SLNO && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "center" }}>S.No</th>} + {Item && <th style={{ ...tableHeaderStyle }}>Des</th>} + {HsnCode && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>HSN</th>} + {MRP && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>MRP</th>} + {Rate && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>Rt</th>} + {Discount && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>(%)</th>} + {Quantity && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>Qty</th>} + {Amount && <th style={{ ...tableHeaderStyle, width: "10px", textAlign: "right" }}>Amt</th>} </tr> </thead> <tbody> {(TakeawayData)?.map((item, index) => { return ( - <tr key={index}> - { SLNO && <td style={{ textAlign: 'center' }}>{index + 1}</td>} - { Item && <td style={{ display: 'flex', flexDirection: 'column' }}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> + {SLNO && <td style={{ textAlign: 'center' }}>{index + 1}</td>} + {Item && <td style={{ display: 'flex', flexDirection: 'column' }}> <div>{item?.ProdName}</div> <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"})</div> </td>} @@ -683,7 +770,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B } <hr className="PrintStyle8-print-dottline" /> - <div style={{ fontSize: "12px" }}> + <div style={{ fontSize: "12px",...netAmountStyle }}> <div style={{ display: "flex", justifyContent: "space-between" }}> <div style={{ width: '40%' }}>Items </div> <div> : </div> @@ -692,7 +779,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B <div style={{ display: "flex", justifyContent: "space-between" }}> <div style={{ width: '40%' }}>Qty </div> <div> : </div> - <div style={{ padding: '0rem 1rem', width: '40%', textAlign: 'right' }} >{ totalQuantity}</div> + <div style={{ padding: '0rem 1rem', width: '40%', textAlign: 'right' }} >{totalQuantity}</div> </div> {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ display: "flex", justifyContent: "space-between" }}> @@ -706,7 +793,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B <div style={{ display: "flex", justifyContent: "space-between" }}> <div style={{ width: '40%' }}>Amount</div> <div> : </div> - <div style={{ padding: '0rem 1rem', width: '40%', textAlign: 'right' }}>{ Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> + <div style={{ padding: '0rem 1rem', width: '40%', textAlign: 'right' }}>{Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div> </div> @@ -845,7 +932,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B <div className='PrintStyle8-Qr-Order'> <div className='PrintStyle8-OrderNo'> - + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div style={{ marginLeft: '14px', padding: 0, fontSize: "12px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName} </div> @@ -854,7 +941,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B </div> - + </div> @@ -864,6 +951,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -888,7 +976,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B </div>) } - { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> </div>)} @@ -897,7 +985,7 @@ const PurPrintstyle8 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, B </div> - + </div> } diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle9.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle9.jsx index c45b747..36dd142 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle9.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle9.jsx @@ -2,9 +2,20 @@ import React from "react"; import { useDispatch, useSelector } from "react-redux"; import { - GlobalPritdummyData, - changeReprintDataFound, - GlobalprinttermsAndConditions + GlobalPritdummyData, + changeReprintDataFound, + GlobalprinttermsAndConditions, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../Features/ThemeChange/ThemeChange'; import '../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9.scss'; import { extractLastNumber } from "../../../Services/Others"; @@ -28,11 +39,26 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C const Rate = FieldDetails?.["Rate"]; const Amount = FieldDetails?.["Amount"]; const HsnCode = FieldDetails?.["HsnCode"]; + 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 GlobaldummyData = useSelector(GlobalPritdummyData); + const GlobaldummyData = useSelector(GlobalPritdummyData); const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions); - + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); let TermsAndConditions = printDatas?.TermsandConditions let SignatureImg = printDatas?.Signature @@ -54,7 +80,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C console.log(TakeawayData, "TakeawayData", table2Data) - + let TotalOfferAmount = 0; @@ -71,7 +97,51 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C } const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0; const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10); + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <> {FormatTheme ? @@ -80,9 +150,9 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C <div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}> - <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> - <div className="PrintStyle9-print" > - <div style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', fontWeight: '600' }} className="PrintStyle9-Branch">{ table2Data?.[0]?.BrName}</div> + <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}> + <div className="PrintStyle9-print" style={{ ...headerStyle }}> + <div style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', fontWeight: '600' }} className="PrintStyle9-Branch">{table2Data?.[0]?.BrName}</div> <div style={{ display: 'flex', flexDirection: 'column', fontWeight: '400', fontSize: '11px' }}> {GlobaldummyData ? @@ -94,42 +164,52 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C <div className='' style={{ textTransform: 'uppercase', fontSize: '11px', fontWeight: '600' }}>{BillName} </div> {/* - <div > - {table2Data?.BrGSTIN &&<div>GST NO :{table2Data?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>} - <div > PH : +91 {table2Data?.[0]?.BrMobile}</div> - </div>} */} - <div > - <div style={{ fontSize: '14px', fontWeight: '600' }} > BILL NO :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div> - <div style={{ fontSize: '12px', fontWeight: '400' }}> {Date1} </div> - </div> + <div > + {table2Data?.BrGSTIN &&<div>GST NO :{table2Data?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>} + <div > PH : +91 {table2Data?.[0]?.BrMobile}</div> + </div>} */} + </div> + <div > + <div style={{ fontSize: '14px', fontWeight: '600' }} > BILL NO :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div> + <div style={{ fontSize: '12px', fontWeight: '400' }}> {Date1} </div> </div> - <div className='straight-line9'></div> </div> <div style={{ marginTop: "0rem" }} className="print-body"> - {(TakeawayData?.length > 0 ) && + {(TakeawayData?.length > 0) && <> <table className="PrintStyle9-print-table"> <thead> <tr> - { SLNO && <th style={{ width: '10px' }}>S.No</th>} - { Item && <th style={{ width: '10px' }}>Item</th>} - { Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>} - { HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>} - { MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>} - { Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>} - { Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>} - { Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>} + {SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.No</th>} + {Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>} + {Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>} + {HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>} + {MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>} + {Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>} + {Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>} + {Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>} </tr> </thead> <tbody> {dataChunk?.map((item, index) => { return ( - <tr key={index}> - { SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>} - { Item && <td style={{ display: 'flex', flexDirection: 'column' }}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> + {SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>} + {Item && <td style={{ display: 'flex', flexDirection: 'column' }}> <div>{item?.ProdName}</div> <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"}){item?.BrandName !== null ? item?.BrandName : ""}  {item?.ProductIdentifierDtls?.length > 0 ? (item?.ProductIdentifierDtls?.filter((items) => !(items.SerialNumber == "" || items.SerialNumber == null)) @@ -141,12 +221,12 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C } ) : ""}</div> </td>} - { Quantity && <td style={{ textAlign: 'right' }}>{item?.Qty}</td>} - { HsnCode && <td style={{ textAlign: 'right' }}>{item?.HSN}</td>} - { MRP && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} - { Discount && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} - { Rate && <td style={{ textAlign: 'right' }}>{item?.Price}</td>} - { Amount && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>} + {Quantity && <td style={{ textAlign: 'right' }}>{item?.Qty}</td>} + {HsnCode && <td style={{ textAlign: 'right' }}>{item?.HSN}</td>} + {MRP && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>} + {Discount && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} + {Rate && <td style={{ textAlign: 'right' }}>{item?.Price}</td>} + {Amount && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>} </tr> ) })} @@ -154,14 +234,14 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </table> </> } - + </div> {((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme && <> - <div style={{ display: 'flex', flexDirection: 'column', }}> - - + <div style={{ display: 'flex', flexDirection: 'column',...netAmountStyle }}> + + {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ display: "flex", justifyContent: "space-between", fontSize: '12px', fontWeight: '600', marginRight: '0.5rem' }}> Off : @@ -328,12 +408,12 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div> - + <div> - - - + + + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div> <p style={{ padding: 0, fontSize: "10px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName}</p> @@ -344,14 +424,14 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C - + </div> - + <div className="page-footerA4Style11" style={{ @@ -359,13 +439,14 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > {Notestext && (<div> - <p style={{ padding: "0rem 1rem" }}>{Notestext}</p> + <p style={{ padding: "0rem 1rem" }}>{Notestext}</p> - <hr className="PrintA4Style11-print-dottline" /> - </div>) + <hr className="PrintA4Style11-print-dottline" /> + </div>) } @@ -393,8 +474,8 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div> </div> - - + + </> } @@ -422,9 +503,9 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C > <> - <div style={{ display: 'flex', flexDirection: 'column', }}> - - + <div style={{ display: 'flex', flexDirection: 'column',...netAmountStyle }}> + + {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ display: "flex", justifyContent: "space-between", fontSize: '12px', fontWeight: '600', marginRight: '0.5rem' }}> Off : @@ -582,7 +663,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C } </div> - + </> } @@ -591,13 +672,13 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div> - + <div> - - - - + + + + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div> <p style={{ padding: 0, fontSize: "10px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName}</p> @@ -617,6 +698,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -641,7 +723,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div>) } - { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> + {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}> <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p> <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" /> </div>)} @@ -649,7 +731,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div> </div> - + </> </div> @@ -659,7 +741,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C : <div className="PrintStyle9MasterDiv" id={`SQPrintStyle9`} style={{ fontFamily: "'Courier New', Courier, monospace" }}> - <div className="PrintStyle9-print" > + <div className="PrintStyle9-print" style={{ ...headerStyle }} > <div style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', fontWeight: '600' }} className="PrintStyle9-Branch">{GlobaldummyData ? 'XYZ Shop' : table2Data?.[0]?.BrName}</div> <div style={{ display: 'flex', flexDirection: 'column', fontWeight: '400', fontSize: '11px' }}> @@ -676,12 +758,12 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C {table2Data?.BrGSTIN &&<div>GST NO :{table2Data?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>} <div > PH : +91 {table2Data?.[0]?.BrMobile}</div> </div>} */} - <div > - <div style={{ fontSize: '14px', fontWeight: '600' }} > BILL NO :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div> - <div style={{ fontSize: '12px', fontWeight: '400' }}> { Date1} </div> - </div> - </div> + </div> + <div > + <div style={{ fontSize: '14px', fontWeight: '600' }} > BILL NO :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div> + <div style={{ fontSize: '12px', fontWeight: '400' }}> {Date1} </div> + </div> <div className='straight-line9'></div> @@ -692,22 +774,33 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C <table className="PrintStyle9-print-table"> <thead> <tr> - { SLNO && <th style={{ width: '10px' }}>S.No</th>} - { Item && <th style={{ width: '10px' }}>Item</th>} - { Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>} - { HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>} - { MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>} - { Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>} - { Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>} - { Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>} + {SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.No</th>} + {Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>} + {Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>} + {HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>} + {MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>} + {Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>} + {Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>} + {Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>} </tr> </thead> <tbody> {(TakeawayData)?.map((item, index) => { return ( - <tr key={index}> - { SLNO && <td>{index + 1}</td>} - { Item && <td style={{ display: 'flex', flexDirection: 'column' }}> + <tr key={index} + style={ + index % 2 !== 1 && rowtypeStyle === "even" + ? { + ...tableBodyStyle + } + : index % 2 === 1 && rowtypeStyle === "odd" + ? { + ...tableBodyStyle + } + : {} + }> + {SLNO && <td>{index + 1}</td>} + {Item && <td style={{ display: 'flex', flexDirection: 'column' }}> <div>{item?.ProdName}</div> <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"}){item?.BrandName !== null ? item?.BrandName : ""}  {item?.ProductIdentifierDtls?.length > 0 ? (item?.ProductIdentifierDtls?.filter((items) => !(items.SerialNumber == "" || items.SerialNumber == null)) @@ -732,10 +825,10 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </table> </> } - - <div style={{ display: 'flex', flexDirection: 'column', }}> - - + + <div style={{ display: 'flex', flexDirection: 'column',...netAmountStyle }}> + + {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) && <div style={{ display: "flex", justifyContent: "space-between", fontSize: '12px', fontWeight: '600', marginRight: '0.5rem' }}> Off : @@ -772,10 +865,10 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C <div style={{ display: 'flex', justifyContent: 'space-between' }}> <div style={{ fontWeight: '700' }}>Net Amount:</div> - <div style={{ fontWeight: '700', marginRight: '0.5rem' }}>{ Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> + <div style={{ fontWeight: '700', marginRight: '0.5rem' }}>{Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div> </div> - + <div style={{ display: 'flex', justifyContent: 'space-between' }}> @@ -905,12 +998,12 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div> </div> - + <div> - - - - + + + + {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null && !GlobaldummyData && <div> <p style={{ padding: 0, fontSize: "10px", fontWeight: "600" }}>Customer : {table2Data?.CustSuppName}</p> @@ -936,6 +1029,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C pageBreakBefore: "avoid", pageBreakInside: "avoid", minHeight: "auto", + ...footerColorStyle }} > { @@ -969,8 +1063,8 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C </div> <div> - - + + </div> </div> diff --git a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyleInvoice.jsx b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyleInvoice.jsx index a83cdb9..6bd681e 100644 --- a/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyleInvoice.jsx +++ b/src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyleInvoice.jsx @@ -1,6 +1,19 @@ import { useSelector } from 'react-redux'; -import { GlobalPritdummyData } from '../../../Features/ThemeChange/ThemeChange'; +import { + GlobalPritdummyData, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, + GlobalSelectedPrintHeaderColor, +} from '../../../Features/ThemeChange/ThemeChange'; import { isMobile } from 'react-device-detect'; import { extractLastNumberOrderId } from '../../../Services/Others'; import moment from 'moment'; @@ -18,6 +31,17 @@ const PurPrintstyleInvoice = ({ }) => { const GlobaldummyData = useSelector(GlobalPritdummyData); + const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor); + const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const SelectedRowType = useSelector(GlobalRowType); + const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor); + const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor); + const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor); + const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); let BillName = printDatas?.PrintHdrName // Function to convert number to words const numberToWords = (num) => { @@ -67,7 +91,7 @@ const PurPrintstyleInvoice = ({ // Customer Details - mapped from A4Standard CustomerDetails array customerName: table2Data?.CustomerDetails?.[0]?.CustSuppName || table2Data?.CustName - || "", + || "", customerMobile: table2Data?.CustomerDetails?.[0]?.MobileNo || table2Data?.CustMobile || "", customerGSTIN: table2Data?.CustomerDetails?.[0]?.CustGSTNo || table2Data?.CustGSTIN || "", customerAddress: { @@ -88,13 +112,16 @@ const PurPrintstyleInvoice = ({ bankDetails: BankDetails?.[0] || null }; - console.log(table2Data, "Date1Date1", invoiceData, ) + console.log(table2Data, "Date1Date1", invoiceData,) let PageSize = printDatas?.PageSize - const TakeawayData = table2Data?.ProductDetails - - const DineInData = table2Data?.ProductDetails + let printColors = printDatas?.PrintColors; + const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor; + const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor; + const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor; + const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor; + const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor; const cgstTotal = OrderDetailGST && OrderDetailGST.length > 0 ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0))?.toFixed(2) @@ -135,7 +162,7 @@ const PurPrintstyleInvoice = ({ dataSource = []; } - console.log("Final DataSource:", table2Data, ); + console.log("Final DataSource:", table2Data,); const paginatedChunks = []; @@ -158,7 +185,51 @@ const PurPrintstyleInvoice = ({ if (shouldFooterBeOnNewPage && paginatedChunks.length > 0) { paginatedChunks.push([]); // Empty chunk for footer-only page } + const headerStyle = { + backgroundColor: GlobaldummyData + ? SelectedHeaderColor + : headerColor?.background, + color: GlobaldummyData + ? SelectedHeaderFontColor + : headerColor?.font, + } + const tableHeaderStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableHeaderColor + : tableHeaderColor?.background, + + color: GlobaldummyData + ? SelectedTableHeaderFontColor + : tableHeaderColor?.font, + } + const tableBodyStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableBodyColor + : tableBodyColor?.background, + color: GlobaldummyData + ? SelectedTableBodyFontColor + : tableBodyColor?.font, + } + const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType; + const footerColorStyle = { + backgroundColor: GlobaldummyData + ? SelectedTableFooterColor + : footerColor?.background, + + color: GlobaldummyData + ? SelectedTableFooterFontColor + : footerColor?.font, + } + const netAmountStyle = { + backgroundColor: GlobaldummyData + ? SelectedNetAmountColor + : netAmtColor?.background, + + color: GlobaldummyData + ? SelectedNetAmountFontColor + : netAmtColor?.font, + } return ( <div id={`TaxInvoice`} style={{ @@ -207,7 +278,7 @@ const PurPrintstyleInvoice = ({ <> <div style={{ textAlign: 'center', marginBottom: '10px', display: "flex", justifyContent: "space-between", alignItems: "center", }}> <div></div> - <h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700' }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2> + <h2 style={{ margin: '0', fontSize: '20px', fontWeight: '700', }}>{table2Data?.OrderType === "E" ? "Estimate" : (BillName ? BillName : "Tax Invoice")}</h2> <div> <div style={{ fontSize: '10px', marginTop: '2px' }}>(ORIGINAL FOR RECIPIENT)</div> </div> @@ -232,7 +303,7 @@ const PurPrintstyleInvoice = ({ textAlign: 'left' }}> - <div style={{ fontWeight: '700', fontSize: '15px', }}> + <div style={{ fontWeight: '700', fontSize: '15px', ...headerStyle }}> {invoiceData.companyName} </div> <div style={{ fontWeight: '700', fontSize: '12px', }}>{invoiceData.companyspecname}</div> @@ -374,6 +445,7 @@ const PurPrintstyleInvoice = ({ // borderRight: '1px solid #000', borderBottom: '1px solid #000', borderTop: '1px solid #000', + ...tableHeaderStyle }}> <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>SL.No</div> <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center' }}>Description of Goods</div> @@ -392,6 +464,9 @@ const PurPrintstyleInvoice = ({ display: 'grid', gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%', // borderRight: '1px solid #000', + ...(rowtypeStyle === (index % 2 === 0 ? "even" : "odd") + ? tableBodyStyle + : {}), }}> <div style={{ padding: '8px 4px', borderRight: '1px solid #000', textAlign: 'center', fontWeight: '700' }}>{chunkIndex * chunkSize + index + 1}</div> @@ -430,7 +505,7 @@ const PurPrintstyleInvoice = ({ </div> </div> {/* CGST */} - {OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{ + {OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{ display: 'grid', gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%', // borderRight: '1px solid #000', @@ -445,13 +520,13 @@ const PurPrintstyleInvoice = ({ <div style={{ borderRight: '1px solid #000' }}></div> <div style={{ borderRight: '1px solid #000' }}></div> {<div style={{ padding: '6px 6px', textAlign: 'right', }}> - { OrderDetailGST && OrderDetailGST.length > 0 + {OrderDetailGST && OrderDetailGST.length > 0 ? Number(OrderDetailGST.reduce((sum, item) => sum + (item.CGST || 0), 0)).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "0.00"} </div>} </div>} {/* SGST */} - { OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{ + {OrderDetailGST[0]?.TaxTypeName === "WithTax" && <div style={{ display: 'grid', gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%', // borderRight: '1px solid #000', @@ -472,7 +547,7 @@ const PurPrintstyleInvoice = ({ </div> </div>} {/* IGST */} - { OrderDetailGST[0]?.TaxTypeName === "WithTax" && ( + {OrderDetailGST[0]?.TaxTypeName === "WithTax" && ( <div style={{ display: 'grid', gridTemplateColumns: '5% 40% 12% 10% 12% 8% 13%', @@ -555,7 +630,7 @@ const PurPrintstyleInvoice = ({ </div> <div style={{ borderRight: '1px solid #000' }}></div> <div style={{ borderRight: '1px solid #000' }}></div> - <div style={{ padding: '8px 6px', textAlign: 'right', }}> + <div style={{ padding: '8px 6px', textAlign: 'right',...netAmountStyle }}> ₹ {Number(invoiceData.grandTotal).toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} </div> </div>