{accent &&

}

{label}

{valor}

{delta && ( {delta} )} {sub && {sub}}

); } // ─── HOME ─────────────────────────────────────────────────── function Home({ pedidos, perfil, onAbrir, onIrPara }) { // Período pra KPIs de faturamento — hoje, mês atual, mês passado, 3 meses, ano, todos const [periodo, setPeriodo] = useState('mes_atual'); const periodos = [ { id:'hoje', lbl:'Hoje' }, { id:'7dias', lbl:'Últimos 7 dias' }, { id:'mes_atual', lbl:'Mês atual' }, { id:'mes_anterior', lbl:'Mês anterior' }, { id:'3meses', lbl:'Últimos 3 meses' }, { id:'ano', lbl:'Ano atual' }, { id:'todos', lbl:'Todos' }, ]; // Helper — calcula o range do período em referência a uma data ancora. // ancora=Date hoje → "mes_atual" cobre o mês corrente. Pra comparativo, // usamos a mesma função com ancora deslocada pro período anterior. const rangeDoPeriodo = (id, ancora) => { const d = new Date(ancora); let inicio, fim; if (id === 'hoje') { inicio = new Date(d.getFullYear(), d.getMonth(), d.getDate()); fim = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1); } else if (id === '7dias') { fim = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1); inicio = new Date(d.getFullYear(), d.getMonth(), d.getDate() - 6); } else if (id === 'mes_atual') { inicio = new Date(d.getFullYear(), d.getMonth(), 1); fim = new Date(d.getFullYear(), d.getMonth() + 1, 1); } else if (id === 'mes_anterior') { inicio = new Date(d.getFullYear(), d.getMonth() - 1, 1); fim = new Date(d.getFullYear(), d.getMonth(), 1); } else if (id === '3meses') { inicio = new Date(d.getFullYear(), d.getMonth() - 2, 1); fim = new Date(d.getFullYear(), d.getMonth() + 1, 1); } else if (id === 'ano') { inicio = new Date(d.getFullYear(), 0, 1); fim = new Date(d.getFullYear() + 1, 0, 1); } else { // 'todos' inicio = new Date(0); fim = new Date(d.getFullYear() + 100, 0, 1); } return [inicio, fim]; }; // Período anterior equivalente (pra comparação) const ancoraAnterior = (id, hoje) => { const d = new Date(hoje); if (id === 'hoje') return new Date(d.getFullYear(), d.getMonth(), d.getDate() - 1); if (id === '7dias') return new Date(d.getFullYear(), d.getMonth(), d.getDate() - 7); if (id === 'mes_atual') return new Date(d.getFullYear(), d.getMonth() - 1, d.getDate()); if (id === 'mes_anterior') return new Date(d.getFullYear(), d.getMonth() - 2, d.getDate()); if (id === '3meses') return new Date(d.getFullYear(), d.getMonth() - 3, d.getDate()); if (id === 'ano') return new Date(d.getFullYear() - 1, d.getMonth(), d.getDate()); return null; // 'todos' não tem comparativo }; const idAnteriorPara = (id) => { if (id === 'mes_anterior') return 'mes_atual'; // anterior do "mês anterior" = "mês retrasado" → calcula como "mes_atual" ancorado 1 mês antes return id; // mesmo período, anchor deslocada }; const dentroRange = (dataStr, [ini, fim]) => { const t = new Date(dataStr).getTime(); return t >= ini.getTime() && t < fim.getTime(); }; const hojeRef = new Date(); const [iniAtual, fimAtual] = rangeDoPeriodo(periodo, hojeRef); const pedidosAtual = pedidos.filter(p => dentroRange(p.data, [iniAtual, fimAtual])); const ancAnt = ancoraAnterior(periodo, hojeRef); const pedidosAnterior = ancAnt ? pedidos.filter(p => dentroRange(p.data, rangeDoPeriodo(idAnteriorPara(periodo), ancAnt))) : []; const fatTotal = pedidosAtual.reduce((s, p) => s + calcTotalPago(p), 0); const lucroTotal = pedidosAtual.reduce((s, p) => s + calcLucro(p), 0); const fatAnterior = pedidosAnterior.reduce((s, p) => s + calcTotalPago(p), 0); const lucroAnterior = pedidosAnterior.reduce((s, p) => s + calcLucro(p), 0); const margem = fatTotal > 0 ? (lucroTotal / fatTotal) * 100 : 0; // Delta % vs período anterior. Retorna string "+12.3%" / "-5.0%" / null se sem base. const calcDelta = (atual, ant) => { if (!ant || ant === 0) return null; const pct = ((atual - ant) / Math.abs(ant)) * 100; if (Math.abs(pct) < 0.1) return '0%'; return (pct > 0 ? '+' : '') + pct.toFixed(1) + '%'; }; const deltaFat = calcDelta(fatTotal, fatAnterior); const deltaLucro = calcDelta(lucroTotal, lucroAnterior); const labelComparativo = { 'hoje': 'vs. ontem', '7dias': 'vs. 7 dias anteriores', 'mes_atual': 'vs. mês anterior', 'mes_anterior': 'vs. mês retrasado', '3meses': 'vs. 3 meses anteriores', 'ano': 'vs. ano anterior', 'todos': '', }[periodo] || ''; const labelPeriodo = (periodos.find(p => p.id === periodo) || {}).lbl || ''; // Sempre referente ao "agora" (não filtra por período): operações ativas const fila = pedidos.filter(p => ['Fila','Fatiando','Imprimindo','Pos-processamento'].includes(p.statusImpressao)); const aDespachar = pedidos.filter(p => p.statusImpressao === 'Pronto' && p.statusEntrega === 'Pendente'); const falhas = pedidos.filter(p => p.statusImpressao === 'Falhou'); const hojeStr = new Date().toISOString().slice(0,10); const hoje = pedidos.filter(p => p.data === hojeStr); const alertas = [ ...falhas.map(p => ({ tipo:'erro', msg:`Reimprimir ${p.id}`, sub: p.produto })), ...pedidos.filter(p => p.statusPagamento === 'Aguardando').map(p => ({ tipo:'aviso', msg:`Pagamento pendente · ${p.id}`, sub: p.cliente })), ]; return (

{new Date().toLocaleDateString('pt-BR', { weekday:'long', day:'numeric', month:'long' })}

Olá, {perfil.nome} 👋

Faturamento · {labelPeriodo}

{periodos.map(p => { const ativo = periodo === p.id; return ( ); })}

O que você quer fazer?

{[ { lbl:'Novo pedido', sub:'em 4 toques', icon:'plus', cor:'var(--primary)', acao:'novo' }, { lbl:'Fila de impressão', sub:`${fila.length} ativos`, icon:'printer', cor:'var(--accent)', acao:'fila' }, { lbl:'Despachar', sub:`${aDespachar.length} prontos`, icon:'truck', cor:'#9b6cff', acao:'envios' }, { lbl:'Ver pedidos', sub:`${pedidos.length} total`, icon:'list', cor:'#ffb300', acao:'pedidos' }, ].map(a => { const I = Icon[a.icon]; return ( ); })}

Precisa atenção

{alertas.length === 0 &&
Tudo em dia ✨
} {alertas.map((a, i) => (

{a.msg}

{a.sub}

))}

Últimos pedidos

{pedidos.slice(0, 5).map(p => ( ))}

); } Object.assign(window, { Sidebar, Topbar, KPI, Home });