Android_Retail/src/Pages/Product/ProductList.jsx

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 { FaPlus } from 'react-icons/fa6';
import { Tables } from '../../../ownLib/my-ui-lib.js';
import StickerPrintModel from './StickerPrintModal.jsx';
import StickerPrintTemplates from './StickerTemplates.jsx';
import QRCodeCopiesModal from './QRCodeCopiesModal.jsx';
import {
  generateBarcode,
  generateCodeImage,
  generateQRCode,
  generateQRCodeCopy,
} from '../../Services/utils.js';

const ProductList = () => {
  const { SadminuserAccess } = useAuth();
  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Add Product'
  );
  const formRef = useRef();
  // const ref1 = useRef(null);
  const navigateTo = useNavigate();
  const dispatch = useDispatch();
  const location = useLocation();

  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 [printReady, setPrintReady] = useState(false);

  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',
  //   },
  // ];
  console.log(QrandbarcodeDatas, 'QrandbarcodeDatas');
  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);
  };

  const Datas = Array.from({ length: 5 }, (_, i) => i + 10);
  const ModifiedData = Datas?.map((e) => ({ value: e }));
  console.log(ModifiedData, 'Datas');

  useEffect(() => {
    if (deleteProductPages?.length > 0) {
      getForDeleteProduct(deleteProductPages);
    } else if (deleteProductPages?.length === 0) {
      getProdfun();
      return;
    }
  }, [deleteProductPages]);

  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 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 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,UserId: UserId };
    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 === 'Add 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 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,
      });
    }

    setPrintReady(true);

    setTimeout(async () => {
      switch (dropdownValue) {
        case '15X15 6cross': // COMPLETE
          await printDiv(
            templateAvailable ? 'label-15X156cross' : 'StickerPrints0',
            style + getPageStyle(92)
          );
          handleQRStickerPrinterModelCancel();
          break;
        case '22X35 3cross': // Need to check
          await printDiv(
            templateAvailable ? '22X353cross' : 'StickerPrints1',
            style + getPageStyle(105)
          );
          handleQRStickerPrinterModelCancel();
          break;
        case '25X25 4cross': // COMPLETE
          await printDiv(
            templateAvailable ? '25X254cross' : 'StickerPrints2',
            style + getPageStyle(100)
          );
          handleQRStickerPrinterModelCancel();
          break;
        case '25X50 2cross': //Need to check
          await printDiv(
            templateAvailable ? '25X502cross' : 'StickerPrints3',
            style + getPageStyle(100)
          );
          handleQRStickerPrinterModelCancel();
          break;
        case '50X30 Single': // COMPLETE
          await printDiv(
            templateAvailable ? '50X30Single' : 'StickerPrints4',
            style
          );
          handleQRStickerPrinterModelCancel();
          break;
        case '50X25 Single': // COMPLETE
          await printDiv(
            templateAvailable ? '50X25Single' : 'StickerPrints5',
            style
          );
          handleQRStickerPrinterModelCancel();
          break;
        case '100X13 (55MM Printable)': //Need to check
          await printDiv(
            templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6',
            style
          );
          handleQRStickerPrinterModelCancel();
          break;
        case '100X15 (70MM Printable)': // COMPLETE
          await printDiv(
            templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7',
            style
          );
          handleQRStickerPrinterModelCancel();
          break;
        case '100X150': // COMPLETE
          await printDiv(
            templateAvailable ? '100X150' : 'StickerPrints8',
            style
          );
          handleQRStickerPrinterModelCancel();
          setPrintReady(false);
          break;
        default:
          alert('! Select correct cross ');
          setPrintReady(false);
      }
    }, 100);
  };

  useEffect(() => {
    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 handleResetExcelData = useCallback(() => {
    dispatch(emptyExcelData());
  }, []);

  const handleCancel = useCallback(() => {
    setOpenExcel(false);
    handleResetExcelData();
  }, [handleResetExcelData]);

  const openModal = useCallback(() => {
    setOpenExcel(true);
  }, []);
  const handleSubmitbulk = useCallback((excelData) => {
    setExceldatasubmit(excelData?.filter((e) => e?.isModified));
  }, []);

  const handleSubmit = useCallback(async () => {
    setBulkpost(true);

    const FilterData = Exceldatasubmit?.filter(
      a => a.ProductName !== ''
    );

    if (!FilterData || FilterData.length === 0) {
      setBulkpost(false);
      setMessageType('error');
      setMessageData('No data to submit. Please upload an Excel file.');
      return;
    }

    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 || 'General',
      ProdSubCat: data.SubCategory,
      Brand: data.Brand || '',
      AutoGenerateQr: data.AutoGenerateQrcode || 'No',
      QRCode: data.AddQrCode,
      StockAvailable: data.StockAvailable || 'No',
      TaxId: 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 || 'No',
      OnePcsPrice: data.AmountperpiecePrice,
      AutoGenerateSingleQr: data.AutoGenerateOnePieceQrcode || 'No',
      OnePcQR: data.AutoGenerateOnePieceQrcodeNumber,
      TokenAvailable: data.TokenAvailable || 'No',
      ProdLogo: data.Productimage,
    }));

    const postDatas = { prodDetails: formattedData };

    const response = await dispatch(bulkpostdata(postDatas)).unwrap();

    if (response?.data?.statusCode === 1) {
      setMessageType('success');
      setMessageData(response.data.response);
      setpage(1);

      const responseData = await dispatch(
        getProductDataPageNo({ CompId, BranchId, AppId, PageNumber: 1 })
      ).unwrap();

      if (responseData?.data?.statusCode === 1) {
        setCachedData({ 1: responseData.data.data });
        setproductData(responseData.data.data);
        setCurrentPage(1);
      }
    } else {
      setMessageType('error');
      setMessageData(response?.data?.response);
    }

    setBulkpost(false);
    handleResetExcelData();
    handleCancel();
  }, [
    Exceldatasubmit,

    CompId,
    BranchId,
    AppId,
    handleResetExcelData,
    handleCancel
  ]);

  const Unit = useMemo(
    () => UomPreference?.map((e) => e.ConfigName),
    [UomPreference]
  );

  const CategoryId = useMemo(
    () => ProdCatData?.map((e) => e.ConfigId),
    [ProdCatData]
  );

  const CategoryNames = useMemo(
    () => ProdCatData?.map((e) => e.ConfigName),
    [ProdCatData]
  );

  const CatconfigId = useMemo(
    () => ProdCatData?.map((e) => e.ConfigId),
    [ProdCatData]
  );

  const Subcatnames = useMemo(
    () => subCatData?.map((e) => e.ConfigName),
    [subCatData]
  );

  const SubcatId = useMemo(
    () => subCatData?.map((e) => e.ConfigId),
    [subCatData]
  );

  const SubcatNumFId = useMemo(
    () => subCatData?.map((e) => e.NumFId),
    [subCatData]
  );

  const BrandNumFId = useMemo(
    () => allBrandData?.map((e) => e.NumFId),
    [allBrandData]
  );

  const BrandId = useMemo(
    () => allBrandData?.map((e) => e.ConfigId),
    [allBrandData]
  );

  const BrandName = useMemo(
    () => allBrandData?.map((e) => e.ConfigName),
    [allBrandData]
  );

  const SuplierNames = useMemo(
    () => SupplierData?.map((e) => e.SuppName),
    [SupplierData]
  );

  const TaxDatas = useMemo(
    () => TaxData?.map((e) => e.TaxIdName),
    [TaxData]
  );

  const TaxData1 = useMemo(
    () => TaxData?.map((e) => e.TaxPercentage),
    [TaxData]
  );

  const combinedTaxData = useMemo(
    () =>
      TaxDatas?.map(
        (taxIdName, index) => `${taxIdName} - ${TaxData1[index]}%`
      ),
    [TaxDatas, TaxData1]
  );
  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 = useCallback(
    (w = 'auto', fs = '6px', codeData = null) => {
      const currentCode = codeData || ProdId;
      return (
        (templateOptions.barcode || templateOptions.qrcode) && (
          <>
            <img
              style={{ width: w }}
              src={
                templateOptions.codeType === 'B'
                  ? !MultiCode
                    ? barcodeBase64Image
                    : generateBarcode(currentCode)
                  : !MultiCode
                    ? base64Image
                    : generateQRCode(QrandbarcodeDatas, currentCode)
              }
              alt="Barcode"
            />
            {templateOptions.codeType !== 'B' && (
              <p style={{ margin: '0', padding: '0', fontSize: fs }}>
                {currentCode}
              </p>
            )}
          </>
        )
      );
    },
    [templateOptions, MultiCode, barcodeBase64Image, base64Image, ProdId]
  );

  const handleQRStickerPrinterModelCancel = () => {
    setDropdownValue();
    setCopies();
    setOpen(false);
    formRef?.current?.resetFields();
    setSelectedRecords([]);
    setQrandbarcodeDatas([]);
    setMultiCode(false);
    setNickName(null);
    setPrintReady(false);
  };

  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>
      <StickerPrintModel
        open={open}
        handleCancel={handleQRStickerPrinterModelCancel}
        formRef={formRef}
        onFinish={onFinish}
        MultiCode={MultiCode}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
        selectedRecords={selectedRecords}
        coresdata={coresdata}
        dropdownValue={dropdownValue}
        CoresOnChange={CoresOnChange}
        barcodeTemplateDetails={barcodeTemplateDetails}
        detail={detail}
        proName={proName}
        nickName={nickName}
        ProdId={ProdId}
        size={size}
        // valueStyleColumn={valueStyleColumn}
        // secondValueStyle={secondValueStyle}
        // valueStyleRow={valueStyleRow}
        CopiesOnChange={CopiesOnChange}
        printProductName={printProductName}
        totalCopies={totalCopies}
        setstockWiseQrcode={setstockWiseQrcode}
        setProductWiseQrcode={setProductWiseQrcode}
        setNickName={setNickName}
        templateOptions={templateOptions}
      />

      {printReady && (
        <StickerPrintTemplates
          selectedRecords={selectedRecords}
          copies={copies || totalCopies}
          nickName={nickName}
          proName={proName}
          ProdId={ProdId}
          size={size}
          detail={detail}
          templateOptions={templateOptions}
          base64Image={base64Image}
          QrandbarcodeDatas={QrandbarcodeDatas}
          MultiCode={MultiCode}
          generateQRCodeCopy={(code) =>
            generateQRCodeCopy(QrandbarcodeDatas, code)
          }
          generateCodeImage={(code, codeType = 'Q') => generateCodeImage(code, codeType, QrandbarcodeDatas)}
          imageTagBarcodeAndQR={imageTagBarcodeAndQR}
          dropdownValue={dropdownValue}
          barcodeTemplateDetails={barcodeTemplateDetails}
        />
      )}

      <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">&nbsp;</div>
                    </div>
                    <div className="contener_mixte">
                      <div className="ballcolor ball_2">&nbsp;</div>
                    </div>
                    <div className="contener_mixte">
                      <div className="ballcolor ball_3">&nbsp;</div>
                    </div>
                    <div className="contener_mixte">
                      <div className="ballcolor ball_4">&nbsp;</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>
          </>
        }
      />
      <QRCodeCopiesModal
        open={stockWiseQrcode}
        onClose={() => setstockWiseQrcode(false)}
        type="stock"
        totalCopies={totalCopies}
        onFinish={onFinish}
        QrandbarcodeDatas={QrandbarcodeDatas}
        setQrandbarcodeDatas={setQrandbarcodeDatas}
      />

      <QRCodeCopiesModal
        open={productWiseQrcode}
        onClose={() => setProductWiseQrcode(false)}
        type="product"
        totalCopies={totalCopies}
        onFinish={onFinish}
        QrandbarcodeDatas={QrandbarcodeDatas}
        setQrandbarcodeDatas={setQrandbarcodeDatas}
      />

      <OCRLoader
        isVisible={isOCRProcessing.Loader}
        imageCount={isOCRProcessing.Length || 1}
      />
    </div>
  );
};

export default ProductList;