From ff1aa2a609f6057c6e14b405f6996d53c658b18f Mon Sep 17 00:00:00 2001 From: Srinath Date: Fri, 20 Feb 2026 15:29:24 +0530 Subject: [PATCH 1/9] Added Qr Funtionalites --- src/Pages/StockMaster/StockForm.jsx | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/Pages/StockMaster/StockForm.jsx b/src/Pages/StockMaster/StockForm.jsx index d206b0a..6001fa7 100644 --- a/src/Pages/StockMaster/StockForm.jsx +++ b/src/Pages/StockMaster/StockForm.jsx @@ -76,6 +76,8 @@ import AddAllProductsButton from './AddAllProductGrid.jsx'; import SettingsIconWithModal from './SettingsIconWithModal.jsx'; import VirtualizedTable from './VirtualizedTable.jsx'; import { useDebounce } from './UseDebounce.jsx'; +import { isMobile } from 'react-device-detect'; +import BarCodeScan from '../../Services/BarCodeScan.jsx'; const subDirectory = import.meta.env.BASE_URL; const EditableContext = React.createContext(null); @@ -3813,6 +3815,28 @@ const StockForm = ({ formType }) => { style={{ width: '250px' }} > + {/* + + */} + {isMobile ? ( +
+ { + debouncedScannerSearch(value); + }} + /> +
+ ) : ( { onClick={handleScanSearch} /> + )} Date: Fri, 20 Feb 2026 15:31:13 +0530 Subject: [PATCH 2/9] Added Qr scann on mobile Funtionalites --- src/Pages/PurchaseOrder/PurchaseOrder.jsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/Pages/PurchaseOrder/PurchaseOrder.jsx b/src/Pages/PurchaseOrder/PurchaseOrder.jsx index b3f8be0..b43eb50 100644 --- a/src/Pages/PurchaseOrder/PurchaseOrder.jsx +++ b/src/Pages/PurchaseOrder/PurchaseOrder.jsx @@ -52,6 +52,7 @@ import { PrintStyleFunction } from '../paymentpdfPage/PrintStyleFunction.js'; import { PurchaseOrderMobilePrint } from './PurchsasePrintStyle/PurchaseOrderMobilePrint.js'; import { isMobile } from 'react-device-detect'; import { CiEdit } from 'react-icons/ci'; +import BarCodeScan from '../../Services/BarCodeScan.jsx'; const subDirectory = import.meta.env.BASE_URL; const stylesMap = { @@ -1628,6 +1629,7 @@ const PurchaseOrder = () => { }} > + {!isMobile && ( { onClick={handleScanSearch} /> + )} + {isMobile && ( +
+ { + debouncedScannerSearch(value); + }} + /> +
+ )} Date: Fri, 20 Feb 2026 15:31:31 +0530 Subject: [PATCH 3/9] Added Qr scann on mobile Funtionalites --- src/Pages/StockTransfer/CreateTransfer.jsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/Pages/StockTransfer/CreateTransfer.jsx b/src/Pages/StockTransfer/CreateTransfer.jsx index 1ebd2ae..880dfc4 100644 --- a/src/Pages/StockTransfer/CreateTransfer.jsx +++ b/src/Pages/StockTransfer/CreateTransfer.jsx @@ -16,6 +16,8 @@ import { getCompBranchData } from '../../Features/BrachLogin/BranchLogin.js'; import { changeBreadCrumb } from '../../Features/AppPage/CenterPage.js'; import { useLocation, useNavigate } from 'react-router-dom'; import { postRequestStock } from '../../Features/RequestStock/RequestStock.js'; +import BarCodeScan from '../../Services/BarCodeScan.jsx'; +import { isMobile } from 'react-device-detect'; const subDirectory = import.meta.env.BASE_URL; function debounce(func, wait) { @@ -516,13 +518,22 @@ const CreateTransfer = () => { disabled={isProcessing} /> - + {isMobile ? ( +
+ { + debouncedScannerSearch(value); + }} + /> +
+ ) : ( + )}
From f78d302f1c1910d0a2af908983763443863125c8 Mon Sep 17 00:00:00 2001 From: Srinath Date: Fri, 20 Feb 2026 15:31:45 +0530 Subject: [PATCH 4/9] Added Qr scann on mobile Funtionalites --- .../BSNavbar/verfiedProduct/VerfiedProducts.jsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/Pages/BookingScreen/Components/BSNavbar/verfiedProduct/VerfiedProducts.jsx b/src/Pages/BookingScreen/Components/BSNavbar/verfiedProduct/VerfiedProducts.jsx index 0969a2a..6b5a781 100644 --- a/src/Pages/BookingScreen/Components/BSNavbar/verfiedProduct/VerfiedProducts.jsx +++ b/src/Pages/BookingScreen/Components/BSNavbar/verfiedProduct/VerfiedProducts.jsx @@ -19,6 +19,8 @@ import './Verfiedproduct.scss'; import { useSelector } from 'react-redux'; import { ApplicationPreferences } from '../../../../../Features/BrachLogin/BranchLogin.js'; import { changeOfferAppliedProductsForMembership } from '../../../../../Features/Offer/Offernew/BookingOffernew.js'; +import BarCodeScan from '../../../../../Services/BarCodeScan.jsx'; +import { isMobile } from 'react-device-detect'; const VerfiedProducts = ({ drawerOpen = false, setDrawerOpen = () => {} }) => { @@ -303,10 +305,16 @@ const VerfiedProducts = ({ drawerOpen = false, setDrawerOpen = () => {} }) => { > Clear - - + ) + : ( { + setScanValue(value); + fetchProductsByOrderId(value); + }} + />)}
{message &&
{message}
} From 4fbce4ec31c82073eb75aea1bd96a32dcc144be7 Mon Sep 17 00:00:00 2001 From: Srinath Date: Fri, 20 Feb 2026 15:32:00 +0530 Subject: [PATCH 5/9] Added Qr scann on mobile Funtionalites --- .../UtillComponents/BSNavBarComboSearch.jsx | 57 ++++++++++--------- 1 file changed, 31 insertions(+), 26 deletions(-) diff --git a/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarComboSearch.jsx b/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarComboSearch.jsx index 33a4909..507f21b 100644 --- a/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarComboSearch.jsx +++ b/src/Pages/BookingScreen/Components/UtillComponents/BSNavBarComboSearch.jsx @@ -32,6 +32,7 @@ import BarcodeScanner from './BarcodeScanner'; import { isMobile } from 'react-device-detect'; import { BiBarcodeReader } from 'react-icons/bi'; import TooltipWrapper from '../../../../Components/Tooltip/Tooltip'; +import BarCodeScan from '../../../../Services/BarCodeScan.jsx'; const BSNavBarComboSearch = (props) => { @@ -1197,28 +1198,28 @@ const BSNavBarComboSearch = (props) => { : []; // }); }; - const stopScannerFromParent = () => { - if (scannerRef.current) { - scannerRef.current.stopScanner(); // Call stopScanner from the child component - } - }; + // const stopScannerFromParent = () => { + // if (scannerRef.current) { + // scannerRef.current.stopScanner(); // Call stopScanner from the child component + // } + // }; - const handleQrcode = () => { - setOpenScanner((prev) => !prev); - if (!openScanner && scannerRef.current) { - scannerRef.current.reinitializeCamera(); // Call the function to reinitialize the camera - } - }; + // const handleQrcode = () => { + // setOpenScanner((prev) => !prev); + // if (!openScanner && scannerRef.current) { + // scannerRef.current.reinitializeCamera(); // Call the function to reinitialize the camera + // } + // }; - const handleQrData = (decodedText, err) => { - onChangeprodFunction(decodedText); - setOpenScanner(false); // Close the modal after scanning - stopScannerFromParent(); - if (err && err?.error) { - setMessageData(err?.error); - setMessageType('error'); - } - }; + // const handleQrData = (decodedText, err) => { + // onChangeprodFunction(decodedText); + // setOpenScanner(false); // Close the modal after scanning + // stopScannerFromParent(); + // if (err && err?.error) { + // setMessageData(err?.error); + // setMessageType('error'); + // } + // }; return (
{ />
{isMobile && screenWidth <= 768 ? ( - handleQrcode()} - /> + // handleQrcode()} + // /> + { + onChangeprodFunction(value); + }} /> ) : ( )} @@ -1395,7 +1400,7 @@ const BSNavBarComboSearch = (props) => { )} - {isMobile && screenWidth <= 768 && ( + {/* {isMobile && screenWidth <= 768 && ( { /> )} - )} + )} */} ); }; From 374c76540fc127e747de6de8b5c581dfe9966d97 Mon Sep 17 00:00:00 2001 From: Srinath Date: Fri, 20 Feb 2026 15:32:24 +0530 Subject: [PATCH 6/9] Added Qr scann on mobile Funtionalites --- src/Services/BarCodeScan.jsx | 419 +++++++++++++++++++++++++++++++++++ 1 file changed, 419 insertions(+) create mode 100644 src/Services/BarCodeScan.jsx diff --git a/src/Services/BarCodeScan.jsx b/src/Services/BarCodeScan.jsx new file mode 100644 index 0000000..4e2c71c --- /dev/null +++ b/src/Services/BarCodeScan.jsx @@ -0,0 +1,419 @@ +// import React, { useRef, useState, useEffect } from "react"; +// import { BarcodeScanner } from "@capacitor-mlkit/barcode-scanning"; +// import { BsUpcScan } from "react-icons/bs"; +// import { BrowserMultiFormatReader } from "@zxing/library"; +// import { Capacitor } from "@capacitor/core"; +// import { DefaultModal } from "../Components/Modal/DefaultModal"; + +// export default function BarCodeScan({ onScan }) { +// const isMobileApp = Capacitor.getPlatform() !== "web"; +// const [scanning, setScanning] = useState(false); +// const [modalOpen, setModalOpen] = useState(false); +// const videoRef = useRef(null); +// const codeReaderRef = useRef(null); +// const streamRef = useRef(null); + +// const startScan = async () => { +// if (scanning) return; +// setScanning(true); + +// if (isMobileApp) { +// // Mobile: MLKit scanner +// try { +// const perm = await BarcodeScanner.requestPermissions(); +// if (perm.camera !== "granted") { +// alert("Camera permission not granted"); +// setScanning(false); +// return; +// } + +// const { barcodes } = await BarcodeScanner.scan(); +// if (barcodes && barcodes.length > 0) { +// onScan(barcodes[0].rawValue); +// } +// } catch (err) { +// alert("Error scanning barcode: " + err.message); +// } finally { +// setScanning(false); +// } +// } else { +// // Web: open modal and start camera +// setModalOpen(true); +// setTimeout(() => startWebScan(), 50); // wait for modal DOM +// } +// }; + +// const startWebScan = async () => { +// try { +// codeReaderRef.current = new BrowserMultiFormatReader(); +// streamRef.current = await navigator.mediaDevices.getUserMedia({ +// video: { facingMode: "environment" }, +// }); +// if (videoRef.current) { +// videoRef.current.srcObject = streamRef.current; +// videoRef.current.play(); +// } + +// codeReaderRef.current.decodeFromVideoDevice( +// null, +// videoRef.current, +// (result) => { +// if (result) { +// onScan(result.getText()); +// stopWebScan(); +// setModalOpen(false); +// } +// } +// ); +// } catch (err) { +// alert("Error accessing camera: " + err.message); +// setScanning(false); +// setModalOpen(false); +// } +// }; + +// const stopWebScan = () => { +// if (streamRef.current) { +// streamRef.current.getTracks().forEach((track) => track.stop()); +// streamRef.current = null; +// } +// if (codeReaderRef.current) { +// codeReaderRef.current.reset(); +// codeReaderRef.current = null; +// } +// setScanning(false); +// }; + +// const closeModal = () => { +// stopWebScan(); +// setModalOpen(false); +// }; + +// // Stop camera if component unmounts +// useEffect(() => () => stopWebScan(), []); + +// return ( +//
+// {!scanning && ( +// +// )} + +// { +// closeModal(); +// }} +// > +//
+//
+// + +//
+// ); +// } + +import React, { useRef, useState, useEffect } from "react"; +import { BarcodeScanner } from "@capacitor-mlkit/barcode-scanning"; +import { BsUpcScan } from "react-icons/bs"; +import { Capacitor } from "@capacitor/core"; +import { DefaultModal } from "../Components/Modal/DefaultModal"; +import QrScanner from "qr-scanner/qr-scanner.min.js"; +import { + BrowserMultiFormatReader, + BarcodeFormat, +} from "@zxing/library"; + +QrScanner.WORKER_PATH = new URL( + "qr-scanner/qr-scanner-worker.min.js", + import.meta.url +).toString(); + +export default function BarCodeScan({ onScan }) { + const isMobileApp = Capacitor.getPlatform() !== "web"; + const [scanning, setScanning] = useState(false); + const [modalOpen, setModalOpen] = useState(false); + + const videoRef = useRef(null); + const qrScannerRef = useRef(null); + const barcodeReaderRef = useRef(null); + + // ------------------------- + // START SCAN + // ------------------------- + const startScan = async () => { + if (scanning) return; + setScanning(true); + + if (isMobileApp) { + try { + const perm = await BarcodeScanner.requestPermissions(); + if (perm.camera !== "granted") { + alert("Camera permission not granted"); + setScanning(false); + return; + } + + const { barcodes } = await BarcodeScanner.scan(); + if (barcodes?.length > 0) { + onScan(barcodes[0].rawValue); + } + } catch (err) { + console.error(err); + } finally { + setScanning(false); + } + } else { + setModalOpen(true); + } + }; + + // ------------------------- + // START WEB SCAN (HYBRID) + // ------------------------- + const startWebScan = async () => { + if (!videoRef.current) return; + + // Start QR scanner (fast) + qrScannerRef.current = new QrScanner( + videoRef.current, + (result) => { + stopWebScan(); + onScan(result.data); + setModalOpen(false); + }, + { + maxScansPerSecond: 25, + } + ); + + await qrScannerRef.current.start(); + + // Start Barcode scanner (ZXing) + barcodeReaderRef.current = new BrowserMultiFormatReader(undefined, { + possibleFormats: [ + BarcodeFormat.CODE_128, + BarcodeFormat.EAN_13, + BarcodeFormat.UPC_A, + BarcodeFormat.UPC_E, + ], + }); + + barcodeReaderRef.current.timeBetweenDecodingAttempts = 50; + + barcodeReaderRef.current.decodeFromVideoDevice( + null, + videoRef.current, + (result) => { + if (result) { + stopWebScan(); + onScan(result.getText()); + setModalOpen(false); + } + } + ); + }; + + const stopWebScan = () => { + if (qrScannerRef.current) { + qrScannerRef.current.stop(); + qrScannerRef.current.destroy(); + qrScannerRef.current = null; + } + + if (barcodeReaderRef.current) { + barcodeReaderRef.current.reset(); + barcodeReaderRef.current = null; + } + + setScanning(false); + }; + + const closeModal = () => { + stopWebScan(); + setModalOpen(false); + }; + + useEffect(() => { + if (modalOpen) { + startWebScan(); + } + }, [modalOpen]); + + useEffect(() => { + return () => stopWebScan(); + }, []); + + return ( +
+ {!scanning && ( + + )} + + {/* +
+
+ + + */} + +
+ {/* VIDEO */} +
- {isMobile && screenWidth <= 768 && ( + {/* {isMobile && screenWidth <= 768 && ( { /> )} - )} + )} */} ); }; From 6361cb661e760cc7c6e34bc58d7e90de678b7cb5 Mon Sep 17 00:00:00 2001 From: Srinath Date: Fri, 20 Feb 2026 15:33:38 +0530 Subject: [PATCH 9/9] Added Qr scann on mobile Funtionalites --- .../Components/BSCombo/BSC1Search.jsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/Pages/BookingScreen/Components/BSCombo/BSC1Search.jsx b/src/Pages/BookingScreen/Components/BSCombo/BSC1Search.jsx index ba57dd2..a567aa5 100644 --- a/src/Pages/BookingScreen/Components/BSCombo/BSC1Search.jsx +++ b/src/Pages/BookingScreen/Components/BSCombo/BSC1Search.jsx @@ -81,6 +81,7 @@ import { Global_PromoCodeOffers } from '../../../../Features/Offer/Offer.js'; import { validateOffers } from '../BSItemCards/ValidateOffer.jsx'; import { useSaleswiseOfferWatcher } from '../BSItemCards/SalesWiseOffer.jsx'; import ExpireConfirmModal from '../BookingFunctionality/ExpireConfirmModal.jsx'; +import BarCodeScan from '../../../../Services/BarCodeScan.jsx'; export default function BSC1Search(props) { const dispatch = useDispatch(); @@ -4567,10 +4568,15 @@ export default function BSC1Search(props) { {isMobile && screenWidth <= 768 && ( - handleQrcode()} - // onClick={() => OnfocusTrue()} + // handleQrcode()} + // // onClick={() => OnfocusTrue()} + // /> + { + ProductNameOnChange(value, true); + }} /> )} @@ -4821,7 +4827,7 @@ export default function BSC1Search(props) { - {isMobile && screenWidth <= 768 && ( + {/* {isMobile && screenWidth <= 768 && ( )} - )} + )} */} ); }