// AgroDash Demo — rebuilt to match actual AgroDash mobile screenshots const AgroDash = () => { const [screen, setScreen] = React.useState('login'); const [activeTab, setActiveTab] = React.useState('visao'); const s = { root: { width:'100%', height:'100%', fontFamily:'Inter,sans-serif', background:'#1a2332', display:'flex', alignItems:'center', justifyContent:'center', overflow:'hidden' }, phone: { width:375, height:'100%', maxHeight:720, background:'#1E2B3C', display:'flex', flexDirection:'column', overflow:'hidden', position:'relative' }, // LOGIN loginBg: { flex:1, background:'linear-gradient(180deg,#1a2b1a 0%,#1a2332 60%,#0f1a2a 100%)', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'0 32px 40px', gap:0 }, logoArea: { display:'flex', flexDirection:'column', alignItems:'center', marginBottom:40 }, logoIcon: { width:72, height:72, borderRadius:18, background:'#2a3a2a', border:'2px solid #3a4a3a', display:'flex', alignItems:'center', justifyContent:'center', marginBottom:12, fontSize:36 }, logoText: { fontSize:32, fontWeight:900, letterSpacing:1, color:'#fff' }, logoGreen: { color:'#7EC820' }, loginCard: { background:'rgba(255,255,255,0.06)', backdropFilter:'blur(10px)', border:'1px solid rgba(255,255,255,0.1)', borderRadius:20, padding:'28px 24px', width:'100%' }, loginTitle: { fontSize:20, fontWeight:800, color:'#fff', marginBottom:6 }, loginSub: { fontSize:12, color:'rgba(255,255,255,0.5)', marginBottom:24, lineHeight:1.5 }, inputLabel: { fontSize:12, fontWeight:600, color:'rgba(255,255,255,0.7)', marginBottom:6, display:'block' }, inputRow: { background:'rgba(255,255,255,0.08)', border:'1.5px solid rgba(126,200,32,0.4)', borderRadius:10, padding:'13px 16px', display:'flex', alignItems:'center', gap:10, marginBottom:20 }, inputField: { flex:1, background:'transparent', border:'none', outline:'none', color:'#fff', fontSize:14, fontFamily:'Inter,sans-serif' }, loginBtn: { width:'100%', padding:'15px', background:'#7EC820', border:'none', borderRadius:12, color:'#fff', fontWeight:700, fontSize:15, cursor:'pointer', fontFamily:'Inter,sans-serif', display:'flex', alignItems:'center', justifyContent:'center', gap:8 }, // APP CHROME statusBar: { height:28, background:'#1E2B3C', display:'flex', alignItems:'center', padding:'0 16px', justifyContent:'space-between', flexShrink:0 }, statusTime: { fontSize:11, fontWeight:600, color:'#fff' }, statusRight: { display:'flex', gap:4, alignItems:'center', fontSize:10, color:'#fff' }, // HEADER appHeader: { background:'#1E2B3C', padding:'10px 16px 12px', display:'flex', alignItems:'center', justifyContent:'space-between', flexShrink:0 }, menuBtn: { fontSize:18, color:'#7EC820', cursor:'pointer', width:30, height:30, display:'flex', alignItems:'center', justifyContent:'center' }, appTitle: { fontSize:18, fontWeight:800, color:'#fff' }, safraChip: { background:'rgba(126,200,32,0.15)', border:'1px solid #7EC820', borderRadius:8, padding:'5px 12px', fontSize:11, color:'#7EC820', fontWeight:600, display:'flex', alignItems:'center', gap:4, cursor:'pointer' }, // INDICATORS body: { flex:1, overflowY:'auto', padding:'0 12px 20px', background:'#1E2B3C' }, weatherCard: { background:'linear-gradient(135deg,#1a3a5c,#1a4a7c)', borderRadius:16, padding:'16px', marginBottom:12 }, weatherMain: { display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12 }, tempText: { fontSize:52, fontWeight:900, color:'#fff', lineHeight:1 }, weatherInfo: { textAlign:'right' }, weatherStatus: { fontSize:14, fontWeight:700, color:'#fff', marginBottom:4 }, cityChip: { background:'rgba(255,255,255,0.15)', borderRadius:6, padding:'4px 10px', fontSize:11, color:'#fff', display:'inline-flex', alignItems:'center', gap:4, cursor:'pointer' }, weatherDetail: { fontSize:11, color:'rgba(255,255,255,0.7)', marginBottom:2 }, weatherRain: { fontSize:11, color:'#7EC820', fontWeight:600 }, forecast: { display:'flex', justifyContent:'space-between', borderTop:'1px solid rgba(255,255,255,0.1)', paddingTop:12 }, forecastDay: { display:'flex', flexDirection:'column', alignItems:'center', gap:3 }, forecastLabel: { fontSize:9, color:'rgba(255,255,255,0.5)', fontWeight:600 }, forecastIcon: { fontSize:16 }, forecastTemps: { fontSize:9, color:'rgba(255,255,255,0.7)' }, attribution: { fontSize:8, color:'rgba(255,255,255,0.3)', textAlign:'right', marginTop:6 }, grid2: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:12 }, commodityCard: { background:'#243040', borderRadius:12, padding:'14px' }, commLabel: { fontSize:10, color:'rgba(255,255,255,0.5)', marginBottom:6 }, commVal: { fontSize:22, fontWeight:900, color:'#fff', marginBottom:2 }, commUnit: { fontSize:9, color:'rgba(255,255,255,0.4)' }, commTrend: (up) => ({ fontSize:14, color: up?'#7EC820':'#FF5072' }), // PLANTIO plantioSection: { marginBottom:12 }, plantioCard: { background:'#243040', borderRadius:14, padding:'14px', marginBottom:10 }, plantioHeader: { display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }, plantioTitle: { fontSize:11, fontWeight:600, color:'rgba(255,255,255,0.5)', textTransform:'uppercase', letterSpacing:1 }, plantioProgress: { fontSize:28, fontWeight:900, color:'#7EC820' }, miniBar: { width:40, height:32, display:'flex', alignItems:'flex-end', gap:2 }, miniBarEl: (h,c) => ({ width:10, height:`${h}%`, background:c, borderRadius:2 }), plantioRows: { display:'flex', flexDirection:'column', gap:5 }, plantioRow: { display:'flex', alignItems:'center', gap:8 }, plantioRowDot: (c) => ({ width:7, height:7, borderRadius:'50%', background:c, flexShrink:0 }), plantioRowLabel: { fontSize:11, color:'rgba(255,255,255,0.6)', flex:1 }, plantioRowVal: { fontSize:11, fontWeight:700, color:'#fff', fontVariantNumeric:'tabular-nums' }, miniGrid: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:12 }, miniCard: { background:'#243040', borderRadius:12, padding:'12px' }, miniLabel: { fontSize:9, color:'rgba(255,255,255,0.4)', marginBottom:4, display:'flex', alignItems:'center', gap:4 }, miniVal: { fontSize:22, fontWeight:900, color:'#fff' }, miniUnit: { fontSize:9, color:'rgba(255,255,255,0.4)', marginTop:1 }, // BOTTOM NAV bottomNav: { height:56, background:'#192232', borderTop:'1px solid rgba(255,255,255,0.06)', display:'flex', alignItems:'center', justifyContent:'space-around', flexShrink:0 }, navItem: (active) => ({ display:'flex', flexDirection:'column', alignItems:'center', gap:3, cursor:'pointer', opacity: active?1:0.4 }), navIcon: (active) => ({ fontSize:18, color: active?'#7EC820':'#fff' }), navLabel: (active) => ({ fontSize:9, fontWeight:600, color: active?'#7EC820':'#fff' }), }; const forecast = [['SEG','☁','37°','26°'],['TER','☁','37°','22°'],['QUA','☁','38°','24°'],['QUI','🌤','35°','26°'],['SEX','☁','25°','26°'],['SAB','🌤','25°','26°']]; const commodities = [['DÓLAR','R$ 5,359',true],['EURO','R$ 6,195',false],['SOJA','R$ 118,51',true],['ALGODÃO','R$ 105,94',true],['MILHO','R$ 118,51',true],['BOI GORDO','R$ 105,94',true]]; return (
{screen==='login' && (
🌱
AgroDASH
Bem-vindo
Insira seu e-mail para receber o código de acesso
✉
)} {(screen==='indicators'||screen==='plantio') && ( <>
9:41 AM
●●●●●WiFi100%
setScreen('login')}>☰
{screen==='indicators'?'Indicadores':'Plantio'}
Safra 2025/2026 ▾
{screen==='indicators' && ( <> {/* Weather */}
29°
Céu limpo
Cuiabá-MT ▾
Segunda-feira  Alta: 29° Baixa: 29°
Chuva: 0 mm
{forecast.map(([d,ic,h,l])=>(
{d} {ic} {h} {l}
))}
Atualizado em 10/11/25 · 9:51 · Climatempo
{/* Commodities */}
{commodities.map(([label,val,up])=>(
{label}
{val}
{up?'↗':'↘'}
{(label==='SOJA'||label==='ALGODÃO'||label==='MILHO'||label==='BOI GORDO')&&
Reais por saca
}
))}
Atualizado em 07/11/25 · IMEA
)} {screen==='plantio' && ( <>
Soja Comercial · Safra ▾
Última sincronização em 01/12/26 08:20
{[['ÁREA DE PLANTIO',true],['IRRIGADO',false],['SEQUEIRO',false]].map(([title,main])=>(
{title}
{[[70,'#7EC820'],[85,'#4CAF50'],[60,'#8BC34A'],[40,'rgba(255,255,255,0.2)']].map(([h,c],i)=>(
))}
76%
plantado
{[['#7EC820','51.860 ha','PLANEJADO'],['#4CAF50','45.859 ha','PLANTADO'],['#8BC34A','45.859 ha','À PLANTAR'],['rgba(255,100,100,0.7)','1.341 ha','REPLANTIO']].map(([c,v,l])=>(
{v}
{l}
))}
{main&&
Início em 25/09/2024
}
))}
{[['⏱ DIAS EFETIVOS','80','Dias trabalhados'],['⏱ HORAS','9,8','Horas/dia'],['🔄 RITMO','80','Dias trabalhados'],['📊 RENDIMENTO','9,8','Horas/dia']].map(([label,v,u])=>(
{label}
{v}
{u}
))}
)}
{[['⊞','Visão Geral','visao','indicators'],['◎','Unidades','unidades',null],['⚡','Tecnologias','tec','plantio']].map(([icon,label,id,target])=>(
target&&setScreen(target)}> {icon} {label}
))}
)}
); }; Object.assign(window, { AgroDash });