// ═══ GENESIS BUILD gangway-fila-slim · 2026-07-11 ═══ // Tidal — Gangway · QR scan + câmera + API real const LEITOS_GENESIS = 90; // leitos/cabines disponíveis a bordo (referência; POB pode ser maior com visitantes/terceirizados sem cabine) const loadQRLib = () => new Promise(resolve => { if (window._qrgen) { resolve(true); return; } const s = document.createElement('script'); s.src = 'vendor/qrcode.js'; s.onload = () => { window._qrgen = window.qrcode; resolve(true); }; s.onerror = () => resolve(false); document.head.appendChild(s); }); const QRImg = ({url, size=160}) => { const [src, setSrc] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { loadQRLib().then(ok => { setLoading(false); if (ok && window._qrgen) { try { const qr = window._qrgen(0, 'M'); qr.addData(url); qr.make(); const canvas = document.createElement('canvas'); const n = qr.getModuleCount(); const cell = Math.floor(size / n); canvas.width = n * cell; canvas.height = n * cell; const ctx = canvas.getContext('2d'); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#000000'; for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (qr.isDark(r, c)) ctx.fillRect(c*cell, r*cell, cell, cell); setSrc(canvas.toDataURL('image/png')); } catch(e) { setSrc(null); } } }); }, [url]); if (loading) return
gerando QR…
; if (!src) return
{url}
; return QR Code; }; // ─── CrachaModal — mostra o crachá da pessoa (módulo novo, cracha.jsx) ─── const getCrachaQRHost = () => { try { const cfg = JSON.parse(localStorage.getItem('genesis_cracha_qr') || '{}'); if (cfg.host && String(cfg.host).trim()) return String(cfg.host).trim(); } catch(e) {} return window.location.host; }; const CrachaModal = ({user, onClose}) => { const [img, setImg] = useState(null); const [fail, setFail] = useState(false); useEffect(() => { let alive = true; (async () => { try { if (!window.renderCardCanvas) throw new Error('módulo de crachá não carregado'); const canvas = await window.renderCardCanvas(user); if (alive) setImg(canvas.toDataURL('image/png')); } catch(e) { if (alive) setFail(true); } })(); return () => { alive = false; }; }, [user]); const qrUrl = `${window.location.protocol}//${getCrachaQRHost()}/gangway-scan.html?scan=${user.genesis_id}`; return (
e.stopPropagation()} style={{background:'var(--cream)',borderRadius:20,padding:'18px 20px',maxWidth:340,width:'100%',textAlign:'center',boxShadow:'var(--shadow-lg)',border:'1px solid var(--line-soft)'}}>
Crachá · {user.genesis_id}
{img ? ( {`Crachá ) : fail ? (
{user.genesis_id}
) : (
gerando crachá…
)}
{user.nome}
{user.empresa||''}{user.funcao?` · ${user.funcao}`:''}
); }; const CameraScanner = ({onDetected, onClose}) => { const videoRef = useRef(null); const streamRef = useRef(null); const rafRef = useRef(null); const [error, setError] = useState(null); const [retrying, setRetrying] = useState(false); const startCamera = async () => { setError(null); setRetrying(false); const loadJsQR = () => new Promise(resolve => { if (window.jsQR) { resolve(true); return; } const s = document.createElement('script'); s.src = 'https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js'; s.onload = () => resolve(true); s.onerror = () => resolve(false); document.head.appendChild(s); }); const ok = await loadJsQR(); if (!ok) { setError('lib'); return; } try { const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode:'environment', width:{ideal:1280}, height:{ideal:720} } }); streamRef.current = stream; if (videoRef.current) { videoRef.current.srcObject = stream; videoRef.current.play(); } const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const tick = () => { if (!videoRef.current) return; if (videoRef.current.readyState === videoRef.current.HAVE_ENOUGH_DATA) { canvas.width = videoRef.current.videoWidth; canvas.height = videoRef.current.videoHeight; ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height); const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); const code = window.jsQR(imgData.data, imgData.width, imgData.height, {inversionAttempts:'dontInvert'}); if (code?.data) { stopStream(); onDetected(code.data); return; } } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); } catch(e) { const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent); setError(isIOS ? 'ios' : 'android'); } }; useEffect(() => { startCamera(); return () => stopStream(); }, []); const stopStream = () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); if (streamRef.current) streamRef.current.getTracks().forEach(t => t.stop()); streamRef.current = null; }; const handleRetry = () => { setRetrying(true); stopStream(); setTimeout(() => startCamera(), 300); }; const steps = { ios: [ { emoji:'⚙️', text:'Abra o app Ajustes do iPhone' }, { emoji:'⬇️', text:'Role até encontrar "Safari"' }, { emoji:'📷', text:'Toque em Câmera' }, { emoji:'✅', text:'Selecione "Permitir"' }, ], android: [ { emoji:'⚙️', text:'Abra Configurações do celular' }, { emoji:'📱', text:'Toque em Apps → Chrome' }, { emoji:'🔑', text:'Toque em Permissões → Câmera' }, { emoji:'✅', text:'Selecione "Permitir"' }, ], lib: [ { emoji:'📡', text:'Sem conexão para carregar biblioteca' }, { emoji:'🔄', text:'Verifique o Wi-Fi e tente novamente' }, ], }; return (
{/* Header */}
Leitura de QR Code
{error ? (
📷
Câmera bloqueada
siga os passos abaixo e tente novamente
{/* Passo a passo visual */}
{error==='ios' ? '📱 iPhone / iPad' : error==='android' ? '🤖 Android' : '⚠️ Erro'}
{(steps[error]||[]).map((step, i) => (
{step.emoji}
{step.text}
))}
{/* Botão tentar novamente — destaque */}
ou feche e use a aba Busca manual
) : ( <>