const { useState, useEffect } = React; // ─── Mobile Activity Row ────────────────────────────────────────────────────── function ActivityRow({ act, onUpdate }) { const [realPct, setRealPct] = useState(act.planned - 8); const [qty, setQty] = useState(0); const [hh, setHH] = useState(0); const deviation = realPct - act.planned; const devColor = deviation >= 0 ? C.success : deviation > -10 ? C.warning : C.danger; return (
{act.wbs}
{act.desc}
Plano: {act.planned}%
{realPct}%
{/* Progress bar */}
{/* Controls */}
% REAL
setRealPct(Number(e.target.value))} style={{ width:'100%', padding:'6px 8px', border:`1px solid ${devColor}66`, borderRadius:5, fontSize:13, fontWeight:700, fontFamily:'inherit', textAlign:'center', boxSizing:'border-box', color:devColor }} />
QTD ({act.unit})
setQty(Number(e.target.value))} style={{ width:'100%', padding:'6px 8px', border:`1px solid ${C.border}`, borderRadius:5, fontSize:13, fontFamily:'inherit', textAlign:'center', boxSizing:'border-box' }} />
HH (hrs)
setHH(Number(e.target.value))} style={{ width:'100%', padding:'6px 8px', border:`1px solid ${C.border}`, borderRadius:5, fontSize:13, fontFamily:'inherit', textAlign:'center', boxSizing:'border-box' }} />
{deviation < -10 && (
⚠ Desvio de {Math.abs(deviation.toFixed(0))}pp abaixo do plano — justificativa requerida ao salvar
)}
); } // ─── Occurrence buttons ─────────────────────────────────────────────────────── function OccurrenceSection() { const [selected, setSelected] = useState(null); const [text, setText] = useState(''); const types = [ { id:'rain', label:'🌧 Chuva', color:'#3B82F6' }, { id:'stop', label:'🛑 Paralisação', color:C.danger }, { id:'accident',label:'⛑ Acidente', color:'#F97316' }, { id:'ncq', label:'❌ NCQ', color:C.warning }, { id:'env', label:'🌿 Ambiental', color:C.success }, ]; return (
Registro de Ocorrência
{types.map(t => ( ))}
{selected && ( <>