Controle de Equipamentos

{/* Banner de calibragem */}

{cs === 'expired' ? '🔴' : cs === 'near' ? '🟡' : '🟢'}

Calibragem {ci.label}

{cs === 'expired' ? `Vencida há ${Math.abs(days)} dia(s) — venç. em ${fmtDate(eq.nextCalibration)}` : cs === 'near' ? `Vence em ${days} dia(s) — ${fmtDate(eq.nextCalibration)}` : `Próxima calibragem: ${fmtDate(eq.nextCalibration)}`}

{/* Card principal */}

{eq.name}

Nº de Série: {eq.serialNumber}

{cs === 'expired' ? '⚠ VENCIDA' : '⚡ PRÓXIMA'} )} />

🔧 Status {si.label}

{eq.observations ? (

📝 Observações

{eq.observations}

) :

}

{/* Seção QR Code */}

QR Code do Equipamento

Aponte a câmera para acessar a ficha

{showQR && ( )}

{showQR && (

URL codificada no QR:

{qrUrl}

💡 Dica: para QR funcionar em outros dispositivos, hospede o arquivo em um servidor web

)}

{/* Botão editar (admin) */} {user.role === 'admin' && ( )}

); } // ═══════════════════════════════════════════════════════════════ // COMPONENTE: FORMULÁRIO (Cadastro / Edição) // ═══════════════════════════════════════════════════════════════ function EqForm({ eq, onSave, onCancel, onDelete }) { const isNew = !eq; const [form, setForm] = useState(() => eq ? { ...eq } : { name: '', serialNumber: '', location: '', lastCalibration: '', nextCalibration: '', responsible: '', status: 'active', observations: '' }); const [errs, setErrs] = useState({}); const [delConfirm, setDelConfirm] = useState(false); const set = useCallback((k, v) => setForm(f => ({ ...f, [k]: v })), []); const validate = () => { const e = {}; if (!form.name.trim()) e.name = 'Nome é obrigatório'; if (!form.serialNumber.trim()) e.serialNumber = 'Número de série é obrigatório'; if (!form.location.trim()) e.location = 'Localização é obrigatória'; setErrs(e); return !Object.keys(e).length; }; const handleSubmit = (e) => { e.preventDefault(); if (!validate()) return; onSave({ ...form, id: form.id || genId() }); }; const calPreview = getCalStatus(form.nextCalibration); const calDays = daysUntil(form.nextCalibration); const Field = ({ label, name, type = 'text', req, placeholder }) => (

{label}{req && *} set(name, e.target.value)} placeholder={placeholder} className={`w-full border-2 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-colors ${errs[name] ? 'border-red-400 bg-red-50' : 'border-slate-200'}`} /> {errs[name] &&

{errs[name]}

}

); return (

{/* Informações */}

📋 Informações do Equipamento

Status

{/* Calibragem */}

📅 Calibragem

{form.nextCalibration && (

{calPreview === 'expired' ? '🔴' : calPreview === 'near' ? '🟡' : '🟢'}

{calPreview === 'expired' ? `Vencida há ${Math.abs(calDays)} dia(s)` : calPreview === 'near' ? `Vence em ${calDays} dia(s)` : `Em dia — vence em ${calDays} dia(s)`}

)}

{/* Observações */}

📝 Observações

set('observations', e.target.value)}
            rows={3}
            placeholder="Notas sobre o equipamento, histórico de manutenção, etc."
            className="w-full border-2 border-slate-200 rounded-2xl px-4 py-3 text-sm focus:outline-none focus:border-blue-500 transition-colors resize-none"
          />
        </div>

{/* Botões */}
        <div className="flex gap-3">
          <button type="button" onClick={onCancel}
            className="flex-1 border-2 border-slate-200 text-slate-700 font-bold py-4 rounded-2xl hover:bg-slate-50 transition-colors scale-press text-base">
            Cancelar
          </button>
          <button type="submit"
            className="flex-1 bg-blue-700 hover:bg-blue-800 text-white font-black py-4 rounded-2xl transition-colors shadow-lg shadow-blue-700/30 scale-press text-base">
            {isNew ? '+ Cadastrar' : '💾 Salvar'}
          </button>
        </div>

{/* Delete (admin, edit only) */}
        {!isNew && !delConfirm && (
          <button type="button" onClick={() => setDelConfirm(true)}
            className="w-full text-red-500 hover:text-red-700 font-semibold text-sm py-3 transition-colors">
            🗑 Excluir Equipamento
          </button>
        )}
        {!isNew && delConfirm && (
          <div className="bg-red-50 border-2 border-red-200 rounded-2xl p-5 anim-in">
            <p className="font-black text-red-800 text-base mb-1">⚠ Confirmar exclusão?</p>
            <p className="text-red-600 text-sm mb-4">Esta ação não pode ser desfeita. O equipamento será removido permanentemente.</p>
            <div className="flex gap-3">
              <button type="button" onClick={() => setDelConfirm(false)}
                className="flex-1 border-2 border-slate-200 text-slate-700 font-bold py-3 rounded-2xl scale-press">
                Cancelar
              </button>
              <button type="button" onClick={() => onDelete(form.id)}
                className="flex-1 bg-red-600 hover:bg-red-700 text-white font-black py-3 rounded-2xl transition-colors scale-press">
                Confirmar Exclusão
              </button>
            </div>
          </div>
        )}
      </form>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
//  COMPONENTE: QR SCANNER (câmera)
// ═══════════════════════════════════════════════════════════════
function QRScanner({ onScan, onClose }) {
  const videoRef  = useRef(null);
  const canvasRef = useRef(null);
  const [camErr,  setCamErr]  = useState(null);
  const [found,   setFound]   = useState(false);
  const streamRef = useRef(null);
  const rafRef    = useRef(null);

useEffect(() => {
    let active = true;

navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
      .then(stream => {
        if (!active) { stream.getTracks().forEach(t => t.stop()); return; }
        streamRef.current = stream;
        videoRef.current.srcObject = stream;
        videoRef.current.play().then(() => { rafRef.current = requestAnimationFrame(scan); });
      })
      .catch(() => setCamErr('Permissão de câmera negada ou câmera indisponível'));

return () => {
      active = false;
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      if (streamRef.current) streamRef.current.getTracks().forEach(t => t.stop());
    };
  }, []);

return (
    <div className="fixed inset-0 z-50 bg-black flex flex-col anim-in">
      {/* Header */}
      <div className="bg-slate-900 flex items-center gap-3 px-4 h-14 flex-shrink-0">
        <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors p-1 -ml-1 rounded-xl">
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M15 19l-7-7 7-7"/>
          </svg>
        </button>
        <h2 className="flex-1 text-white font-semibold text-sm">Escanear QR do Equipamento</h2>
      </div>

{/* Câmera */}
      <div className="flex-1 relative overflow-hidden bg-black flex items-center justify-center">
        {camErr ? (
          <div className="text-center px-8">
            <div className="text-5xl mb-4">📷</div>
            <p className="text-white font-semibold mb-2">Câmera indisponível</p>
            <p className="text-slate-400 text-sm">{camErr}</p>
            <button onClick={onClose}
              className="mt-6 bg-blue-700 text-white font-bold px-6 py-3 rounded-2xl text-sm">
              Voltar
            </button>
          </div>
        ) : (
          <>
            <video ref={videoRef} className="absolute inset-0 w-full h-full object-cover" playsInline muted />
            <canvas ref={canvasRef} className="hidden" />

{/* Overlay escuro com janela central */}
            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
              <div className="relative w-64 h-64">
                {/* Sombra ao redor */}
                <div className="absolute -inset-screen" style={{boxShadow:'0 0 0 9999px rgba(0,0,0,0.55)'}} />
                {/* Bordas do viewfinder */}
                <div className="absolute inset-0 rounded-2xl border-2 border-white/30" />
                <div className="absolute top-0 left-0 w-10 h-10 border-t-4 border-l-4 border-blue-400 rounded-tl-2xl" />
                <div className="absolute top-0 right-0 w-10 h-10 border-t-4 border-r-4 border-blue-400 rounded-tr-2xl" />
                <div className="absolute bottom-0 left-0 w-10 h-10 border-b-4 border-l-4 border-blue-400 rounded-bl-2xl" />
                <div className="absolute bottom-0 right-0 w-10 h-10 border-b-4 border-r-4 border-blue-400 rounded-br-2xl" />
                {/* Linha de scan animada */}
                {!found && (
                  <div className="absolute left-2 right-2 h-0.5 bg-blue-400 opacity-80"
                    style={{animation:'scanLine 2s linear infinite', top:'50%'}} />
                )}
                {found && (
                  <div className="absolute inset-0 flex items-center justify-center rounded-2xl bg-emerald-500/20 border-2 border-emerald-400">
                    <span className="text-4xl">✅</span>
                  </div>
                )}
              </div>
            </div>
          </>
        )}
      </div>

{/* Rodapé */}
      <div className="bg-slate-900 px-4 py-4 text-center flex-shrink-0">
        <p className="text-slate-400 text-sm">
          {found ? 'QR detectado! Abrindo equipamento…' : 'Aponte a câmera para o QR code do equipamento'}
        </p>
      </div>

// ═══════════════════════════════════════════════════════════════
//  APP PRINCIPAL
// ═══════════════════════════════════════════════════════════════
function App() {
  // Sessão persistida
  const [user, setUser] = useState(() => {
    try { const s = sessionStorage.getItem('uti_eq_sess'); return s ? JSON.parse(s) : null; }
    catch { return null; }
  });

const [equipments,   setEquipments]   = useState([]);
  const [loading,      setLoading]      = useState(true);
  const [showScanner,  setShowScanner]  = useState(false);
  const [view,         setView]         = useState('list');   // 'list' | 'detail' | 'form'
  const [selected,   setSelected]   = useState(null);
  const [editing,    setEditing]    = useState(null);
  const [toast,      setToast]      = useState(null);

// QR code via URL param
  const pendingId = useMemo(() => new URLSearchParams(window.location.search).get('equipment'), []);

// ─── Firestore real-time subscription ───────────────────────
  useEffect(() => {
    let seeded = false;
    const unsub = db.collection('equipamentos').onSnapshot(snap => {
      const docs = snap.docs.map(d => ({ id: d.id, ...d.data() }));
      if (docs.length === 0 && !seeded) {
        // Primeiro acesso: semeia os dados iniciais
        seeded = true;
        const batch = db.batch();
        EQUIPAMENTOS_INICIAIS.forEach(eq => {
          batch.set(db.collection('equipamentos').doc(eq.id), eq);
        });
        batch.commit().catch(err => {
          console.error('Seed error:', err);
          setEquipments(EQUIPAMENTOS_INICIAIS);
          setLoading(false);
        });
      } else if (docs.length > 0) {
        setEquipments(docs);
        setLoading(false);
      }
    }, err => {
      console.error('Firestore error:', err);
      // Fallback para dados locais em caso de erro
      setEquipments(EQUIPAMENTOS_INICIAIS);
      setLoading(false);
    });
    return () => unsub();
  }, []);

useEffect(() => {
    if (user && pendingId && !loading) {
      const eq = equipments.find(e => e.id === pendingId);
      if (eq) { setSelected(eq); setView('detail'); }
    }
  }, [user, loading]);

const showToast = (msg, type = 'success') => setToast({ msg, type, key: Date.now() });

const login = (u) => {
    setUser(u);
    try { sessionStorage.setItem('uti_eq_sess', JSON.stringify(u)); } catch {}
  };

const select  = (eq) => { setSelected(eq); setView('detail'); };
  const editEq  = (eq) => { setEditing(eq);  setView('form');   };
  const addEq   = ()   => { setEditing(null); setView('form');  };

const back = () => {
    if (view === 'detail') { setView('list'); }
    else if (view === 'form') { setView(editing ? 'detail' : 'list'); }
  };

if (!user) return <LoginScreen onLogin={login} />;

if (loading) return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-950 to-blue-900 flex items-center justify-center">
      <div className="text-center">
        <div className="text-6xl mb-4" style={{animation:'pulse 1.5s ease-in-out infinite'}}>🏥</div>
        <p className="text-white font-bold text-lg">Carregando equipamentos…</p>
        <p className="text-blue-400 text-sm mt-1">Conectando ao banco de dados</p>
      </div>
    </div>
  );

const TITLES = {
    list:   'Controle de Equipamentos — UTI',
    detail: selected?.name || 'Detalhes do Equipamento',
    form:   editing ? 'Editar Equipamento' : 'Novo Equipamento',
  };

return (
    <div className="min-h-screen bg-slate-50">
      <Header
        user={user}
        onLogout={logout}
        onBack={view !== 'list' ? back : null}
        title={TITLES[view]}
        onScan={view === 'list' ? () => setShowScanner(true) : null}
      />

<main>
        {view === 'list'   && <EqList equipments={equipments} onSelect={select} onAdd={addEq} user={user} />}
        {view === 'detail' && selected && <EqDetail eq={selected} onEdit={editEq} user={user} />}
        {view === 'form'   && <EqForm eq={editing} onSave={save} onCancel={back} onDelete={del} />}
      </main>

{toast && (
        <Toast key={toast.key} msg={toast.msg} type={toast.type} onDone={() => setToast(null)} />
      )}

{showScanner && (
        <QRScanner onScan={handleQRScan} onClose={() => setShowScanner(false)} />
      )}
    </div>
  );
}

// Render
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>