From 25ee1333592edf40577febf2211f9ea03acff0dd Mon Sep 17 00:00:00 2001 From: Tamilselvan Date: Fri, 6 Feb 2026 12:56:38 +0530 Subject: [PATCH 1/3] chnaged --- src/Pages/StockMaster/StockList.jsx | 552 +++++++++++++++++++++++++--- src/Services/utils.js | 61 ++- 2 files changed, 557 insertions(+), 56 deletions(-) diff --git a/src/Pages/StockMaster/StockList.jsx b/src/Pages/StockMaster/StockList.jsx index e32cc5e..ad84da5 100644 --- a/src/Pages/StockMaster/StockList.jsx +++ b/src/Pages/StockMaster/StockList.jsx @@ -1,22 +1,27 @@ -import { useState, useEffect, useCallback } from 'react'; +import { useState, useEffect, useRef, useCallback } from 'react'; import { useNavigate, useLocation } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; -import { PlusOutlined, EyeOutlined } from '@ant-design/icons'; -import { Image, Table } from 'antd'; +import { PlusOutlined, EyeOutlined, PrinterFilled } from '@ant-design/icons'; +import { Image, Pagination, Space, Table } from 'antd'; import { changeBreadCrumb, getEmpAccess, } from '../../Features/AppPage/CenterPage.js'; +import QRCode from 'qrcode'; import { Tables } from '../../Components/Tables/Table'; import FormHeader from '../PageComponents/FormHeader.jsx'; import Search from '../../Components/Forms/Search.jsx'; +import { style, getPageStyle } from '../Product/Printstyles.js'; import Buttons from '../../Components/Forms/Buttons'; import { getSession, dateFormatChange, ExtractDateFormate, + printDiv, } from '../../Services/Others'; import { Messages } from '../../Components/Notifications/Messages'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; +import dayjs from 'dayjs'; import { getStockData, getProductData, @@ -45,8 +50,27 @@ import '../../Styles/Employee/EmpMaster.scss'; import { IoEye } from 'react-icons/io5'; import { useAuth } from '../../AuthContext.jsx'; import { getPreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js'; +import { + getBarcodeSessionsIDs, + getBarcodeTemplate, +} from '../../Features/Barcode/Barcode.js'; +import StickerPrintModel from '../Product/StickerPrintModal.jsx'; +import StickerPrintTemplates from '../Product/StickerTemplates.jsx'; +import QRCodeCopiesModal from '../Product/QRCodeCopiesModal.jsx'; +import { DatePicker } from 'antd'; +import { + generateBarcode, + generateCodeImage, + generateQRCode, + generateQRCodeCopy, +} from '../../Services/utils.js'; +const { RangePicker } = DatePicker; +const barCodeImage = + 'https://cdn.pixabay.com/photo/2014/04/02/16/19/barcode-306926_1280.png'; +const qrCodeImage = + 'https://cdn.pixabay.com/photo/2015/03/21/09/34/qr-683354_640.png'; const subDirectory = import.meta.env.BASE_URL; - +const previewText = 'Barcode Preview'; const items = [ { name: 'Home', @@ -59,6 +83,7 @@ const items = [ ]; const StockList = () => { + const formRef = useRef(); const { SadminuserAccess } = useAuth(); let SAAccessCommonMaster = SadminuserAccess?.find( (e) => e?.MenuName === 'Product Receipt' @@ -71,15 +96,15 @@ const StockList = () => { const AppId = getSession('AppId'); const UserId = getSession('UserId'); const UserType = getSession('UserType'); - + const [printReady, setPrintReady] = useState(false); const StockData = useSelector(purchaseDataSelector); + console.log(StockData, 'StockData'); const SupplierData = useSelector(supplierSelector); const excelDataValues = useSelector(excelDataSelector); const TaxData = useSelector(taxSelector); const [filteredInfo, setFilteredInfo] = useState({}); const [sortedInfo, setSortedInfo] = useState({}); - const [searchedText, setSearchedText] = useState(''); const [messageType, setMessageType] = useState(null); const [messageData, setMessageData] = useState(null); @@ -103,19 +128,58 @@ const StockList = () => { const [imageModal, setImageModal] = useState(false); const [currentImageIndex, setCurrentImageIndex] = useState(0); const [IMEISeriandata, setIMEISeriandata] = useState([]); + + const [base64Image, setBase64Image] = useState(null); + const [barcodeBase64Image, setBarcodeBase64Image] = useState(null); + const [dropdownValue, setDropdownValue] = useState(); + const [QrandbarcodeDatas, setQrandbarcodeDatas] = useState([]); + const [printProductName, setPrintProductName] = useState(false); + const [copies, setCopies] = useState(); + const [coresdata, setCoresdata] = useState([]); + const [barcodeTemplateDetails, setBarcodeTemplateDetails] = useState([]); + const [stockWiseQrcode, setstockWiseQrcode] = useState(false); + const [productWiseQrcode, setProductWiseQrcode] = useState(false); + const [selectedRecords, setSelectedRecords] = useState([]); + const [activeTab, setActiveTab] = useState('stock'); + const [MultiCode, setMultiCode] = useState(true); + const [TotalCount, setTotalCount] = useState(null); + const [dateStrings, setDateStrings] = useState([ + dayjs().format('YYYY-MM-DD'), + dayjs().format('YYYY-MM-DD'), + ]); + const [SearchText, setSearchText] = useState(null); + const [debouncedSearchText, setDebouncedSearchText] = useState(null); + + useEffect(() => { + const timer = setTimeout(() => { + setDebouncedSearchText(SearchText); + }, 500); + + return () => clearTimeout(timer); + }, [SearchText]); + console.log(QrandbarcodeDatas, 'QrandbarcodeDatas'); + const [templateOptions, setTemplateOptions] = useState({ + mrp: false, + barcode: false, + color: false, + eDate: false, + mDate: false, + sellingPrice: false, + productName: false, + value: '', + secondValue: '', + qrcode: false, + codeType: '', + }); + useEffect(() => { try { fetchData(); - // dispatch( - // getStockData({ CompId: CompId, BranchId: BranchId, AppId: AppId }) - // ).unwrap(); } catch (err) { console.log(err, 'err'); } getPreference(); - // if (UserType === "Employee") { - // fetchApi() - // } + getBarcodeSessionData(); }, []); useEffect(() => { @@ -154,6 +218,7 @@ const StockList = () => { useEffect(() => { dispatch(changeBreadCrumb({ items: items })); + barcodeApiData(); }, []); async function fetchData() { if (location?.state?.Notiffy) { @@ -161,7 +226,81 @@ const StockList = () => { setMessageData(location?.state?.Notiffy.messageData); } } + const fetchDataget = async ({ queryKey }) => { + const [_, dates, page] = queryKey; + const Response = await dispatch( + getPurchaseData({ + AppId: AppId, + BranchId: BranchId, + CompId: CompId, + OrderFromDate: dates?.[0] ?? '', + OrderToDate: dates?.[1] ?? '', + PageNumber: page, + }) + ).unwrap(); + if (Response?.data?.statusCode === 1) { + setTotalCount(Response?.data?.TotalCount); + return Response?.data?.data; + } else { + setTotalCount(0); + return []; + } + }; + const handleDateChange = (dates, dateStrings) => { + // setDateRange(dateStrings); + if (dateStrings[0] && dateStrings[1]) { + setDateStrings(dateStrings); + setpage(1); + } + }; + const { data, isLoading, error } = useQuery({ + queryKey: ['purchaseEntry', dateStrings, page], + queryFn: fetchDataget, + enabled: true, + staleTime: 1000 * 60 * 5, + cacheTime: 1000 * 60 * 30, + keepPreviousData: true, + refetchOnMount: 'always', + refetchOnWindowFocus: true, + refetchOnReconnect: true, + }); + const { data: countData } = useQuery({ + queryKey: ['searchPurchaseEntry', debouncedSearchText], + queryFn: searchData, + enabled: !!debouncedSearchText, + staleTime: 1000 * 60 * 5, + cacheTime: 1000 * 60 * 30, + keepPreviousData: true, + refetchOnMount: 'always', + refetchOnWindowFocus: true, + refetchOnReconnect: true, + }); + + const filteredData = debouncedSearchText ? countData || [] : data || []; + console.log(data, countData, '1111111111111111', filteredData); + async function searchData({ queryKey }) { + const [_, SearchText] = queryKey; + + const Response = await dispatch( + getPurchaseData({ + AppId: AppId, + BranchId: BranchId, + CompId: CompId, + OrderFromDate: dateStrings?.[0] ?? '', + OrderToDate: dateStrings?.[1] ?? '', + search: SearchText, + }) + ).unwrap(); + if (Response?.data?.statusCode === 1) { + setTotalCount(Response?.data?.TotalCount); + setpage(1); + return Response?.data?.data; + } else { + setTotalCount(0); + return []; + } + } const handleChange = (pagination, filters, sorter) => { setFilteredInfo(filters); setSortedInfo(sorter); @@ -172,10 +311,10 @@ const StockList = () => { }; const onSearch = (value) => { - setSearchedText(value); + setSearchText(e?.target?.value); }; const onSearchChange = (e) => { - setSearchedText(e?.target?.value); + setSearchText(e?.target?.value); }; const getPreference = async () => { const data = { AppId: AppId, CompId: CompId, BranchId: BranchId }; @@ -243,6 +382,40 @@ const StockList = () => { return allowDecimal ? num.toFixed(2) : Math.round(num).toString(); } + const QrandBarcodeDats = async (ProdDetails) => { + const result = await Promise.all( + ProdDetails.map(async (item) => { + const data = await QRCode.toDataURL(item.QRCode); + + return { + key: item.QRCode, + url: data, + productName: item.ProdName, + copiesCount: item.AcceptedQty, + StockAvailable: item.StockAvailable, + }; + }) + ); + + setQrandbarcodeDatas((prev) => [...prev, ...result]); + }; + + const Qrcode = (record) => { + setSelectedRecords(record?.ProdDetails); + QrandBarcodeDats(record?.ProdDetails); + setOpen(true); + }; + const barcodeApiData = async () => { + const getResponse = await dispatch( + getBarcodeTemplate({ compId: CompId, appId: AppId, branchId: BranchId }) + ).unwrap(); + if (getResponse?.data?.statusCode === 1) { + if (getResponse?.data?.data?.length > 0) { + const { TemplateDetails } = getResponse?.data?.data?.[0]; + setBarcodeTemplateDetails(TemplateDetails); + } + } + }; const columns = [ { title: 'Sl.No', @@ -264,13 +437,6 @@ const StockList = () => { {extractLastNumberOrderId(text, row?.FYStatus)} ), - filteredValue: [searchedText], - onFilter: (value, record) => { - return extractLastNumberOrderId(record.InvoiceNo, record?.FYStatus) - ?.toString() - .toLowerCase() - .includes(value.toLowerCase()); - }, }, { title: 'Invoice Amount', @@ -341,6 +507,29 @@ const StockList = () => { } }, }, + { + title: 'Print', + key: 'Print', + dataIndex: 'Print', + width: '100px', + align: 'center', + render: (_, record) => ( + // productData.length >= 1 ? ( + + {record?.ProdDetails?.some((item) => item?.QRCode != null) ? ( + + Qrcode(record)} + /> + + ) : ( + '-' + )} + + ), + // ) : null, + }, ]; const Proddetailcolumns = [ { @@ -475,11 +664,41 @@ const StockList = () => { navigate(`${subDirectory}setting/purchase-entry/new`); }; //------------------------------------------------------------------------------------------------------------------------------ - + const getBarcodeSessionData = async () => { + try { + let resp = await dispatch(getBarcodeSessionsIDs()).unwrap(); + if (resp?.data?.statusCode === 1) { + setCoresdata( + resp?.data?.data?.filter( + (item) => !item.ConfigName?.includes('100X13 (55MM Printable Gold)') + ) || [] + ); + } else { + setCoresdata([]); + } + } catch (error) { + console.error('Error fetching barcode session data:', error); + } + }; useEffect(() => { Bulkuploadsubdata(); }, []); + const imageUrlToBase64 = async (url) => { + try { + const response = await fetch(url); + const blob = await response.blob(); + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result); + reader.onerror = reject; + reader.readAsDataURL(blob); + }); + } catch (error) { + console.error('Error fetching or converting image:', error); + throw error; + } + }; const Bulkuploadsubdata = async () => { dispatch( getSupplierData({ AppId: AppId, BranchId: BranchId, CompId: CompId }) @@ -675,25 +894,25 @@ const StockList = () => { PaymentAmount: PaymentAmount.toFixed(2), InvoiceDate: groupInfo.InwardDate ? moment(groupInfo.InwardDate, 'YYYY-MM-DD').format( - 'YYYY-MM-DDTHH:mm:ss' - ) + 'YYYY-MM-DDTHH:mm:ss' + ) : null, SuppInvoiceNo: groupInfo.SupplierInvoiceNumber, SuppInvoiceDate: groupInfo.SupplierInvoiceDate ? moment(groupInfo.SupplierInvoiceDate, 'YYYY-MM-DD').format( - 'YYYY-MM-DDTHH:mm:ss' - ) + 'YYYY-MM-DDTHH:mm:ss' + ) : null, DeliveryChallanNo: groupInfo.DeliveryChallanNo, DeliveryInvoiceDate: groupInfo.DeliveryInvoiceDate ? moment(groupInfo.DeliveryInvoiceDate, 'YYYY-MM-DD').format( - 'YYYY-MM-DDTHH:mm:ss' - ) + 'YYYY-MM-DDTHH:mm:ss' + ) : null, DueDate: groupInfo.DueDate ? moment(groupInfo.DueDate, 'YYYY-MM-DD').format( - 'YYYY-MM-DDTHH:mm:ss' - ) + 'YYYY-MM-DDTHH:mm:ss' + ) : null, InvoiceAmount: Totalamount.toFixed(2), TaxAmount: Totaltax.toFixed(2), @@ -711,13 +930,13 @@ const StockList = () => { FreeQty: item.FreeQty, ManufDate: item.ManufactureDate ? moment(item.ManufactureDate, 'YYYY-MM-DD').format( - 'YYYY-MM-DDTHH:mm:ss' - ) + 'YYYY-MM-DDTHH:mm:ss' + ) : null, ExpDate: item.ExpireDate ? moment(item.ExpireDate, 'YYYY-MM-DD').format( - 'YYYY-MM-DDTHH:mm:ss' - ) + 'YYYY-MM-DDTHH:mm:ss' + ) : null, BatchNo: item.BatchNo, ModelNo: item.ModelNo, @@ -727,7 +946,7 @@ const StockList = () => { SellPrice: item.SalesPrice, OnePcsPrice: item.AmountPerPiece, NoOfPcs: item.NumberofPieceInside, - WhSalePrice: item.WholesalePrice + WhSalePrice: item.WholesalePrice, })), }; }); @@ -759,7 +978,17 @@ const StockList = () => { setMessageData('No data to submit. Please upload an Excel file.'); } }; - + const CoresOnChange = (params) => { + setDropdownValue(params); + formRef.current?.setFieldsValue({ Cross: params }); + const template = barcodeTemplateDetails?.find( + (find) => find.SessionName === params + ); + const checkComponent = (name) => + template?.OptionDetails?.some((some) => some.OptionName === name); + const productName = checkComponent('Product Name'); + setPrintProductName(productName); + }; // const ProductName = Productdata ?.map((e)=>e.ProdName+' '(+e.Size+' '+e.UomName)) const ProductName = Productdata?.map( (e) => `${e.ProdName} (${e.Size} ${e.UomName})` @@ -810,6 +1039,162 @@ const StockList = () => { // return allowDecimal ? num.toFixed(2) : Math.round(num).toString(); // } + + const onFinish = async () => { + const template = barcodeTemplateDetails?.find( + (find) => find.SessionName === dropdownValue + ); + const templateAvailable = template === undefined ? false : true; + + if (templateAvailable) { + const checkComponent = (name) => + template?.OptionDetails?.some((some) => some.OptionName === name); + const mrp = checkComponent('MRP'); + const barcode = checkComponent('Barcode'); + const color = checkComponent('Color'); + const eDate = checkComponent('E Date'); + const mDate = checkComponent('M Date'); + const sellingPrice = checkComponent('Selling Price'); + const productName = checkComponent('Product Name'); + const qrcode = checkComponent('Qrcode'); + const position = template.Position !== '' ? template.Position : ''; + const positionString = + template.PositionString !== '' ? template.PositionString : ''; + + setTemplateOptions({ + mrp: mrp, + barcode: barcode, + color: color, + eDate: eDate, + mDate: mDate, + sellingPrice: sellingPrice, + productName: productName, + value: position, + secondValue: positionString, + qrcode: qrcode, + codeType: template?.CodeType, + }); + } + + setPrintReady(true); + setTimeout(async () => { + switch (dropdownValue) { + case '15X15 6cross': + await printDiv( + templateAvailable ? 'label-15X156cross' : 'StickerPrints0', + style + getPageStyle(92) + ); + break; + case '22X35 3cross': + await printDiv( + templateAvailable ? '22X353cross' : 'StickerPrints1', + style + getPageStyle(105) + ); + break; + case '25X25 4cross': + await printDiv( + templateAvailable ? '25X254cross' : 'StickerPrints2', + style + getPageStyle(100) + ); + break; + case '25X50 2cross': + await printDiv( + templateAvailable ? '25X502cross' : 'StickerPrints3', + style + getPageStyle(100) + ); + break; + case '50X30 Single': + await printDiv( + templateAvailable ? '50X30Single' : 'StickerPrints4', + style + ); + break; + case '50X25 Single': + await printDiv( + templateAvailable ? '50X25Single' : 'StickerPrints5', + style + ); + break; + case '100X13 (55MM Printable)': + await printDiv( + templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6', + style + ); + break; + case '100X15 (70MM Printable)': + await printDiv( + templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7', + style + ); + break; + case '100X150': + await printDiv( + templateAvailable ? '100X150' : 'StickerPrints8', + style + ); + break; + default: + alert('! Select correct cross '); + } + handleQRStickerPrinterModelCancel(); + setPrintReady(false); + }, 100); + }; + const handleQRStickerPrinterModelCancel = () => { + setDropdownValue(); + setCopies(); + setOpen(false); + formRef?.current?.resetFields(); + setSelectedRecords([]); + setQrandbarcodeDatas([]); + // setMultiCode(false); + }; + const totalCopies = QrandbarcodeDatas?.reduce( + (sum, item) => sum + Number(item?.copiesCount || 0), + 0 + ); + + const CopiesOnChange = (params) => { + setCopies(params); + formRef.current?.setFieldsValue({ Copies: params }); + }; + + const imageTagBarcodeAndQR = useCallback( + (w = 'auto', fs = '6px', codeData = null) => { + const currentCode = codeData; + return ( + (templateOptions.barcode || templateOptions.qrcode) && ( + <> + Barcode + {templateOptions.codeType !== 'B' && ( +

+ {currentCode} +

+ )} + + ) + ); + }, + [templateOptions, MultiCode, barcodeBase64Image, base64Image] + ); + + const countOfProduct = debouncedSearchText + ? countData?.length + ? countData?.length + : 0 + : TotalCount; return (
@@ -822,14 +1207,28 @@ const StockList = () => {
-
-
+
+
+
+ + current && current > dayjs().startOf('day') + } + /> +
{
{' '} + {countOfProduct > 10 && ( + + `Total ${countOfProduct ? countOfProduct : 0} items` + } + /> + )}{' '}
{
} /> + + + {printReady && ( + + generateQRCodeCopy(QrandbarcodeDatas, code) + } + generateCodeImage={generateCodeImage} + imageTagBarcodeAndQR={imageTagBarcodeAndQR} + dropdownValue={dropdownValue} + barcodeTemplateDetails={barcodeTemplateDetails} + /> + )} + setstockWiseQrcode(false)} + type="stock" + onFinish={onFinish} + QrandbarcodeDatas={QrandbarcodeDatas} + setQrandbarcodeDatas={setQrandbarcodeDatas} + /> + + setProductWiseQrcode(false)} + type="product" + onFinish={onFinish} + QrandbarcodeDatas={QrandbarcodeDatas} + setQrandbarcodeDatas={setQrandbarcodeDatas} + />
); }; diff --git a/src/Services/utils.js b/src/Services/utils.js index 4b89d29..8228675 100644 --- a/src/Services/utils.js +++ b/src/Services/utils.js @@ -1,21 +1,52 @@ -import { useSelector, useDispatch } from "react-redux"; +import { useSelector, useDispatch } from 'react-redux'; import { - ChangeTotalAmount, - globalExtraTotalAmount, -} from "../Features/ExteraCharges/ExtraCharges"; + ChangeTotalAmount, + globalExtraTotalAmount, +} from '../Features/ExteraCharges/ExtraCharges'; export const useUtilsComponent = () => { - const dispatch = useDispatch(); - const extraCharges = useSelector(globalExtraTotalAmount); + const dispatch = useDispatch(); + const extraCharges = useSelector(globalExtraTotalAmount); - const removeExtraCharge = (item) => { - const filtered = extraCharges?.filter( - (e) => e?.localId !== item?.localId - ); - dispatch(ChangeTotalAmount(filtered)); - }; + const removeExtraCharge = (item) => { + const filtered = extraCharges?.filter((e) => e?.localId !== item?.localId); + dispatch(ChangeTotalAmount(filtered)); + }; - return { - removeExtraCharge, - }; + return { + removeExtraCharge, + }; +}; +export const generateBarcode = (code) => { + try { + const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + JsBarcode(svg, code, { + format: 'CODE128', + displayValue: false, + lineColor: '#030303', + width: 2, + height: 40, + }); + const svgData = new XMLSerializer().serializeToString(svg); + return `data:image/svg+xml;base64,${btoa(svgData)}`; + } catch (error) { + return null; + } +}; +export const generateQRCode = (QrandbarcodeDatas, code) => { + let Data = QrandbarcodeDatas?.find((e) => e?.key === code)?.url; + return Data; +}; +export const generateQRCodeCopy = (QrandbarcodeDatas, code) => { + const found = QrandbarcodeDatas?.find((e) => e?.key === code); + + const count = Number(found?.copiesCount); + return Number.isFinite(count) && count > 0 ? count : 0; +}; +export const generateCodeImage = (code, codeType = 'Q') => { + if (codeType === 'B') { + return generateBarcode(code); + } else { + return generateQRCode(QrandbarcodeDatas, code); + } }; From f04b00474d4f124bdc0b8051d035ecb9e004faf9 Mon Sep 17 00:00:00 2001 From: Tamilselvan Date: Fri, 6 Feb 2026 13:05:04 +0530 Subject: [PATCH 2/3] convert into components --- src/Features/StockMaster/StockMaster.js | 48 +- src/Pages/Product/QRCodeCopiesModal.jsx | 94 ++ src/Pages/Product/StickerPrintModal.jsx | 1435 ++++++++++++++++++ src/Pages/Product/StickerTemplates.jsx | 1826 +++++++++++++++++++++++ 4 files changed, 3387 insertions(+), 16 deletions(-) create mode 100644 src/Pages/Product/QRCodeCopiesModal.jsx create mode 100644 src/Pages/Product/StickerPrintModal.jsx create mode 100644 src/Pages/Product/StickerTemplates.jsx diff --git a/src/Features/StockMaster/StockMaster.js b/src/Features/StockMaster/StockMaster.js index 1724919..9944eb5 100644 --- a/src/Features/StockMaster/StockMaster.js +++ b/src/Features/StockMaster/StockMaster.js @@ -1,6 +1,8 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit'; -import { axiosRetailInstanceData,axiosRetailOcrData } from '../AuthenicationToken/AuthenticationToken'; - +import { + axiosRetailInstanceData, + axiosRetailOcrData, +} from '../AuthenicationToken/AuthenticationToken'; // get Product dropdown export const getProductData = createAsyncThunk( @@ -28,17 +30,13 @@ export const getInvoiceImageData = createAsyncThunk( if (!file) return; const formData = new FormData(); - formData.append("file", file); // 👈 actual file here + formData.append('file', file); // 👈 actual file here - const response = await axiosRetailOcrData.post( - "/invoice", - formData, - { - headers: { - "Content-Type": "multipart/form-data", - }, - } - ); + const response = await axiosRetailOcrData.post('/invoice', formData, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }); return response.data; } @@ -125,16 +123,34 @@ export const postPurchaseData = createAsyncThunk( export const getPurchaseData = createAsyncThunk( 'Stock/getPurchaseData', async (ProdData) => { + console.log(ProdData, 'ProdData'); if ( ProdData?.CompId != null && ProdData?.CompId != undefined && ProdData?.BranchId != null && ProdData?.BranchId != undefined && ProdData?.AppId != null && - ProdData?.AppId != undefined + ProdData?.AppId != undefined && + ProdData?.OrderFromDate && + ProdData?.OrderToDate ) { + const params = new URLSearchParams({ + compId: ProdData.CompId, + branchId: ProdData.BranchId, + appId: ProdData.AppId, + fromDate: ProdData.OrderFromDate, + toDate: ProdData.OrderToDate, + }); + + if (ProdData?.search) { + params.append('searchText', ProdData.search); + } + if (ProdData?.PageNumber) { + params.append('pageNumber', ProdData.PageNumber); + } + return await axiosRetailInstanceData.get( - `/Purchase?compId=${ProdData?.CompId}&branchId=${ProdData?.BranchId}&appId=${ProdData?.AppId}` + `/Purchase?${params.toString()}` ); } } @@ -306,7 +322,7 @@ const StockSlice = createSlice({ name: 'Stock', initialState, extraReducers: (builder) => { - builder.addCase(getProductData.fulfilled, (state, action) => { + (builder.addCase(getProductData.fulfilled, (state, action) => { if (action?.payload?.status) { state.ProductData = action?.payload?.data?.data?.filter( (item) => item?.ProdTypeName === 'Product' @@ -335,7 +351,7 @@ const StockSlice = createSlice({ } else { state.PurchaseData = []; } - }); + })); }, }); diff --git a/src/Pages/Product/QRCodeCopiesModal.jsx b/src/Pages/Product/QRCodeCopiesModal.jsx new file mode 100644 index 0000000..5d3cc66 --- /dev/null +++ b/src/Pages/Product/QRCodeCopiesModal.jsx @@ -0,0 +1,94 @@ +import { Table, message } from 'antd'; +import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx'; + +const QRCodeCopiesModal = ({ + open, + onClose, + type = 'stock', // 'stock' or 'product' + onFinish, + QrandbarcodeDatas, + setQrandbarcodeDatas, +}) => { + const title = type === 'stock' ? 'Stock Wise Qrcode' : 'Product Wise Qrcode'; + const showStockIndication = type === 'stock'; + const totalCopies = QrandbarcodeDatas?.reduce( + (sum, item) => sum + Number(item?.copiesCount || 0), + 0 + ); + const handleSubmit = () => { + if (totalCopies == 0) { + message.error('Please enter copies count'); + return; + } else { + onClose(); + onFinish(); + } + }; + + const columns = [ + { title: 'Product Name', dataIndex: 'productName', key: 'productName' }, + { + title: 'Copies Count', + dataIndex: 'copiesCount', + key: 'copiesCount', + render: (text, record) => ( + { + const newValue = + type === 'product' + ? parseInt(e.target.value) || 1 + : parseInt(e.target.value); + setQrandbarcodeDatas((prev) => + prev.map((item) => + item.key === record.key + ? { ...item, copiesCount: newValue } + : item + ) + ); + }} + style={{ width: '80px' }} + /> + ), + }, + ]; + + return ( + +
+ (record.StockAvailable === 'N' ? 'row-red' : '') + : undefined + } + /> + + {showStockIndication && ( +
+

+ Stock is not Maintained +
+ )} + + } + /> + ); +}; + +export default QRCodeCopiesModal; diff --git a/src/Pages/Product/StickerPrintModal.jsx b/src/Pages/Product/StickerPrintModal.jsx new file mode 100644 index 0000000..b9fd032 --- /dev/null +++ b/src/Pages/Product/StickerPrintModal.jsx @@ -0,0 +1,1435 @@ +import { Form, Empty } from 'antd'; +import { GiHorizontalFlip, GiVerticalFlip } from 'react-icons/gi'; +import { FaPlus } from 'react-icons/fa6'; +import { InputField } from '../../Components/Forms/InputField.jsx'; +import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx'; +import Buttons from '../../Components/Forms/Buttons'; +import { validateSafeInput } from '../../Services/Others'; +import { useEffect } from 'react'; + +const StickerPrintModel = ({ + open, + handleCancel, + formRef, + onFinish, + MultiCode, + activeTab, + setActiveTab, + selectedRecords, + coresdata, + dropdownValue, + CoresOnChange, + barcodeTemplateDetails, + detail, + proName, + nickName, + ProdId, + size, + CopiesOnChange, + printProductName, + totalCopies, + setstockWiseQrcode, + setProductWiseQrcode, + setNickName, + templateOptions, +}) => { + const secondValueStyle = { + flexDirection: templateOptions.secondValue === 'R' ? 'row' : 'row-reverse', + }; + const valueStyleRow = { + flexDirection: templateOptions.value === 'R' ? 'row' : 'row-reverse', + }; + const valueStyleColumn = { + flexDirection: templateOptions.value === 'T' ? 'column' : 'column-reverse', + }; + const barCodeImage = + 'https://cdn.pixabay.com/photo/2014/04/02/16/19/barcode-306926_1280.png'; + const qrCodeImage = + 'https://cdn.pixabay.com/photo/2015/03/21/09/34/qr-683354_640.png'; + const previewText = 'Barcode Preview'; + const formatDate = (dateStr) => { + const d = new Date(dateStr); + + const day = String(d.getDate()).padStart(2, '0'); + + const months = [ + 'JAN', + 'FEB', + 'MAR', + 'APR', + 'MAY', + 'JUN', + 'JUL', + 'AUG', + 'SEP', + 'OCT', + 'NOV', + 'DEC', + ]; + const month = months[d.getMonth()]; + + const year = String(d.getFullYear()).slice(-2); + + return `${day}-${month}-${year}`; + }; + const colorText = 'Color : Red'; + const handleImageTag = (w, h = '40px', barcodeOrQr) => { + return ( + {previewText} + ); + }; + useEffect(() => { + if (coresdata?.length > 0 && open) { + CoresOnChange(coresdata?.[0].ConfigName); + } + }, [open]); + return ( + + {MultiCode && ( +
+
setActiveTab('stock')} + > + Stock Wise{' '} + ({selectedRecords?.length}) +
+
{ + e.stopPropagation(); + setstockWiseQrcode(true); + }} + style={{ + animation: + activeTab === 'stock' ? 'blink 1s infinite' : 'none', + }} + > + Add +
+
+
+ +
setActiveTab('product')} + > + Product Wise{' '} + ({selectedRecords?.length}) +
{ + e.stopPropagation(); + setProductWiseQrcode(true); + }} + style={{ + animation: + activeTab === 'product' ? 'blink 1s infinite' : 'none', + }} + > + Add +
+
+
+ )} +
+ +
+ +
+
+ {coresdata?.map((option) => ( +
CoresOnChange(option.ConfigName)} + className={`radio-sidebar-item ${dropdownValue === option.ConfigName ? 'selected' : ''}`} + > +
+ {option.ConfigName} +
+
+ ))} +
+
+
+
PREVIEW
+ {(() => { + const template = barcodeTemplateDetails?.find( + (find) => find.SessionName === dropdownValue + ); + const templateAvailable = + template === undefined ? false : true; + const checkComponent = (name) => + template?.OptionDetails?.some( + (some) => some.OptionName === name + ); + + const mrp = checkComponent('MRP'); + const qrcode = checkComponent('Qrcode'); + const barcode = checkComponent('Barcode'); + const color = checkComponent('Color'); + const eDate = checkComponent('E Date'); + const mDate = checkComponent('M Date'); + const sellingPrice = checkComponent('Selling Price'); + const productName = checkComponent('Product Name'); + const barcodeOrQr = template?.CodeType + ? template?.CodeType === 'B' + : true; + const templateValue = + template?.Position !== '' ? template?.Position : ''; + switch (dropdownValue) { + case '15X15 6cross': + return templateAvailable ? ( + !(productName || barcode || qrcode || mrp) ? ( + + ) : ( + <> +
+ {[...Array(6)].map((_, index) => ( +
+
+ {(barcode || qrcode) && + templateValue === 'T' && + handleImageTag( + barcodeOrQr ? 50 : 20, + 20, + barcodeOrQr + )} + {productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {(barcode || qrcode) && + templateValue === 'C' && + handleImageTag( + barcodeOrQr ? 50 : 20, + 20, + barcodeOrQr + )} + {mrp && ( +
+ {'₹:' + + (detail?.MRP + ? detail?.MRP + : 0.0)} +
+ )} + {(barcode || qrcode) && + templateValue === 'B' && + handleImageTag( + barcodeOrQr ? 50 : 20, + 20, + barcodeOrQr + )} +
+
+ ))} +
+
+

+ Vertical +

+ {' '} +
+ - {'15mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'15mm'} +

+
+ + ) + ) : ( + <> +
+ {Array.from({ length: 6 }).map((_, index) => ( +
+ {`QR +
+ ))} +
+
+

+ Vertical +

+ {' '} +
+ - {'15mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'15mm'} +

+
+ + ); + case '22X35 3cross': + return templateAvailable ? ( + !(barcode || qrcode || mrp) ? ( + + ) : ( + <> +
+ {[...Array(3)].map((_, index) => ( +
+
+ {(barcode || qrcode) && + handleImageTag( + barcodeOrQr ? 100 : 35, + 35, + barcodeOrQr + )} + {(productName || mrp) && ( +
+ {productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName || 'Product Name'} +
+ )} + {mrp && ( +
+ {'₹:' + + (detail?.MRP + ? detail?.MRP + : 10.0)} +
+ )} +
+ )} +
+
+ ))} +
+
+

+ Vertical +

+ {' '} +
+ - {'22mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'35mm'} +

+
+ + ) + ) : ( + <> +
+ {Array?.from({ length: 3 })?.map( + (_, index) => ( +
+
+

8 ? 'text-ellipsis' : ''}`} + > + {proName || 'Product Name'} ( + {size || '1 PCS'}) +

+

{ProdId || 'QR579890770'}

+
+ +
+ ) + )} +
+
+

+ Vertical +

+ {' '} +
+ - {'22mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'35mm'} +

+
+ + ); + case '25X25 4cross': + return templateAvailable ? ( + !( + productName || + mDate || + eDate || + barcode || + qrcode || + mrp + ) ? ( + + ) : ( + <> +
+ {[...Array(4)].map((_, index) => ( +
+
+ {(barcode || qrcode) && + templateValue === 'T' && + handleImageTag( + barcodeOrQr ? 60 : 35, + 35, + barcodeOrQr + )} + {productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {mrp && ( +
+ {'₹:' + + (detail?.MRP + ? detail?.MRP + : 10.0)} +
+ )} + {(barcode || qrcode) && + templateValue === 'C' && + handleImageTag( + barcodeOrQr ? 60 : 35, + 35, + barcodeOrQr + )} + {mDate && ( +
+ )} + {eDate && ( +
+ DD-MM-YYYY +
+ )} + {(barcode || qrcode) && + templateValue === 'B' && + handleImageTag( + barcodeOrQr ? 60 : 35, + 35, + barcodeOrQr + )} +
+
+ ))} +
+
+

+ Vertical +

+ {' '} +
+ - {'25mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'25mm'} +

+
+ + ) + ) : ( + <> +
+ {Array.from({ length: 4 })?.map( + (_, index) => ( +
+

12 ? 'text-ellipsis' : ''}`} + > + + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} + + + ({size || '1 PCS'}) + +

+
+ barcode +

+ {ProdId || 'QR8575956'} +

+
+
+ ) + )} +
+
+

+ Vertical +

+ {' '} +
+ - {'25mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'25mm'} +

+
+ + ); + case '25X50 2cross': + return templateAvailable ? ( + !(productName || barcode || qrcode || mrp) ? ( + + ) : ( + <> +
+ {[...Array(2)].map((_, index) => ( +
+
+ {(barcode || qrcode) && + handleImageTag( + barcodeOrQr ? 140 : 30, + 30, + barcodeOrQr + )} + {productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {mrp && ( +
+ {'₹:' + + (detail?.MRP + ? detail?.MRP + : 10.0)} +
+ )} +
+
+ ))} +
+
+

+ Vertical +

+ {' '} +
+ - {'25mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'50mm'} +

+
+ + ) + ) : ( + <> +
+ {Array.from({ length: 2 })?.map( + (_, index) => ( +
+
+

12 ? 'text-ellipsis' : ''}`} + > + {proName || 'Product Name'} ( + {size || '1 PCS'}) +

+

{ProdId || 'QR74478578'}

+
+ +
+ ) + )} +
+
+

+ Vertical +

+ {' '} +
+ - {'25mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'50mm'} +

+
+ + ); + case '50X30 Single': + return templateAvailable ? ( + !( + productName || + mDate || + eDate || + barcode || + qrcode || + mrp + ) ? ( + + ) : ( + <> +
+
+ {productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {mDate && + detail?.ProdVariantPriceDetails?.[0] + ?.ManufDate && ( +
+ {formatDate( + detail + ?.ProdVariantPriceDetails?.[0] + ?.ManufDate + )} +
+ )} + {eDate && + detail?.ProdVariantPriceDetails?.[0] + ?.ExpDate && ( +
+ {formatDate( + detail + ?.ProdVariantPriceDetails?.[0] + ?.ExpDate + )} +
+ )} +
+
+ {(barcode || qrcode) && + handleImageTag( + barcodeOrQr ? 70 : 35, + 35, + barcodeOrQr + )} + {mrp && ( +
+ {'MRP : ' + (detail?.MRP || 10.0)} +
+ )} +
+
+
+

+ Vertical +

+ {' '} +
+ - {'30mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'50mm'} +

+
+ + ) + ) : ( + <> +
+
+
+

12 ? 'text-ellipsis' : ''}`} + > + {proName || 'Product Name'} ( + {size || '1 PCS'}) +

+

{ProdId || 'QR987968'}

+
+ +
+
+
+

+ Vertical +

+ {' '} +
+ - {'30mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'50mm'} +

+
+ + ); + case '50X25 Single': + return templateAvailable ? ( + !( + productName || + mDate || + barcode || + qrcode || + mrp + ) ? ( + + ) : ( + <> +
+
+ {productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {mDate && + detail?.ProdVariantPriceDetails?.[0] + ?.ManufDate && ( +
+ {formatDate( + detail + ?.ProdVariantPriceDetails?.[0] + ?.ManufDate + )} +
+ )} +
+
+ {(barcode || qrcode) && + handleImageTag( + barcodeOrQr ? 70 : 35, + 35, + barcodeOrQr + )} + {mrp && ( +
+ {'MRP : ' + (detail?.MRP || '10.0')} +
+ )} +
+
+
+

+ Vertical +

+ {' '} +
+ - {'25mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'50mm'} +

+
+ + ) + ) : ( + <> +
+
+
+

12 ? 'text-ellipsis' : ''}`} + > + {proName || 'Product Name'} ( + {size || '1 PCS'}) +

+

{ProdId || 'QR8798639'}

+
+ +
+
+
+

+ Vertical +

+ {' '} +
+ - {'25mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'50mm'} +

+
+ + ); + case '100X13 (55MM Printable)': + return templateAvailable ? ( + !( + productName || + sellingPrice || + barcode || + qrcode + ) ? ( + + ) : ( + <> +
+ {(barcode || qrcode) && + handleImageTag( + barcodeOrQr ? 140 : 35, + 35, + barcodeOrQr + )} +
+ {productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {sellingPrice && ( +
+ {`Selling Price : ` + + (detail?.SellPrice || '10.0')} +
+ )} +
+
+
+

+ Vertical +

+ {' '} +
+ - {'13mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'100mm'} +

+
+ + ) + ) : ( + <> +
+
+
+

12 ? 'text-ellipsis' : ''}`} + > + {proName || 'Product Name'} ( + {size || '1 PCS'}) +

+

{ProdId || 'QR0970970'}

+
+ +
+
+
+

+ Vertical +

+ {' '} +
+ - {'13mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'100mm'} +

+
+ + ); + case '100X15 (70MM Printable)': + return templateAvailable ? ( + !( + productName || + sellingPrice || + barcode || + qrcode || + mrp + ) ? ( + + ) : ( + <> +
+
+ {productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {mrp && ( +
+ {'MRP : ' + (detail?.MRP || '10.0')} +
+ )} + {sellingPrice && ( +
+ {`Selling Price : ` + + (detail?.SellPrice || '10.0')} +
+ )} +
+
+ {(barcode || qrcode) && + handleImageTag( + barcodeOrQr ? 90 : 40, + null, + barcodeOrQr + )} +
+
+
+

+ Vertical +

+ {' '} +
+ - {'15mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'100mm'} +

+
+ + ) + ) : ( + <> +
+
+
+

12 ? 'text-ellipsis' : ''}`} + > + {proName || 'Product Name'} ( + {size || '1 PCS'}) +

+

{ProdId || 'QR858755'}

+
+ +
+
+
+

+ Vertical +

+ {' '} +
+ - {'15mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'100mm'} +

+
+ + ); + case '100X150': + return templateAvailable ? ( + !( + productName || + sellingPrice || + mDate || + eDate || + color || + barcode || + qrcode || + mrp + ) ? ( + + ) : ( + <> +
+
+ {productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {sellingPrice && ( +
+ {`Selling Price : ` + + detail?.SellPrice} +
+ )} + {mDate && + detail?.ProdVariantPriceDetails?.[0] + ?.ManufDate && ( +
+ {formatDate( + detail + ?.ProdVariantPriceDetails?.[0] + ?.ManufDate + )} +
+ )} + {eDate && + detail?.ProdVariantPriceDetails?.[0] + ?.ExpDate && ( +
+ {formatDate( + detail + ?.ProdVariantPriceDetails?.[0] + ?.ExpDate + )} +
+ )} + {color && ( +
+ {colorText} +
+ )} +
+
+ {(barcode || qrcode) && + handleImageTag( + barcodeOrQr ? 140 : 35, + 35, + barcodeOrQr + )} + {mrp && ( +
+ {'MRP : ' + (detail?.MRP || '10.0')} +
+ )} +
+
+
+

+ Vertical +

+ {' '} +
+ - {'150mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'100mm'} +

+
+ + ) + ) : ( + <> +
+
+
+

{detail?.BrName}

+
+
+
+

+ Product Name:{' '} +

12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +

+

+

+ SIZE:{' '} + + {size || '1 PCS'} + +

+

+ Id:{' '} + + {ProdId || 'QR86868'} + +

+

+ MRP:{' '} + + {'MRP : ' + (detail?.MRP || '10.0')} + +

+

+ Selling Price:{' '} + + {detail?.SellPrice || '10.0'} + +

+
+ +
+
+
+
+

+ Vertical +

+ {' '} +
+ - {'150mm'} +

+

+ Horizontal +

+ {' '} +
+ - {'100mm'} +

+
+ + ); + default: + return ; + } + })()} +

{dropdownValue}

+
+
+
+
+ + {!MultiCode && ( + { + await validateSafeInput(value); + return Promise.resolve(); + }, + }, + ]} + > + Copies} + isOnChange={false} + onChange={(e) => { + CopiesOnChange(e?.target?.value); + }} + /> + + )} + {proName?.length > 12 && printProductName && !MultiCode && ( + <> +
+ Note: Product name is very long. Please add a short/nick name + to proceed print. +
+ + { + setNickName(e?.target?.value); + }} + maxLength={12} + /> + + + )} +
+
+ {(!MultiCode || totalCopies > 0) && ( + + )} + {MultiCode && totalCopies === 0 && ( + + )} +
+ + } + /> + ); +}; + +export default StickerPrintModel; diff --git a/src/Pages/Product/StickerTemplates.jsx b/src/Pages/Product/StickerTemplates.jsx new file mode 100644 index 0000000..af64540 --- /dev/null +++ b/src/Pages/Product/StickerTemplates.jsx @@ -0,0 +1,1826 @@ +const StickerPrintTemplates = ({ + selectedRecords, + copies, + nickName, + proName, + ProdId, + size, + detail, + templateOptions, + base64Image, + QrandbarcodeDatas, + MultiCode, + generateQRCodeCopy, + generateCodeImage, + imageTagBarcodeAndQR, + dropdownValue, + barcodeTemplateDetails, +}) => { + const template = barcodeTemplateDetails?.find( + (find) => find.SessionName === dropdownValue + ); + const templateAvailable = template === undefined ? false : true; + + function choosenPrintStyle(dropdownValue, templateAvailable) { + switch (dropdownValue) { + case '15X15 6cross': + return templateAvailable ? 'label-15X156cross' : 'StickerPrints0'; + + case '22X35 3cross': + return templateAvailable ? '22X353cross' : 'StickerPrints1'; + + case '25X25 4cross': + return templateAvailable ? '25X254cross' : 'StickerPrints2'; + + case '25X50 2cross': + return templateAvailable ? '25X502cross' : 'StickerPrints3'; + + case '50X30 Single': + return templateAvailable ? '50X30Single' : 'StickerPrints4'; + + case '50X25 Single': + return templateAvailable ? '50X25Single' : 'StickerPrints5'; + + case '100X13 (55MM Printable)': + return templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6'; + + case '100X15 (70MM Printable)': + return templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7'; + + case '100X150': + return templateAvailable ? '100X150' : 'StickerPrints8'; + + default: + return null; + } + } + const selectStyle = choosenPrintStyle(dropdownValue, templateAvailable); + const secondValueStyle = { + flexDirection: templateOptions.secondValue === 'R' ? 'row' : 'row-reverse', + }; + const valueStyleRow = { + flexDirection: templateOptions.value === 'R' ? 'row' : 'row-reverse', + }; + const valueStyleColumn = { + flexDirection: templateOptions.value === 'T' ? 'column' : 'column-reverse', + }; + const formatDate = (dateStr) => { + const d = new Date(dateStr); + + const day = String(d.getDate()).padStart(2, '0'); + + const months = [ + 'JAN', + 'FEB', + 'MAR', + 'APR', + 'MAY', + 'JUN', + 'JUL', + 'AUG', + 'SEP', + 'OCT', + 'NOV', + 'DEC', + ]; + const month = months[d.getMonth()]; + + const year = String(d.getFullYear()).slice(-2); + + return `${day}-${month}-${year}`; + }; + const colorText = 'Color : Red'; + console.log(selectStyle, 'selectStyle'); + return ( +
+ {selectStyle == 'StickerPrints0' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + console.log(copyCount, 'copyCountcopyCountcopyCount'); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+ +
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+ +
+ ))} +
+
+ )} + {selectStyle == 'StickerPrints1' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + return Array?.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+

8 ? 'text-clamp-2' : ''}`} + > + {record.ProdName} ({record.Size} + {record.UomName}) +

+

{record.QRCode}

+
+ +
+ ) + ); + }) + : Array?.from({ length: copies })?.map((_, index) => ( +
+
+

8 ? 'text-ellipsis' : ''}`} + > + {proName} ({size}) +

+

{ProdId}

+
+ +
+ ))} +
+
+ )} + {selectStyle == 'StickerPrints2' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + console.log(copyCount, 'copyCount2'); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+

14 ? 'text-ellipsis' : ''}`} + > + + {record?.NickName || record?.ProdName} + + + ({record?.Size} + {record?.UomName}) + +

+
+ barcode +

+ {record?.QRCode || record?.ProdId} +

+
+
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+

14 ? 'text-ellipsis' : ''}`} + > + + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} + + + ({size}) + +

+
+ barcode +

{ProdId}

+
+
+ ))} +
+
+ )} + {selectStyle == 'StickerPrints3' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + console.log(copyCount, 'copyCount3'); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+

12 ? 'text-clamp-2' : ''}`} + > + {record?.NickName || record?.ProdName} ( + {record?.Size} + {record?.UomName}) +

+

{record?.QRCode || record?.ProdId}

+
+ +
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+

12 ? 'text-clamp-2' : ''}`} + > + {proName} ({size}) +

+

{ProdId}

+
+ +
+ ))} +
+
+ )} + {selectStyle == 'StickerPrints4' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + console.log(copyCount, 'copyCount4'); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+

12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName || record?.ProdName} ( + {record?.Size} + {record?.UomName}) +

+

{record?.QRCode || record?.ProdId}

+
+ +
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+

12 ? 'text-ellipsis' : ''}`} + > + {proName} ({size}) +

+

{ProdId}

+
+ +
+ ))} +
+
+ )} + {selectStyle == 'StickerPrints5' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + console.log(copyCount, 'copyCount5'); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+

12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName || record?.ProdName} ( + {record?.Size} + {record?.UomName}) +

+

{record?.QRCode || record?.ProdId}

+
+ +
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+

12 ? 'text-ellipsis' : ''}`} + > + {proName} ({size}) +

+

{ProdId}

+
+ +
+ ))} +
+
+ )} + {selectStyle == 'StickerPrints6' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + console.log(copyCount, 'copyCount6'); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+

12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName || record?.ProdName} ( + {record?.Size} + {record?.UomName}) +

+

{record?.QRCode || record?.ProdId}

+
+ +
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+

12 ? 'text-ellipsis' : ''}`} + > + {proName} ({size}) +

+

{ProdId}

+
+ +
+ ))} +
+
+ )} + {selectStyle == 'StickerPrints7' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + console.log(copyCount, 'copyCount7'); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+

12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName || record?.ProdName} ( + {record?.Size} + {record?.UomName}) +

+

{record?.QRCode || record?.ProdId}

+
+ +
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+

12 ? 'text-ellipsis' : ''}`} + > + {proName} ({size}) +

+

{ProdId}

+
+ +
+ ))} +
+
+ )} + {selectStyle == 'StickerPrints8' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + console.log(copyCount, 'copyCount8'); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+

{record?.BrName || detail?.BrName}

+
+
+
+

+ Product Name:{' '} +

12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName || record?.ProdName} +

+

+

+ SIZE:{' '} + + {record?.Size} + {record?.UomName} + +

+

+ Id:{' '} + + {record?.QRCode || record?.ProdId} + +

+

+ MRP:{' '} + + {'MRP : ' + record?.MRP} + +

+

+ Selling Price:{' '} + + {record?.SellPrice} + +

+
+ +
+
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+

{detail?.BrName}

+
+
+
+

+ Product Name:{' '} +

12 ? 'text-ellipsis' : ''}`} + > + {proName} +

+

+

+ SIZE: {size} +

+

+ Id: {ProdId} +

+

+ MRP:{' '} + + {'MRP : ' + detail?.MRP} + +

+

+ Selling Price:{' '} + + {detail?.SellPrice} + +

+
+ +
+
+ ))} +
+
+ )} + {selectStyle == '25X254cross' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => { + const hasProductName = !!templateOptions.productName; + const hasMrp = !!templateOptions.mrp; + + const hasMDate = + templateOptions.mDate && record?.ManufDate; + + const hasEDate = templateOptions.eDate && record?.ExpDate; + + // IMAGE SIZE LOGIC + let imageSize = 50; + if (!hasMDate && !hasEDate) { + imageSize = 52; + } + + if (!hasProductName || !hasMrp) { + imageSize = 60; + } + + if (!hasProductName && !hasMrp) { + imageSize = 80; + } + + // FLEX DIRECTION LOGIC + const forceColumnLayout = + !hasProductName || !hasMrp || (!hasMDate && !hasEDate); + return ( +
+
+ {templateOptions.value === 'T' && ( +
+ {imageTagBarcodeAndQR( + templateOptions.codeType === 'B' + ? '90%' + : `${imageSize}%`, + '7px', + record?.QRCode || record?.ProdId + )} +
+ )} + {hasProductName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName || record?.ProdName} +
+ )} + {hasMrp && ( +
+ {'₹' + record?.MRP} +
+ )} + {templateOptions.value === 'C' && ( +
+ {imageTagBarcodeAndQR( + templateOptions.codeType === 'B' + ? '90%' + : `${imageSize}%`, + '7px', + record?.QRCode || record?.ProdId + )} +
+ )} + {(hasMDate || hasEDate) && ( +
+ {hasMDate && ( +
+ {hasMDate && !hasEDate ? 'MFG: ' : ''} + {formatDate(record?.ManufDate)} +
+ )} + {hasMDate && hasEDate && ( + | + )} + {hasEDate && ( +
+ {!hasMDate && hasEDate ? 'EXP: ' : ''} + {formatDate(record?.ExpDate)} +
+ )} +
+ )} + {templateOptions.value === 'B' && ( +
+ {imageTagBarcodeAndQR( + templateOptions.codeType === 'B' + ? '25mm' + : `${imageSize}%`, + '7px', + record?.QRCode || record?.ProdId + )} +
+ )} +
+
+ ); + } + ); + }) + : Array.from({ length: copies })?.map((_, index) => { + const hasProductName = !!templateOptions.productName; + const hasMrp = !!templateOptions.mrp; + + const hasMDate = + templateOptions.mDate && + detail?.ProdVariantPriceDetails?.[0]?.ManufDate; + + const hasEDate = + templateOptions.eDate && + detail?.ProdVariantPriceDetails?.[0]?.ExpDate; + + // IMAGE SIZE LOGIC + let imageSize = 50; + if (!hasMDate && !hasEDate) { + imageSize = 52; + } + + if (!hasProductName || !hasMrp) { + imageSize = 60; + } + + if (!hasProductName && !hasMrp) { + imageSize = 80; + } + + // FLEX DIRECTION LOGIC + const forceColumnLayout = + !hasProductName || !hasMrp || (!hasMDate && !hasEDate); + return ( +
+
+ {templateOptions.value === 'T' && ( +
+ {imageTagBarcodeAndQR( + templateOptions.codeType === 'B' + ? '90%' + : `${imageSize}%`, + '7px' + )} +
+ )} + {hasProductName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {hasMrp && ( +
+ {'₹' + detail?.MRP} +
+ )} + {templateOptions.value === 'C' && ( +
+ {imageTagBarcodeAndQR( + templateOptions.codeType === 'B' + ? '90%' + : `${imageSize}%`, + '7px' + )} +
+ )} + {(hasMDate || hasEDate) && ( +
+ {hasMDate && ( +
+ {hasMDate && !hasEDate ? 'MFG: ' : ''} + {formatDate( + detail?.ProdVariantPriceDetails?.[0] + ?.ManufDate + )} +
+ )} + {hasMDate && hasEDate && ( + | + )} + {hasEDate && ( +
+ {!hasMDate && hasEDate ? 'EXP: ' : ''} + {formatDate( + detail?.ProdVariantPriceDetails?.[0]?.ExpDate + )} +
+ )} +
+ )} + {templateOptions.value === 'B' && ( +
+ {imageTagBarcodeAndQR( + templateOptions.codeType === 'B' + ? '25mm' + : `${imageSize}%`, + '7px' + )} +
+ )} +
+
+ ); + })} +
+
+ )} + + {selectStyle == '25X502cross' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+ {imageTagBarcodeAndQR( + templateOptions.codeType === 'B' ? '45mm' : '16mm', + '6px', + record?.QRCode || record?.ProdId + )} + {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName || record?.ProdName} +
+ )} + {templateOptions.mrp && ( +
+ {'MRP : ' + record?.MRP} +
+ )} +
+
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+ {imageTagBarcodeAndQR( + templateOptions.codeType === 'B' ? '45mm' : '16mm' + )} + {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {proName} +
+ )} + {templateOptions.mrp && ( +
+ {'MRP : ' + detail?.MRP} +
+ )} +
+
+ ))} +
+
+ )} + + {selectStyle == '50X30Single' && ( +
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+ {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName || record?.ProdName} +
+ )} + {templateOptions.mDate && record?.ManufDate && ( +
+ {record?.ManufDate} +
+ )} + {templateOptions.eDate && record?.ExpDate && ( +
+ {record?.ExpDate} +
+ )} +
+
+ {imageTagBarcodeAndQR( + '70%', + '6px', + record?.QRCode || record?.ProdId + )} + {templateOptions.mrp && ( +
{'MRP : ' + record?.MRP}
+ )} +
+
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+ {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {templateOptions.mDate && + detail?.ProdVariantPriceDetails?.[0]?.ManufDate && ( +
+ {detail?.ProdVariantPriceDetails?.[0]?.ManufDate} +
+ )} + {templateOptions.eDate && + detail?.ProdVariantPriceDetails?.[0]?.ExpDate && ( +
+ {detail?.ProdVariantPriceDetails?.[0]?.ExpDate} +
+ )} +
+
+ {imageTagBarcodeAndQR('70%')} + {templateOptions.mrp && ( +
{'MRP : ' + detail?.MRP}
+ )} +
+
+ ))} +
+ )} + + {selectStyle == '50X25Single' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+ {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName || record?.ProdName} +
+ )} + {templateOptions.mDate && record?.ManufDate && ( +
+ {record?.ManufDate} +
+ )} + {templateOptions.eDate && record?.ExpDate && ( +
+ {record?.ExpDate} +
+ )} +
+
+ {imageTagBarcodeAndQR( + '90%', + '6px', + record?.QRCode || record?.ProdId + )} + {templateOptions.mrp && ( +
+ {'MRP : ' + record?.MRP} +
+ )} +
+
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+ {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {templateOptions.mDate && + detail?.ProdVariantPriceDetails?.[0]?.ManufDate && ( +
+ {detail?.ProdVariantPriceDetails?.[0]?.ManufDate} +
+ )} + {templateOptions.eDate && + detail?.ProdVariantPriceDetails?.[0]?.ExpDate && ( +
+ {detail?.ProdVariantPriceDetails?.[0]?.ExpDate} +
+ )} +
+
+ {imageTagBarcodeAndQR('90%')} + {templateOptions.mrp && ( +
{'MRP : ' + detail?.MRP}
+ )} +
+
+ ))} +
+
+ )} + + {selectStyle == '100X13(55MMPrintable)' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+ {imageTagBarcodeAndQR( + 'auto', + '6px', + record?.QRCode || record?.ProdId + )} +
+ {templateOptions.productName && ( +
+ {'Product Name :' + + (record?.NickName || record?.ProdName)} +
+ )} + {templateOptions.sellingPrice && ( +
+ {'Selling Price :' + record?.SellPrice} +
+ )} +
+
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+ {imageTagBarcodeAndQR()} +
+ {templateOptions.productName && ( +
+ {'Product Name :' + proName} +
+ )} + {templateOptions.sellingPrice && ( +
+ {'Selling Price :' + detail?.SellPrice} +
+ )} +
+
+ ))} +
+
+ )} + + {selectStyle == '100X15(70MMPrintable)' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+ {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {'Product Name: ' + + (record?.NickName || record?.ProdName)} +
+ )} + {templateOptions.mrp && ( +
+ {'MRP : ' + record?.MRP} +
+ )} + {templateOptions.sellingPrice && ( +
+ {'Selling Price :' + record?.SellPrice} +
+ )} +
+
+ {imageTagBarcodeAndQR( + 'auto', + '6px', + record?.QRCode || record?.ProdId + )} +
+
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+ {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {'Product Name' + proName} +
+ )} + {templateOptions.mrp && ( +
{'MRP : ' + detail?.MRP}
+ )} + {templateOptions.sellingPrice && ( +
+ {'Selling Price :' + detail?.SellPrice} +
+ )} +
+
+ {imageTagBarcodeAndQR()} +
+
+ ))} +
+
+ )} + {selectStyle == '100X150' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+ {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {'Product Name: ' + + (record?.NickName || record?.ProdName)} +
+ )} + {templateOptions.sellingPrice && ( +
+ {'Selling Price :' + record?.SellPrice} +
+ )} + {templateOptions.mDate && record?.ManufDate && ( +
{record?.ManufDate}
+ )} + {templateOptions.eDate && record?.ExpDate && ( +
{record?.ExpDate}
+ )} + {templateOptions.color && ( +
+ {record?.Color || colorText} +
+ )} +
+
+ { +
+ {imageTagBarcodeAndQR( + '70%', + '6px', + record?.QRCode || record?.ProdId + )} +
+ } + {templateOptions.mrp && ( +
+ {'MRP : ' + record?.MRP} +
+ )} +
+
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+ {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {'Product Name' + (nickName ? nickName : proName)} +
+ )} + {templateOptions.sellingPrice && ( +
+ {'Selling Price :' + detail?.SellPrice} +
+ )} + {templateOptions.mDate && + detail?.ProdVariantPriceDetails?.[0]?.ManufDate && ( +
+ {detail?.ProdVariantPriceDetails?.[0]?.ManufDate} +
+ )} + {templateOptions.eDate && + detail?.ProdVariantPriceDetails?.[0]?.ExpDate && ( +
+ {detail?.ProdVariantPriceDetails?.[0]?.ExpDate} +
+ )} + {templateOptions.color && ( +
{colorText}
+ )} +
+
+ {
{imageTagBarcodeAndQR('70%')}
} + {templateOptions.mrp && ( +
{'MRP : ' + detail?.MRP}
+ )} +
+
+ ))} +
+
+ )} + {selectStyle == 'label-15X156cross' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+ {templateOptions.value === 'T' && + imageTagBarcodeAndQR( + templateOptions.codeType === 'B' ? '100%' : '6mm', + '6px', + record?.QRCode || record?.ProdId + )} + {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName + ? record?.NickName + : record?.ProdName} +
+ )} + {templateOptions.value === 'C' && + imageTagBarcodeAndQR( + templateOptions.codeType === 'B' + ? '80%' + : !templateOptions.productName && + !templateOptions.mrp + ? '80%' + : '35%', + '6px', + record?.QRCode || record?.ProdId + )} + {templateOptions.mrp && ( +
+ {'₹:' + record?.MRP} +
+ )} + {templateOptions.value === 'B' && + imageTagBarcodeAndQR( + templateOptions.codeType === 'B' ? '100%' : '50%', + '6px', + record?.QRCode || record?.ProdId + )} +
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+ {templateOptions.value === 'T' && + imageTagBarcodeAndQR( + templateOptions.codeType === 'B' ? '100%' : '6mm' + )} + {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {templateOptions.value === 'C' && + imageTagBarcodeAndQR( + templateOptions.codeType === 'B' + ? '80%' + : !templateOptions.productName && !templateOptions.mrp + ? '80%' + : '7.5mm', + '5px' + )} + {templateOptions.mrp && ( +
+ {'₹:' + (detail?.MRP ? detail?.MRP : 10.0)} +
+ )} + {templateOptions.value === 'B' && + imageTagBarcodeAndQR( + templateOptions.codeType === 'B' ? '100%' : '7.5mm' + )} +
+ ))} +
+
+ )} + + {selectStyle == '22X353cross' && ( +
+
+ {selectedRecords?.length > 0 + ? selectedRecords?.map((record, recordIndex) => { + const copyCount = generateQRCodeCopy(record?.QRCode); + + return Array.from({ length: copyCount })?.map( + (_, copyIndex) => ( +
+
+ {imageTagBarcodeAndQR( + templateOptions.codeType === 'B' + ? '100%' + : !templateOptions.mrp && + !templateOptions.productName + ? '60%' + : '40%', + '8px', + record?.QRCode || record?.ProdId + )} + {(templateOptions.productName || + templateOptions.mrp) && ( +
+ {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {record?.NickName + ? record?.NickName + : record?.ProdName} +
+ )} + {templateOptions.mrp && ( +
+ {'MRP : ' + record?.MRP} +
+ )} +
+ )} +
+
+ ) + ); + }) + : Array.from({ length: copies })?.map((_, index) => ( +
+
+ {imageTagBarcodeAndQR( + templateOptions.codeType === 'B' + ? '100%' + : !templateOptions.mrp && !templateOptions.productName + ? '60%' + : '40%', + '8px' + )} + {(templateOptions.productName || templateOptions.mrp) && ( +
+ {templateOptions.productName && ( +
12 ? 'text-ellipsis' : ''}`} + > + {nickName + ? nickName + : proName + ? proName + : 'Product Name'} +
+ )} + {templateOptions.mrp && ( +
+ {'MRP : ' + detail?.MRP} +
+ )} +
+ )} +
+
+ ))} +
+
+ )} +
+ ); +}; +export default StickerPrintTemplates; From 4beecf0c53d38800ad6e1e2dd4648379c12a64ad Mon Sep 17 00:00:00 2001 From: Tamilselvan Date: Fri, 6 Feb 2026 13:11:04 +0530 Subject: [PATCH 3/3] split into componentents --- src/Pages/Product/ProductList.jsx | 3816 +++-------------------------- 1 file changed, 357 insertions(+), 3459 deletions(-) diff --git a/src/Pages/Product/ProductList.jsx b/src/Pages/Product/ProductList.jsx index cced5d0..67b24f8 100644 --- a/src/Pages/Product/ProductList.jsx +++ b/src/Pages/Product/ProductList.jsx @@ -100,10 +100,18 @@ import ScannedProductTable from '../../Components/PedalOCR/scannedProductTable.j import MultiCameraCropOCR from '../../Components/PedalOCR/MultiCameraCropOCR.jsx'; import OCRLoader from '../../Components/PedalOCR/OCRLoader.jsx'; import { GiHorizontalFlip, GiVerticalFlip } from 'react-icons/gi'; -import { FaPlus } from "react-icons/fa6"; +import { FaPlus } from 'react-icons/fa6'; import { Tables } from '../../../ownLib/my-ui-lib.js'; +import StickerPrintModel from './StickerPrintModal.jsx'; +import StickerPrintTemplates from './StickerTemplates.jsx'; +import QRCodeCopiesModal from './QRCodeCopiesModal.jsx'; +import { + generateBarcode, + generateCodeImage, + generateQRCode, + generateQRCodeCopy, +} from '../../Services/utils.js'; -const colorText = 'Color : Red'; const ProductList = () => { const { SadminuserAccess } = useAuth(); let SAAccessCommonMaster = SadminuserAccess?.find( @@ -114,11 +122,7 @@ const ProductList = () => { const navigateTo = useNavigate(); const dispatch = useDispatch(); const location = useLocation(); - const barCodeImage = - 'https://cdn.pixabay.com/photo/2014/04/02/16/19/barcode-306926_1280.png'; - const qrCodeImage = - 'https://cdn.pixabay.com/photo/2015/03/21/09/34/qr-683354_640.png'; - const previewText = 'Barcode Preview'; + const CompId = getSession('CompId'); const BranchId = getSession('BranchId'); const AppId = getSession('AppId'); @@ -154,7 +158,7 @@ const ProductList = () => { UomTypePreference?.some?.( (e) => e?.PreferredSubCatName?.toLowerCase() == - item?.ConfigName?.toLowerCase() && e?.PreferredStatus == 'Y' + item?.ConfigName?.toLowerCase() && e?.PreferredStatus == 'Y' ) ); @@ -242,7 +246,6 @@ const ProductList = () => { const valueStyleColumn = { flexDirection: templateOptions.value === 'T' ? 'column' : 'column-reverse', }; - const [base64Image, setBase64Image] = useState(null); const [barcodeBase64Image, setBarcodeBase64Image] = useState(null); const [deleteProductPages, setDeleteProductPages] = useState([]); @@ -263,7 +266,7 @@ const ProductList = () => { const [onlineImage, setOnlineImage] = useState(null); const [imageUrl, setImageUrl] = useState(''); const [recordIndex, setRecordIndex] = useState(null); - + const [printReady, setPrintReady] = useState(false); const [rangeFrom, setRangeFrom] = useState(''); const [rangeTo, setRangeTo] = useState(''); @@ -272,7 +275,6 @@ const ProductList = () => { const [productWiseQrcode, setProductWiseQrcode] = useState(false); const lastRangeIdsRef = useRef([]); - const subDirectory = import.meta.env.ENV_BASE_URL; // const [openTour, setOpenTour] = useState(false); @@ -284,7 +286,7 @@ const ProductList = () => { // placement: 'top', // }, // ]; - + console.log(QrandbarcodeDatas, 'QrandbarcodeDatas'); const items = [ { name: 'Home', @@ -318,6 +320,10 @@ const ProductList = () => { setPopUp(true); }; + const Datas = Array.from({ length: 5 }, (_, i) => i + 10); + const ModifiedData = Datas?.map((e) => ({ value: e })); + console.log(ModifiedData, 'Datas'); + useEffect(() => { if (deleteProductPages?.length > 0) { getForDeleteProduct(deleteProductPages); @@ -327,12 +333,6 @@ const ProductList = () => { } }, [deleteProductPages]); - useEffect(() => { - if (coresdata?.length > 0 && open) { - CoresOnChange(coresdata?.[0].ConfigName); - } - }, [open]); - useEffect(() => { if (!AllProdIds?.length) return; const cleaned = deleteInput?.replace(/\s+/g, ''); @@ -858,31 +858,7 @@ const ProductList = () => { // onlineImage, // ] // ); - const formatDate = (dateStr) => { - const d = new Date(dateStr); - const day = String(d.getDate()).padStart(2, '0'); - - const months = [ - 'JAN', - 'FEB', - 'MAR', - 'APR', - 'MAY', - 'JUN', - 'JUL', - 'AUG', - 'SEP', - 'OCT', - 'NOV', - 'DEC', - ]; - const month = months[d.getMonth()]; - - const year = String(d.getFullYear()).slice(-2); - - return `${day}-${month}-${year}`; - }; const handleCheckboxChange = (record, checked) => { setSelectedRecords((prev) => { if (checked) { @@ -892,8 +868,13 @@ const ProductList = () => { } }); }; - const CreateQrcode = async (isChecked, code, productName, StockAvailable, copiesCount = 0) => { - + const CreateQrcode = async ( + isChecked, + code, + productName, + StockAvailable, + copiesCount = 0 + ) => { if (!code) return; if (isChecked) { @@ -905,7 +886,7 @@ const ProductList = () => { url: data, productName: productName, copiesCount: copiesCount, - StockAvailable: StockAvailable + StockAvailable: StockAvailable, }, ]); } else { @@ -919,7 +900,15 @@ const ProductList = () => { for (let i = 0; i < products.length; i += batchSize) { const batch = products.slice(i, i + batchSize); await Promise.all( - batch.map((product) => CreateQrcode(true, product.QRCode, product.ProdName, product.StockAvailable, product.TotalBalanceQty)) + batch.map((product) => + CreateQrcode( + true, + product.QRCode, + product.ProdName, + product.StockAvailable, + product.TotalBalanceQty + ) + ) ); // Small delay to prevent UI blocking if (i + batchSize < products.length) { @@ -927,7 +916,15 @@ const ProductList = () => { } } } else { - products.forEach((product) => CreateQrcode(false, product.QRCode, product.ProdName, product.StockAvailable, product.TotalBalanceQty)); + products.forEach((product) => + CreateQrcode( + false, + product.QRCode, + product.ProdName, + product.StockAvailable, + product.TotalBalanceQty + ) + ); } }; @@ -968,19 +965,19 @@ const ProductList = () => { }, ...(brandColumn && subCategory ? [ - { - title: 'Brand', - dataIndex: 'BrandName', - key: 'BrandName', - columnKey: 'BrandName', - width: '100px', - render: (text) => {text}, - sorter: (a, b) => a?.BrandName?.localeCompare(b?.BrandName), - sortOrder: - sortedInfo.columnKey === 'BrandName' ? sortedInfo.order : null, - ellipsis: true, - }, - ] + { + title: 'Brand', + dataIndex: 'BrandName', + key: 'BrandName', + columnKey: 'BrandName', + width: '100px', + render: (text) => {text}, + sorter: (a, b) => a?.BrandName?.localeCompare(b?.BrandName), + sortOrder: + sortedInfo.columnKey === 'BrandName' ? sortedInfo.order : null, + ellipsis: true, + }, + ] : []), { @@ -999,121 +996,127 @@ const ProductList = () => { ...(qrCodeColumn ? [ - { - title: 'QRCode', - dataIndex: 'QRCode', - key: 'QRCode', - width: '100px', - align: 'center', - render: (text) => ( - {text ? text : '-'} - ), - ellipsis: true, - }, - { - title: ( - - - {MultiCode && ( - 0 && - productData - .filter((p) => p?.QRCode) - .every((p) => - selectedRecords.some((r) => r.ProdId === p.ProdId) - ) - } - onChange={(e) => { - const productsWithQR = productData.filter( - (p) => p?.QRCode - ); - if (e.target.checked) { - const newSelections = productsWithQR.filter( - (p) => - !selectedRecords.some( - (r) => r.ProdId === p.ProdId - ) - ); - setSelectedRecords((prev) => [ - ...prev, - ...newSelections, - ]); - // Create QR codes for newly selected products - CreateQrcodesBatch(newSelections, true); - } else { - // Remove QR codes for deselected products - CreateQrcodesBatch(productsWithQR, false); - setSelectedRecords((prev) => - prev.filter( - (r) => - !productsWithQR.some( - (p) => p.ProdId === r.ProdId - ) - ) - ); - } - }} - /> - )} - Print QRCode - { - setMultiCode((prev) => { - const newValue = !prev; - if (!newValue) { - setSelectedRecords([]); - } - - return newValue; - }); - }} - /> - - - ), - key: 'Print', - dataIndex: 'Print', - width: '100px', - align: 'center', - render: (_, record) => - productData.length >= 1 ? ( - - {MultiCode ? ( - record?.QRCode ? ( + { + title: 'QRCode', + dataIndex: 'QRCode', + key: 'QRCode', + width: '100px', + align: 'center', + render: (text) => ( + {text ? text : '-'} + ), + ellipsis: true, + }, + { + title: ( + + + {MultiCode && ( r.ProdId == record.ProdId - )} + checked={ + selectedRecords.length > 0 && + productData + .filter((p) => p?.QRCode) + .every((p) => + selectedRecords.some((r) => r.ProdId === p.ProdId) + ) + } onChange={(e) => { - handleCheckboxChange(record, e.target.checked); - CreateQrcode(e.target.checked, record.QRCode, record?.ProdName, record?.StockAvailable, record?.TotalBalanceQty); + const productsWithQR = productData.filter( + (p) => p?.QRCode + ); + if (e.target.checked) { + const newSelections = productsWithQR.filter( + (p) => + !selectedRecords.some( + (r) => r.ProdId === p.ProdId + ) + ); + setSelectedRecords((prev) => [ + ...prev, + ...newSelections, + ]); + // Create QR codes for newly selected products + CreateQrcodesBatch(newSelections, true); + } else { + // Remove QR codes for deselected products + CreateQrcodesBatch(productsWithQR, false); + setSelectedRecords((prev) => + prev.filter( + (r) => + !productsWithQR.some( + (p) => p.ProdId === r.ProdId + ) + ) + ); + } }} /> + )} + Print QRCode + { + setMultiCode((prev) => { + const newValue = !prev; + if (!newValue) { + setSelectedRecords([]); + } + + return newValue; + }); + }} + /> + + + ), + key: 'Print', + dataIndex: 'Print', + width: '100px', + align: 'center', + render: (_, record) => + productData.length >= 1 ? ( + + {MultiCode ? ( + record?.QRCode ? ( + r.ProdId == record.ProdId + )} + onChange={(e) => { + handleCheckboxChange(record, e.target.checked); + CreateQrcode( + e.target.checked, + record.QRCode, + record?.ProdName, + record?.StockAvailable, + record?.TotalBalanceQty + ); + }} + /> + ) : ( + '-' + ) + ) : record?.QRCode ? ( + + Qrcode(record)} + /> + ) : ( '-' - ) - ) : record?.QRCode ? ( - - Qrcode(record)} - /> - - ) : ( - '-' - )} - - ) : null, - }, - ] + )} + + ) : null, + }, + ] : []), { @@ -1131,11 +1134,11 @@ const ProductList = () => { style={{ color: '#1292EE' }} onClick={() => UserType === 'Super Admin' || - (UserType === 'Super Admin User' && - SAAccessCommonMaster?.UpdateAccess === 'Y') || - (UserType === 'Employee' && - empData?.UpdateAccess === 'Y') || - UserType === 'Admin' + (UserType === 'Super Admin User' && + SAAccessCommonMaster?.UpdateAccess === 'Y') || + (UserType === 'Employee' && + empData?.UpdateAccess === 'Y') || + UserType === 'Admin' ? actionsFormatter(record, index) : null } @@ -1152,11 +1155,11 @@ const ProductList = () => { }} onClick={() => UserType === 'Super Admin' || - (UserType === 'Super Admin User' && - SAAccessCommonMaster?.DeleteAccess === 'Y') || - (UserType === 'Employee' && - empData?.DeleteAccess === 'Y') || - UserType === 'Admin' + (UserType === 'Super Admin User' && + SAAccessCommonMaster?.DeleteAccess === 'Y') || + (UserType === 'Employee' && + empData?.DeleteAccess === 'Y') || + UserType === 'Admin' ? statusFormatter(record) : null } @@ -1168,11 +1171,11 @@ const ProductList = () => { }} onClick={() => UserType === 'Super Admin' || - (UserType === 'Super Admin User' && - SAAccessCommonMaster?.DeleteAccess === 'Y') || - (UserType === 'Employee' && - empData?.DeleteAccess === 'Y') || - UserType === 'Admin' + (UserType === 'Super Admin User' && + SAAccessCommonMaster?.DeleteAccess === 'Y') || + (UserType === 'Employee' && + empData?.DeleteAccess === 'Y') || + UserType === 'Admin' ? statusFormatter(record) : null } @@ -1421,17 +1424,6 @@ const ProductList = () => { onlineImage, ]); - const handleImageTag = (w, h = '40px', barcodeOrQr) => { - return ( - {previewText} - ); - }; - const updateImageUrl = (url) => { setImageUrl(url); }; @@ -1749,17 +1741,7 @@ const ProductList = () => { } } }; - const generateQRCode = (code) => { - let Data = QrandbarcodeDatas?.find((e) => e?.key === code)?.url; - return Data - } - const generateQRCodeCopy = (code) => { - const found = QrandbarcodeDatas?.find((e) => e?.key === code); - const count = Number(found?.copiesCount); - return Number.isFinite(count) && count > 0 ? count : 0; - - }; const imageUrlToBase64 = async (url) => { try { const response = await fetch(url); @@ -1948,70 +1930,79 @@ const ProductList = () => { }); } - switch (dropdownValue) { - case '15X15 6cross': // COMPLETE - await printDiv( - templateAvailable ? 'label-15X156cross' : 'StickerPrints0', - (style + getPageStyle(92)) - ); - handleQRStickerPrinterModelCancel(); - break; - case '22X35 3cross': // Need to check - await printDiv( - templateAvailable ? '22X353cross' : 'StickerPrints1', - style + getPageStyle(105) - ); - handleQRStickerPrinterModelCancel(); - break; - case '25X25 4cross': // COMPLETE - await printDiv( - templateAvailable ? '25X254cross' : 'StickerPrints2', - style + getPageStyle(100) - ); - handleQRStickerPrinterModelCancel(); - break; - case '25X50 2cross': //Need to check - await printDiv( - templateAvailable ? '25X502cross' : 'StickerPrints3', - style + getPageStyle(100) - ); - handleQRStickerPrinterModelCancel(); - break; - case '50X30 Single': // COMPLETE - await printDiv( - templateAvailable ? '50X30Single' : 'StickerPrints4', - style - ); - handleQRStickerPrinterModelCancel(); - break; - case '50X25 Single': // COMPLETE - await printDiv( - templateAvailable ? '50X25Single' : 'StickerPrints5', - style - ); - handleQRStickerPrinterModelCancel(); - break; - case '100X13 (55MM Printable)': //Need to check - await printDiv( - templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6', - style - ); - handleQRStickerPrinterModelCancel(); - break; - case '100X15 (70MM Printable)': // COMPLETE - await printDiv( - templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7', - style - ); - handleQRStickerPrinterModelCancel(); - break; - case '100X150': // COMPLETE - await printDiv(templateAvailable ? '100X150' : 'StickerPrints8', style); - handleQRStickerPrinterModelCancel(); - break; - default: - alert('! Select correct cross '); - } + setPrintReady(true); + + setTimeout(async () => { + switch (dropdownValue) { + case '15X15 6cross': // COMPLETE + await printDiv( + templateAvailable ? 'label-15X156cross' : 'StickerPrints0', + style + getPageStyle(92) + ); + handleQRStickerPrinterModelCancel(); + break; + case '22X35 3cross': // Need to check + await printDiv( + templateAvailable ? '22X353cross' : 'StickerPrints1', + style + getPageStyle(105) + ); + handleQRStickerPrinterModelCancel(); + break; + case '25X25 4cross': // COMPLETE + await printDiv( + templateAvailable ? '25X254cross' : 'StickerPrints2', + style + getPageStyle(100) + ); + handleQRStickerPrinterModelCancel(); + break; + case '25X50 2cross': //Need to check + await printDiv( + templateAvailable ? '25X502cross' : 'StickerPrints3', + style + getPageStyle(100) + ); + handleQRStickerPrinterModelCancel(); + break; + case '50X30 Single': // COMPLETE + await printDiv( + templateAvailable ? '50X30Single' : 'StickerPrints4', + style + ); + handleQRStickerPrinterModelCancel(); + break; + case '50X25 Single': // COMPLETE + await printDiv( + templateAvailable ? '50X25Single' : 'StickerPrints5', + style + ); + handleQRStickerPrinterModelCancel(); + break; + case '100X13 (55MM Printable)': //Need to check + await printDiv( + templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6', + style + ); + handleQRStickerPrinterModelCancel(); + break; + case '100X15 (70MM Printable)': // COMPLETE + await printDiv( + templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7', + style + ); + handleQRStickerPrinterModelCancel(); + break; + case '100X150': // COMPLETE + await printDiv( + templateAvailable ? '100X150' : 'StickerPrints8', + style + ); + handleQRStickerPrinterModelCancel(); + setPrintReady(false); + break; + default: + alert('! Select correct cross '); + setPrintReady(false); + } + }, 100); }; useEffect(() => { @@ -2052,7 +2043,7 @@ const ProductList = () => { }; const handleSubmitbulk = (excelData) => { - setExceldatasubmit(excelData); + setExceldatasubmit(excelData?.filter((e) => e?.isModified)); }; const handleSubmit = async () => { @@ -2136,6 +2127,7 @@ const ProductList = () => { handleResetExcelData(); handleCancel(); } else { + setBulkpost(false); setMessageType('error'); setMessageData('No data to submit. Please upload an Excel file.'); } @@ -2224,7 +2216,6 @@ const ProductList = () => { } }, [ProdId]); - const totalCopies = QrandbarcodeDatas?.reduce( (sum, item) => sum + Number(item?.copiesCount || 0), 0 @@ -2263,65 +2254,36 @@ const ProductList = () => { console.error('Error fetching barcode session data:', error); } }; - const imageTagBarcodeAndQR = (w = 'auto', fs = '6px', codeData = null) => { - const currentCode = codeData || ProdId; - - console.log(currentCode, '1111111111', codeData); - return ( - (templateOptions.barcode || templateOptions.qrcode) && ( - <> - Barcode - {templateOptions.codeType !== 'B' && ( -

- {currentCode} -

- )} - - ) - ); - }; - - const generateBarcode = (code) => { - try { - const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - JsBarcode(svg, code, { - format: 'CODE128', - displayValue: false, - lineColor: '#030303', - width: 2, - height: 40, - }); - const svgData = new XMLSerializer().serializeToString(svg); - return `data:image/svg+xml;base64,${btoa(svgData)}`; - } catch (error) { - return null; - } - }; - - // const generateQRCode = (code) => { - - // return base64Image; - // }; - - const generateCodeImage = (code, codeType = 'Q') => { - if (codeType === 'B') { - return generateBarcode(code); - } else { - return generateQRCode(code); - } - }; + const imageTagBarcodeAndQR = useCallback( + (w = 'auto', fs = '6px', codeData = null) => { + const currentCode = codeData || ProdId; + return ( + (templateOptions.barcode || templateOptions.qrcode) && ( + <> + Barcode + {templateOptions.codeType !== 'B' && ( +

+ {currentCode} +

+ )} + + ) + ); + }, + [templateOptions, MultiCode, barcodeBase64Image, base64Image, ProdId] + ); const handleQRStickerPrinterModelCancel = () => { setDropdownValue(); @@ -2329,9 +2291,10 @@ const ProductList = () => { setOpen(false); formRef?.current?.resetFields(); setSelectedRecords([]); - setQrandbarcodeDatas([]) + setQrandbarcodeDatas([]); setMultiCode(false); setNickName(null); + setPrintReady(false); }; const handleProcessMultipleOCR = async (formDataArray) => { @@ -2632,3022 +2595,59 @@ const ProductList = () => { {/* */} {/* */} - - - {MultiCode &&
-
setActiveTab('stock')} - > - Stock Wise ({selectedRecords?.length}) -
- -
{ - e.stopPropagation(); - setstockWiseQrcode(true); - }} - style={{ - animation: activeTab === 'stock' ? 'blink 1s infinite' : 'none' - }}> - - Add -
-
-
- -
setActiveTab('product')} - > - Product Wise ({selectedRecords?.length}) -
{ - e.stopPropagation(); - setProductWiseQrcode(true); - }} style={{ - animation: activeTab === 'product' ? 'blink 1s infinite' : 'none' - }}> - - Add -
-
- -
} -
- -
- -
-
- {coresdata?.map((option) => ( -
CoresOnChange(option.ConfigName)} - className={`radio-sidebar-item ${dropdownValue === option.ConfigName ? 'selected' : ''}`} - > -
- {option.ConfigName} -
-
- ))} -
-
-
-
PREVIEW
- {(() => { - const template = barcodeTemplateDetails?.find( - (find) => find.SessionName === dropdownValue - ); - const templateAvailable = - template === undefined ? false : true; - // Define constants using the lookup map - const checkComponent = (name) => - template?.OptionDetails?.some( - (some) => some.OptionName === name - ); - - const mrp = checkComponent('MRP'); - const qrcode = checkComponent('Qrcode'); - const barcode = checkComponent('Barcode'); - const color = checkComponent('Color'); - const eDate = checkComponent('E Date'); - const mDate = checkComponent('M Date'); - const sellingPrice = checkComponent('Selling Price'); - const productName = checkComponent('Product Name'); - const barcodeOrQr = template?.CodeType - ? template?.CodeType === 'B' - : true; - // setPreviewTemplateOptions({ - // mrp: mrp, - // barcode: barcode, - // color: color, - // eDate: eDate, - // mDate: mDate, - // sellingPrice: sellingPrice, - // productName: productName, - // value: template?.Position !== '' ? template?.Position : '', - // secondValue: - // template?.PositionString !== '' - // ? template?.PositionString - // : '', - // qrcode: qrcode, - // codeType: template?.CodeType, - // }); - const templateValue = - template?.Position !== '' ? template?.Position : ''; - switch (dropdownValue) { - case '15X15 6cross': - return templateAvailable ? ( - !(productName || barcode || qrcode || mrp) ? ( - - ) : ( - <> -
- {[...Array(6)].map((_, index) => ( -
-
- {(barcode || qrcode) && - templateValue === 'T' && - handleImageTag( - barcodeOrQr ? 50 : 20, - 20, - barcodeOrQr - )} - {productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {(barcode || qrcode) && - templateValue === 'C' && - handleImageTag( - barcodeOrQr ? 50 : 20, - 20, - barcodeOrQr - )} - {mrp && ( -
- {'₹:' + - (detail?.MRP - ? detail?.MRP - : 0.0)} -
- )} - {(barcode || qrcode) && - templateValue === 'B' && - handleImageTag( - barcodeOrQr ? 50 : 20, - 20, - barcodeOrQr - )} -
-
- ))} -
-
-

- Vertical -

- {' '} -
- - {'15mm'} -

-

- Horizontal -

- {' '} -
- - {'15mm'} -

-
- - ) - ) : ( - <> -
- {Array.from({ length: 6 }).map( - (_, index) => ( -
- {`QR -
- ) - )} -
-
-

- Vertical -

- {' '} -
- - {'15mm'} -

-

- Horizontal -

- {' '} -
- - {'15mm'} -

-
- - ); - case '22X35 3cross': - return templateAvailable ? ( - //"B","T" - !(barcode || qrcode || mrp) ? ( - - ) : ( - <> -
- {[...Array(3)].map((_, index) => ( -
-
- {(barcode || qrcode) && - handleImageTag( - barcodeOrQr ? 100 : 35, - 35, - barcodeOrQr - )} - {(productName || mrp) && ( -
- {productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : (proName || 'Product Name')} -
- )} - {mrp && ( -
- {'₹:' + - (detail?.MRP - ? detail?.MRP - : 10.0)} -
- )} -
- )} -
-
- ))} -
-
-

- Vertical -

- {' '} -
- - {'22mm'} -

-

- Horizontal -

- {' '} -
- - {'35mm'} -

-
- - ) - ) : ( - <> -
- {Array?.from({ length: 3 })?.map( - (_, index) => ( -
-
-

8 ? 'text-ellipsis' : ''}`} - > - {proName || 'Product Name'} ({size || '1 PCS'}) -

-

{ProdId || 'QR579890770'}

-
- -
- ) - )} -
-
-

- Vertical -

- {' '} -
- - {'22mm'} -

-

- Horizontal -

- {' '} -
- - {'35mm'} -

-
- - ); - case '25X25 4cross': - return templateAvailable ? ( - !( - productName || - mDate || - eDate || - barcode || - qrcode || - mrp - ) ? ( - - ) : ( - // 4 Cross idhu 25 * 25 * 25 * 25 = 1 inch - <> -
- {[...Array(4)].map((_, index) => ( -
-
- {(barcode || qrcode) && - templateValue === 'T' && - handleImageTag( - barcodeOrQr ? 60 : 35, - 35, - barcodeOrQr - )} - {productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {mrp && ( -
- {'₹:' + - (detail?.MRP - ? detail?.MRP - : 10.0)} -
- )} - {(barcode || qrcode) && - templateValue === 'C' && - handleImageTag( - barcodeOrQr ? 60 : 35, - 35, - barcodeOrQr - )} - {mDate && ( -
- )} - {eDate && ( -
- DD-MM-YYYY -
- )} - {(barcode || qrcode) && - templateValue === 'B' && - handleImageTag( - barcodeOrQr ? 60 : 35, - 35, - barcodeOrQr - )} -
-
- ))} -
-
-

- Vertical -

- {' '} -
- - {'25mm'} -

-

- Horizontal -

- {' '} -
- - {'25mm'} -

-
- - ) - ) : ( - <> -
- {Array.from({ length: 4 })?.map( - (_, index) => ( -
-

12 ? 'text-ellipsis' : ''}`} - > - - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} - - - ({size || '1 PCS'}) - -

-
- barcode -

{ProdId || 'QR8575956'}

-
-
- ) - )} -
-
-

- Vertical -

- {' '} -
- - {'25mm'} -

-

- Horizontal -

- {' '} -
- - {'25mm'} -

-
- - ); - case '25X50 2cross': - return templateAvailable ? ( - //"B","T" - !(productName || barcode || qrcode || mrp) ? ( - - ) : ( - <> -
- {[...Array(2)].map((_, index) => ( -
-
- {(barcode || qrcode) && - handleImageTag( - barcodeOrQr ? 140 : 30, - 30, - barcodeOrQr - )} - {productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {mrp && ( -
- {'₹:' + - (detail?.MRP - ? detail?.MRP - : 10.0)} -
- )} -
-
- ))} -
-
-

- Vertical -

- {' '} -
- - {'25mm'} -

-

- Horizontal -

- {' '} -
- - {'50mm'} -

-
- - ) - ) : ( - <> -
- {Array.from({ length: 2 })?.map( - (_, index) => ( -
-
-

12 ? 'text-ellipsis' : ''}`} - > - {proName || 'Product Name'} ({size || '1 PCS'}) -

-

{ProdId || 'QR74478578'}

-
- -
- ) - )} -
-
-

- Vertical -

- {' '} -
- - {'25mm'} -

-

- Horizontal -

- {' '} -
- - {'50mm'} -

-
- - ); - case '50X30 Single': - return templateAvailable ? ( - !( - productName || - mDate || - eDate || - barcode || - qrcode || - mrp - ) ? ( - - ) : ( - <> -
-
- {productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {mDate && - detail?.ProdVariantPriceDetails?.[0] - ?.ManufDate && ( -
- {formatDate( - detail - ?.ProdVariantPriceDetails?.[0] - ?.ManufDate - )} -
- )} - {eDate && - detail?.ProdVariantPriceDetails?.[0] - ?.ExpDate && ( -
- {formatDate( - detail - ?.ProdVariantPriceDetails?.[0] - ?.ExpDate - )} -
- )} -
-
- {(barcode || qrcode) && - handleImageTag( - barcodeOrQr ? 70 : 35, - 35, - barcodeOrQr - )} - {mrp && ( -
- {'MRP : ' + (detail?.MRP || 10.0)} -
- )} -
-
-
-

- Vertical -

- {' '} -
- - {'30mm'} -

-

- Horizontal -

- {' '} -
- - {'50mm'} -

-
- - ) - ) : ( - <> -
-
-
-

12 ? 'text-ellipsis' : ''}`} - > - {proName || 'Product Name'} ({size || '1 PCS'}) -

-

{ProdId || 'QR987968'}

-
- -
-
-
-

- Vertical -

- {' '} -
- - {'30mm'} -

-

- Horizontal -

- {' '} -
- - {'50mm'} -

-
- - ); - case '50X25 Single': - return templateAvailable ? ( - !( - productName || - mDate || - barcode || - qrcode || - mrp - ) ? ( - - ) : ( - <> -
-
- {productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {mDate && - detail?.ProdVariantPriceDetails?.[0] - ?.ManufDate && ( -
- {formatDate( - detail - ?.ProdVariantPriceDetails?.[0] - ?.ManufDate - )} -
- )} -
-
- {(barcode || qrcode) && - handleImageTag( - barcodeOrQr ? 70 : 35, - 35, - barcodeOrQr - )} - {mrp && ( -
- {'MRP : ' + (detail?.MRP || '10.0')} -
- )} -
-
-
-

- Vertical -

- {' '} -
- - {'25mm'} -

-

- Horizontal -

- {' '} -
- - {'50mm'} -

-
- - ) - ) : ( - <> -
-
-
-

12 ? 'text-ellipsis' : ''}`} - > - {proName || 'Product Name'} ({size || '1 PCS'}) -

-

{ProdId || 'QR8798639'}

-
- -
-
-
-

- Vertical -

- {' '} -
- - {'25mm'} -

-

- Horizontal -

- {' '} -
- - {'50mm'} -

-
- - ); - case '100X13 (55MM Printable)': - return templateAvailable ? ( - //"C", "T", "B" - !( - productName || - sellingPrice || - barcode || - qrcode - ) ? ( - - ) : ( - <> -
- {(barcode || qrcode) && - handleImageTag( - barcodeOrQr ? 140 : 35, - 35, - barcodeOrQr - )} -
- {productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {sellingPrice && ( -
- {`Selling Price : ` + - (detail?.SellPrice || '10.0')} -
- )} -
-
-
-

- Vertical -

- {' '} -
- - {'13mm'} -

-

- Horizontal -

- {' '} -
- - {'100mm'} -

-
- - ) - ) : ( - <> -
-
-
-

12 ? 'text-ellipsis' : ''}`} - > - {proName || 'Product Name'} ({size || '1 PCS'}) -

-

{ProdId || 'QR0970970'}

-
- -
-
-
-

- Vertical -

- {' '} -
- - {'13mm'} -

-

- Horizontal -

- {' '} -
- - {'100mm'} -

-
- - ); - case '100X15 (70MM Printable)': - return templateAvailable ? ( - // "L","R" - !( - productName || - sellingPrice || - barcode || - qrcode || - mrp - ) ? ( - - ) : ( - <> -
-
- {productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {mrp && ( -
- {'MRP : ' + (detail?.MRP || '10.0')} -
- )} - {sellingPrice && ( -
- {`Selling Price : ` + - (detail?.SellPrice || '10.0')} -
- )} -
-
- {(barcode || qrcode) && - handleImageTag( - barcodeOrQr ? 90 : 40, - null, - barcodeOrQr - )} -
-
-
-

- Vertical -

- {' '} -
- - {'15mm'} -

-

- Horizontal -

- {' '} -
- - {'100mm'} -

-
- - ) - ) : ( - <> -
-
-
-

12 ? 'text-ellipsis' : ''}`} - > - {proName || 'Product Name'} ({size || '1 PCS'}) -

-

{ProdId || 'QR858755'}

-
- -
-
-
-

- Vertical -

- {' '} -
- - {'15mm'} -

-

- Horizontal -

- {' '} -
- - {'100mm'} -

-
- - ); - case '100X150': - return templateAvailable ? ( - !( - productName || - sellingPrice || - mDate || - eDate || - color || - barcode || - qrcode || - mrp - ) ? ( - - ) : ( - <> -
-
- {productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {sellingPrice && ( -
- {`Selling Price : ` + - detail?.SellPrice} -
- )} - {mDate && - detail?.ProdVariantPriceDetails?.[0] - ?.ManufDate && ( -
- {formatDate( - detail - ?.ProdVariantPriceDetails?.[0] - ?.ManufDate - )} -
- )} - {eDate && - detail?.ProdVariantPriceDetails?.[0] - ?.ExpDate && ( -
- {formatDate( - detail - ?.ProdVariantPriceDetails?.[0] - ?.ExpDate - )} -
- )} - {color && ( -
- {colorText} -
- )} -
-
- {(barcode || qrcode) && - handleImageTag( - barcodeOrQr ? 140 : 35, - 35, - barcodeOrQr - )} - {mrp && ( -
- {'MRP : ' + (detail?.MRP || '10.0')} -
- )} -
-
-
-

- Vertical -

- {' '} -
- - {'150mm'} -

-

- Horizontal -

- {' '} -
- - {'100mm'} -

-
- - ) - ) : ( - <> -
-
-
-

{detail?.BrName}

-
-
-
-

- Product Name:{' '} -

12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -

-

-

- SIZE:{' '} - - {size || '1 PCS'} - -

-

- Id:{' '} - - {ProdId || 'QR86868'} - -

-

- MRP:{' '} - - {'MRP : ' + (detail?.MRP || '10.0')} - -

-

- Selling Price:{' '} - - {(detail?.SellPrice || '10.0')} - -

-
- -
-
-
-
-

- Vertical -

- {' '} -
- - {'150mm'} -

-

- Horizontal -

- {' '} -
- - {'100mm'} -

-
- - ); - default: - return ; - } - })()} -

{dropdownValue}

-
-
-
-
- - {!MultiCode && { - await validateSafeInput(value); // To block HTML tags & SQL keywords - return Promise.resolve(); - }, - }, - ]} - > - Copies} - isOnChange={false} - onChange={(e) => { - CopiesOnChange(e?.target?.value); - }} - /> - } - {proName?.length > 12 && printProductName && !MultiCode && ( - <> -
- Note: Product name is very long. Please add a short/nick - name to proceed print. -
- - { - setNickName(e?.target?.value); - }} - maxLength={12} - /> - - - )} -
-
- {(!MultiCode || totalCopies > 0) && ( - - )} - {MultiCode && totalCopies === 0 && ( - - )}
- - - - } + formRef={formRef} + onFinish={onFinish} + MultiCode={MultiCode} + activeTab={activeTab} + setActiveTab={setActiveTab} + selectedRecords={selectedRecords} + coresdata={coresdata} + dropdownValue={dropdownValue} + CoresOnChange={CoresOnChange} + barcodeTemplateDetails={barcodeTemplateDetails} + detail={detail} + proName={proName} + nickName={nickName} + ProdId={ProdId} + size={size} + // valueStyleColumn={valueStyleColumn} + // secondValueStyle={secondValueStyle} + // valueStyleRow={valueStyleRow} + CopiesOnChange={CopiesOnChange} + printProductName={printProductName} + totalCopies={totalCopies} + setstockWiseQrcode={setstockWiseQrcode} + setProductWiseQrcode={setProductWiseQrcode} + setNickName={setNickName} + templateOptions={templateOptions} /> - < div style={{ display: 'none' }}> -
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - console.log(copyCount, "copyCountcopyCountcopyCount") - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
- -
- )); - }) - : Array.from({ length: copies })?.map((_, index) => ( -
- -
- ))} -
-
-
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - return Array?.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
-

8 ? 'text-clamp-2' : ''}`} - > - {record.ProdName} ({record.Size} - {record.UomName}) -

-

{record.QRCode}

-
- -
- )) - } - ) - : Array?.from({ length: copies })?.map((_, index) => ( -
-
-

8 ? 'text-ellipsis' : ''}`} - > - {proName} ({size}) -

-

{ProdId}

-
- -
- ))} -
-
-
-
- {(selectedRecords?.length > 0) - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - console.log(copyCount, 'copyCount2') - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-

14 ? 'text-ellipsis' : ''}`} - > - - {record?.NickName || record?.ProdName} - - - ({record?.Size} - {record?.UomName}) - -

-
- barcode -

- {record?.QRCode || record?.ProdId} -

-
-
- )) - } + {printReady && ( + + generateQRCodeCopy(QrandbarcodeDatas, code) + } + generateCodeImage={generateCodeImage} + imageTagBarcodeAndQR={imageTagBarcodeAndQR} + dropdownValue={dropdownValue} + barcodeTemplateDetails={barcodeTemplateDetails} + /> + )} - ) - : Array.from({ length: copies })?.map((_, index) => ( -
-

14 ? 'text-ellipsis' : ''}`} - > - - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} - - - ({size}) - -

-
- barcode -

{ProdId}

-
-
- ))} -
-
-
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - console.log(copyCount, 'copyCount3') - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
-

12 ? 'text-clamp-2' : ''}`} - > - {record?.NickName || record?.ProdName} ({record?.Size} - {record?.UomName}) -

-

{record?.QRCode || record?.ProdId}

-
- -
- )) - }) - : Array.from({ length: copies })?.map((_, index) => ( -
-
-

12 ? 'text-clamp-2' : ''}`} - > - {proName} ({size}) -

-

{ProdId}

-
- -
- ))} -
-
-
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - console.log(copyCount, 'copyCount4') - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
-

12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName || record?.ProdName} ({record?.Size} - {record?.UomName}) -

-

{record?.QRCode || record?.ProdId}

-
- -
- )) - }) - : Array.from({ length: copies })?.map((_, index) => ( -
-
-

12 ? 'text-ellipsis' : ''}`} - > - {proName} ({size}) -

-

{ProdId}

-
- -
- ))} -
-
-
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - console.log(copyCount, 'copyCount5') - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
-

12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName || record?.ProdName} ({record?.Size} - {record?.UomName}) -

-

{record?.QRCode || record?.ProdId}

-
- -
- )) - }) - : Array.from({ length: copies })?.map((_, index) => ( -
-
-

12 ? 'text-ellipsis' : ''}`} - > - {proName} ({size}) -

-

{ProdId}

-
- -
- ))} -
-
-
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - console.log(copyCount, 'copyCount6') - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
-

12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName || record?.ProdName} ({record?.Size} - {record?.UomName}) -

-

{record?.QRCode || record?.ProdId}

-
- -
- )) - }) - : Array.from({ length: copies })?.map((_, index) => ( -
-
-

12 ? 'text-ellipsis' : ''}`} - > - {proName} ({size}) -

-

{ProdId}

-
- -
- ))} -
-
-
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - console.log(copyCount, 'copyCount7') - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
-

12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName || record?.ProdName} ({record?.Size} - {record?.UomName}) -

-

{record?.QRCode || record?.ProdId}

-
- -
- )) - }) - : Array.from({ length: copies })?.map((_, index) => ( -
-
-

12 ? 'text-ellipsis' : ''}`} - > - {proName} ({size}) -

-

{ProdId}

-
- -
- ))} -
-
-
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - console.log(copyCount, 'copyCount8') - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
-

{record?.BrName || detail?.BrName}

-
-
-
-

- Product Name:{' '} -

12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName || record?.ProdName} -

-

-

- SIZE:{' '} - - {record?.Size} - {record?.UomName} - -

-

- Id:{' '} - - {record?.QRCode || record?.ProdId} - -

-

- MRP:{' '} - - {'MRP : ' + record?.MRP} - -

-

- Selling Price:{' '} - - {record?.SellPrice} - -

-
- -
-
- )) - }) - : Array.from({ length: copies })?.map((_, index) => ( -
-
-

{detail?.BrName}

-
-
-
-

- Product Name:{' '} -

12 ? 'text-ellipsis' : ''}`} - > - {proName} -

-

-

- SIZE: {size} -

-

- Id: {ProdId} -

-

- MRP:{' '} - - {'MRP : ' + detail?.MRP} - -

-

- Selling Price:{' '} - - {detail?.SellPrice} - -

-
- -
-
- ))} -
-
-
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - return Array.from({ length: copyCount })?.map((_, copyIndex) => { - const hasProductName = !!templateOptions.productName; - const hasMrp = !!templateOptions.mrp; - - const hasMDate = templateOptions.mDate && record?.ManufDate; - - const hasEDate = templateOptions.eDate && record?.ExpDate; - - // IMAGE SIZE LOGIC - let imageSize = 50; - if (!hasMDate && !hasEDate) { - imageSize = 52; - } - - if (!hasProductName || !hasMrp) { - imageSize = 60; - } - - if (!hasProductName && !hasMrp) { - imageSize = 80; - } - - // FLEX DIRECTION LOGIC - const forceColumnLayout = - !hasProductName || !hasMrp || (!hasMDate && !hasEDate); - return ( -
-
- {templateOptions.value === 'T' && ( -
- {imageTagBarcodeAndQR( - templateOptions.codeType === 'B' - ? '90%' - : `${imageSize}%`, - '7px', - record?.QRCode || record?.ProdId - )} -
- )} - {hasProductName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName || record?.ProdName} -
- )} - {hasMrp && ( -
- {'₹' + record?.MRP} -
- )} - {templateOptions.value === 'C' && ( -
- {imageTagBarcodeAndQR( - templateOptions.codeType === 'B' - ? '90%' - : `${imageSize}%`, - '7px', - record?.QRCode || record?.ProdId - )} -
- )} - {(hasMDate || hasEDate) && ( -
- {hasMDate && ( -
- {hasMDate && !hasEDate ? 'MFG: ' : ''} - {formatDate(record?.ManufDate)} -
- )} - {hasMDate && hasEDate && ( - | - )} - {hasEDate && ( -
- {!hasMDate && hasEDate ? 'EXP: ' : ''} - {formatDate(record?.ExpDate)} -
- )} -
- )} - {templateOptions.value === 'B' && ( -
- {imageTagBarcodeAndQR( - templateOptions.codeType === 'B' - ? '25mm' - : `${imageSize}%`, - '7px', - record?.QRCode || record?.ProdId - )} -
- )} -
-
- ); - }) - } - - ) - : Array.from({ length: copies })?.map((_, index) => { - const hasProductName = !!templateOptions.productName; - const hasMrp = !!templateOptions.mrp; - - const hasMDate = - templateOptions.mDate && - detail?.ProdVariantPriceDetails?.[0]?.ManufDate; - - const hasEDate = - templateOptions.eDate && - detail?.ProdVariantPriceDetails?.[0]?.ExpDate; - - // IMAGE SIZE LOGIC - let imageSize = 50; - if (!hasMDate && !hasEDate) { - imageSize = 52; - } - - if (!hasProductName || !hasMrp) { - imageSize = 60; - } - - if (!hasProductName && !hasMrp) { - imageSize = 80; - } - - // FLEX DIRECTION LOGIC - const forceColumnLayout = - !hasProductName || !hasMrp || (!hasMDate && !hasEDate); - return ( -
-
- {templateOptions.value === 'T' && ( -
- {imageTagBarcodeAndQR( - templateOptions.codeType === 'B' - ? '90%' - : `${imageSize}%`, - '7px' - )} -
- )} - {hasProductName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {hasMrp && ( -
- {'₹' + detail?.MRP} -
- )} - {templateOptions.value === 'C' && ( -
- {imageTagBarcodeAndQR( - templateOptions.codeType === 'B' - ? '90%' - : `${imageSize}%`, - '7px' - )} -
- )} - {(hasMDate || hasEDate) && ( -
- {hasMDate && ( -
- {hasMDate && !hasEDate ? 'MFG: ' : ''} - {formatDate( - detail?.ProdVariantPriceDetails?.[0] - ?.ManufDate - )} -
- )} - {hasMDate && hasEDate && ( - | - )} - {hasEDate && ( -
- {!hasMDate && hasEDate ? 'EXP: ' : ''} - {formatDate( - detail?.ProdVariantPriceDetails?.[0]?.ExpDate - )} -
- )} -
- )} - {templateOptions.value === 'B' && ( -
- {imageTagBarcodeAndQR( - templateOptions.codeType === 'B' - ? '25mm' - : `${imageSize}%`, - '7px' - )} -
- )} -
-
- ); - })} -
-
- -
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
- {imageTagBarcodeAndQR( - templateOptions.codeType === 'B' ? '45mm' : '16mm', - '6px', - record?.QRCode || record?.ProdId - )} - {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName || record?.ProdName} -
- )} - {templateOptions.mrp && ( -
{'MRP : ' + record?.MRP}
- )} -
-
- )) - } - - ) - : Array.from({ length: copies })?.map((_, index) => ( -
-
- {imageTagBarcodeAndQR( - templateOptions.codeType === 'B' ? '45mm' : '16mm' - )} - {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {proName} -
- )} - {templateOptions.mrp && ( -
{'MRP : ' + detail?.MRP}
- )} -
-
- ))} -
-
- -
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( - -
-
- {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName || record?.ProdName} -
- )} - {templateOptions.mDate && record?.ManufDate && ( -
- {record?.ManufDate} -
- )} - {templateOptions.eDate && record?.ExpDate && ( -
- {record?.ExpDate} -
- )} -
-
- {imageTagBarcodeAndQR( - '70%', - '6px', - record?.QRCode || record?.ProdId - )} - {templateOptions.mrp && ( -
{'MRP : ' + record?.MRP}
- )} -
-
- )) - } - - ) - : Array.from({ length: copies })?.map((_, index) => ( -
-
- {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {templateOptions.mDate && - detail?.ProdVariantPriceDetails?.[0]?.ManufDate && ( -
- {detail?.ProdVariantPriceDetails?.[0]?.ManufDate} -
- )} - {templateOptions.eDate && - detail?.ProdVariantPriceDetails?.[0]?.ExpDate && ( -
- {detail?.ProdVariantPriceDetails?.[0]?.ExpDate} -
- )} -
-
- {imageTagBarcodeAndQR('70%')} - {templateOptions.mrp && ( -
{'MRP : ' + detail?.MRP}
- )} -
-
- ))} -
- -
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
- {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName || record?.ProdName} -
- )} - {templateOptions.mDate && record?.ManufDate && ( -
- {record?.ManufDate} -
- )} - {templateOptions.eDate && record?.ExpDate && ( -
- {record?.ExpDate} -
- )} -
-
- {imageTagBarcodeAndQR( - '90%', - '6px', - record?.QRCode || record?.ProdId - )} - {templateOptions.mrp && ( -
{'MRP : ' + record?.MRP}
- )} -
-
- )) - } - - ) - : Array.from({ length: copies })?.map((_, index) => ( -
-
- {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {templateOptions.mDate && - detail?.ProdVariantPriceDetails?.[0]?.ManufDate && ( -
- {detail?.ProdVariantPriceDetails?.[0]?.ManufDate} -
- )} - {templateOptions.eDate && - detail?.ProdVariantPriceDetails?.[0]?.ExpDate && ( -
- {detail?.ProdVariantPriceDetails?.[0]?.ExpDate} -
- )} -
-
- {imageTagBarcodeAndQR('90%')} - {templateOptions.mrp && ( -
{'MRP : ' + detail?.MRP}
- )} -
-
- ))} -
-
- -
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
- {imageTagBarcodeAndQR( - 'auto', - '6px', - record?.QRCode || record?.ProdId - )} -
- {templateOptions.productName && ( -
- {'Product Name :' + - (record?.NickName || record?.ProdName)} -
- )} - {templateOptions.sellingPrice && ( -
- {'Selling Price :' + record?.SellPrice} -
- )} -
-
- )) - } - - ) - : Array.from({ length: copies })?.map((_, index) => ( -
- {imageTagBarcodeAndQR()} -
- {templateOptions.productName && ( -
- {'Product Name :' + proName} -
- )} - {templateOptions.sellingPrice && ( -
- {'Selling Price :' + detail?.SellPrice} -
- )} -
-
- ))} -
-
- -
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
- {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {'Product Name: ' + - (record?.NickName || record?.ProdName)} -
- )} - {templateOptions.mrp && ( -
{'MRP : ' + record?.MRP}
- )} - {templateOptions.sellingPrice && ( -
- {'Selling Price :' + record?.SellPrice} -
- )} -
-
- {imageTagBarcodeAndQR( - 'auto', - '6px', - record?.QRCode || record?.ProdId - )} -
-
- )) - } - - ) - : Array.from({ length: copies })?.map((_, index) => ( -
-
- {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {'Product Name' + proName} -
- )} - {templateOptions.mrp && ( -
{'MRP : ' + detail?.MRP}
- )} - {templateOptions.sellingPrice && ( -
- {'Selling Price :' + detail?.SellPrice} -
- )} -
-
- {imageTagBarcodeAndQR()} -
-
- ))} -
-
- -
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
- {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {'Product Name: ' + - (record?.NickName || record?.ProdName)} -
- )} - {templateOptions.sellingPrice && ( -
- {'Selling Price :' + record?.SellPrice} -
- )} - {templateOptions.mDate && record?.ManufDate && ( -
{record?.ManufDate}
- )} - {templateOptions.eDate && record?.ExpDate && ( -
{record?.ExpDate}
- )} - {templateOptions.color && ( -
- {record?.Color || colorText} -
- )} -
-
- { -
- {imageTagBarcodeAndQR( - '70%', - '6px', - record?.QRCode || record?.ProdId - )} -
- } - {templateOptions.mrp && ( -
{'MRP : ' + record?.MRP}
- )} -
-
- )) - } - - ) - : Array.from({ length: copies })?.map((_, index) => ( -
-
- {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {'Product Name' + (nickName ? nickName : proName)} -
- )} - {templateOptions.sellingPrice && ( -
- {'Selling Price :' + detail?.SellPrice} -
- )} - {templateOptions.mDate && - detail?.ProdVariantPriceDetails?.[0]?.ManufDate && ( -
- {detail?.ProdVariantPriceDetails?.[0]?.ManufDate} -
- )} - {templateOptions.eDate && - detail?.ProdVariantPriceDetails?.[0]?.ExpDate && ( -
- {detail?.ProdVariantPriceDetails?.[0]?.ExpDate} -
- )} - {templateOptions.color && ( -
{colorText}
- )} -
-
- {
{imageTagBarcodeAndQR('70%')}
} - {templateOptions.mrp && ( -
{'MRP : ' + detail?.MRP}
- )} -
-
- ))} -
-
- -
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
- {templateOptions.value === 'T' && - imageTagBarcodeAndQR( - templateOptions.codeType === 'B' ? '100%' : '6mm', - '6px', - record?.QRCode || record?.ProdId - )} - {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName - ? record?.NickName - : record?.ProdName} -
- )} - {templateOptions.value === 'C' && - imageTagBarcodeAndQR( - templateOptions.codeType === 'B' - ? '80%' - : !templateOptions.productName && - !templateOptions.mrp - ? '80%' - : '35%', - '6px', - record?.QRCode || record?.ProdId - )} - {templateOptions.mrp && ( -
- {'₹:' + record?.MRP} -
- )} - {templateOptions.value === 'B' && - imageTagBarcodeAndQR( - templateOptions.codeType === 'B' ? '100%' : '50%', - '6px', - record?.QRCode || record?.ProdId - )} -
)) - }) - : Array.from({ length: copies })?.map((_, index) => ( -
- {templateOptions.value === 'T' && - imageTagBarcodeAndQR( - templateOptions.codeType === 'B' ? '100%' : '6mm' - )} - {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {templateOptions.value === 'C' && - imageTagBarcodeAndQR( - (templateOptions.codeType === 'B' - ? '80%' - : (!templateOptions.productName && - !templateOptions.mrp) - ? '80%' - : '7.5mm'), '5px' - )} - {templateOptions.mrp && ( -
- {'₹:' + (detail?.MRP ? detail?.MRP : 10.0)} -
- )} - {templateOptions.value === 'B' && - imageTagBarcodeAndQR( - templateOptions.codeType === 'B' ? '100%' : '7.5mm' - )} -
- ))} -
-
- {/* //Qrcode */} -
-
- {selectedRecords?.length > 0 - ? selectedRecords?.map((record, recordIndex) => { - const copyCount = generateQRCodeCopy(record?.QRCode); - - return Array.from({ length: copyCount })?.map((_, copyIndex) => ( -
-
- {imageTagBarcodeAndQR( - templateOptions.codeType === 'B' - ? '100%' - : !templateOptions.mrp && - !templateOptions.productName - ? '60%' - : '40%', - '8px', - record?.QRCode || record?.ProdId - )} - {(templateOptions.productName || - templateOptions.mrp) && ( -
- {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {record?.NickName - ? record?.NickName - : record?.ProdName} -
- )} - {templateOptions.mrp && ( -
- {'MRP : ' + record?.MRP} -
- )} -
- )} -
-
- )) - } - ) - : Array.from({ length: copies })?.map((_, index) => ( -
-
- {imageTagBarcodeAndQR( - templateOptions.codeType === 'B' - ? '100%' - : !templateOptions.mrp && !templateOptions.productName - ? '60%' - : '40%', - '8px' - )} - {(templateOptions.productName || templateOptions.mrp) && ( -
- {templateOptions.productName && ( -
12 ? 'text-ellipsis' : ''}`} - > - {nickName - ? nickName - : proName - ? proName - : 'Product Name'} -
- )} - {templateOptions.mrp && ( -
- {'MRP : ' + detail?.MRP} -
- )} -
- )} -
-
- ))} -
-
- { }} onlineImage={onlineImage} ImageLink={rowRecord?.ProdLogo || null} - updateImageUrl={imageModalRowIndex ? updateImageUrl : () => { }} + updateImageUrl={imageModalRowIndex ? updateImageUrl : () => {}} handleClose={handleImageModalClose} />
( - { - const newValue = parseInt(e.target.value); - setQrandbarcodeDatas(prev => - prev.map(item => - item.key === record.key - ? { ...item, copiesCount: newValue } - : item - ) - ); - }} - style={{ width: '80px' }} - /> - ) - } - ]} - dataSource={QrandbarcodeDatas} - rowKey="ProdId" - pagination={false} - size="small" - rowClassName={(record) => - record.StockAvailable === "N" ? 'row-red' : '' - } - /> - -
-

- Stock is not Maintained -
- - } + onClose={() => setstockWiseQrcode(false)} + type="stock" + totalCopies={totalCopies} + onFinish={onFinish} + QrandbarcodeDatas={QrandbarcodeDatas} + setQrandbarcodeDatas={setQrandbarcodeDatas} /> - setProductWiseQrcode(false)} - handleSubmit={() => { - if (totalCopies == 0) { - message.error("Please enter copies count") - return; - } - else { - setProductWiseQrcode(false) - onFinish(); - } - - }} footer={true} - - children={ - <> -
-
( - { - const newValue = parseInt(e.target.value) || 1; - setQrandbarcodeDatas(prev => - prev.map(item => - item.key === record.key - ? { ...item, copiesCount: newValue } - : item - ) - ); - }} - style={{ width: '80px' }} - /> - ) - } - ]} - dataSource={QrandbarcodeDatas} - rowKey="ProdId" - pagination={false} - size="small" - /> - - - - - } + onClose={() => setProductWiseQrcode(false)} + type="product" + totalCopies={totalCopies} + onFinish={onFinish} + QrandbarcodeDatas={QrandbarcodeDatas} + setQrandbarcodeDatas={setQrandbarcodeDatas} />