/* global React, sb, Card, Badge, Button, Icon, ICONS */ const { useState, useEffect } = React; // ─── Constants ─────────────────────────────────────────────────────────────── const PT_CATS = [ { id:'todos', label:'Todos' }, { id:'design', label:'Design' }, { id:'social', label:'Social Media' }, { id:'marketing', label:'Marketing' }, { id:'gestao', label:'Gestão' }, { id:'dev', label:'Dev' }, { id:'geral', label:'Geral' }, ]; const CAT_TONE = { design:'brand', social:'cyan', marketing:'volcano', gestao:'success', dev:'warning', geral:'neutral' }; const PRIORITY_COLOR = { alta:'#FF6A6A', media:'#FA8C16', baixa:'#52C41A' }; function uid() { return Math.random().toString(36).slice(2,10); } // ─── Built-in templates ────────────────────────────────────────────────────── const BUILTIN = [ { id:'bi_identidade', builtin:true, name:'Identidade Visual', category:'design', description:'Do briefing ao manual de marca — processo completo de criação de identidade.', stages:[ { id:'s1', name:'Briefing', tasks:[ { id:'t1', name:'Reunião inicial com cliente', priority:'alta', days:0 }, { id:'t2', name:'Pesquisa de referências e concorrentes', priority:'media', days:1 }, ]}, { id:'s2', name:'Conceito', tasks:[ { id:'t3', name:'Moodboard e direção criativa', priority:'alta', days:3 }, { id:'t4', name:'Apresentação do conceito ao cliente', priority:'alta', days:5 }, ]}, { id:'s3', name:'Criação', tasks:[ { id:'t5', name:'Desenvolvimento do logotipo', priority:'alta', days:7 }, { id:'t6', name:'Paleta de cores e tipografia', priority:'media', days:9 }, { id:'t7', name:'Variações e adaptações', priority:'baixa', days:11 }, ]}, { id:'s4', name:'Aprovação', tasks:[ { id:'t8', name:'Apresentação ao cliente', priority:'alta', days:12 }, { id:'t9', name:'Rodada de ajustes', priority:'media', days:14 }, ]}, { id:'s5', name:'Entrega', tasks:[ { id:'t10', name:'Manual de marca completo', priority:'alta', days:16 }, { id:'t11', name:'Pacote de arquivos finais (AI, PNG, PDF)', priority:'alta', days:17 }, ]}, ], }, { id:'bi_social', builtin:true, name:'Gestão de Social Media', category:'social', description:'Processo mensal de produção de conteúdo para redes sociais.', stages:[ { id:'s1', name:'Planejamento', tasks:[ { id:'t1', name:'Reunião de briefing mensal', priority:'alta', days:0 }, { id:'t2', name:'Calendário editorial', priority:'alta', days:1 }, { id:'t3', name:'Definição de pautas e formatos', priority:'media', days:2 }, ]}, { id:'s2', name:'Produção', tasks:[ { id:'t4', name:'Criação de posts (feed)', priority:'alta', days:5 }, { id:'t5', name:'Criação de stories', priority:'media', days:7 }, { id:'t6', name:'Roteiros de reels/vídeos', priority:'media', days:8 }, ]}, { id:'s3', name:'Aprovação', tasks:[ { id:'t7', name:'Envio para aprovação do cliente', priority:'alta', days:10 }, { id:'t8', name:'Ajustes pós-feedback', priority:'media', days:12 }, ]}, { id:'s4', name:'Publicação', tasks:[ { id:'t9', name:'Agendamento das publicações', priority:'alta', days:13 }, { id:'t10', name:'Relatório de desempenho mensal', priority:'media', days:30 }, ]}, ], }, { id:'bi_campanha', builtin:true, name:'Campanha de Marketing', category:'marketing', description:'Execução completa de campanha — do planejamento à análise de resultados.', stages:[ { id:'s1', name:'Estratégia', tasks:[ { id:'t1', name:'Definição de objetivos e KPIs', priority:'alta', days:0 }, { id:'t2', name:'Pesquisa de público-alvo', priority:'alta', days:1 }, { id:'t3', name:'Mapeamento de canais', priority:'media', days:2 }, ]}, { id:'s2', name:'Criação', tasks:[ { id:'t4', name:'Criação de criativos (ads)', priority:'alta', days:4 }, { id:'t5', name:'Copy das peças', priority:'alta', days:5 }, { id:'t6', name:'Landing page', priority:'media', days:6 }, ]}, { id:'s3', name:'Lançamento', tasks:[ { id:'t7', name:'Configuração das campanhas', priority:'alta', days:7 }, { id:'t8', name:'Testes A/B iniciais', priority:'media', days:8 }, { id:'t9', name:'Go live!', priority:'alta', days:9 }, ]}, { id:'s4', name:'Otimização', tasks:[ { id:'t10', name:'Monitoramento diário dos anúncios', priority:'alta', days:10 }, { id:'t11', name:'Ajuste de lances e segmentação', priority:'media', days:14 }, { id:'t12', name:'Relatório de resultados', priority:'alta', days:30 }, ]}, ], }, { id:'bi_site', builtin:true, name:'Criação de Site', category:'dev', description:'Processo de desenvolvimento de site institucional ou landing page.', stages:[ { id:'s1', name:'Descoberta', tasks:[ { id:'t1', name:'Reunião de alinhamento', priority:'alta', days:0 }, { id:'t2', name:'Mapeamento de páginas e funcionalidades', priority:'alta', days:1 }, { id:'t3', name:'Proposta e contrato assinado', priority:'alta', days:2 }, ]}, { id:'s2', name:'Design', tasks:[ { id:'t4', name:'Wireframes e arquitetura', priority:'alta', days:4 }, { id:'t5', name:'Design das telas (Figma)', priority:'alta', days:7 }, { id:'t6', name:'Aprovação do design', priority:'alta', days:10 }, ]}, { id:'s3', name:'Desenvolvimento', tasks:[ { id:'t7', name:'Setup do ambiente', priority:'alta', days:11 }, { id:'t8', name:'Desenvolvimento frontend', priority:'alta', days:14 }, { id:'t9', name:'Integração de formulários e analytics', priority:'media', days:18 }, ]}, { id:'s4', name:'Entrega', tasks:[ { id:'t10', name:'QA e testes cross-browser', priority:'alta', days:19 }, { id:'t11', name:'Aprovação final do cliente', priority:'alta', days:20 }, { id:'t12', name:'Deploy e publicação', priority:'alta', days:21 }, { id:'t13', name:'Treinamento e handoff', priority:'media', days:22 }, ]}, ], }, { id:'bi_conteudo', builtin:true, name:'Produção de Conteúdo', category:'marketing', description:'Fluxo de produção de conteúdo: pauta, roteiro, gravação, edição e publicação.', stages:[ { id:'s1', name:'Pauta', tasks:[ { id:'t1', name:'Pesquisa de tendências e palavras-chave', priority:'alta', days:0 }, { id:'t2', name:'Definição do tema e formato', priority:'alta', days:1 }, ]}, { id:'s2', name:'Produção', tasks:[ { id:'t3', name:'Roteiro completo', priority:'alta', days:2 }, { id:'t4', name:'Gravação / criação do conteúdo', priority:'alta', days:4 }, { id:'t5', name:'Edição e finalização', priority:'alta', days:6 }, ]}, { id:'s3', name:'Revisão', tasks:[ { id:'t6', name:'Revisão interna', priority:'media', days:7 }, { id:'t7', name:'Aprovação do cliente', priority:'media', days:8 }, ]}, { id:'s4', name:'Publicação', tasks:[ { id:'t8', name:'Upload e SEO (título, descrição, tags)', priority:'alta', days:9 }, { id:'t9', name:'Divulgação nas redes sociais', priority:'media', days:10 }, { id:'t10', name:'Análise de primeiros resultados (7 dias)', priority:'baixa', days:17 }, ]}, ], }, { id:'bi_onboarding', builtin:true, name:'Onboarding de Cliente', category:'gestao', description:'Processo de boas-vindas e integração de um novo cliente na sua operação.', stages:[ { id:'s1', name:'Boas-vindas', tasks:[ { id:'t1', name:'E-mail de boas-vindas + acesso aos materiais', priority:'alta', days:0 }, { id:'t2', name:'Reunião de kickoff', priority:'alta', days:1 }, ]}, { id:'s2', name:'Configuração', tasks:[ { id:'t3', name:'Preenchimento de briefing completo', priority:'alta', days:2 }, { id:'t4', name:'Configurar acessos e ferramentas', priority:'media', days:3 }, { id:'t5', name:'Criar projeto no inBrivvo', priority:'media', days:3 }, ]}, { id:'s3', name:'Alinhamento', tasks:[ { id:'t6', name:'Apresentar cronograma e entregáveis', priority:'alta', days:5 }, { id:'t7', name:'Definir canais de comunicação e frequência', priority:'media', days:5 }, ]}, { id:'s4', name:'Início', tasks:[ { id:'t8', name:'Primeira entrega / checkpoint', priority:'alta', days:14 }, { id:'t9', name:'NPS após 30 dias', priority:'baixa', days:30 }, ]}, ], }, ]; // ─── Template Card ──────────────────────────────────────────────────────────── function TemplateCard({ tpl, onEdit, onApply }) { const totalTasks = (tpl.stages||[]).reduce((a,s)=>a+(s.tasks||[]).length, 0); const catLabel = PT_CATS.find(c=>c.id===tpl.category)?.label || tpl.category; return (
onEdit(tpl)}>
{tpl.builtin && (
Template inBrivvo
)}

{tpl.name}

{catLabel}
{tpl.description && (

{tpl.description}

)}
📋 {tpl.stages?.length||0} etapas ✓ {totalTasks} tarefas
{/* Stage pills */}
{(tpl.stages||[]).slice(0,5).map((s,i)=>( {s.name} ))} {(tpl.stages||[]).length > 5 && +{tpl.stages.length-5}}
{!tpl.builtin && ( )}
); } // ─── Template Editor Modal ──────────────────────────────────────────────────── function TemplateEditor({ tpl, onSave, onClose, onDelete }) { const isNew = !tpl?.id || tpl.id.startsWith('new_'); const [name, setName] = useState(tpl?.name||''); const [desc, setDesc] = useState(tpl?.description||''); const [cat, setCat] = useState(tpl?.category||'geral'); const [stages, setStages] = useState(() => JSON.parse(JSON.stringify(tpl?.stages||[{ id:uid(), name:'Etapa 1', tasks:[] }]))); const [saving, setSaving] = useState(false); const [active, setActive] = useState(0); const addStage = () => { const ns = [...stages, { id:uid(), name:`Etapa ${stages.length+1}`, tasks:[] }]; setStages(ns); setActive(ns.length-1); }; const updStage = (i,k,v) => setStages(stages.map((s,j)=>j===i?{...s,[k]:v}:s)); const delStage = i => { const ns=stages.filter((_,j)=>j!==i); setStages(ns); setActive(Math.max(0,active>i?active-1:Math.min(active,ns.length-1))); }; const moveStage = (i,dir) => { const j=i+dir; if(j<0||j>=stages.length) return; const ns=[...stages]; [ns[i],ns[j]]=[ns[j],ns[i]]; setStages(ns); setActive(j); }; const addTask = si => setStages(stages.map((s,j)=>j!==si?s:{...s,tasks:[...(s.tasks||[]),{id:uid(),name:'',priority:'media',days:0}]})); const updTask = (si,ti,k,v) => setStages(stages.map((s,j)=>j!==si?s:{...s,tasks:s.tasks.map((t,k2)=>k2!==ti?t:{...t,[k]:v})})); const delTask = (si,ti) => setStages(stages.map((s,j)=>j!==si?s:{...s,tasks:s.tasks.filter((_,k2)=>k2!==ti)})); const save = async () => { if (!name.trim()) { window.__toast?.('Nome obrigatório',{tone:'danger'}); return; } setSaving(true); try { const { data:{ user } } = await sb.auth.getUser(); const payload = { name:name.trim(), description:desc.trim(), category:cat, stages, user_id:user.id, updated_at:new Date().toISOString() }; let saved; if (isNew) { const { data, error } = await sb.from('process_templates').insert([payload]).select().single(); if (error) throw error; saved = data; } else { const { data, error } = await sb.from('process_templates').update(payload).eq('id',tpl.id).select().single(); if (error) throw error; saved = data; } window.__toast?.(`Modelo "${saved.name}" salvo!`,{tone:'success'}); onSave(saved); onClose(); } catch(err) { window.__toast?.('Erro: '+err.message,{tone:'danger'}); } finally { setSaving(false); } }; const cur = stages[active]; const INP = { width:'100%', padding:'9px 12px', borderRadius:8, border:'1px solid var(--border-subtle)', background:'var(--bg-elevated)', color:'var(--fg-primary)', fontFamily:'inherit', fontSize:13, outline:'none', boxSizing:'border-box' }; const LBL = { fontSize:10, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)', display:'block', marginBottom:5 }; return (
e.stopPropagation()} style={{ width:'min(960px,100%)',maxHeight:'94vh',display:'flex',flexDirection:'column',background:'var(--bg-surface)',border:'1px solid var(--border-strong)',borderRadius:18,boxShadow:'0 32px 80px rgba(0,0,0,0.6)',overflow:'hidden' }}> {/* Header */}
{isNew?'Novo modelo de processo':'Editar modelo'}

{name||'Sem nome'}

{!isNew && !tpl.builtin && ( )}
{/* Left panel */}
setName(e.target.value)} placeholder="Ex: Identidade Visual" style={INP}/>