{FASES.filter(f => tarefas.some(t => t.fase===f.id &&
t.data_prevista && t.data_prevista.slice(0,7)===mes)).map(f => (
))}
}
>
{['dom','seg','ter','qua','qui','sex','sáb'].map(d => (
{d}
))}
{celulas.map((iso, i) => {
if (!iso) return
;
const lista = porDia[iso] || [];
const fer = feriadoDe(iso);
const ate = atencaoDe(iso);
const ehD0 = iso === d0;
const ehHoje = iso === hoje;
const feitas = lista.filter(t => t.status === 'feito').length;
const todasFeitas = lista.length > 0 && feitas === lista.length;
return (
lista.length && setDiaAberto(diaAberto === iso ? null : iso)}
style={{ minHeight:74, padding:'5px 6px', borderRadius:8,
cursor: lista.length ? 'pointer' : 'default',
background: ehD0 ? 'rgba(248,113,113,.12)'
: diaAberto === iso ? 'rgba(255,255,255,.07)'
: lista.length ? 'rgba(255,255,255,.025)' : 'transparent',
border:'1px solid ' + (ehD0 ? 'rgba(248,113,113,.45)'
: ehHoje ? 'rgba(56,189,248,.45)'
: fer || ate ? 'rgba(251,146,60,.3)'
: 'var(--app-border)'),
display:'flex', flexDirection:'column', gap:3, overflow:'hidden' }}>
{Number(iso.slice(8))}
{ehD0 && D0 }
{!ehD0 && (fer || ate) && (
)}
{todasFeitas &&
{lista.slice(0, 3).map(t => {
const f = FASE_MAP[t.fase] || {};
return (
{t.titulo}
);
})}
{lista.length > 3 && (
mais {lista.length - 3}
)}
);
})}
{/* Detalhe do dia clicado */}
{diaAberto && tarefasDoDia.length > 0 && (
{fmtData(diaAberto)}, {diaSemana(diaAberto)}
{feriadoDe(diaAberto) && {feriadoDe(diaAberto)} }
{atencaoDe(diaAberto) && {atencaoDe(diaAberto)} }
{tarefasDoDia.length} tarefa{tarefasDoDia.length>1?'s':''}
{tarefasDoDia.map(t => (
{}} mostrarTrilha onVirarCard={onAbrir.virarCard}/>
))}
)}
);
}
/* ── Tela principal ─────────────────────────────────────────────*/
function PicoScreen() {
const [projetos, setProjetos] = useState([]);
const [projetoId, setProjetoId] = useState(null);
const [tarefas, setTarefas] = useState([]);
const [decisoes, setDecisoes] = useState([]);
const [metricas, setMetricas] = useState([]);
const [visao, setVisao] = useState('fase'); // fase | trilha | calendario
const [filtroTrilha, setFiltroTrilha] = useState('todas');
const [ocultarFeitas, setOcultarFeitas] = useState(false);
const [carregando, setCarregando] = useState(true);
const projeto = projetos.find(p => p.id === projetoId) || null;
/* Carregar projetos */
useEffect(() => {
(async () => {
const { data } = await window.db.from('pico_projetos')
.select('*').order('criado_em', { ascending:false });
setProjetos(data || []);
if (data && data.length && !projetoId) setProjetoId(data[0].id);
setCarregando(false);
})();
}, []);
/* Carregar o conteúdo do projeto escolhido */
useEffect(() => {
if (!projetoId) { setTarefas([]); setDecisoes([]); setMetricas([]); return; }
(async () => {
const [t, d, m] = await Promise.all([
window.db.from('pico_tarefas').select('*')
.eq('projeto_id', projetoId).order('offset_dias').order('ordem'),
window.db.from('pico_decisoes').select('*')
.eq('projeto_id', projetoId).order('ordem'),
window.db.from('pico_metricas').select('*')
.eq('projeto_id', projetoId),
]);
setTarefas(t.data || []);
setDecisoes(d.data || []);
setMetricas(m.data || []);
})();
}, [projetoId]);
/* Marcar tarefa */
const alternarTarefa = async (t) => {
const novo = t.status === 'feito' ? 'pendente' : 'feito';
setTarefas(ts => ts.map(x => x.id === t.id
? { ...x, status:novo, data_conclusao: novo === 'feito' ? hojeISO() : null } : x));
await window.db.from('pico_tarefas')
.update({ status:novo, data_conclusao: novo === 'feito' ? hojeISO() : null })
.eq('id', t.id);
};
/* Escolher decisão */
const escolherDecisao = async (d, escolha) => {
setDecisoes(ds => ds.map(x => x.id === d.id
? { ...x, escolha, decidido_em: escolha ? new Date().toISOString() : null } : x));
await window.db.from('pico_decisoes')
.update({ escolha, decidido_em: escolha ? new Date().toISOString() : null })
.eq('id', d.id);
};
/* Salvar métrica da imaginação primária */
const salvarMetrica = async (cenario, indicador, valor, unidade) => {
const v = valor === '' ? null : Number(valor);
const existente = metricas.find(m =>
m.cenario === cenario && m.indicador === indicador && m.momento === 'imaginacao');
if (existente) {
setMetricas(ms => ms.map(m => m.id === existente.id ? { ...m, valor:v } : m));
await window.db.from('pico_metricas').update({ valor:v }).eq('id', existente.id);
} else {
const { data } = await window.db.from('pico_metricas').insert({
projeto_id: projetoId, momento:'imaginacao', cenario, indicador, valor:v, unidade,
}).select().single();
if (data) setMetricas(ms => [...ms, data]);
}
};
/* Tarefa vira card no kanban, já marcada com o projeto */
const [aviso, setAviso] = useState(null);
const virarCard = async (t) => {
try {
const r = await criarCardDaTarefa(t, projeto);
const marca = `${r.tipo}: ${r.rotulo}`;
await window.db.from('pico_tarefas')
.update({ entregavel_url: marca, status: t.status === 'pendente' ? 'fazendo' : t.status })
.eq('id', t.id);
setTarefas(ts => ts.map(x => x.id === t.id
? { ...x, entregavel_url: marca, status: x.status === 'pendente' ? 'fazendo' : x.status }
: x));
setAviso({ tipo:'ok', texto:`Card criado em ${r.tipo}: ${r.rotulo}`, hash:r.hash });
} catch (e) {
setAviso({ tipo:'erro', texto: e.message });
}
setTimeout(() => setAviso(null), 6000);
};
/* Salvar o plano de mídia */
const salvarPlano = async (novo) => {
setProjetos(ps => ps.map(p => p.id === projetoId ? { ...p, plano_midia:novo } : p));
await window.db.from('pico_projetos').update({ plano_midia: novo }).eq('id', projetoId);
};
/* Trocar o D0: o banco recalcula as datas não travadas sozinho */
const mudarAbertura = async (novaData) => {
if (!projeto) return;
setProjetos(ps => ps.map(p => p.id === projetoId ? { ...p, data_abertura:novaData } : p));
await window.db.from('pico_projetos')
.update({ data_abertura: novaData }).eq('id', projetoId);
const { data } = await window.db.from('pico_tarefas').select('*')
.eq('projeto_id', projetoId).order('offset_dias').order('ordem');
setTarefas(data || []);
};
/* Recortes */
const visiveis = useMemo(() => tarefas.filter(t =>
(filtroTrilha === 'todas' || t.trilha === filtroTrilha) &&
(!ocultarFeitas || t.status !== 'feito')
), [tarefas, filtroTrilha, ocultarFeitas]);
const feitas = tarefas.filter(t => t.status === 'feito').length;
const atrasadas = tarefas.filter(t =>
t.status !== 'feito' && t.status !== 'pulada' &&
t.data_prevista && t.data_prevista < hojeISO()).length;
const diasParaD0 = projeto?.data_abertura ? diasEntre(hojeISO(), projeto.data_abertura) : null;
const porGrupo = useMemo(() => {
if (visao === 'calendario') return {};
const chave = visao === 'trilha' ? 'trilha' : 'fase';
const g = {};
visiveis.forEach(t => { (g[t[chave]] ||= []).push(t); });
return g;
}, [visiveis, visao]);
const ordemGrupos = visao === 'trilha'
? TRILHAS.map(t => t.id)
: FASES.map(f => f.id);
if (carregando) {
return (
);
}
if (!projetos.length) {
return (
Nenhum pico criado ainda
Um pico de vendas nasce de um template, com uma data de abertura.
Todas as tarefas se posicionam sozinhas a partir dela.
);
}
return (
{aviso && (
{aviso.texto}
{aviso.hash && (
abrir
)}
)}
{/* Cabeçalho: projeto, D0 e progresso */}
setProjetoId(e.target.value)}
style={{ padding:'7px 11px', borderRadius:8, border:'1px solid var(--app-border)',
background:'rgba(255,255,255,.04)', color:'var(--text-1)', fontSize:13,
fontFamily:'Roboto,sans-serif', fontWeight:700, cursor:'pointer' }}>
{projetos.map(p => {p.nome} )}
Abre em
feriado: {feriadoDe(projeto.data_abertura)}
)}
{diasParaD0 !== null && (
{diasParaD0 > 0 ? `faltam ${diasParaD0} dias`
: diasParaD0 === 0 ? 'é hoje'
: `carrinho aberto há ${Math.abs(diasParaD0)} dias`}
)}
{atrasadas > 0 &&
{atrasadas} atrasada{atrasadas>1?'s':''} }
{/* Imaginação primária e decisões */}
m.momento==='imaginacao')}
onSalvar={salvarMetrica}/>
{/* Controles da execução */}
{[['fase','Por fase'],['trilha','Por trilha'],['calendario','Calendário']].map(([id,lb]) => (
setVisao(id)}
style={{ padding:'5px 11px', borderRadius:6, cursor:'pointer', border:'none',
fontSize:11.5, fontFamily:'Roboto,sans-serif', fontWeight:700,
background: visao===id ? 'rgba(255,255,255,.08)' : 'transparent',
color: visao===id ? 'var(--text-1)' : 'var(--text-3)' }}>{lb}
))}
setFiltroTrilha(e.target.value)}
style={{ padding:'6px 10px', borderRadius:7, border:'1px solid var(--app-border)',
background:'rgba(255,255,255,.04)', color:'var(--text-2)', fontSize:11.5,
fontFamily:'Roboto,sans-serif', cursor:'pointer' }}>
Todas as trilhas
{TRILHAS.map(t => {t.label} )}
setOcultarFeitas(v=>!v)}
style={{ padding:'6px 11px', borderRadius:7, cursor:'pointer',
border:'1px solid var(--app-border)', fontSize:11.5,
fontFamily:'Roboto,sans-serif', fontWeight:700,
background: ocultarFeitas ? 'rgba(74,222,128,.12)' : 'transparent',
color: ocultarFeitas ? '#4ade80' : 'var(--text-3)' }}>
{ocultarFeitas ? 'Mostrando pendentes' : 'Ocultar feitas'}
{/* Execução */}
{visao === 'calendario' ? (
) : (
{ordemGrupos.map(gid => {
const lista = porGrupo[gid];
if (!lista || !lista.length) return null;
const cfg = visao === 'trilha' ? TRILHA_MAP[gid] : FASE_MAP[gid];
const gf = lista.filter(t => t.status === 'feito').length;
return (
{lista.map(t => (
{}} mostrarTrilha={visao === 'fase'}
onVirarCard={virarCard}/>
))}
);
})}
)}
);
}
window.PicoScreen = PicoScreen;