/* ============ SCAN BARCODE SCREEN ============ */ function ScanScreen({products, stockIn, stockOut, setRoute}){ const {useState, useEffect, useRef, useCallback} = React; const [phase, setPhase] = useState('idle'); const [errMsg, setErrMsg] = useState(''); const [found, setFound] = useState(null); const [scannedCode, setScannedCode] = useState(''); const [manualCode, setManualCode] = useState(''); const [qty, setQty] = useState(''); const [employee, setEmployee] = useState(''); const [scaleDecoded, setScaleDecoded] = useState(null); const qrRef = useRef(null); // Html5Qrcode instance const videoRef = useRef(null); // used for native BarcodeDetector path const streamRef = useRef(null); const rafRef = useRef(null); const detectorRef = useRef(null); /* ── decode scale barcode: 27 + PLU(4) + grams(6) + check(1) ── */ function decodeScaleBarcode(code) { if (code.length === 13 && code.startsWith('27')) { const plu = parseInt(code.slice(2, 6), 10); const grams = parseInt(code.slice(6, 12), 10); const weightKg = Math.round(grams / 10) / 100; if (!isNaN(plu) && !isNaN(grams) && grams > 0) return { plu, weightKg }; } return null; } const handleCode = useCallback((code) => { const clean = code.trim(); setScannedCode(clean); const scale = decodeScaleBarcode(clean); if (scale) { const p = products.find(pr => pr.plu && parseInt(pr.plu) === scale.plu); if (p) { setFound(p); setScaleDecoded(scale); setQty(String(scale.weightKg)); setPhase('found'); return; } } const p = products.find(pr => (pr.barcode && pr.barcode === clean) || (pr.plu && String(pr.plu) === clean) || (pr.code && pr.code.toLowerCase() === clean.toLowerCase()) ); if (p) { setFound(p); setScaleDecoded(null); setPhase('found'); } else { setFound(null); setScaleDecoded(null); setPhase('notfound'); } }, [products]); /* ── stop all camera activity ── */ const stopCamera = useCallback(() => { if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null; } if (qrRef.current) { try { qrRef.current.stop(); } catch(e){} qrRef.current = null; } if (streamRef.current) { streamRef.current.getTracks().forEach(t=>t.stop()); streamRef.current = null; } }, []); /* ── native BarcodeDetector RAF loop ── */ const scanLoop = useCallback(() => { if (!videoRef.current || !detectorRef.current) return; rafRef.current = requestAnimationFrame(async () => { try { const codes = await detectorRef.current.detect(videoRef.current); if (codes.length > 0) { stopCamera(); handleCode(codes[0].rawValue); } else scanLoop(); } catch { scanLoop(); } }); }, [stopCamera, handleCode]); /* ── start camera — called by the button ── */ const startCamera = useCallback(() => { setPhase('scanning'); setErrMsg(''); }, []); /* ── once phase=scanning, DOM is ready → init scanner ── */ useEffect(() => { if (phase !== 'scanning') return; const hasBarcodeDetector = 'BarcodeDetector' in window; const hasHtml5Qrcode = typeof Html5Qrcode !== 'undefined'; let cancelled = false; async function init() { try { if (hasBarcodeDetector) { /* Native BarcodeDetector (Chrome Android / Edge) */ const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode:'environment', width:{ideal:1280}, height:{ideal:720} } }); if (cancelled) { stream.getTracks().forEach(t=>t.stop()); return; } streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; await videoRef.current.play(); } detectorRef.current = new BarcodeDetector({ formats:['ean_13','ean_8','code_128','code_39','upc_a','upc_e','qr_code'] }); scanLoop(); } else if (hasHtml5Qrcode) { /* html5-qrcode — works on all desktop browsers */ const scanner = new Html5Qrcode('helbawi-scanner-div'); qrRef.current = scanner; await scanner.start( { facingMode: 'environment' }, { fps: 15, qrbox: { width: 280, height: 160 } }, (decodedText) => { try { scanner.stop(); } catch(e) {} qrRef.current = null; if (!cancelled) handleCode(decodedText); }, () => { /* per-frame not-found — ignore */ } ); } else { /* No scan API — camera only, manual entry */ const stream = await navigator.mediaDevices.getUserMedia({ video:{ facingMode:'environment' } }); if (cancelled) { stream.getTracks().forEach(t=>t.stop()); return; } streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; await videoRef.current.play(); } if (!cancelled) setErrMsg('Auto-scan unavailable in this browser. Enter the barcode manually below.'); } } catch(e) { if (!cancelled) { setPhase('error'); setErrMsg(e.name === 'NotAllowedError' ? 'Camera access denied. Allow camera permission and try again.' : 'Camera error: ' + e.message); } } } init(); return () => { cancelled = true; stopCamera(); }; }, [phase, scanLoop, stopCamera, handleCode]); useEffect(() => () => stopCamera(), [stopCamera]); /* ── reset ── */ const reset = useCallback(() => { stopCamera(); setPhase('idle'); setFound(null); setScannedCode(''); setManualCode(''); setQty(''); setEmployee(''); setScaleDecoded(null); }, [stopCamera]); /* ── confirm stock-out ── */ const confirmAction = () => { const q = parseFloat(qty); if (!q || q <= 0) { toast({kind:'err', title:'Enter a valid weight'}); return; } if (!employee.trim()) { toast({kind:'err', title:'Employee name is required'}); return; } const cur = found ? Math.round(found.batches.reduce((s,b)=>s+b.qty,0)*10)/10 : 0; const ok = stockOut({productId: found.id, qty: q, employee: employee.trim()}); if (!ok) { toast({kind:'err', title:'Insufficient stock', desc:`Only ${H.fmtQty(cur,'kg')} available`}); return; } toast({kind:'ok', title:'Stock Out recorded', desc:`${q} kg of ${found.nameEn||found.nameAr} by ${employee.trim()}`}); reset(); }; const cur = found ? Math.round(found.batches.reduce((s,b)=>s+b.qty,0)*10)/10 : 0; const status = found ? H.statusOf(found) : null; /* ── determine which video element to show ── */ const useNative = 'BarcodeDetector' in window; return (
{/* ── IDLE ── */} {phase === 'idle' && (

Scan a Barcode

Point your camera at a product barcode to look it up instantly

or enter manually
setManualCode(e.target.value)} onKeyDown={e=>e.key==='Enter' && manualCode.trim() && handleCode(manualCode.trim())} style={{flex:1}}/>
)} {/* ── SCANNING ── */} {phase === 'scanning' && (
{/* Native BarcodeDetector: our video element */} {useNative && (
); } window.ScanScreen = ScanScreen;