6042 lines
228 KiB
JavaScript
6042 lines
228 KiB
JavaScript
import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import {
|
|
Space,
|
|
Form,
|
|
Tooltip,
|
|
Pagination,
|
|
Table,
|
|
Tour,
|
|
Popconfirm,
|
|
Radio,
|
|
Button,
|
|
Empty,
|
|
message,
|
|
} from 'antd';
|
|
import { debounce } from 'lodash';
|
|
import {
|
|
EditFilled,
|
|
DeleteFilled,
|
|
PlusOutlined,
|
|
ReloadOutlined,
|
|
PrinterFilled,
|
|
CloseOutlined,
|
|
ArrowRightOutlined,
|
|
CheckSquareOutlined,
|
|
} from '@ant-design/icons';
|
|
import { BiAddToQueue } from 'react-icons/bi';
|
|
import { FiUploadCloud, FiInfo, FiEyeOff } from 'react-icons/fi';
|
|
import { BsCameraFill } from 'react-icons/bs';
|
|
|
|
import { MdDeleteForever } from 'react-icons/md';
|
|
import QRCode from 'qrcode';
|
|
import { InputField } from '../../Components/Forms/InputField.jsx';
|
|
import { DropDowns } from '../../Components/Forms/DropDown';
|
|
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
|
|
import { Search } from '../../Components/Forms/Search';
|
|
import Buttons from '../../Components/Forms/Buttons';
|
|
import { Messages } from '../../Components/Notifications/Messages';
|
|
import FormHeader from '../PageComponents/FormHeader.jsx';
|
|
import {
|
|
changeBreadCrumb,
|
|
getEmpAccess,
|
|
} from '../../Features/AppPage/CenterPage.js';
|
|
import {
|
|
getProductDataPageNo,
|
|
deleteProductData,
|
|
getAllsubcatdata,
|
|
getAllbrandcatdata,
|
|
bulkpostdata,
|
|
uomDataSelector,
|
|
prodCatDataSelector,
|
|
taxSelector,
|
|
supplierSelector,
|
|
getProdCatData,
|
|
getUomData,
|
|
getSupplierData,
|
|
getAdmin,
|
|
Deletebulkdatas,
|
|
getProductDataSearch,
|
|
onlineimages,
|
|
putProductData,
|
|
getAllprodIds,
|
|
updateProductImage,
|
|
PostPedalOCR,
|
|
|
|
// getUserGuideLines,
|
|
// postUserGuideLines
|
|
} from '../../Features/ProductPage/ProductPage.js';
|
|
import {
|
|
getSession,
|
|
printDiv,
|
|
roundToDecimal,
|
|
validateSafeInput,
|
|
} from '../../Services/Others';
|
|
import {
|
|
emptyExcelData,
|
|
excelDataSelector,
|
|
} from '../../Features/ExcelUploadPage/ExcelUploadPage.js';
|
|
import moment from 'moment';
|
|
import ProductExcel from '../Product/ExcelUpload.jsx';
|
|
import TertiaryButton from '../../Components/Forms/tertiaryButton.jsx';
|
|
import { useAuth } from '../../AuthContext.jsx';
|
|
import { MdOutlineAutoDelete } from 'react-icons/md';
|
|
import '../../Styles/OverAllStyle/OverAllStyle.scss';
|
|
import {
|
|
getBarcodeSessionsIDs,
|
|
getBarcodeTemplate,
|
|
} from '../../Features/Barcode/Barcode.js';
|
|
import { style, getPageStyle } from './Printstyles.js';
|
|
import JsBarcode from 'jsbarcode';
|
|
import { uploadImage } from '../../Features/upload/upload.js';
|
|
import CropUpload from '../../Components/Forms/CropUpload.jsx';
|
|
import { getPreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js';
|
|
import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin.js';
|
|
import { FaRegEye } from 'react-icons/fa';
|
|
import { HiOutlineRocketLaunch } from 'react-icons/hi2';
|
|
import GooglePayUPIButton from '../UPIPayButton/UpiPay.jsx';
|
|
import ScannedProductTable from '../../Components/PedalOCR/scannedProductTable.jsx';
|
|
import MultiCameraCropOCR from '../../Components/PedalOCR/MultiCameraCropOCR.jsx';
|
|
import OCRLoader from '../../Components/PedalOCR/OCRLoader.jsx';
|
|
import { GiHorizontalFlip, GiVerticalFlip } from 'react-icons/gi';
|
|
|
|
import './PrintTabs.css';
|
|
import { FaPlus } from "react-icons/fa6";
|
|
import { Tables } from '../../../ownLib/my-ui-lib.js';
|
|
|
|
const colorText = 'Color : Red';
|
|
const ProductList = () => {
|
|
const { SadminuserAccess } = useAuth();
|
|
let SAAccessCommonMaster = SadminuserAccess?.find(
|
|
(e) => e?.MenuName === 'Product'
|
|
);
|
|
const formRef = useRef();
|
|
// const ref1 = useRef(null);
|
|
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');
|
|
const UserId = getSession('UserId');
|
|
const UserType = getSession('UserType');
|
|
|
|
const [AllProdIds, setAllProdIds] = useState([]);
|
|
const [cachedData, setCachedData] = useState({});
|
|
const [CachedDataSearch, setCachedDataSearch] = useState({});
|
|
const [searchedText, setSearchedText] = useState('');
|
|
const [SearchProdData, setSearchProdData] = useState([]);
|
|
const [productData, setproductData] = useState([]);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [activeTab, setActiveTab] = useState('stock');
|
|
let SalesStatus = productData?.[0]?.SalesStatus;
|
|
const UomData = useSelector(uomDataSelector);
|
|
const ProdCatData = useSelector(prodCatDataSelector);
|
|
const SupplierData = useSelector(supplierSelector);
|
|
const TaxData = useSelector(taxSelector);
|
|
const excelDataValues = useSelector(excelDataSelector);
|
|
const appPreferences = useSelector(ApplicationPreferences);
|
|
|
|
const UomTypePreference = appPreferences?.find(
|
|
(preference) => preference?.PreferredCatName === 'Product Uom'
|
|
)?.PreferenceCatDetails;
|
|
const isCheckSportsApp = appPreferences
|
|
?.find((preference) => preference?.PreferredCatName === 'Common Module')
|
|
?.PreferenceCatDetails?.some(
|
|
(e) =>
|
|
e?.PreferredSubCatName === 'SportsApp' && e?.PreferredStatus === 'Y'
|
|
);
|
|
const UomPreference = UomData?.filter((item) =>
|
|
UomTypePreference?.some?.(
|
|
(e) =>
|
|
e?.PreferredSubCatName?.toLowerCase() ==
|
|
item?.ConfigName?.toLowerCase() && e?.PreferredStatus == 'Y'
|
|
)
|
|
);
|
|
|
|
const productFieldPreferences = appPreferences?.find(
|
|
(preference) =>
|
|
preference?.PreferredCatName?.toLowerCase() === 'product form fields'
|
|
)?.PreferenceCatDetails;
|
|
|
|
const filteredFields = productFieldPreferences?.filter(
|
|
(field) => field?.PreferredStatus === 'Y'
|
|
);
|
|
const brandColumn = filteredFields?.find(
|
|
(field) => field?.PreferredSubCatName === 'Brand'
|
|
);
|
|
const qrCodeColumn = filteredFields?.find(
|
|
(field) => field?.PreferredSubCatName === 'Auto Generate QRCode'
|
|
);
|
|
const subCategory = filteredFields?.find(
|
|
(field) => field?.PreferredSubCatName === 'Sub Category'
|
|
);
|
|
|
|
//local states
|
|
const [QrandbarcodeDatas, setQrandbarcodeDatas] = useState([]);
|
|
const [uploadImageModal, setUploadImageModal] = useState(false);
|
|
const [MultiCode, setMultiCode] = useState(false);
|
|
const [selectedRecords, setSelectedRecords] = useState([]);
|
|
const [imageModalRowIndex, setImageModalRowIndex] = useState(null);
|
|
const [rowRecord, setRowRecord] = useState(null);
|
|
const [sortedInfo, setSortedInfo] = useState({});
|
|
const [messageType, setMessageType] = useState(null);
|
|
const [messageData, setMessageData] = useState(null);
|
|
const [open, setOpen] = useState(false);
|
|
const [breadModalOpen, setBreadModalOpen] = useState(false);
|
|
const [breadData, setBreadData] = useState([]);
|
|
const [openPaddleOCR, setOpenPaddleOCR] = useState(false);
|
|
const [uploadedFile, setUploadedFile] = useState(null);
|
|
const [uploadedFiles, setUploadedFiles] = useState([]);
|
|
const [showTips, setShowTips] = useState(false);
|
|
const [isOCRProcessing, setIsOCRProcessing] = useState({
|
|
Length: 0,
|
|
Loader: false,
|
|
});
|
|
const [isDelete, setisDelete] = useState(false);
|
|
const [allowDecimal, setAllowDecimal] = useState(false);
|
|
const [inputError, setInputError] = useState('');
|
|
const [openExcel, setOpenExcel] = useState(false);
|
|
const [empData, setEmpData] = useState();
|
|
const [dropdownValue, setDropdownValue] = useState();
|
|
const [printProductName, setPrintProductName] = useState(false);
|
|
const [copies, setCopies] = useState();
|
|
const [proName, setProName] = useState();
|
|
const [nickName, setNickName] = useState(null);
|
|
const [ProdId, setProdId] = useState();
|
|
const [detail, setDetail] = useState();
|
|
const [size, setSize] = useState();
|
|
const [qrCodeUrl, setQrCodeUrl] = useState('');
|
|
const [page, setpage] = useState(1);
|
|
const [subCatData, setSubCatData] = useState();
|
|
const [allBrandData, setallBrandData] = useState();
|
|
const [Exceldatasubmit, setExceldatasubmit] = useState(null);
|
|
const [coresdata, setCoresdata] = useState([]);
|
|
const [barcodeTemplateDetails, setBarcodeTemplateDetails] = useState([]);
|
|
const [PopUp, setPopUp] = useState(false);
|
|
const [fromPage, setFromPage] = useState(1);
|
|
const [Bulkpost, setBulkpost] = useState(false);
|
|
const [templateOptions, setTemplateOptions] = useState({
|
|
mrp: false,
|
|
barcode: false,
|
|
color: false,
|
|
eDate: false,
|
|
mDate: false,
|
|
sellingPrice: false,
|
|
productName: false,
|
|
value: '',
|
|
secondValue: '',
|
|
qrcode: false,
|
|
codeType: '',
|
|
});
|
|
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 [base64Image, setBase64Image] = useState(null);
|
|
const [barcodeBase64Image, setBarcodeBase64Image] = useState(null);
|
|
const [deleteProductPages, setDeleteProductPages] = useState([]);
|
|
const [paginatedDeleteData, setPaginatedDeleteData] = useState([]);
|
|
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
|
|
|
const countOfProduct =
|
|
SearchProdData?.length > 0
|
|
? SearchProdData?.length
|
|
: deleteProductPages?.length > 0
|
|
? selectedRowKeys?.length
|
|
: productData?.[0]?.TotalCount;
|
|
|
|
const [addnewAccess, setaddnewAccess] = useState(true);
|
|
const [imageopen, setimageOpen] = useState(false);
|
|
const [imagedata, setimagedata] = useState();
|
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
const [onlineImage, setOnlineImage] = useState(null);
|
|
const [imageUrl, setImageUrl] = useState('');
|
|
const [recordIndex, setRecordIndex] = useState(null);
|
|
|
|
|
|
const [rangeFrom, setRangeFrom] = useState('');
|
|
const [rangeTo, setRangeTo] = useState('');
|
|
const [deleteInput, setDeleteInput] = useState(null);
|
|
const [stockWiseQrcode, setstockWiseQrcode] = useState(false);
|
|
const [productWiseQrcode, setProductWiseQrcode] = useState(false);
|
|
const lastRangeIdsRef = useRef([]);
|
|
|
|
|
|
const subDirectory = import.meta.env.ENV_BASE_URL;
|
|
// const [openTour, setOpenTour] = useState(false);
|
|
|
|
// const steps = [
|
|
// {
|
|
// title: 'Click here to add a new product',
|
|
// description: 'This button allows you to add a new product to the inventory.',
|
|
// target: () => ref1.current,
|
|
// placement: 'top',
|
|
// },
|
|
// ];
|
|
|
|
const items = [
|
|
{
|
|
name: 'Home',
|
|
link: `${subDirectory}app-page/home`,
|
|
},
|
|
|
|
{
|
|
name: isCheckSportsApp ? 'Add Slot' : 'Product',
|
|
link: `${subDirectory}setting/product-master`,
|
|
},
|
|
];
|
|
// const stockAvailableCount = selectedRecords?.filter(
|
|
// item => item?.StockAvailable === "Y"
|
|
// ).length
|
|
const Qrcode = (record) => {
|
|
setProName(record?.ProdName);
|
|
setProdId(record?.QRCode);
|
|
setDetail(record);
|
|
setSize(record.Size + record.UomName);
|
|
setOpen(true);
|
|
};
|
|
const handlePageChange = (current) => {
|
|
if (deleteProductPages?.length > 0) {
|
|
setproductData(paginatedDeleteData[current]);
|
|
}
|
|
setpage(current);
|
|
setCurrentPage(current);
|
|
};
|
|
|
|
const pagewisefn = () => {
|
|
setPopUp(true);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (deleteProductPages?.length > 0) {
|
|
getForDeleteProduct(deleteProductPages);
|
|
} else if (deleteProductPages?.length === 0) {
|
|
getProdfun();
|
|
return;
|
|
}
|
|
}, [deleteProductPages]);
|
|
|
|
useEffect(() => {
|
|
if (coresdata?.length > 0 && open) {
|
|
CoresOnChange(coresdata?.[0].ConfigName);
|
|
}
|
|
}, [open]);
|
|
|
|
useEffect(() => {
|
|
if (!AllProdIds?.length) return;
|
|
const cleaned = deleteInput?.replace(/\s+/g, '');
|
|
const parts = cleaned?.split(',') || [];
|
|
let newRangeIds = [];
|
|
let globalIndex = [];
|
|
for (const part of parts) {
|
|
if (/^\d+$/.test(part)) {
|
|
// Single index
|
|
const index = parseInt(part, 10);
|
|
if (index > 0 && index <= AllProdIds?.length) {
|
|
newRangeIds.push(AllProdIds[index - 1]?.ProdId);
|
|
globalIndex.push(Math.ceil(index / 10));
|
|
}
|
|
} else if (/^\d+-\d+$/.test(part)) {
|
|
// Range
|
|
const [start, end] = part?.split('-').map(Number);
|
|
if (start > 0 && end >= start && end <= AllProdIds?.length) {
|
|
const pages = getPagesToCall(start, end);
|
|
pages?.forEach((page) => globalIndex.push(page));
|
|
for (let i = start; i <= end; i++) {
|
|
newRangeIds?.push(AllProdIds[i - 1]?.ProdId);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const idsToRemove = lastRangeIdsRef.current.filter(
|
|
(id) => !newRangeIds?.includes(id)
|
|
);
|
|
|
|
const idsToAdd = newRangeIds.filter(
|
|
(id) => !lastRangeIdsRef?.current?.includes(id)
|
|
);
|
|
setCurrentPage(1);
|
|
setpage(1);
|
|
const withRemoved = selectedRowKeys?.filter(
|
|
(id) => !idsToRemove?.includes(id)
|
|
);
|
|
const withAdded = [...withRemoved, ...idsToAdd];
|
|
const newSelectedRowKeys = Array.from(new Set(withAdded));
|
|
setSelectedRowKeys(newSelectedRowKeys);
|
|
setDeleteProductPages(Array.from(new Set(globalIndex)));
|
|
lastRangeIdsRef.current = newRangeIds;
|
|
}, [deleteInput, AllProdIds]);
|
|
|
|
function getPagesToCall(from, to, itemsPerPage = 10) {
|
|
const startPage = Math.ceil(from / itemsPerPage);
|
|
const endPage = Math.ceil(to / itemsPerPage);
|
|
|
|
const pages = [];
|
|
for (let i = startPage; i <= endPage; i++) {
|
|
pages.push(i);
|
|
}
|
|
|
|
return pages;
|
|
}
|
|
|
|
const validateDeleteInput = (input, totalCount) => {
|
|
if (!input?.trim()) return { isValid: true, error: '' };
|
|
|
|
const cleaned = input.replace(/\s+/g, '');
|
|
const parts = cleaned.split(',');
|
|
|
|
const rangeRegex = /^\d+(-\d+)?$/;
|
|
|
|
for (const part of parts) {
|
|
if (!rangeRegex.test(part)) {
|
|
return {
|
|
isValid: false,
|
|
error: 'Invalid range, use e.g. 1-5, 8, 9-10',
|
|
};
|
|
}
|
|
|
|
if (part.includes('-')) {
|
|
const [start, end] = part.split('-').map(Number);
|
|
if (
|
|
isNaN(start) ||
|
|
isNaN(end) ||
|
|
start <= 0 ||
|
|
end <= 0 ||
|
|
start > end ||
|
|
start > totalCount ||
|
|
end > totalCount
|
|
) {
|
|
return {
|
|
isValid: false,
|
|
error: `Out of bounds product reference, limit is ${totalCount}`,
|
|
};
|
|
}
|
|
} else {
|
|
const val = parseInt(part, 10);
|
|
if (
|
|
isNaN(val) ||
|
|
val <= 0 ||
|
|
!Number.isInteger(val) ||
|
|
val > totalCount
|
|
) {
|
|
return {
|
|
isValid: false,
|
|
error: `Out of bounds product reference, limit is ${totalCount}`,
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
return { isValid: true, error: '' };
|
|
};
|
|
|
|
// const columns = useMemo(
|
|
// () => [
|
|
// {
|
|
// title: 'Sl.No',
|
|
// key: 'sno',
|
|
// align: 'center',
|
|
// width: '60px',
|
|
// render: (text, object, index) => (
|
|
// <a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
|
|
// ),
|
|
// },
|
|
// {
|
|
// title: 'Category',
|
|
// dataIndex: 'CategoryName',
|
|
// key: 'CategoryName',
|
|
// width: '100px',
|
|
// render: (text) => <a style={{ color: 'black' }}>{text}</a>,
|
|
// columnKey: 'CategoryName',
|
|
// sorter: (a, b) => a?.CategoryName?.localeCompare(b?.CategoryName),
|
|
// sortOrder:
|
|
// sortedInfo.columnKey === 'CategoryName' ? sortedInfo.order : null,
|
|
// ellipsis: true,
|
|
// },
|
|
|
|
// {
|
|
// title: isCheckSportsApp ? 'Name' : 'Product',
|
|
// dataIndex: 'ProdName',
|
|
// key: 'ProdName',
|
|
// width: '100px',
|
|
// render: (text) => <a style={{ color: 'black' }}>{text}</a>,
|
|
// sorter: (a, b) => a?.ProdName?.localeCompare(b?.ProdName),
|
|
// columnKey: 'ProdName',
|
|
// sortOrder:
|
|
// sortedInfo.columnKey === 'ProdName' ? sortedInfo.order : null,
|
|
// ellipsis: true,
|
|
// },
|
|
// brandColumn && subCategory
|
|
// ? {
|
|
// title: 'Brand',
|
|
// dataIndex: 'BrandName',
|
|
// key: 'BrandName',
|
|
// columnKey: 'BrandName',
|
|
// width: '100px',
|
|
// render: (text) => <a style={{ color: 'black' }}>{text}</a>,
|
|
// sorter: (a, b) => a?.BrandName?.localeCompare(b?.BrandName),
|
|
// sortOrder:
|
|
// sortedInfo.columnKey === 'BrandName' ? sortedInfo.order : null,
|
|
// ellipsis: true,
|
|
// }
|
|
// :null,
|
|
|
|
// {
|
|
// title: 'Qty',
|
|
// dataIndex: 'Size',
|
|
// key: 'Size',
|
|
// width: '100px',
|
|
// align: 'center',
|
|
// render: (text, record) => (
|
|
// <a
|
|
// style={{ color: 'black' }}
|
|
// >{`${record?.Size}${record?.UomName}`}</a>
|
|
// ),
|
|
// ellipsis: true,
|
|
// },
|
|
// // {
|
|
// // title: 'Unit',
|
|
// // dataIndex: 'UomName',
|
|
// // key: 'UomName',
|
|
// // width: '100px',
|
|
// // render: (text) => <a style={{ color: 'black' }}>{text}</a>,
|
|
// // ellipsis: true,
|
|
// // },
|
|
|
|
// {
|
|
// title: 'Sell Price',
|
|
// dataIndex: 'SellPrice',
|
|
// key: 'SellPrice',
|
|
// width: '100px',
|
|
// align: 'right',
|
|
// render: (text) => (
|
|
// <a style={{ color: 'black' }}>{roundToDecimal(text, allowDecimal)}</a>
|
|
// ),
|
|
// ellipsis: true,
|
|
// },
|
|
// // {
|
|
// // title: "Stock Available",
|
|
// // dataIndex: "StockAvailable",
|
|
// // key: "StockAvailable",
|
|
// // width: "100px",
|
|
// // render: (text) => <a style={{ color: "black" }}>{text}</a>,
|
|
// // ellipsis: true,
|
|
// // },
|
|
|
|
// qrCodeColumn
|
|
// ? {
|
|
// title: 'QRCode',
|
|
// dataIndex: 'QRCode',
|
|
// key: 'QRCode',
|
|
// width: '100px',
|
|
// render: (text) => (
|
|
// <a style={{ color: 'black' }}>{text ? text : '-'}</a>
|
|
// ),
|
|
// ellipsis: true,
|
|
// }
|
|
// : {},
|
|
|
|
// qrCodeColumn
|
|
// ? {
|
|
// title: 'Print QRCode',
|
|
// key: 'Print',
|
|
// dataIndex: 'Print',
|
|
// width: '100px',
|
|
// render: (_, record, index) =>
|
|
// productData.length >= 1 ? (
|
|
// <Space size="middle">
|
|
// {record?.QRCode ? (
|
|
// <a>
|
|
// <PrinterFilled
|
|
// style={{ fontSize: '20px' }}
|
|
// onClick={() => {
|
|
// Qrcode(record);
|
|
// }}
|
|
// />
|
|
// </a>
|
|
// ) : (
|
|
// '-'
|
|
// )}
|
|
// </Space>
|
|
// ) : null,
|
|
// }
|
|
// : {},
|
|
|
|
// {
|
|
// title: 'Action',
|
|
// key: 'Action',
|
|
// dataIndex: 'Action',
|
|
// width: '100px',
|
|
// render: (_, record, index) =>
|
|
// productData.length >= 1 ? (
|
|
// <Space size="middle">
|
|
// {record.ActiveStatus === 'A' ? (
|
|
// <a>
|
|
// <EditFilled
|
|
// style={{ color: '#1292EE' }}
|
|
// onClick={() =>
|
|
// UserType === 'Super Admin' ||
|
|
// (UserType === 'Super Admin User' &&
|
|
// SAAccessCommonMaster?.UpdateAccess === 'Y') ||
|
|
// (UserType === 'Employee' &&
|
|
// empData?.UpdateAccess === 'Y') ||
|
|
// UserType === 'Admin'
|
|
// ? actionsFormatter(record, index)
|
|
// : null
|
|
// }
|
|
// />
|
|
// </a>
|
|
// ) : (
|
|
// ''
|
|
// )}
|
|
// <a>
|
|
// {record.ActiveStatus === 'A' ? (
|
|
// <DeleteFilled
|
|
// style={{
|
|
// color: '#FF4D4F',
|
|
// }}
|
|
// onClick={() =>
|
|
// UserType === 'Super Admin' ||
|
|
// (UserType === 'Super Admin User' &&
|
|
// SAAccessCommonMaster?.DeleteAccess === 'Y') ||
|
|
// (UserType === 'Employee' &&
|
|
// empData?.DeleteAccess === 'Y') ||
|
|
// UserType === 'Admin'
|
|
// ? statusFormatter(record)
|
|
// : null
|
|
// }
|
|
// />
|
|
// ) : (
|
|
// <ReloadOutlined
|
|
// style={{
|
|
// color: '#52C41A',
|
|
// }}
|
|
// onClick={() =>
|
|
// UserType === 'Super Admin' ||
|
|
// (UserType === 'Super Admin User' &&
|
|
// SAAccessCommonMaster?.DeleteAccess === 'Y') ||
|
|
// (UserType === 'Employee' &&
|
|
// empData?.DeleteAccess === 'Y') ||
|
|
// UserType === 'Admin'
|
|
// ? statusFormatter(record)
|
|
// : null
|
|
// }
|
|
// />
|
|
// )}
|
|
// </a>
|
|
// </Space>
|
|
// ) : null,
|
|
// },
|
|
// {
|
|
// title: 'Image',
|
|
// key: 'ProdLogo',
|
|
// dataIndex: 'ProdLogo',
|
|
// width: '100px',
|
|
// align: 'center',
|
|
// render: (_, record, index) => (
|
|
// // <div className="productMasterImageUpload">
|
|
// <Tooltip title={record.ProdLogo ? 'View Image' : 'Upload Image'}>
|
|
// <div>
|
|
// <FaRegEye
|
|
// style={{ background: 'none', cursor: 'pointer' }}
|
|
// size={22}
|
|
// color={record.ProdLogo && '#1F9B3A'}
|
|
// onClick={() => {
|
|
// setRowRecord(record);
|
|
// setImageModalRowIndex(index);
|
|
// setUploadImageModal(true);
|
|
// setOnlineImage(null);
|
|
// setSelectedImage(null);
|
|
// }}
|
|
// />
|
|
// </div>
|
|
// </Tooltip>
|
|
// ),
|
|
// },
|
|
// {
|
|
// title: (
|
|
// <>
|
|
// <div
|
|
// style={{
|
|
// display: 'flex',
|
|
// alignItems: isDelete ? 'center' : 'flex-start',
|
|
// flexDirection: 'column',
|
|
// gap: '10px',
|
|
// justifyContent: 'center',
|
|
// }}
|
|
// >
|
|
// <Tooltip title="Bulk Delete" className="delete-bulk-icon">
|
|
// {isDelete ? (
|
|
// <>
|
|
// {/* <DeleteFilled
|
|
// style={{
|
|
// color: '#FF4D4F',
|
|
// marginBottom: '1rem',
|
|
// }}
|
|
// onClick={(e) => {
|
|
// setisDelete(false);
|
|
// setSelectedRowKeys([]);
|
|
// setRangeFrom('');
|
|
// setRangeTo('');
|
|
// e.stopPropagation();
|
|
// }}
|
|
// /> */}
|
|
// <MdDeleteForever
|
|
// style={{
|
|
// color: '#333',
|
|
// marginLeft: '0.5rem',
|
|
// fontSize: '1.2rem',
|
|
// cursor: 'pointer',
|
|
// marginBottom: '1rem',
|
|
// }}
|
|
// onClick={(e) => {
|
|
// setisDelete(false);
|
|
// setSelectedRowKeys([]);
|
|
// setRangeFrom('');
|
|
// setRangeTo('');
|
|
// // setCachedData({})
|
|
// setDeleteInput();
|
|
// setDeleteProductPages([]);
|
|
// getProdfun();
|
|
// e.stopPropagation();
|
|
// }}
|
|
// />
|
|
// </>
|
|
// ) : (
|
|
// <Popconfirm
|
|
// title="Are you sure you want to delete ?"
|
|
// onConfirm={() => {
|
|
// setisDelete(true);
|
|
// }}
|
|
// okText="Yes"
|
|
// cancelText="No"
|
|
// placement="bottom"
|
|
// >
|
|
// <DeleteFilled
|
|
// style={{
|
|
// color: '#FF4D4F',
|
|
// fontSize: '1rem',
|
|
// cursor: 'pointer',
|
|
// }}
|
|
// onClick={(e) => {
|
|
// e.stopPropagation();
|
|
// }}
|
|
// />
|
|
// </Popconfirm>
|
|
// )}
|
|
// {isDelete && selectedRowKeys.length !== AllProdIds.length && (
|
|
// <input
|
|
// type="checkbox"
|
|
// checked={
|
|
// AllProdIds.length > 0 &&
|
|
// selectedRowKeys.length === AllProdIds.length
|
|
// }
|
|
// indeterminate={
|
|
// selectedRowKeys.length > 0 &&
|
|
// selectedRowKeys.length < AllProdIds.length
|
|
// }
|
|
// onChange={(e) => {
|
|
// if (e.target.checked) {
|
|
// const allProductIds = AllProdIds.map((p) => p.ProdId);
|
|
// setSelectedRowKeys(allProductIds);
|
|
// setRangeFrom('');
|
|
// setRangeTo('');
|
|
// } else {
|
|
// setSelectedRowKeys([]);
|
|
// }
|
|
// }}
|
|
// />
|
|
// )}
|
|
// </Tooltip>
|
|
|
|
// {/* {isDelete && selectedRowKeys.length !== AllProdIds.length && (
|
|
// <div className="productlistgetnoinput">
|
|
// <input
|
|
// maxLength={12}
|
|
// type="number"
|
|
// // placeholder="From"
|
|
// value={rangeFrom}
|
|
// onChange={(e) => {
|
|
// const val = e.target.value.replace(/[^\d]/g, '');
|
|
// setRangeFrom(val);
|
|
// }}
|
|
// />
|
|
// <input
|
|
// maxLength={12}
|
|
// type="number"
|
|
// // placeholder="To"
|
|
// value={rangeTo}
|
|
// onChange={(e) => {
|
|
// const val = e.target.value.replace(/[^\d]/g, '');
|
|
// setRangeTo(val);
|
|
// }}
|
|
// />
|
|
// </div>
|
|
// )} */}
|
|
// {isDelete && selectedRowKeys.length !== AllProdIds.length && (
|
|
// <div
|
|
// className={'product-delete-input'}
|
|
// style={{ width: 'inherit' }}
|
|
// >
|
|
// <Tooltip title={'e.g. 1-5, 8, 9-10'} placement={'left'}>
|
|
// <InputField
|
|
// maxLength={30}
|
|
// value={deleteInput}
|
|
// onChange={(e) => {
|
|
// const val = e?.target?.value;
|
|
// setDeleteInput(val);
|
|
|
|
// const totalCount = productData?.[0]?.TotalCount || 0;
|
|
// const { isValid, error } = validateDeleteInput(
|
|
// val,
|
|
// totalCount
|
|
// );
|
|
|
|
// setInputError(isValid ? '' : error);
|
|
// }}
|
|
// placeholder="e.g. 1-5, 8, 9-10"
|
|
// style={{
|
|
// borderColor: inputError ? 'red' : undefined,
|
|
// borderWidth: inputError ? 1 : undefined,
|
|
// }}
|
|
// />
|
|
// </Tooltip>
|
|
// {inputError && (
|
|
// <div style={{ color: 'red', marginTop: 4 }}>
|
|
// {inputError}
|
|
// </div>
|
|
// )}
|
|
// </div>
|
|
// )}
|
|
// </div>
|
|
// </>
|
|
// ),
|
|
// dataIndex: 'checkbox',
|
|
// key: 'checkbox',
|
|
// width: '100px',
|
|
// align: 'center',
|
|
// render: (_, record) =>
|
|
// isDelete ? (
|
|
// <input
|
|
// type="checkbox"
|
|
// checked={selectedRowKeys.includes(record.ProdId)}
|
|
// onChange={(e) => {
|
|
// if (e.target.checked) {
|
|
// setSelectedRowKeys((prev) => [...prev, record.ProdId]);
|
|
// } else {
|
|
// setSelectedRowKeys((prev) =>
|
|
// prev.filter((id) => id !== record.ProdId)
|
|
// );
|
|
// }
|
|
// }}
|
|
// />
|
|
// ) : null,
|
|
// sorter: false,
|
|
// },
|
|
// ],
|
|
// [
|
|
// AllProdIds,
|
|
// selectedRowKeys,
|
|
// rangeFrom,
|
|
// rangeTo,
|
|
// page,
|
|
// productData,
|
|
// isDelete,
|
|
// sortedInfo,
|
|
// 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) {
|
|
return [...prev, record]; // add record
|
|
} else {
|
|
return prev.filter((r) => r.ProdId !== record.ProdId); // remove record
|
|
}
|
|
});
|
|
};
|
|
const CreateQrcode = async (isChecked, code, productName, StockAvailable, copiesCount = 0) => {
|
|
|
|
if (!code) return;
|
|
|
|
if (isChecked) {
|
|
const data = await QRCode.toDataURL(code);
|
|
setQrandbarcodeDatas((prev) => [
|
|
...prev,
|
|
{
|
|
key: code,
|
|
url: data,
|
|
productName: productName,
|
|
copiesCount: copiesCount,
|
|
StockAvailable: StockAvailable
|
|
},
|
|
]);
|
|
} else {
|
|
setQrandbarcodeDatas((prev) => prev.filter((item) => item.key !== code));
|
|
}
|
|
};
|
|
|
|
const CreateQrcodesBatch = async (products, isChecked) => {
|
|
if (isChecked) {
|
|
const batchSize = 5;
|
|
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))
|
|
);
|
|
// Small delay to prevent UI blocking
|
|
if (i + batchSize < products.length) {
|
|
await new Promise((resolve) => setTimeout(resolve, 10));
|
|
}
|
|
}
|
|
} else {
|
|
products.forEach((product) => CreateQrcode(false, product.QRCode, product.ProdName, product.StockAvailable, product.TotalBalanceQty));
|
|
}
|
|
};
|
|
|
|
const columns = useMemo(() => {
|
|
const cols = [
|
|
{
|
|
title: 'Sl.No',
|
|
key: 'sno',
|
|
align: 'center',
|
|
width: '60px',
|
|
render: (text, object, index) => (
|
|
<a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
|
|
),
|
|
},
|
|
{
|
|
title: 'Category',
|
|
dataIndex: 'CategoryName',
|
|
key: 'CategoryName',
|
|
width: '100px',
|
|
render: (text) => <a style={{ color: 'black' }}>{text}</a>,
|
|
columnKey: 'CategoryName',
|
|
sorter: (a, b) => a?.CategoryName?.localeCompare(b?.CategoryName),
|
|
sortOrder:
|
|
sortedInfo.columnKey === 'CategoryName' ? sortedInfo.order : null,
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: isCheckSportsApp ? 'Name' : 'Product',
|
|
dataIndex: 'ProdName',
|
|
key: 'ProdName',
|
|
width: '100px',
|
|
render: (text) => <a style={{ color: 'black' }}>{text}</a>,
|
|
sorter: (a, b) => a?.ProdName?.localeCompare(b?.ProdName),
|
|
columnKey: 'ProdName',
|
|
sortOrder:
|
|
sortedInfo.columnKey === 'ProdName' ? sortedInfo.order : null,
|
|
ellipsis: true,
|
|
},
|
|
...(brandColumn && subCategory
|
|
? [
|
|
{
|
|
title: 'Brand',
|
|
dataIndex: 'BrandName',
|
|
key: 'BrandName',
|
|
columnKey: 'BrandName',
|
|
width: '100px',
|
|
render: (text) => <a style={{ color: 'black' }}>{text}</a>,
|
|
sorter: (a, b) => a?.BrandName?.localeCompare(b?.BrandName),
|
|
sortOrder:
|
|
sortedInfo.columnKey === 'BrandName' ? sortedInfo.order : null,
|
|
ellipsis: true,
|
|
},
|
|
]
|
|
: []),
|
|
|
|
{
|
|
title: 'Qty',
|
|
dataIndex: 'Size',
|
|
key: 'Size',
|
|
width: '100px',
|
|
align: 'center',
|
|
render: (text, record) => (
|
|
<a style={{ color: 'black' }}>
|
|
{`${record?.Size} ${record?.UomName}`}
|
|
</a>
|
|
),
|
|
ellipsis: true,
|
|
},
|
|
|
|
...(qrCodeColumn
|
|
? [
|
|
{
|
|
title: 'QRCode',
|
|
dataIndex: 'QRCode',
|
|
key: 'QRCode',
|
|
width: '100px',
|
|
align: 'center',
|
|
render: (text) => (
|
|
<a style={{ color: 'black' }}>{text ? text : '-'}</a>
|
|
),
|
|
ellipsis: true,
|
|
},
|
|
{
|
|
title: (
|
|
<Tooltip title=" printing multiple QR codes">
|
|
<Space>
|
|
{MultiCode && (
|
|
<input
|
|
type="checkbox"
|
|
checked={
|
|
selectedRecords.length > 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
|
|
)
|
|
)
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
<span>Print QRCode</span>
|
|
<CheckSquareOutlined
|
|
style={{
|
|
fontSize: '18px',
|
|
cursor: 'pointer',
|
|
color: MultiCode ? '#1890ff' : '#666',
|
|
}}
|
|
onClick={() => {
|
|
setMultiCode((prev) => {
|
|
const newValue = !prev;
|
|
if (!newValue) {
|
|
setSelectedRecords([]);
|
|
}
|
|
|
|
return newValue;
|
|
});
|
|
}}
|
|
/>
|
|
</Space>
|
|
</Tooltip>
|
|
),
|
|
key: 'Print',
|
|
dataIndex: 'Print',
|
|
width: '100px',
|
|
align: 'center',
|
|
render: (_, record) =>
|
|
productData.length >= 1 ? (
|
|
<Space size="middle">
|
|
{MultiCode ? (
|
|
record?.QRCode ? (
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedRecords.some(
|
|
(r) => 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 ? (
|
|
<a>
|
|
<PrinterFilled
|
|
style={{ fontSize: '20px' }}
|
|
onClick={() => Qrcode(record)}
|
|
/>
|
|
</a>
|
|
) : (
|
|
'-'
|
|
)}
|
|
</Space>
|
|
) : null,
|
|
},
|
|
]
|
|
: []),
|
|
|
|
{
|
|
title: 'Action',
|
|
key: 'Action',
|
|
dataIndex: 'Action',
|
|
width: '100px',
|
|
align: 'center',
|
|
render: (_, record, index) =>
|
|
productData.length >= 1 ? (
|
|
<Space size="middle">
|
|
{record.ActiveStatus === 'A' ? (
|
|
<a>
|
|
<EditFilled
|
|
style={{ color: '#1292EE' }}
|
|
onClick={() =>
|
|
UserType === 'Super Admin' ||
|
|
(UserType === 'Super Admin User' &&
|
|
SAAccessCommonMaster?.UpdateAccess === 'Y') ||
|
|
(UserType === 'Employee' &&
|
|
empData?.UpdateAccess === 'Y') ||
|
|
UserType === 'Admin'
|
|
? actionsFormatter(record, index)
|
|
: null
|
|
}
|
|
/>
|
|
</a>
|
|
) : (
|
|
''
|
|
)}
|
|
<a>
|
|
{record.ActiveStatus === 'A' ? (
|
|
<DeleteFilled
|
|
style={{
|
|
color: '#EF4443',
|
|
}}
|
|
onClick={() =>
|
|
UserType === 'Super Admin' ||
|
|
(UserType === 'Super Admin User' &&
|
|
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
|
|
(UserType === 'Employee' &&
|
|
empData?.DeleteAccess === 'Y') ||
|
|
UserType === 'Admin'
|
|
? statusFormatter(record)
|
|
: null
|
|
}
|
|
/>
|
|
) : (
|
|
<ReloadOutlined
|
|
style={{
|
|
color: '#52C41A',
|
|
}}
|
|
onClick={() =>
|
|
UserType === 'Super Admin' ||
|
|
(UserType === 'Super Admin User' &&
|
|
SAAccessCommonMaster?.DeleteAccess === 'Y') ||
|
|
(UserType === 'Employee' &&
|
|
empData?.DeleteAccess === 'Y') ||
|
|
UserType === 'Admin'
|
|
? statusFormatter(record)
|
|
: null
|
|
}
|
|
/>
|
|
)}
|
|
</a>
|
|
</Space>
|
|
) : null,
|
|
},
|
|
{
|
|
title: 'Image',
|
|
key: 'ProdLogo',
|
|
dataIndex: 'ProdLogo',
|
|
width: '60px',
|
|
align: 'center',
|
|
render: (_, record, index) => (
|
|
// <div className="productMasterImageUpload">
|
|
<Tooltip title={record.ProdLogo ? 'View Image' : 'Upload Image'}>
|
|
<div>
|
|
<FaRegEye
|
|
style={{ background: 'none', cursor: 'pointer' }}
|
|
size={22}
|
|
color={record.ProdLogo && '#1F9B3A'}
|
|
onClick={() => {
|
|
setRowRecord(record);
|
|
setImageModalRowIndex(index);
|
|
setUploadImageModal(true);
|
|
setOnlineImage(null);
|
|
setSelectedImage(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
),
|
|
},
|
|
{
|
|
title: (
|
|
<>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: isDelete ? 'center' : 'flex-start',
|
|
flexDirection: 'column',
|
|
gap: '10px',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<Tooltip title="Bulk Delete" className="delete-bulk-icon">
|
|
{isDelete ? (
|
|
<>
|
|
{/* <DeleteFilled
|
|
style={{
|
|
color: '#FF4D4F',
|
|
marginBottom: '1rem',
|
|
}}
|
|
onClick={(e) => {
|
|
setisDelete(false);
|
|
setSelectedRowKeys([]);
|
|
setRangeFrom('');
|
|
setRangeTo('');
|
|
e.stopPropagation();
|
|
}}
|
|
/> */}
|
|
<MdDeleteForever
|
|
style={{
|
|
color: '#333',
|
|
marginLeft: '0.5rem',
|
|
fontSize: '1.2rem',
|
|
cursor: 'pointer',
|
|
marginBottom: '1rem',
|
|
}}
|
|
onClick={(e) => {
|
|
setisDelete(false);
|
|
setSelectedRowKeys([]);
|
|
setRangeFrom('');
|
|
setRangeTo('');
|
|
// setCachedData({})
|
|
setDeleteInput();
|
|
setDeleteProductPages([]);
|
|
getProdfun();
|
|
e.stopPropagation();
|
|
}}
|
|
/>
|
|
</>
|
|
) : productData.length > 0 ? (
|
|
<Popconfirm
|
|
title="Are you sure you want to delete ?"
|
|
onConfirm={() => {
|
|
setisDelete(true);
|
|
}}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
placement="bottom"
|
|
>
|
|
<DeleteFilled
|
|
style={{
|
|
color: '#FF4D4F',
|
|
fontSize: '1rem',
|
|
cursor: 'pointer',
|
|
}}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
}}
|
|
/>
|
|
</Popconfirm>
|
|
) : (
|
|
<DeleteFilled
|
|
style={{
|
|
color: '#FF4D4F',
|
|
fontSize: '1rem',
|
|
cursor: 'pointer',
|
|
}}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setMessageType('info');
|
|
setMessageData('No product available');
|
|
}}
|
|
/>
|
|
)}
|
|
{isDelete && selectedRowKeys.length !== AllProdIds.length && (
|
|
<input
|
|
type="checkbox"
|
|
checked={
|
|
AllProdIds.length > 0 &&
|
|
selectedRowKeys.length === AllProdIds.length
|
|
}
|
|
indeterminate={
|
|
selectedRowKeys.length > 0 &&
|
|
selectedRowKeys.length < AllProdIds.length
|
|
}
|
|
onChange={(e) => {
|
|
if (e.target.checked) {
|
|
const allProductIds = AllProdIds.map((p) => p.ProdId);
|
|
setSelectedRowKeys(allProductIds);
|
|
setRangeFrom('');
|
|
setRangeTo('');
|
|
} else {
|
|
setSelectedRowKeys([]);
|
|
}
|
|
}}
|
|
/>
|
|
)}
|
|
</Tooltip>
|
|
|
|
{/* {isDelete && selectedRowKeys.length !== AllProdIds.length && (
|
|
<div className="productlistgetnoinput">
|
|
<input
|
|
maxLength={12}
|
|
type="number"
|
|
// placeholder="From"
|
|
value={rangeFrom}
|
|
onChange={(e) => {
|
|
const val = e.target.value.replace(/[^\d]/g, '');
|
|
setRangeFrom(val);
|
|
}}
|
|
/>
|
|
<input
|
|
maxLength={12}
|
|
type="number"
|
|
// placeholder="To"
|
|
value={rangeTo}
|
|
onChange={(e) => {
|
|
const val = e.target.value.replace(/[^\d]/g, '');
|
|
setRangeTo(val);
|
|
}}
|
|
/>
|
|
</div>
|
|
)} */}
|
|
{isDelete && selectedRowKeys.length !== AllProdIds.length && (
|
|
<div
|
|
className={'product-delete-input'}
|
|
style={{ width: 'inherit' }}
|
|
>
|
|
<Tooltip title={'e.g. 1-5, 8, 9-10'} placement={'left'}>
|
|
<InputField
|
|
maxLength={30}
|
|
value={deleteInput}
|
|
onChange={(e) => {
|
|
const val = e?.target?.value;
|
|
setDeleteInput(val);
|
|
|
|
const totalCount = productData?.[0]?.TotalCount || 0;
|
|
const { isValid, error } = validateDeleteInput(
|
|
val,
|
|
totalCount
|
|
);
|
|
|
|
setInputError(isValid ? '' : error);
|
|
}}
|
|
placeholder="e.g. 1-5, 8, 9-10"
|
|
style={{
|
|
borderColor: inputError ? 'red' : undefined,
|
|
borderWidth: inputError ? 1 : undefined,
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
{inputError && (
|
|
<div style={{ color: 'red', marginTop: 4 }}>
|
|
{inputError}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
),
|
|
dataIndex: 'checkbox',
|
|
key: 'checkbox',
|
|
width: '50px',
|
|
align: 'center',
|
|
render: (_, record) =>
|
|
isDelete ? (
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedRowKeys.includes(record.ProdId)}
|
|
onChange={(e) => {
|
|
if (e.target.checked) {
|
|
setSelectedRowKeys((prev) => [...prev, record.ProdId]);
|
|
} else {
|
|
setSelectedRowKeys((prev) =>
|
|
prev.filter((id) => id !== record.ProdId)
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
) : null,
|
|
sorter: false,
|
|
},
|
|
];
|
|
|
|
// ✅ Filter out any null, undefined, or empty columns safely
|
|
return cols.filter(
|
|
(col) => col && typeof col === 'object' && Object.keys(col).length > 0
|
|
);
|
|
}, [
|
|
MultiCode,
|
|
selectedRecords,
|
|
AllProdIds,
|
|
selectedRowKeys,
|
|
rangeFrom,
|
|
rangeTo,
|
|
page,
|
|
productData,
|
|
isDelete,
|
|
sortedInfo,
|
|
onlineImage,
|
|
]);
|
|
|
|
const handleImageTag = (w, h = '40px', barcodeOrQr) => {
|
|
return (
|
|
<img
|
|
src={barcodeOrQr ? barCodeImage : qrCodeImage}
|
|
alt={previewText}
|
|
width={w}
|
|
height={h}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const updateImageUrl = (url) => {
|
|
setImageUrl(url);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (imageUrl == '') {
|
|
setOnlineImage(null);
|
|
}
|
|
}, [imageUrl]);
|
|
|
|
const handleimage = () => {
|
|
setimageOpen(false);
|
|
setOnlineImage('');
|
|
setOnlineImage(null);
|
|
};
|
|
|
|
const browseImage = async (productName, index) => {
|
|
if (productName !== null) {
|
|
let response = await dispatch(onlineimages(productName)).unwrap();
|
|
setimageOpen(true);
|
|
setimagedata(response?.data?.data);
|
|
setImageUrl('');
|
|
setRecordIndex(index);
|
|
}
|
|
};
|
|
|
|
const handleImageModalClose = () => {
|
|
setUploadImageModal(false);
|
|
setOnlineImage(null);
|
|
setImageModalRowIndex(null);
|
|
setSelectedImage(null);
|
|
};
|
|
|
|
const submitimage = async () => {
|
|
let response = await fetch(selectedImage.image);
|
|
|
|
let data = await response?.blob();
|
|
let metadata = {
|
|
type: 'image/jpeg',
|
|
};
|
|
|
|
let file = new File([data], 'image.jpg', metadata);
|
|
let uploadImgData = await dispatch(uploadImage(file)).unwrap();
|
|
if (uploadImgData?.data?.status) {
|
|
setOnlineImage(uploadImgData?.data?.image);
|
|
setImageUrl(uploadImgData?.data?.image);
|
|
}
|
|
|
|
setimageOpen(false);
|
|
};
|
|
|
|
const handleProductListGetApi = async () => {
|
|
const response = await dispatch(
|
|
getProductDataPageNo({
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
PageNumber: currentPage,
|
|
})
|
|
).unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
setCachedData((prev) => ({
|
|
...prev,
|
|
[currentPage]: response?.data?.data,
|
|
})); // Cache the new data
|
|
setproductData(response?.data?.data);
|
|
} else {
|
|
setCachedData({});
|
|
setproductData([]);
|
|
}
|
|
};
|
|
|
|
const handleImageUpload = async (img, record) => {
|
|
const { ProdId } = record;
|
|
const putData = {
|
|
AppId,
|
|
CompId,
|
|
BranchId,
|
|
ProdId,
|
|
ProdLogo: img,
|
|
UpdatedBy: UserId,
|
|
};
|
|
|
|
const response = await dispatch(updateProductImage(putData)).unwrap();
|
|
if (response?.data?.statusCode == 1) {
|
|
setimageOpen(false);
|
|
setOnlineImage('');
|
|
setOnlineImage(null);
|
|
handleProductListGetApi();
|
|
setRowRecord((prev) => ({
|
|
...prev,
|
|
ProdLogo: img,
|
|
}));
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
async function fetchImage() {
|
|
try {
|
|
const base64 = await imageUrlToBase64(qrCodeUrl);
|
|
setBase64Image(base64);
|
|
} catch (error) {
|
|
setConversionError(error.message || 'Error converting image');
|
|
}
|
|
}
|
|
if (qrCodeUrl) {
|
|
fetchImage();
|
|
}
|
|
}, [qrCodeUrl]);
|
|
|
|
useEffect(() => {
|
|
try {
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
if (location?.state?.Notiffy) {
|
|
setMessageType(location?.state?.Notiffy.messageType);
|
|
setMessageData(location?.state?.Notiffy.messageData);
|
|
}
|
|
} catch (err) {
|
|
console.log(err, 'err');
|
|
}
|
|
barcodeApiData();
|
|
getPreference();
|
|
getAllProdId();
|
|
// userTour()
|
|
// if (UserType === "Employee") {
|
|
// fetchApi()
|
|
// }
|
|
}, []);
|
|
useEffect(() => {
|
|
if (UserType === 'Employee') {
|
|
fetchApi();
|
|
}
|
|
}, [UserType]);
|
|
useEffect(() => {
|
|
let hasAccess = false;
|
|
|
|
if (UserType === 'Admin' || UserType === 'Super Admin') {
|
|
hasAccess = true;
|
|
} else if (UserType === 'Employee') {
|
|
hasAccess = empData?.AddAccess === 'Y';
|
|
} else if (UserType === 'Super Admin User') {
|
|
hasAccess = SAAccessCommonMaster?.AddAccess === 'Y';
|
|
}
|
|
|
|
setaddnewAccess(!hasAccess);
|
|
}, [empData, SAAccessCommonMaster, UserType]);
|
|
|
|
useEffect(() => {
|
|
if (
|
|
SearchProdData?.length === 0 &&
|
|
searchedText?.length === 0 &&
|
|
!(deleteProductPages?.length > 0)
|
|
) {
|
|
getProdfun();
|
|
}
|
|
}, [currentPage, SearchProdData]);
|
|
|
|
const getAllProdId = async () => {
|
|
let data = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
};
|
|
let response = await dispatch(getAllprodIds(data)).unwrap();
|
|
|
|
if ((response.data.statusCode = 1)) {
|
|
setAllProdIds(response.data.data);
|
|
} else {
|
|
setAllProdIds([]);
|
|
}
|
|
};
|
|
const getPreference = async () => {
|
|
const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
|
|
const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
|
|
const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
|
|
(setting) =>
|
|
setting?.SettingIdName?.toLowerCase() === 'decimal' &&
|
|
setting?.SettingValue === 'Y'
|
|
);
|
|
if (decimalSetting) {
|
|
setAllowDecimal(true);
|
|
}
|
|
};
|
|
|
|
const getProdfun = async () => {
|
|
if (cachedData[currentPage]) {
|
|
// Use cached data if available
|
|
setproductData(cachedData[currentPage]);
|
|
} else {
|
|
let response = await dispatch(
|
|
getProductDataPageNo({
|
|
CompId,
|
|
BranchId,
|
|
AppId,
|
|
PageNumber: currentPage,
|
|
})
|
|
).unwrap();
|
|
|
|
if (response?.data?.statusCode === 1) {
|
|
setCachedData((prev) => ({
|
|
...prev,
|
|
[currentPage]: response?.data?.data,
|
|
})); // Cache the new data
|
|
|
|
// Merge old and new data
|
|
setproductData(response?.data?.data);
|
|
}
|
|
}
|
|
|
|
// setproductData
|
|
};
|
|
|
|
const getForDeleteProduct = async (productPages) => {
|
|
if (selectedRowKeys?.length === 0) return;
|
|
let cacheData = {};
|
|
for (let i = 0; i < productPages?.length; i++) {
|
|
if (!cachedData[productPages[i]]) {
|
|
let response = await dispatch(
|
|
getProductDataPageNo({
|
|
CompId,
|
|
BranchId,
|
|
AppId,
|
|
PageNumber: productPages[i],
|
|
})
|
|
).unwrap();
|
|
|
|
if (response?.data?.statusCode === 1) {
|
|
cacheData[productPages[i]] = response?.data?.data;
|
|
setCachedData((prev) => ({
|
|
...prev,
|
|
[productPages[i]]: response?.data?.data,
|
|
}));
|
|
}
|
|
} else {
|
|
cacheData[productPages[i]] = cachedData[productPages[i]];
|
|
}
|
|
}
|
|
let selectedDelete = [];
|
|
for (let key in cacheData) {
|
|
cacheData?.[key]?.forEach((data) => {
|
|
if (selectedRowKeys.includes(data?.ProdId)) {
|
|
selectedDelete.push(data);
|
|
}
|
|
});
|
|
}
|
|
const paginatedResults = paginateData(selectedDelete);
|
|
setPaginatedDeleteData(paginatedResults);
|
|
setproductData(paginatedResults[currentPage]);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (ProdId) {
|
|
QRCode?.toDataURL(ProdId)
|
|
.then((url) => {
|
|
setQrCodeUrl(url);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error generating QR code:', error);
|
|
});
|
|
}
|
|
}, [ProdId]);
|
|
|
|
const onComplete = useCallback(() => {
|
|
setMessageData(null);
|
|
setMessageType(null);
|
|
}, []);
|
|
|
|
const fetchApi = async () => {
|
|
let data = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
EmpId: UserId,
|
|
};
|
|
let response = await dispatch(getEmpAccess(data)).unwrap();
|
|
let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
|
|
(item) => item.ConfigName === 'Product'
|
|
);
|
|
setEmpData(datas?.[0]);
|
|
};
|
|
|
|
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 actionsFormatter = async (row, rowIndex) => {
|
|
if (row.ActiveStatus !== 'D') {
|
|
if (isCheckSportsApp) {
|
|
navigateTo(
|
|
`${subDirectory}setting/products-master/update`,
|
|
{
|
|
state: {
|
|
editstate: { ...row, DiscountValue: row?.DiscountLimit ?? 0 },
|
|
},
|
|
},
|
|
{ key: rowIndex }
|
|
);
|
|
} else {
|
|
navigateTo(
|
|
`${subDirectory}setting/product-master/update`,
|
|
{
|
|
state: {
|
|
editstate: { ...row, DiscountValue: row?.DiscountLimit ?? 0 },
|
|
},
|
|
},
|
|
{ key: rowIndex }
|
|
);
|
|
}
|
|
}
|
|
};
|
|
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);
|
|
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 statusFormatter = async (row) => {
|
|
let deleteData = {
|
|
ProdId: row.ProdId,
|
|
ActiveStatus: row.ActiveStatus === 'A' ? 'D' : 'A',
|
|
UpdatedBy: getSession('UserId'),
|
|
};
|
|
let response = await dispatch(deleteProductData(deleteData)).unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
setMessageType('success');
|
|
setMessageData(
|
|
row.ActiveStatus === 'A'
|
|
? 'In-Activated Successfully'
|
|
: 'Activated Successfully'
|
|
);
|
|
|
|
// Fetch the updated data for the current page only
|
|
let updatedResponse = await dispatch(
|
|
getProductDataPageNo({
|
|
CompId,
|
|
BranchId,
|
|
AppId,
|
|
PageNumber: currentPage,
|
|
})
|
|
).unwrap();
|
|
|
|
if (updatedResponse?.data?.statusCode === 1) {
|
|
if (SearchProdData?.length > 0) {
|
|
fetchSearchResults(searchedText);
|
|
} else {
|
|
setCachedData((prev) => ({
|
|
...prev,
|
|
[currentPage]: updatedResponse?.data?.data,
|
|
}));
|
|
|
|
setproductData((prev) => {
|
|
let updatedData = [...prev];
|
|
const startIndex = (currentPage - 1) * 10;
|
|
if (updatedData.length >= startIndex + 10) {
|
|
updatedData.splice(
|
|
startIndex,
|
|
10,
|
|
...updatedResponse?.data?.data
|
|
);
|
|
} else {
|
|
updatedData = [...updatedResponse?.data?.data];
|
|
}
|
|
return updatedData;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleChange = (pagination, filters, sorter) => {
|
|
setSortedInfo(sorter);
|
|
};
|
|
|
|
const paginateData = (allProducts) => {
|
|
let paginatedData = {};
|
|
for (let i = 0; i < allProducts.length; i += 10) {
|
|
paginatedData[i / 10 + 1] = allProducts.slice(i, i + 10);
|
|
}
|
|
return paginatedData;
|
|
};
|
|
const fetchSearchResults = useCallback(
|
|
debounce(async (searchValue) => {
|
|
if (searchValue.length > 0) {
|
|
let response = await dispatch(
|
|
getProductDataSearch({
|
|
CompId,
|
|
BranchId,
|
|
AppId,
|
|
prodName: searchValue,
|
|
})
|
|
).unwrap();
|
|
|
|
if (response?.data?.statusCode === 1) {
|
|
const paginatedResults = paginateData(response?.data?.data);
|
|
setCachedDataSearch(paginatedResults);
|
|
setSearchProdData(response?.data?.data);
|
|
// setSearchProdData(response?.data?.data);
|
|
setpage(1);
|
|
setCurrentPage(1);
|
|
setproductData(paginatedResults[1] || []);
|
|
} else {
|
|
setSearchProdData([]);
|
|
setproductData([]);
|
|
setCachedDataSearch([]);
|
|
setpage(1);
|
|
setCurrentPage(1);
|
|
}
|
|
} else {
|
|
setSearchProdData([]);
|
|
setproductData([]);
|
|
setCachedDataSearch([]);
|
|
setpage(1);
|
|
setCurrentPage(1);
|
|
}
|
|
}, 500), // 500ms debounce time
|
|
[dispatch, CompId, BranchId, AppId]
|
|
);
|
|
|
|
const onSearchChange = async (e) => {
|
|
setSearchedText(e?.target?.value);
|
|
fetchSearchResults(e?.target?.value);
|
|
};
|
|
|
|
const handelAddButton = () => {
|
|
if (isCheckSportsApp) {
|
|
navigateTo(`${subDirectory}setting/products-master/new`);
|
|
} else {
|
|
navigateTo(`${subDirectory}setting/product-master/new`);
|
|
}
|
|
};
|
|
|
|
const handelBulkAdd = () => {
|
|
navigateTo(`${subDirectory}setting/product-master/turbo-add`);
|
|
};
|
|
|
|
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 CopiesOnChange = (params) => {
|
|
setCopies(params);
|
|
formRef.current?.setFieldsValue({ Copies: params });
|
|
};
|
|
|
|
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,
|
|
});
|
|
}
|
|
|
|
switch (dropdownValue) {
|
|
case '15X15 6cross': // COMPLETE
|
|
await printDiv(
|
|
templateAvailable ? '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
|
|
);
|
|
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 ');
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
Bulkuploadsubdata();
|
|
getBarcodeSessionData();
|
|
}, []);
|
|
|
|
const Bulkuploadsubdata = async () => {
|
|
let response = await dispatch(
|
|
getAllsubcatdata({ AppId: AppId, TypeName: 'Product Sub-Category' })
|
|
).unwrap();
|
|
setSubCatData(response?.data?.data);
|
|
let res = await dispatch(
|
|
getAllbrandcatdata({ AppId: AppId, TypeName: 'Product Brand' })
|
|
).unwrap();
|
|
setallBrandData(res?.data?.data);
|
|
dispatch(getProdCatData({ AppId: AppId }));
|
|
dispatch(getUomData({ TypeName: 'Unit of Measure' }));
|
|
dispatch(
|
|
getSupplierData({ AppId: AppId, BranchId: BranchId, CompId: CompId })
|
|
);
|
|
dispatch(getAdmin({ AppId: AppId, CompId: CompId }));
|
|
setOpen(false);
|
|
formRef?.current?.resetFields();
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
setOpenExcel(false);
|
|
handleResetExcelData();
|
|
};
|
|
|
|
const openModal = () => {
|
|
setOpenExcel(true);
|
|
};
|
|
|
|
const handleResetExcelData = () => {
|
|
dispatch(emptyExcelData());
|
|
};
|
|
|
|
const handleSubmitbulk = (excelData) => {
|
|
setExceldatasubmit(excelData);
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
setBulkpost(true);
|
|
let FilterData = Exceldatasubmit?.filter((a) => a['ProductName'] != '');
|
|
|
|
if (FilterData && FilterData.length > 0) {
|
|
const formattedData = FilterData?.map((data) => ({
|
|
AppId: getSession('AppId'),
|
|
CompId: getSession('CompId'),
|
|
BranchId: getSession('BranchId'),
|
|
CreatedBy: getSession('UserId'),
|
|
|
|
ProdName: data?.ProductName,
|
|
ProdVariantName: data?.ProductVariantName,
|
|
Size: data?.Quantity,
|
|
UOM: data?.UOM,
|
|
MRP: data?.MRP,
|
|
WhSalePrice: data?.WhSalePrice,
|
|
SellPrice: data?.SellPrice,
|
|
ProdCat: data?.Category ? data?.Category : 'General',
|
|
ProdSubCat: data?.SubCategory,
|
|
Brand: data?.Brand ? data?.Brand : '',
|
|
AutoGenerateQr: data?.AutoGenerateQrcode
|
|
? data?.AutoGenerateQrcode
|
|
: 'No',
|
|
QRCode: data?.AddQrCode,
|
|
StockAvailable: data?.StockAvailable ? data?.StockAvailable : 'No',
|
|
TaxId: data?.Tax ? data?.Tax : 'NIL - 0%',
|
|
Cess: data?.Cess,
|
|
HSNCode: data?.HSN,
|
|
PartNumber: data?.PartNumber,
|
|
Rack: data?.Rack,
|
|
ManufDate: moment(data?.ManufactureDate, ['M/D/YY']).format(
|
|
'YYYY-MM-DDTHH:mm:ss'
|
|
),
|
|
ExpDate: moment(data?.ExpireDate, ['M/D/YY']).format(
|
|
'YYYY-MM-DDTHH:mm:ss'
|
|
),
|
|
AvailableFrom: data?.AvailableFrom
|
|
? moment(data?.AvailableFrom, ['M/D/YY']).format('HH:mm:ss')
|
|
: '',
|
|
AvailableTo: data?.AvailableTo
|
|
? moment(data?.AvailableTo, ['M/D/YY']).format('HH:mm:ss')
|
|
: '',
|
|
OnePcsAvailable: data?.Amountperpiece ? data?.Amountperpiece : 'No',
|
|
OnePcsPrice: data?.AmountperpiecePrice,
|
|
// NoOfPcs:data?.NumberOfPieceInside,
|
|
AutoGenerateSingleQr: data?.AutoGenerateOnePieceQrcode
|
|
? data?.AutoGenerateOnePieceQrcode
|
|
: 'No',
|
|
OnePcQR: data?.AutoGenerateOnePieceQrcodeNumber,
|
|
// ProductType:data?.ProductType,
|
|
TokenAvailable: data?.TokenAvailable ? data?.TokenAvailable : 'No',
|
|
ProdLogo: data?.Productimage,
|
|
}));
|
|
|
|
let postDatas = { prodDetails: formattedData };
|
|
|
|
let response = await dispatch(bulkpostdata(postDatas)).unwrap();
|
|
if (response?.data?.statusCode == 1) {
|
|
setMessageType('success');
|
|
setMessageData(response?.data?.response);
|
|
setBulkpost(false);
|
|
setpage(1);
|
|
|
|
var responseData = await dispatch(
|
|
getProductDataPageNo({ CompId, BranchId, AppId, PageNumber: 1 })
|
|
).unwrap();
|
|
setCurrentPage(1);
|
|
|
|
if (responseData?.data?.statusCode === 1) {
|
|
setCachedData({ [currentPage]: responseData?.data?.data });
|
|
setproductData(responseData?.data?.data);
|
|
}
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData(responseData?.data?.response);
|
|
}
|
|
|
|
handleResetExcelData();
|
|
handleCancel();
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData('No data to submit. Please upload an Excel file.');
|
|
}
|
|
};
|
|
|
|
const Unit = UomPreference?.map((e) => e.ConfigName);
|
|
const CategoryId = ProdCatData?.map((e) => e.ConfigId);
|
|
const CategoryNames = ProdCatData?.map((e) => e.ConfigName);
|
|
const CatconfigId = ProdCatData?.map((e) => e.ConfigId);
|
|
const Subcatnames = subCatData?.map((e) => e.ConfigName);
|
|
const SubcatId = subCatData?.map((e) => e.ConfigId);
|
|
const SubcatNumFId = subCatData?.map((e) => e.NumFId);
|
|
const BrandNumFId = allBrandData?.map((e) => e.NumFId);
|
|
const BrandId = allBrandData?.map((e) => e.ConfigId);
|
|
const BrandName = allBrandData?.map((e) => e.ConfigName);
|
|
const SuplierNames = SupplierData?.map((e) => e.SuppName);
|
|
const TaxDatas = TaxData?.map((e) => e.TaxIdName);
|
|
const TaxData1 = TaxData?.map((e) => e.TaxPercentage);
|
|
const combinedTaxData = TaxDatas?.map(
|
|
(taxIdName, index) => `${taxIdName} - ${TaxData1[index]}%`
|
|
);
|
|
const Deletebulk = async () => {
|
|
let data = {
|
|
AppId: AppId,
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
ProdId: selectedRowKeys,
|
|
};
|
|
let res = await dispatch(Deletebulkdatas(data)).unwrap();
|
|
if (res?.data?.statusCode == 1) {
|
|
setMessageData('Product Deleted Successfully');
|
|
setMessageType('success');
|
|
setRangeFrom(null);
|
|
setRangeTo(null);
|
|
setSelectedRowKeys([]);
|
|
setisDelete(false);
|
|
|
|
let response = await dispatch(
|
|
getProductDataPageNo({
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
PageNumber: currentPage,
|
|
})
|
|
).unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
setCachedData((prev) => ({
|
|
...prev,
|
|
[currentPage]: response?.data?.data,
|
|
})); // Cache the new data
|
|
setproductData(response?.data?.data);
|
|
} else {
|
|
setCachedData({});
|
|
setproductData([]);
|
|
}
|
|
setDeleteProductPages([]);
|
|
setDeleteInput();
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData(res?.data?.response);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (ProdId) {
|
|
try {
|
|
const svg = document.createElementNS(
|
|
'http://www.w3.org/2000/svg',
|
|
'svg'
|
|
);
|
|
|
|
JsBarcode(svg, ProdId, {
|
|
format: 'CODE128',
|
|
displayValue: true,
|
|
lineColor: '#000',
|
|
width: 2,
|
|
height: 50,
|
|
});
|
|
|
|
setTimeout(() => {
|
|
convertSvgToBase64(svg);
|
|
}, 500);
|
|
} catch (error) {
|
|
console.error('Error generating barcode:', error);
|
|
}
|
|
}
|
|
}, [ProdId]);
|
|
|
|
|
|
const totalCopies = QrandbarcodeDatas?.reduce(
|
|
(sum, item) => sum + Number(item?.copiesCount || 0),
|
|
0
|
|
);
|
|
const convertSvgToBase64 = (svgElement) => {
|
|
try {
|
|
const svgData = new XMLSerializer().serializeToString(svgElement);
|
|
const svgBlob = new Blob([svgData], {
|
|
type: 'image/svg+xml;charset=utf-8',
|
|
});
|
|
const reader = new FileReader();
|
|
|
|
reader.onloadend = () => {
|
|
setBarcodeBase64Image(reader.result);
|
|
};
|
|
|
|
reader.readAsDataURL(svgBlob);
|
|
} catch (error) {
|
|
console.error('Error converting barcode to Base64:', error);
|
|
}
|
|
};
|
|
|
|
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);
|
|
}
|
|
};
|
|
const imageTagBarcodeAndQR = (w = 'auto', fs = '6px', codeData = null) => {
|
|
const currentCode = codeData || ProdId;
|
|
|
|
console.log(currentCode, '1111111111', codeData);
|
|
return (
|
|
(templateOptions.barcode || templateOptions.qrcode) && (
|
|
<>
|
|
<img
|
|
style={{ width: w }}
|
|
src={
|
|
templateOptions.codeType === 'B'
|
|
? !MultiCode
|
|
? barcodeBase64Image
|
|
: generateBarcode(currentCode)
|
|
: !MultiCode
|
|
? base64Image
|
|
: generateQRCode(currentCode)
|
|
}
|
|
alt="Barcode"
|
|
/>
|
|
{templateOptions.codeType !== 'B' && (
|
|
<p style={{ margin: '0', padding: '0', fontSize: fs }}>
|
|
{currentCode}
|
|
</p>
|
|
)}
|
|
</>
|
|
)
|
|
);
|
|
};
|
|
|
|
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 handleQRStickerPrinterModelCancel = () => {
|
|
setDropdownValue();
|
|
setCopies();
|
|
setOpen(false);
|
|
formRef?.current?.resetFields();
|
|
setSelectedRecords([]);
|
|
setQrandbarcodeDatas([])
|
|
setMultiCode(false);
|
|
setNickName(null);
|
|
};
|
|
|
|
const handleProcessMultipleOCR = async (formDataArray) => {
|
|
if (formDataArray.length === 0) return;
|
|
|
|
setIsOCRProcessing({ Length: formDataArray.length, Loader: true });
|
|
|
|
try {
|
|
const combinedFormData = new FormData();
|
|
|
|
formDataArray.forEach((formData, index) => {
|
|
const imageBlob = formData.get('image');
|
|
combinedFormData.append(
|
|
`image${index}`,
|
|
imageBlob,
|
|
`cropped${index}.jpg`
|
|
);
|
|
});
|
|
|
|
const Response = await dispatch(PostPedalOCR(combinedFormData)).unwrap();
|
|
|
|
if (Response?.data?.statusCode === 1 && Response?.data?.data) {
|
|
setBreadData(
|
|
Response.data.data?.map((e) => ({
|
|
...e,
|
|
Products: e?.Products?.map((p) => ({
|
|
...p,
|
|
NoOfUnits: 1,
|
|
UOM: 'PCS',
|
|
})),
|
|
}))
|
|
);
|
|
setMessageType('success');
|
|
setMessageData(`${formDataArray.length} images processed successfully`);
|
|
setBreadModalOpen(true);
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData('No products found in images');
|
|
}
|
|
|
|
setOpenPaddleOCR(false);
|
|
setUploadedFiles([]);
|
|
} catch (error) {
|
|
setMessageType('error');
|
|
setMessageData('Error processing images');
|
|
console.error('OCR Error:', error);
|
|
} finally {
|
|
setIsOCRProcessing({ Length: 0, Loader: false });
|
|
}
|
|
};
|
|
|
|
const handleBulkUpload = async () => {
|
|
if (breadData?.length === 0) {
|
|
setMessageType('error');
|
|
setMessageData('No products to upload');
|
|
return;
|
|
}
|
|
const Postdata =
|
|
breadData?.flatMap(
|
|
(p) =>
|
|
p?.Products?.map((e) => ({
|
|
AppId,
|
|
CompId,
|
|
BranchId,
|
|
CreatedBy: UserId,
|
|
|
|
ProdName: e?.Product,
|
|
ProdVariantName: '',
|
|
ProdCat: p?.Category,
|
|
ProdSubCat: '',
|
|
|
|
Brand: '',
|
|
PartNumber: '',
|
|
HSNCode: '',
|
|
|
|
UOM: e?.UOM,
|
|
Size: e?.NoOfUnits,
|
|
MRP: e?.MRP,
|
|
SellPrice: e?.MRP,
|
|
WhSalePrice: '',
|
|
|
|
TaxId: 'NIL - 0%',
|
|
StockAvailable: 'No',
|
|
OnePcsAvailable: 'No',
|
|
TokenAvailable: 'No',
|
|
|
|
AutoGenerateQr: 'No',
|
|
AutoGenerateSingleQr: 'No',
|
|
OnePcQR: '',
|
|
QRCode: '',
|
|
Rack: '',
|
|
|
|
AvailableFrom: null,
|
|
AvailableTo: null,
|
|
ManufDate: null,
|
|
ExpDate: null,
|
|
})) || []
|
|
) || [];
|
|
|
|
console.log(Postdata, 'Postdata');
|
|
const response = await dispatch(
|
|
bulkpostdata({ ProdDetails: Postdata })
|
|
).unwrap();
|
|
};
|
|
|
|
useEffect(() => {
|
|
const from = parseInt(rangeFrom, 10);
|
|
const to = parseInt(rangeTo, 10);
|
|
|
|
let newRangeIds = [];
|
|
if (
|
|
!isNaN(from) &&
|
|
!isNaN(to) &&
|
|
from > 0 &&
|
|
to > 0 &&
|
|
from <= to &&
|
|
to <= AllProdIds.length
|
|
) {
|
|
newRangeIds = AllProdIds.slice(from - 1, to).map((p) => p.ProdId);
|
|
}
|
|
|
|
const idsToRemove = lastRangeIdsRef.current.filter(
|
|
(id) => !newRangeIds.includes(id)
|
|
);
|
|
const idsToAdd = newRangeIds.filter(
|
|
(id) => !lastRangeIdsRef.current.includes(id)
|
|
);
|
|
|
|
setSelectedRowKeys((prev) => {
|
|
const withRemoved = prev.filter((id) => !idsToRemove.includes(id));
|
|
const withAdded = [...withRemoved, ...idsToAdd];
|
|
return Array.from(new Set(withAdded));
|
|
});
|
|
|
|
lastRangeIdsRef.current = newRangeIds;
|
|
}, [rangeFrom, rangeTo, AllProdIds]);
|
|
const tableData = useMemo(() => {
|
|
return SearchProdData?.length > 0
|
|
? [...CachedDataSearch[page]]
|
|
: [...productData];
|
|
}, [SearchProdData, CachedDataSearch, page, productData]);
|
|
return (
|
|
<div className="userPageTable">
|
|
{/* <Tour open={openTour} onClose={handleTourClose} steps={steps} /> */}
|
|
<div className="userPageContent">
|
|
<Messages
|
|
messageType={messageType}
|
|
messageData={messageData}
|
|
onComplete={onComplete}
|
|
/>
|
|
{/* <GooglePayUPIButton /> */}
|
|
<div className="formAddNew">
|
|
{/* <FormHeader title={'Product'} /> */}
|
|
<div className="searchAddDiv productlistSearchDiv">
|
|
<div className="formSearch">
|
|
<Search
|
|
placeholder="Search"
|
|
// onSearch={onSearch}
|
|
onSearchChange={onSearchChange}
|
|
/>
|
|
</div>
|
|
<div
|
|
className="commonMaster-btn"
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
fontSize: '2.5rem',
|
|
gap: '0.5rem',
|
|
flexWrap: 'wrap',
|
|
}}
|
|
>
|
|
<div>
|
|
<div className="SmartScanBTN">
|
|
<Buttons
|
|
buttonText="Smart Scan"
|
|
className="smart_scan_Button"
|
|
handleSubmit={() => {
|
|
setOpenPaddleOCR(true);
|
|
}}
|
|
disabled={addnewAccess}
|
|
icon={<BsCameraFill size={18} />}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="productMaster-input">
|
|
<Buttons
|
|
buttonText={isCheckSportsApp ? 'Add New Slot' : 'Single Add'}
|
|
disabled={addnewAccess}
|
|
handleSubmit={() => handelAddButton()}
|
|
color="901D77"
|
|
icon={<PlusOutlined />}
|
|
/>
|
|
</div>
|
|
|
|
{!isCheckSportsApp && (
|
|
<>
|
|
<div className="uploadexcelBtn">
|
|
<Buttons
|
|
buttonText="Upload Excel"
|
|
className="tertiary_Button"
|
|
handleSubmit={openModal}
|
|
disabled={addnewAccess}
|
|
icon={<FiUploadCloud size={18} />}
|
|
/>
|
|
</div>
|
|
|
|
<div className="productMaster-input">
|
|
<TertiaryButton
|
|
buttonText={'Turbo Add'}
|
|
disabled={addnewAccess}
|
|
handleSubmit={() => handelBulkAdd()}
|
|
color="901D77"
|
|
icon={<HiOutlineRocketLaunch size={22} />}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="reportTable reportTableProduct">
|
|
<Table
|
|
columns={columns}
|
|
dataSource={tableData}
|
|
rowKey="ProdId"
|
|
pagination={false}
|
|
rowClassName="product-row"
|
|
defaultSortOrder="ascend"
|
|
onChange={handleChange}
|
|
/>
|
|
{countOfProduct > 10 && (
|
|
<Pagination
|
|
className="producttablepagination"
|
|
current={page}
|
|
total={countOfProduct}
|
|
pageSize={10}
|
|
onChange={handlePageChange}
|
|
showSizeChanger={false}
|
|
// showQuickJumper={true}
|
|
showTotal={(total) =>
|
|
`Total ${countOfProduct ? countOfProduct : 0} items`
|
|
}
|
|
/>
|
|
)}{' '}
|
|
</div>
|
|
{/* <Popconfirm
|
|
title="Are you sure to delete all products?"
|
|
onConfirm={Deletebulk}
|
|
okText="Yes"
|
|
cancelText="No"
|
|
placement="right"
|
|
className='allpropopup'
|
|
> */}
|
|
{/* <Tooltip title="Delete All Products"> */}
|
|
{isDelete && selectedRowKeys?.length > 0 && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
padding: '2rem 0',
|
|
position: 'fixed',
|
|
right: '5rem',
|
|
bottom: '-27px',
|
|
zIndex: '100',
|
|
}}
|
|
>
|
|
<Buttons
|
|
buttonText={'Delete'}
|
|
handleSubmit={() => {
|
|
Deletebulk();
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
{!isDelete && MultiCode && selectedRecords?.length > 0 && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
padding: '2rem 0',
|
|
position: 'fixed',
|
|
right: '5rem',
|
|
bottom: '-27px',
|
|
zIndex: '100',
|
|
}}
|
|
>
|
|
<Buttons
|
|
buttonText={'Print Selected Codes'}
|
|
handleSubmit={() => {
|
|
setOpen(true);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
{/* </Tooltip> */}
|
|
{/* </Popconfirm> */}
|
|
</div>
|
|
<DefaultModal
|
|
width={1000}
|
|
open={open}
|
|
title="Sticker Print"
|
|
handleCancel={handleQRStickerPrinterModelCancel}
|
|
footer={false}
|
|
children={
|
|
<Form ref={formRef} onFinish={onFinish}>
|
|
|
|
{MultiCode && <div className="printtabs">
|
|
<div
|
|
className={`tab-item ${activeTab === 'stock' ? 'active' : ''}`}
|
|
onClick={() => setActiveTab('stock')}
|
|
>
|
|
Stock Wise <span className="count">({selectedRecords?.length})</span>
|
|
<div>
|
|
|
|
<div className="AddStockMinatain" onClick={(e) => {
|
|
e.stopPropagation();
|
|
setstockWiseQrcode(true);
|
|
}}
|
|
style={{
|
|
animation: activeTab === 'stock' ? 'blink 1s infinite' : 'none'
|
|
}}>
|
|
|
|
<FaPlus
|
|
|
|
/> Add
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`tab-item ${activeTab === 'product' ? 'active' : ''}`}
|
|
onClick={() => setActiveTab('product')}
|
|
>
|
|
Product Wise <span className="count">({selectedRecords?.length})</span>
|
|
<div className="AddStockMinatain" onClick={(e) => {
|
|
e.stopPropagation();
|
|
setProductWiseQrcode(true);
|
|
}} style={{
|
|
animation: activeTab === 'product' ? 'blink 1s infinite' : 'none'
|
|
}}>
|
|
|
|
<FaPlus
|
|
|
|
|
|
/> Add
|
|
</div>
|
|
</div>
|
|
|
|
</div>}
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
|
|
<Form.Item
|
|
name="Cross"
|
|
className="size-selection"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Please Select Cross',
|
|
},
|
|
]}
|
|
>
|
|
<div>
|
|
<label
|
|
class="required"
|
|
style={{ marginBottom: '8px', display: 'block' }}
|
|
>
|
|
Cross
|
|
</label>
|
|
<div className="barcode-qr-preview">
|
|
<div className="radio-sidebar-container">
|
|
{coresdata?.map((option) => (
|
|
<div
|
|
key={option.ConfigName}
|
|
onClick={() => CoresOnChange(option.ConfigName)}
|
|
className={`radio-sidebar-item ${dropdownValue === option.ConfigName ? 'selected' : ''}`}
|
|
>
|
|
<div className="radio-sidebar-title">
|
|
{option.ConfigName}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="BarcodeTemplateSetup-Master">
|
|
<div
|
|
className={`CustomisedBSPS ${dropdownValue === '100X150' ? 'height-max' : ''}`}
|
|
>
|
|
<div className="headerPreview">PREVIEW</div>
|
|
{(() => {
|
|
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) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div className="SixCross15x">
|
|
{[...Array(6)].map((_, index) => (
|
|
<div className="BarQrprint5">
|
|
<div
|
|
key={index}
|
|
className="BarQrprint1details BarQrprint5Details alignCenterFlexDirectionColumn"
|
|
>
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'T' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 50 : 20,
|
|
20,
|
|
barcodeOrQr
|
|
)}
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'C' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 50 : 20,
|
|
20,
|
|
barcodeOrQr
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'₹:' +
|
|
(detail?.MRP
|
|
? detail?.MRP
|
|
: 0.0)}
|
|
</div>
|
|
)}
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'B' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 50 : 20,
|
|
20,
|
|
barcodeOrQr
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="default-15x15-6cross">
|
|
{Array.from({ length: 6 }).map(
|
|
(_, index) => (
|
|
<div
|
|
className="Sticker0"
|
|
key={`sticker0-${index}`}
|
|
>
|
|
<img
|
|
src={qrCodeImage}
|
|
alt={`QR Code ${index + 1}`}
|
|
/>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '22X35 3cross':
|
|
return templateAvailable ? (
|
|
//"B","T"
|
|
!(barcode || qrcode || mrp) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div className="Cross32235">
|
|
{[...Array(3)].map((_, index) => (
|
|
<div
|
|
className="BarQrprint4"
|
|
key={index}
|
|
>
|
|
<div
|
|
className="BarQrprint1details"
|
|
style={{
|
|
alignItems: 'center',
|
|
flexDirection:
|
|
templateValue === 'T'
|
|
? 'column'
|
|
: 'column-reverse',
|
|
}}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 100 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{(productName || mrp) && (
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{productName && (
|
|
<div
|
|
className={`MRPBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: (proName || 'Product Name')}
|
|
</div>
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'₹:' +
|
|
(detail?.MRP
|
|
? detail?.MRP
|
|
: 10.0)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'22mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'35mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid22x35_3cross">
|
|
{Array?.from({ length: 3 })?.map(
|
|
(_, index) => (
|
|
<div
|
|
className="Sticker1 bg-white"
|
|
key={`sticker1-${index}`}
|
|
>
|
|
<div style={{ width: '60%' }}>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} ({size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR579890770'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '12mm',
|
|
height: '12mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'22mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'35mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '25X25 4cross':
|
|
return templateAvailable ? (
|
|
!(
|
|
productName ||
|
|
mDate ||
|
|
eDate ||
|
|
barcode ||
|
|
qrcode ||
|
|
mrp
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
// 4 Cross idhu 25 * 25 * 25 * 25 = 1 inch
|
|
<>
|
|
<div className="Cross4Print">
|
|
{[...Array(4)].map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className="BarQrprint3"
|
|
>
|
|
<div className="BarQrprint1details alignCenterFlexDirectionColumn">
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'T' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 60 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'₹:' +
|
|
(detail?.MRP
|
|
? detail?.MRP
|
|
: 10.0)}
|
|
</div>
|
|
)}
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'C' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 60 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{mDate && (
|
|
<div className="MandateBQ"></div>
|
|
)}
|
|
{eDate && (
|
|
<div className="ExpdateBQ">
|
|
DD-MM-YYYY
|
|
</div>
|
|
)}
|
|
{(barcode || qrcode) &&
|
|
templateValue === 'B' &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 60 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid25x25_4cross dummy4cross">
|
|
{Array.from({ length: 4 })?.map(
|
|
(_, index) => (
|
|
<div
|
|
className="sticker25x25 bg-white"
|
|
key={`sticker2-${index}`}
|
|
>
|
|
<p
|
|
className={`sticker25x25-name ${nickName ? '' : (proName + '(' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
<span
|
|
class={
|
|
(proName + '(' + size + ')')
|
|
?.length <= 14
|
|
? 'product-name2'
|
|
: 'product-nameSmall2'
|
|
}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</span>
|
|
<span
|
|
class={
|
|
(proName + '(' + size + ')')
|
|
?.length <= 14
|
|
? 'product-size2'
|
|
: 'product-sizeSmall2'
|
|
}
|
|
>
|
|
({size || '1 PCS'})
|
|
</span>
|
|
</p>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<img
|
|
src={qrCodeImage}
|
|
className="sticker25-img"
|
|
alt="barcode"
|
|
/>
|
|
<p class="product-id2">{ProdId || 'QR8575956'}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '25X50 2cross':
|
|
return templateAvailable ? (
|
|
//"B","T"
|
|
!(productName || barcode || qrcode || mrp) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div className="TwoCrosssmain">
|
|
{[...Array(2)].map((_, index) => (
|
|
<div className="BarQrprint8">
|
|
<div
|
|
key={index}
|
|
className="Barcodeimage"
|
|
style={valueStyleColumn}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 140 : 30,
|
|
30,
|
|
barcodeOrQr
|
|
)}
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'₹:' +
|
|
(detail?.MRP
|
|
? detail?.MRP
|
|
: 10.0)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid25x50_2cross">
|
|
{Array.from({ length: 2 })?.map(
|
|
(_, index) => (
|
|
<div
|
|
className="Sticker3 bg-white"
|
|
key={`sticker3-${index}`}
|
|
>
|
|
<div style={{ width: '60%' }}>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} ({size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR74478578'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '75px',
|
|
height: '75px',
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '50X30 Single':
|
|
return templateAvailable ? (
|
|
!(
|
|
productName ||
|
|
mDate ||
|
|
eDate ||
|
|
barcode ||
|
|
qrcode ||
|
|
mrp
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div
|
|
className="BarQrprint6"
|
|
style={secondValueStyle}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate && (
|
|
<div className="MandateBQ">
|
|
{formatDate(
|
|
detail
|
|
?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate
|
|
)}
|
|
</div>
|
|
)}
|
|
{eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ExpDate && (
|
|
<div className="ExpdateBQ">
|
|
{formatDate(
|
|
detail
|
|
?.ProdVariantPriceDetails?.[0]
|
|
?.ExpDate
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage flexDirection"
|
|
style={valueStyleColumn}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 70 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + (detail?.MRP || 10.0)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'30mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid50x30_1cross">
|
|
<div className="Sticker4 bg-white">
|
|
<div className="Sticker4-name">
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} ({size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR987968'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '15mm',
|
|
height: '15mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'30mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '50X25 Single':
|
|
return templateAvailable ? (
|
|
!(
|
|
productName ||
|
|
mDate ||
|
|
barcode ||
|
|
qrcode ||
|
|
mrp
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div
|
|
className="BarQrprint2"
|
|
style={secondValueStyle}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate && (
|
|
<div className="MandateBQ">
|
|
{formatDate(
|
|
detail
|
|
?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={valueStyleColumn}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 70 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + (detail?.MRP || '10.0')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid50x25_1cross">
|
|
<div className="Sticker5 bg-white">
|
|
<div className="Sticker5-name">
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} ({size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR8798639'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '13mm',
|
|
height: '13mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'25mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'50mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '100X13 (55MM Printable)':
|
|
return templateAvailable ? (
|
|
//"C", "T", "B"
|
|
!(
|
|
productName ||
|
|
sellingPrice ||
|
|
barcode ||
|
|
qrcode
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div
|
|
className="BarQrprint9"
|
|
style={valueStyleRow}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 140 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
<div className="BarQrprint1details1">
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{`Selling Price : ` +
|
|
(detail?.SellPrice || '10.0')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'13mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid100x13_1cross">
|
|
<div className="Sticker6 bg-white">
|
|
<div className={`text-section6`}>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} ({size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR0970970'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '11mm',
|
|
height: '11mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'13mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '100X15 (70MM Printable)':
|
|
return templateAvailable ? (
|
|
// "L","R"
|
|
!(
|
|
productName ||
|
|
sellingPrice ||
|
|
barcode ||
|
|
qrcode ||
|
|
mrp
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div
|
|
className="BarQrprint1"
|
|
style={valueStyleRow}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{productName && (
|
|
<div
|
|
style={{ textAlign: 'left' }}
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + (detail?.MRP || '10.0')}
|
|
</div>
|
|
)}
|
|
{sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{`Selling Price : ` +
|
|
(detail?.SellPrice || '10.0')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="Qrcodeimage">
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 90 : 40,
|
|
null,
|
|
barcodeOrQr
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid100x15_1cross">
|
|
<div className="Sticker7 bg-white">
|
|
<div className="text-section7">
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName || 'Product Name'} ({size || '1 PCS'})
|
|
</p>
|
|
<p>{ProdId || 'QR858755'}</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '12mm',
|
|
height: '12mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'15mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
case '100X150':
|
|
return templateAvailable ? (
|
|
!(
|
|
productName ||
|
|
sellingPrice ||
|
|
mDate ||
|
|
eDate ||
|
|
color ||
|
|
barcode ||
|
|
qrcode ||
|
|
mrp
|
|
) ? (
|
|
<Empty />
|
|
) : (
|
|
<>
|
|
<div
|
|
className="BarQrprint7"
|
|
style={secondValueStyle}
|
|
>
|
|
<div className="BarQrprint1details1">
|
|
{productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{`Selling Price : ` +
|
|
detail?.SellPrice}
|
|
</div>
|
|
)}
|
|
{mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate && (
|
|
<div className="MandateBQ">
|
|
{formatDate(
|
|
detail
|
|
?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate
|
|
)}
|
|
</div>
|
|
)}
|
|
{eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ExpDate && (
|
|
<div className="ExpdateBQ">
|
|
{formatDate(
|
|
detail
|
|
?.ProdVariantPriceDetails?.[0]
|
|
?.ExpDate
|
|
)}
|
|
</div>
|
|
)}
|
|
{color && (
|
|
<div className="ColorBQ">
|
|
{colorText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={valueStyleColumn}
|
|
>
|
|
{(barcode || qrcode) &&
|
|
handleImageTag(
|
|
barcodeOrQr ? 140 : 35,
|
|
35,
|
|
barcodeOrQr
|
|
)}
|
|
{mrp && (
|
|
<div className="MRPBQ">
|
|
{'MRP : ' + (detail?.MRP || '10.0')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'150mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
)
|
|
) : (
|
|
<>
|
|
<div className="grid100x150_1cross bg-white">
|
|
<div className="OverAllSticker8">
|
|
<div className="StikerBr8">
|
|
<p>{detail?.BrName}</p>
|
|
</div>
|
|
<div className="Sticker8">
|
|
<div className="text-section8">
|
|
<p>
|
|
Product Name:{' '}
|
|
<p
|
|
className={`field-value ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</p>
|
|
</p>
|
|
<p>
|
|
SIZE:{' '}
|
|
<span className="field-value">
|
|
{size || '1 PCS'}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Id:{' '}
|
|
<span className="field-value">
|
|
{ProdId || 'QR86868'}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
MRP:{' '}
|
|
<span className="field-value">
|
|
{'MRP : ' + (detail?.MRP || '10.0')}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Selling Price:{' '}
|
|
<span className="field-value">
|
|
{(detail?.SellPrice || '10.0')}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={qrCodeImage}
|
|
style={{
|
|
width: '50mm',
|
|
height: '50mm',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="showInfoCross4Print">
|
|
<p>
|
|
Vertical
|
|
<div>
|
|
<GiVerticalFlip size={25} />{' '}
|
|
</div>
|
|
- {'150mm'}
|
|
</p>
|
|
<p>
|
|
Horizontal
|
|
<div>
|
|
<GiHorizontalFlip size={30} />{' '}
|
|
</div>
|
|
- {'100mm'}
|
|
</p>
|
|
</div>
|
|
</>
|
|
);
|
|
default:
|
|
return <Empty />;
|
|
}
|
|
})()}
|
|
<p>{dropdownValue}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Form.Item>
|
|
{!MultiCode && <Form.Item
|
|
name="Copies"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
pattern: /^[1-9]\d*(\.\d+)?$/,
|
|
message: 'Please Enter Copies',
|
|
},
|
|
{
|
|
validator: async (_, value) => {
|
|
await validateSafeInput(value); // To block HTML tags & SQL keywords
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InputField
|
|
autoComplete="off"
|
|
label={<label class="required">Copies</label>}
|
|
isOnChange={false}
|
|
onChange={(e) => {
|
|
CopiesOnChange(e?.target?.value);
|
|
}}
|
|
/>
|
|
</Form.Item>}
|
|
{proName?.length > 12 && printProductName && !MultiCode && (
|
|
<>
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
fontSize: '12px',
|
|
marginTop: '-10px',
|
|
fontFamily: 'Poppins',
|
|
fontStyle: 'italic',
|
|
color: '#ff4d4f',
|
|
}}
|
|
>
|
|
Note: Product name is very long. Please add a short/nick
|
|
name to proceed print.
|
|
</div>
|
|
<Form.Item
|
|
name="NickName"
|
|
rules={[
|
|
{
|
|
// required: true,
|
|
message: 'Please Enter Product Short / Nick Name',
|
|
},
|
|
{
|
|
max: 12,
|
|
message:
|
|
'Product Short / Nick Name cannot be greater than 12 characters',
|
|
},
|
|
]}
|
|
>
|
|
<InputField
|
|
autoComplete="off"
|
|
label={`Product Short / Nick Name`}
|
|
onChange={(e) => {
|
|
setNickName(e?.target?.value);
|
|
}}
|
|
maxLength={12}
|
|
/>
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
}}
|
|
>
|
|
{(!MultiCode || totalCopies > 0) && (
|
|
<Buttons buttonText="Submit" color="901D77" />
|
|
)}
|
|
{MultiCode && totalCopies === 0 && (
|
|
<button
|
|
type="button"
|
|
className="product_primary_Button"
|
|
onClick={() => setstockWiseQrcode(true)}
|
|
>
|
|
Submit
|
|
</button>
|
|
)} </div>
|
|
|
|
|
|
</Form>
|
|
}
|
|
/>
|
|
< div style={{ display: 'none' }}>
|
|
<div id="StickerPrints0">
|
|
<div className="grid15x15_6cross">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, "copyCountcopyCountcopyCount")
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="Sticker0"
|
|
key={`sticker0-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '52px', height: '52px' }}
|
|
/>
|
|
</div>
|
|
));
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker0" key={`sticker0-${index}`}>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '13mm', height: '13mm' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div id="StickerPrints1">
|
|
<div className="grid22x35_3cross">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
return Array?.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="Sticker1"
|
|
key={`sticker1-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div style={{ width: '60%' }}>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record.ProdName} ({record.Size}
|
|
{record.UomName})
|
|
</p>
|
|
<p>{record.QRCode}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '52px', height: '52px' }}
|
|
/>
|
|
</div>
|
|
))
|
|
}
|
|
)
|
|
: Array?.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker1" key={`sticker1-${index}`}>
|
|
<div style={{ width: '60%' }}>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '16mm', height: '16mm' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div id="StickerPrints2">
|
|
<div className="grid25x25_4cross">
|
|
{(selectedRecords?.length > 0)
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount2')
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="sticker25x25"
|
|
key={`sticker2-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<p
|
|
className={`sticker25x25-name ${nickName ? '' : (record?.ProdName + '(' + record?.Size + '' + record?.UomName + ')')?.length > 14 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
<span
|
|
class={
|
|
(record?.NickName || record?.ProdName)?.length <= 14
|
|
? 'product-name2'
|
|
: 'product-nameSmall2'
|
|
}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</span>
|
|
<span
|
|
class={
|
|
(record?.NickName || record?.ProdName)?.length <= 14
|
|
? 'product-size2'
|
|
: 'product-sizeSmall2'
|
|
}
|
|
>
|
|
({record?.Size}
|
|
{record?.UomName})
|
|
</span>
|
|
</p>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
className="sticker25-img"
|
|
alt="barcode"
|
|
/>
|
|
<p class="product-id2">
|
|
{record?.QRCode || record?.ProdId}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
|
|
)
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="sticker25x25" key={`sticker2-${index}`}>
|
|
<p
|
|
className={`sticker25x25-name ${nickName ? '' : (proName + '(' + size + ')')?.length > 14 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
<span
|
|
class={
|
|
proName?.length <= 14
|
|
? 'product-name2'
|
|
: 'product-nameSmall2'
|
|
}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</span>
|
|
<span
|
|
class={
|
|
proName?.length <= 14
|
|
? 'product-size2'
|
|
: 'product-sizeSmall2'
|
|
}
|
|
>
|
|
({size})
|
|
</span>
|
|
</p>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<img
|
|
src={base64Image}
|
|
className="sticker25-img"
|
|
alt="barcode"
|
|
/>
|
|
<p class="product-id2">{ProdId}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div id="StickerPrints3">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount3')
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="Sticker3"
|
|
key={`sticker3-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : ((record?.NickName || record?.ProdName) + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName} ({record?.Size}
|
|
{record?.UomName})
|
|
</p>
|
|
<p>{record?.QRCode || record?.ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '75px', height: '75px' }}
|
|
/>
|
|
</div>
|
|
))
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker3" key={`sticker3-${index}`}>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '75px', height: '75px' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div id="StickerPrints4">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount4')
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="Sticker4"
|
|
key={`sticker4-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName} ({record?.Size}
|
|
{record?.UomName})
|
|
</p>
|
|
<p>{record?.QRCode || record?.ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '75px', height: '75px' }}
|
|
/>
|
|
</div>
|
|
))
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker4" key={`sticker4-${index}`}>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '75px', height: '75px' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div id="StickerPrints5">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount5')
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="Sticker5"
|
|
key={`sticker5-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName} ({record?.Size}
|
|
{record?.UomName})
|
|
</p>
|
|
<p>{record?.QRCode || record?.ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '72px', height: '72px' }}
|
|
/>
|
|
</div>
|
|
))
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker5" key={`sticker5-${index}`}>
|
|
<div>
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '72px', height: '72px' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div id="StickerPrints6">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount6')
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="Sticker6"
|
|
key={`sticker6-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="text-section6">
|
|
<p
|
|
className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName} ({record?.Size}
|
|
{record?.UomName})
|
|
</p>
|
|
<p>{record?.QRCode || record?.ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '11mm', height: '11mm' }}
|
|
/>
|
|
</div>
|
|
))
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker6" key={`sticker6-${index}`}>
|
|
<div className="text-section6">
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '11mm', height: '11mm' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div id="StickerPrints7">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount7')
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="Sticker7"
|
|
key={`sticker7-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="text-section7">
|
|
<p
|
|
className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName} ({record?.Size}
|
|
{record?.UomName})
|
|
</p>
|
|
<p>{record?.QRCode || record?.ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '12mm', height: '12mm' }}
|
|
/>
|
|
</div>
|
|
))
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="Sticker7" key={`sticker7-${index}`}>
|
|
<div className="text-section7">
|
|
<p
|
|
className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName} ({size})
|
|
</p>
|
|
<p>{ProdId}</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '12mm', height: '12mm' }}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div id="StickerPrints8">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
console.log(copyCount, 'copyCount8')
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="OverAllSticker8"
|
|
key={`sticker8-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="StikerBr8">
|
|
<p>{record?.BrName || detail?.BrName}</p>
|
|
</div>
|
|
<div className="Sticker8">
|
|
<div className="text-section8">
|
|
<p>
|
|
Product Name:{' '}
|
|
<p
|
|
className={`field-value ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</p>
|
|
</p>
|
|
<p>
|
|
SIZE:{' '}
|
|
<span className="field-value">
|
|
{record?.Size}
|
|
{record?.UomName}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Id:{' '}
|
|
<span className="field-value">
|
|
{record?.QRCode || record?.ProdId}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
MRP:{' '}
|
|
<span className="field-value">
|
|
{'MRP : ' + record?.MRP}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Selling Price:{' '}
|
|
<span className="field-value">
|
|
{record?.SellPrice}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={
|
|
generateCodeImage(
|
|
record?.QRCode || record?.ProdId,
|
|
templateOptions?.codeType
|
|
) || base64Image
|
|
}
|
|
style={{ width: '50mm', height: '50mm' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))
|
|
})
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="OverAllSticker8">
|
|
<div className="StikerBr8">
|
|
<p>{detail?.BrName}</p>
|
|
</div>
|
|
<div className="Sticker8" key={`sticker8-${index}`}>
|
|
<div className="text-section8">
|
|
<p>
|
|
Product Name:{' '}
|
|
<p
|
|
className={`field-value ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName}
|
|
</p>
|
|
</p>
|
|
<p>
|
|
SIZE: <span className="field-value">{size}</span>
|
|
</p>
|
|
<p>
|
|
Id: <span className="field-value">{ProdId}</span>
|
|
</p>
|
|
<p>
|
|
MRP:{' '}
|
|
<span className="field-value">
|
|
{'MRP : ' + detail?.MRP}
|
|
</span>
|
|
</p>
|
|
<p>
|
|
Selling Price:{' '}
|
|
<span className="field-value">
|
|
{detail?.SellPrice}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<img
|
|
src={base64Image}
|
|
style={{ width: '50mm', height: '50mm' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div id="25X254cross">
|
|
<div className="grid25x25_4cross">
|
|
{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 (
|
|
<div
|
|
className="barcode-wrapper-25x25"
|
|
key={`Barcode1-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="barcode-container-25x25">
|
|
{templateOptions.value === 'T' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '90%'
|
|
: `${imageSize}%`,
|
|
'7px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
)}
|
|
{hasProductName && (
|
|
<div
|
|
style={{
|
|
fontSize: '9px',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</div>
|
|
)}
|
|
{hasMrp && (
|
|
<div
|
|
style={{
|
|
fontSize: '9px',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="MRPBQ"
|
|
>
|
|
{'₹' + record?.MRP}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'C' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '90%'
|
|
: `${imageSize}%`,
|
|
'7px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
)}
|
|
{(hasMDate || hasEDate) && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '3px',
|
|
}}
|
|
>
|
|
{hasMDate && (
|
|
<div
|
|
style={{
|
|
fontSize: '8px',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="MandateBQ"
|
|
>
|
|
{hasMDate && !hasEDate ? 'MFG: ' : ''}
|
|
{formatDate(record?.ManufDate)}
|
|
</div>
|
|
)}
|
|
{hasMDate && hasEDate && (
|
|
<span style={{ fontSize: '8px' }}>|</span>
|
|
)}
|
|
{hasEDate && (
|
|
<div
|
|
style={{
|
|
fontSize: '8px',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="ExpdateBQ"
|
|
>
|
|
{!hasMDate && hasEDate ? 'EXP: ' : ''}
|
|
{formatDate(record?.ExpDate)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'B' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '25mm'
|
|
: `${imageSize}%`,
|
|
'7px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
}
|
|
|
|
)
|
|
: 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 (
|
|
<div
|
|
className="barcode-wrapper-25x25"
|
|
key={`Barcode1-${index}`}
|
|
>
|
|
<div className="barcode-container-25x25">
|
|
{templateOptions.value === 'T' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '90%'
|
|
: `${imageSize}%`,
|
|
'7px'
|
|
)}
|
|
</div>
|
|
)}
|
|
{hasProductName && (
|
|
<div
|
|
style={{
|
|
fontSize: '9px',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{hasMrp && (
|
|
<div
|
|
style={{
|
|
fontSize: '9px',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="MRPBQ"
|
|
>
|
|
{'₹' + detail?.MRP}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'C' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '90%'
|
|
: `${imageSize}%`,
|
|
'7px'
|
|
)}
|
|
</div>
|
|
)}
|
|
{(hasMDate || hasEDate) && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: '3px',
|
|
}}
|
|
>
|
|
{hasMDate && (
|
|
<div
|
|
style={{
|
|
fontSize: '8px',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="MandateBQ"
|
|
>
|
|
{hasMDate && !hasEDate ? 'MFG: ' : ''}
|
|
{formatDate(
|
|
detail?.ProdVariantPriceDetails?.[0]
|
|
?.ManufDate
|
|
)}
|
|
</div>
|
|
)}
|
|
{hasMDate && hasEDate && (
|
|
<span style={{ fontSize: '8px' }}>|</span>
|
|
)}
|
|
{hasEDate && (
|
|
<div
|
|
style={{
|
|
fontSize: '8px',
|
|
whiteSpace: 'nowrap',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}
|
|
className="ExpdateBQ"
|
|
>
|
|
{!hasMDate && hasEDate ? 'EXP: ' : ''}
|
|
{formatDate(
|
|
detail?.ProdVariantPriceDetails?.[0]?.ExpDate
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'B' && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: forceColumnLayout
|
|
? 'column'
|
|
: 'row',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '25mm'
|
|
: `${imageSize}%`,
|
|
'7px'
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="25X502cross">
|
|
<div className="Cross25X50container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="BarQrprint8"
|
|
key={`Barcode2-${recordIndex}-${copyIndex}`}
|
|
style={{ width: '100%' }}
|
|
>
|
|
<div className="Barcodeimage" style={valueStyleColumn}>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '90%' : '35%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
)
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint8"
|
|
key={`Barcode2-${index}`}
|
|
style={{ width: '100%' }}
|
|
>
|
|
<div className="Barcodeimage" style={valueStyleColumn}>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '90%' : '35%'
|
|
)}
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{proName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="50X30Single">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
|
|
<div
|
|
className="BarQrprint6"
|
|
style={secondValueStyle}
|
|
key={`Barcode3-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate && record?.ManufDate && (
|
|
<div
|
|
style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
|
|
className="MandateBQ"
|
|
>
|
|
{record?.ManufDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.eDate && record?.ExpDate && (
|
|
<div
|
|
style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
|
|
className="ExpdateBQ"
|
|
>
|
|
{record?.ExpDate}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage flexDirection"
|
|
style={valueStyleColumn}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
'70%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
)
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint6"
|
|
style={secondValueStyle}
|
|
key={`Barcode3-${index}`}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
|
|
<div
|
|
style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
|
|
className="MandateBQ"
|
|
>
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
|
|
<div
|
|
style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
|
|
className="ExpdateBQ"
|
|
>
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage flexDirection"
|
|
style={valueStyleColumn}
|
|
>
|
|
{imageTagBarcodeAndQR('70%')}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div id="50X25Single">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="BarQrprint2"
|
|
style={secondValueStyle}
|
|
key={`Barcode4-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div
|
|
className="BarQrprint1details flexDirection"
|
|
style={{ width: '80%' }}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName || record?.ProdName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate && record?.ManufDate && (
|
|
<div
|
|
style={{ fontSize: '10px' }}
|
|
className="MandateBQ"
|
|
>
|
|
{record?.ManufDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.eDate && record?.ExpDate && (
|
|
<div
|
|
style={{ fontSize: '10px' }}
|
|
className="ExpdateBQ"
|
|
>
|
|
{record?.ExpDate}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={{
|
|
valueStyleColumn,
|
|
width: '60%',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
'90%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
)
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint2"
|
|
style={secondValueStyle}
|
|
key={`Barcode4-${index}`}
|
|
>
|
|
<div
|
|
className="BarQrprint1details flexDirection"
|
|
style={{ width: '80%' }}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
|
|
<div
|
|
style={{ fontSize: '10px' }}
|
|
className="MandateBQ"
|
|
>
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
|
|
<div
|
|
style={{ fontSize: '10px' }}
|
|
className="ExpdateBQ"
|
|
>
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={{
|
|
valueStyleColumn,
|
|
width: '60%',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR('90%')}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="100X13(55MMPrintable)">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="BarQrprint9"
|
|
key={`Barcode5-${recordIndex}-${copyIndex}`}
|
|
style={valueStyleRow}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
'auto',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
<div className="BarQrprint1details1">
|
|
{templateOptions.productName && (
|
|
<div style={{ fontSize: '8px' }}>
|
|
{'Product Name :' +
|
|
(record?.NickName || record?.ProdName)}
|
|
</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div style={{ fontSize: '8px' }}>
|
|
{'Selling Price :' + record?.SellPrice}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
)
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint9"
|
|
key={`Barcode5-${index}`}
|
|
style={valueStyleRow}
|
|
>
|
|
{imageTagBarcodeAndQR()}
|
|
<div className="BarQrprint1details1">
|
|
{templateOptions.productName && (
|
|
<div style={{ fontSize: '8px' }}>
|
|
{'Product Name :' + proName}
|
|
</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div style={{ fontSize: '8px' }}>
|
|
{'Selling Price :' + detail?.SellPrice}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="100X15(70MMPrintable)">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="BarQrprint1"
|
|
style={valueStyleRow}
|
|
key={`Barcode6-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{'Product Name: ' +
|
|
(record?.NickName || record?.ProdName)}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{'Selling Price :' + record?.SellPrice}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="Qrcodeimage" style={{ width: '50%' }}>
|
|
{imageTagBarcodeAndQR(
|
|
'auto',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
)
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint1"
|
|
style={valueStyleRow}
|
|
key={`Barcode6-${index}`}
|
|
>
|
|
<div className="BarQrprint1details flexDirection">
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{'Product Name' + proName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{'Selling Price :' + detail?.SellPrice}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="Qrcodeimage" style={{ width: '50%' }}>
|
|
{imageTagBarcodeAndQR()}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="100X150">
|
|
<div className="container">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="BarQrprint7"
|
|
style={secondValueStyle}
|
|
key={`Barcode7-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div
|
|
className="BarQrprint1details1"
|
|
style={{ gap: '10px' }}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{'Product Name: ' +
|
|
(record?.NickName || record?.ProdName)}
|
|
</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{'Selling Price :' + record?.SellPrice}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate && record?.ManufDate && (
|
|
<div className="MandateBQ">{record?.ManufDate}</div>
|
|
)}
|
|
{templateOptions.eDate && record?.ExpDate && (
|
|
<div className="ExpdateBQ">{record?.ExpDate}</div>
|
|
)}
|
|
{templateOptions.color && (
|
|
<div className="ColorBQ">
|
|
{record?.Color || colorText}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={{
|
|
valueStyleColumn,
|
|
width: '50%',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{
|
|
<div>
|
|
{imageTagBarcodeAndQR(
|
|
'70%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
)
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="BarQrprint7"
|
|
style={secondValueStyle}
|
|
key={`Barcode7-${index}`}
|
|
>
|
|
<div
|
|
className="BarQrprint1details1"
|
|
style={{ gap: '10px' }}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{'Product Name' + (nickName ? nickName : proName)}
|
|
</div>
|
|
)}
|
|
{templateOptions.sellingPrice && (
|
|
<div className="SellingpriceBQ">
|
|
{'Selling Price :' + detail?.SellPrice}
|
|
</div>
|
|
)}
|
|
{templateOptions.mDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
|
|
<div className="MandateBQ">
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.eDate &&
|
|
detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
|
|
<div className="ExpdateBQ">
|
|
{detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
|
|
</div>
|
|
)}
|
|
{templateOptions.color && (
|
|
<div className="ColorBQ">{colorText}</div>
|
|
)}
|
|
</div>
|
|
<div
|
|
className="Barcodeimage"
|
|
style={{
|
|
valueStyleColumn,
|
|
width: '50%',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{<div>{imageTagBarcodeAndQR('70%')}</div>}
|
|
{templateOptions.mrp && (
|
|
<div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="15X156cross">
|
|
<div
|
|
className="labelGrid15"
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="label15"
|
|
key={`Barcode8-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div className="BarQrprint2details alignCenterFlexDirectionColumn">
|
|
{templateOptions.value === 'T' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '100%' : '50%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{templateOptions.productName && (
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
fontSize: '6px',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
width: '90%',
|
|
}}
|
|
className="productNameBQ"
|
|
>
|
|
{record?.NickName
|
|
? record?.NickName
|
|
: record?.ProdName}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'C' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '80%'
|
|
: !templateOptions.productName &&
|
|
!templateOptions.mrp
|
|
? '80%'
|
|
: '35%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
textAlign: 'center',
|
|
fontSize: '6px',
|
|
}}
|
|
className="MRPBQ"
|
|
>
|
|
{'₹:' + record?.MRP}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'B' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '100%' : '50%',
|
|
'6px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
)
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div className="label15" key={`Barcode8-${index}`}>
|
|
<div className="BarQrprint2details alignCenterFlexDirectionColumn">
|
|
{templateOptions.value === 'T' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '100%' : '50%'
|
|
)}
|
|
{templateOptions.productName && (
|
|
<div
|
|
style={{
|
|
textAlign: 'center',
|
|
fontSize: '6px',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap',
|
|
width: '90%',
|
|
}}
|
|
className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'C' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '80%'
|
|
: !templateOptions.productName &&
|
|
!templateOptions.mrp
|
|
? '80%'
|
|
: '35%'
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
textAlign: 'center',
|
|
fontSize: '6px',
|
|
}}
|
|
className="MRPBQ"
|
|
>
|
|
{'₹:' + (detail?.MRP ? detail?.MRP : 10.0)}
|
|
</div>
|
|
)}
|
|
{templateOptions.value === 'B' &&
|
|
imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B' ? '100%' : '50%'
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{/* //Qrcode */}
|
|
<div id="22X353cross">
|
|
<div className="grid22x35_3cross">
|
|
{selectedRecords?.length > 0
|
|
? selectedRecords?.map((record, recordIndex) => {
|
|
const copyCount = generateQRCodeCopy(record?.QRCode);
|
|
|
|
return Array.from({ length: copyCount })?.map((_, copyIndex) => (
|
|
<div
|
|
className="barcode-wrapper-22x35"
|
|
key={`Barcode9-${recordIndex}-${copyIndex}`}
|
|
>
|
|
<div
|
|
className="barcode-container-22x35"
|
|
style={{
|
|
alignItems: 'center',
|
|
flexDirection:
|
|
templateOptions.value === 'T'
|
|
? 'column'
|
|
: 'column-reverse',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '100%'
|
|
: !templateOptions.mrp &&
|
|
!templateOptions.productName
|
|
? '60%'
|
|
: '40%',
|
|
'8px',
|
|
record?.QRCode || record?.ProdId
|
|
)}
|
|
{(templateOptions.productName ||
|
|
templateOptions.mrp) && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'} ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{record?.NickName
|
|
? record?.NickName
|
|
: record?.ProdName}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div
|
|
className={`MRPBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'}`}
|
|
>
|
|
{'MRP : ' + record?.MRP}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
|
|
)
|
|
: Array.from({ length: copies })?.map((_, index) => (
|
|
<div
|
|
className="barcode-wrapper-22x35"
|
|
key={`Barcode9-${index}`}
|
|
>
|
|
<div
|
|
className="barcode-container-22x35"
|
|
style={{
|
|
alignItems: 'center',
|
|
flexDirection:
|
|
templateOptions.value === 'T'
|
|
? 'column'
|
|
: 'column-reverse',
|
|
}}
|
|
>
|
|
{imageTagBarcodeAndQR(
|
|
templateOptions.codeType === 'B'
|
|
? '100%'
|
|
: !templateOptions.mrp && !templateOptions.productName
|
|
? '60%'
|
|
: '40%',
|
|
'8px'
|
|
)}
|
|
{(templateOptions.productName || templateOptions.mrp) && (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{templateOptions.productName && (
|
|
<div
|
|
className={`productNameBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'} ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
|
|
>
|
|
{nickName
|
|
? nickName
|
|
: proName
|
|
? proName
|
|
: 'Product Name'}
|
|
</div>
|
|
)}
|
|
{templateOptions.mrp && (
|
|
<div
|
|
className={`MRPBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'}`}
|
|
>
|
|
{'MRP : ' + detail?.MRP}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div >
|
|
<DefaultModal
|
|
open={openExcel}
|
|
title="Bulk Upload"
|
|
footer={true}
|
|
width={excelDataValues?.length > 0 ? 2500 : 600}
|
|
className={'bulkuploadmodal'}
|
|
children={
|
|
<>
|
|
<ProductExcel
|
|
CategoryNames={CategoryNames}
|
|
CategoryId={CategoryId}
|
|
Catconfigid={CatconfigId}
|
|
SubcatId={SubcatId}
|
|
SubCatData={Subcatnames}
|
|
Subcatnumfid={SubcatNumFId}
|
|
Allbranddata={BrandName}
|
|
AllBrandId={BrandId}
|
|
Allbranddatanumfid={BrandNumFId}
|
|
CategoryName1={CategoryNames}
|
|
TaxDatas={combinedTaxData}
|
|
Unit={Unit}
|
|
SuplierNames={SuplierNames}
|
|
handleSubmit={handleSubmitbulk}
|
|
/>
|
|
{Bulkpost && (
|
|
<div className="Bulkuploadpost">
|
|
<div align="center" class="fondLoader">
|
|
<div className="contener_general">
|
|
<div className="contener_mixte">
|
|
<div className="ballcolor ball_1"> </div>
|
|
</div>
|
|
<div className="contener_mixte">
|
|
<div className="ballcolor ball_2"> </div>
|
|
</div>
|
|
<div className="contener_mixte">
|
|
<div className="ballcolor ball_3"> </div>
|
|
</div>
|
|
<div className="contener_mixte">
|
|
<div className="ballcolor ball_4"> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
}
|
|
handleSubmit={handleSubmit}
|
|
handleCancel={handleCancel}
|
|
/>
|
|
|
|
<DefaultModal
|
|
title="ONLINE IMAGE UPLOADER"
|
|
width={800}
|
|
open={imageopen}
|
|
footer={
|
|
selectedImage === null || selectedImage === undefined ? false : true
|
|
}
|
|
buttonText="Submit"
|
|
children={
|
|
<Form className="">
|
|
<div className="productonlineImg">
|
|
{imagedata?.map((item, index) => (
|
|
<div
|
|
className={`singleimg ${selectedImage === item ? 'selected' : ''}`}
|
|
key={index}
|
|
onClick={() => setSelectedImage(item)}
|
|
>
|
|
<img
|
|
src={item.image}
|
|
style={{ height: '100%', width: '100%' }}
|
|
alt="no image"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Form>
|
|
}
|
|
handleSubmit={submitimage}
|
|
handleCancel={handleimage}
|
|
/>
|
|
|
|
<DefaultModal
|
|
title="Product Image"
|
|
width={500}
|
|
open={uploadImageModal}
|
|
footer={false}
|
|
handleCancel={handleImageModalClose}
|
|
className={'productMtrImgUpload1'}
|
|
children={
|
|
<div className="productMtrImgUpload">
|
|
<CropUpload
|
|
key={rowRecord?.ProdId}
|
|
isProductList={{
|
|
isProductListPutapi: true,
|
|
record: rowRecord,
|
|
imagePutFunction: handleImageUpload,
|
|
}}
|
|
onlineImage={onlineImage}
|
|
ImageLink={rowRecord?.ProdLogo || null}
|
|
updateImageUrl={imageModalRowIndex ? updateImageUrl : () => { }}
|
|
handleClose={handleImageModalClose}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className={
|
|
rowRecord?.ProdLogo
|
|
? 'productListBrowseImageButton1'
|
|
: 'productListBrowseImageButton2'
|
|
}
|
|
onClick={() =>
|
|
browseImage(rowRecord?.ProdName, imageModalRowIndex)
|
|
}
|
|
>
|
|
Browse Image
|
|
</button>
|
|
</div>
|
|
}
|
|
/>
|
|
<DefaultModal
|
|
open={openPaddleOCR}
|
|
destroyOnClose
|
|
title={
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
gap: '1rem',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
<span>Scan Menu Card</span>
|
|
<button
|
|
onClick={() => setShowTips(!showTips)}
|
|
style={{
|
|
padding: '6px 12px',
|
|
backgroundColor: '#f6ffed',
|
|
border: '1px solid #b7eb8f',
|
|
borderRadius: 6,
|
|
cursor: 'pointer',
|
|
fontSize: 12,
|
|
color: '#52c41a',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 6,
|
|
fontWeight: 400,
|
|
fontFamily: 'Poppins',
|
|
}}
|
|
>
|
|
{showTips ? <FiEyeOff size={14} /> : <FiInfo size={14} />}{' '}
|
|
{showTips ? 'Hide Tips' : 'Show Tips'}
|
|
</button>
|
|
</div>
|
|
}
|
|
handleCancel={() => {
|
|
setOpenPaddleOCR(false);
|
|
setUploadedFile(null);
|
|
setUploadedFiles([]);
|
|
setBreadData([]);
|
|
}}
|
|
footer={false}
|
|
width={600}
|
|
children={
|
|
<div
|
|
style={{
|
|
padding: '24px',
|
|
backgroundColor: '#fafafa',
|
|
minHeight: '400px',
|
|
}}
|
|
>
|
|
<MultiCameraCropOCR
|
|
showTips={showTips}
|
|
handleProcessMultipleOCR={handleProcessMultipleOCR}
|
|
/>
|
|
</div>
|
|
}
|
|
/>
|
|
<DefaultModal
|
|
open={breadModalOpen}
|
|
title="Scanned Products"
|
|
handleCancel={() => setBreadModalOpen(false)}
|
|
footer={false}
|
|
children={
|
|
<>
|
|
<div>
|
|
<div
|
|
style={{
|
|
height: '70vh',
|
|
overflow: 'auto',
|
|
scrollbarWidth: 'thin',
|
|
}}
|
|
>
|
|
<ScannedProductTable
|
|
data={breadData}
|
|
editable={true}
|
|
onDataChange={setBreadData}
|
|
/>
|
|
</div>
|
|
<div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
|
|
<Buttons
|
|
buttonText="SUBMIT"
|
|
color="901D77"
|
|
handleSubmit={() => {
|
|
handleBulkUpload(breadData);
|
|
setBreadModalOpen(false);
|
|
setBreadData([]);
|
|
}}
|
|
icon={<ArrowRightOutlined />}
|
|
htmlType={true}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
/>
|
|
<DefaultModal
|
|
open={stockWiseQrcode}
|
|
title="Stock Wise Qrcode"
|
|
handleCancel={() => setstockWiseQrcode(false)}
|
|
handleSubmit={() => {
|
|
if (totalCopies == 0) {
|
|
message.error("Please enter copies count")
|
|
return;
|
|
}
|
|
else {
|
|
setstockWiseQrcode(false)
|
|
onFinish();
|
|
}
|
|
}}
|
|
footer={true}
|
|
children={
|
|
<>
|
|
<div className='ProductList-pwiseQrcode'>
|
|
<Table
|
|
columns={[
|
|
{ title: 'Product Name', dataIndex: 'productName', key: 'productName' },
|
|
{
|
|
title: 'Copies Count',
|
|
dataIndex: 'copiesCount',
|
|
key: 'copiesCount',
|
|
render: (text, record) => (
|
|
<input
|
|
className='inputpwiseQR'
|
|
type="number"
|
|
min="1"
|
|
value={record.copiesCount}
|
|
onChange={(e) => {
|
|
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' : ''
|
|
}
|
|
/>
|
|
</div>
|
|
<div className='indicationInfo'>
|
|
<p></p>
|
|
<span>Stock is not Maintained</span>
|
|
</div>
|
|
</>
|
|
}
|
|
/>
|
|
<DefaultModal
|
|
open={productWiseQrcode}
|
|
title="Product Wise Qrcode"
|
|
handleCancel={() => setProductWiseQrcode(false)}
|
|
handleSubmit={() => {
|
|
if (totalCopies == 0) {
|
|
message.error("Please enter copies count")
|
|
return;
|
|
}
|
|
else {
|
|
setProductWiseQrcode(false)
|
|
onFinish();
|
|
}
|
|
|
|
}} footer={true}
|
|
|
|
children={
|
|
<>
|
|
<div className='ProductList-pwiseQrcode'>
|
|
<Table
|
|
columns={[
|
|
{ title: 'Product Name', dataIndex: 'productName', key: 'productName' },
|
|
// { title: 'Stock Count', dataIndex: 'StockAvailable', key: 'StockAvailable' },
|
|
{
|
|
title: 'Copies Count',
|
|
dataIndex: 'copiesCount',
|
|
key: 'copiesCount',
|
|
render: (text, record, index) => (
|
|
<input
|
|
type="number"
|
|
className='inputpwiseQR'
|
|
min="1"
|
|
value={record.copiesCount}
|
|
onChange={(e) => {
|
|
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"
|
|
/>
|
|
</div>
|
|
|
|
|
|
</>
|
|
}
|
|
/>
|
|
|
|
<OCRLoader
|
|
isVisible={isOCRProcessing.Loader}
|
|
imageCount={isOCRProcessing.Length || 1}
|
|
/>
|
|
</div >
|
|
);
|
|
};
|
|
|
|
export default ProductList;
|