// Wave 4c — Suporte (2 telas): Tickets, Base de Conhecimento // ============================================================= // 9. Tickets // ============================================================= const TICKETS = [ { id: 'SUP-2841', assunto: 'Pedido #8821 não chegou · entrega agendada para ontem', cliente: 'Ana Carolina Silva', canal: 'whatsapp', prioridade: 'alta', sla: 'vermelho', slaMin: -45, status: 'aberto', agente: 'Patrícia', criado: 'há 2h', ultima: 'há 14 min', msgs: 8, anexos: 2 }, { id: 'SUP-2840', assunto: 'Como altero os dados de cobrança do cartão?', cliente: 'Bruno Oliveira Lopes', canal: 'email', prioridade: 'media', sla: 'verde', slaMin: 180, status: 'em-andamento', agente: 'João', criado: 'há 4h', ultima: 'há 42 min', msgs: 3, anexos: 0 }, { id: 'SUP-2839', assunto: 'Dúvida sobre taxa de entrega para bairro Sion', cliente: 'Carolina Mendes', canal: 'web', prioridade: 'baixa', sla: 'verde', slaMin: 420, status: 'em-andamento', agente: 'João', criado: 'há 6h', ultima: 'há 2h', msgs: 2, anexos: 0 }, { id: 'SUP-2838', assunto: 'Cancelar assinatura Kit Mensal a partir do próximo mês', cliente: 'Diego Ferreira', canal: 'email', prioridade: 'media', sla: 'amarelo', slaMin: 20, status: 'aberto', agente: null, criado: 'há 8h', ultima: 'há 8h', msgs: 1, anexos: 0 }, { id: 'SUP-2837', assunto: 'Erro ao aplicar cupom BLACKFRIDAY no checkout', cliente: 'Eduardo Santos', canal: 'whatsapp', prioridade: 'alta', sla: 'amarelo', slaMin: 8, status: 'em-andamento', agente: 'Patrícia', criado: 'há 10h', ultima: 'há 20 min', msgs: 6, anexos: 1 }, { id: 'SUP-2836', assunto: 'Solicitação NF-e pedido #8815', cliente: 'Fernanda Costa', canal: 'email', prioridade: 'baixa', sla: 'verde', slaMin: 320, status: 'em-andamento', agente: 'João', criado: 'há 12h', ultima: 'há 4h', msgs: 4, anexos: 1 }, { id: 'SUP-2835', assunto: 'Colomba chegou quebrada — solicito troca', cliente: 'Gabriel Almeida', canal: 'whatsapp', prioridade: 'alta', sla: 'verde', slaMin: 160, status: 'em-andamento', agente: 'Patrícia', criado: 'ontem', ultima: 'há 1h', msgs: 7, anexos: 3 }, { id: 'SUP-2834', assunto: 'Parceria: quer vender produtos da padaria no restaurante', cliente: 'Heloísa Martins', canal: 'email', prioridade: 'baixa', sla: 'verde', slaMin: 2880, status: 'em-andamento', agente: 'Ana', criado: 'ontem', ultima: 'há 6h', msgs: 2, anexos: 0 }, { id: 'SUP-2833', assunto: 'Alterar endereço de entrega para próximos pedidos', cliente: 'Igor Ferreira', canal: 'web', prioridade: 'baixa', sla: 'verde', slaMin: 240, status: 'resolvido', agente: 'João', criado: 'ontem', ultima: 'ontem', msgs: 3, anexos: 0 }, { id: 'SUP-2832', assunto: 'Pão integral com recheio estranho · qualidade', cliente: 'Juliana Batista', canal: 'whatsapp', prioridade: 'alta', sla: 'verde', slaMin: 90, status: 'resolvido', agente: 'Patrícia', criado: '2 dias atrás', ultima: '2h atrás', msgs: 5, anexos: 2 }, ]; const PageTickets = ({ onNavigate }) => { const [status, setStatus] = React.useState('ativos'); const [selected, setSelected] = React.useState(TICKETS[0]); const canalMeta = { web: { l: 'Web', c: '#93c5fd', i: 'grid' }, email: { l: 'E-mail', c: '#c4b5fd', i: 'mail' }, whatsapp: { l: 'WhatsApp', c: '#86efac', i: 'whatsapp' }, }; const slaColor = { vermelho: '#fca5a5', amarelo: '#fcd34d', verde: '#86efac' }; const prioMeta = { alta: { c: '#fca5a5', l: 'Alta' }, media: { c: '#fcd34d', l: 'Média' }, baixa: { c: 'var(--text-3)', l: 'Baixa' } }; const filtered = TICKETS.filter(t => status === 'ativos' ? t.status !== 'resolvido' : status === 'resolvidos' ? t.status === 'resolvido' : true); return ( } >
t.status === 'aberto').length} sub={`${TICKETS.filter(t => t.status === 'em-andamento').length} em andamento`}/> t.sla !== 'verde' && t.status !== 'resolvido').length} delta="+1" deltaDir="down" sub="requer atenção"/>
{/* Ticket list */}
{['ativos', 'resolvidos', 'todos'].map(s => ( ))}
{filtered.map(t => { const sel = selected?.id === t.id; const cm = canalMeta[t.canal]; return (
setSelected(t)} style={{ padding: '14px 16px', cursor: 'pointer', borderBottom: '1px solid var(--line-1)', borderLeft: `3px solid ${sel ? 'var(--accent-1)' : 'transparent'}`, background: sel ? 'var(--accent-soft-10)' : 'transparent', }}>
{cm.l} {t.id} {t.sla !== 'verde' && {t.slaMin < 0 ? `${Math.abs(t.slaMin)}min atrás` : `${t.slaMin}min`} }
{t.assunto}
{t.cliente.split(' ')[0]}
· {prioMeta[t.prioridade].l} {t.msgs} msg{t.anexos > 0 ? ` · 📎${t.anexos}` : ''} {t.ultima}
); })}
{/* Conversation detail */} {selected && }
); }; const TicketDetail = ({ ticket, canalMeta, slaColor }) => { const cm = canalMeta[ticket.canal]; const conv = [ { role: 'customer', autor: ticket.cliente, quando: 'há 2h', canal: ticket.canal, msg: 'Oi, meu pedido #8821 estava agendado para chegar ontem às 18h mas até agora nada! Já paguei e preciso saber o que aconteceu urgente porque era para um jantar.', anexos: [] }, { role: 'system', msg: 'Ticket aberto · prioridade alta detectada pela IA (palavras: "urgente", "não chegou") · roteado para Patrícia.', quando: 'há 2h' }, { role: 'agent', autor: 'Patrícia Lima', quando: 'há 1h 40min', msg: 'Oi Ana, sou a Patrícia do suporte! Sinto muito pelo inconveniente — já estou verificando aqui no sistema o que aconteceu. Só um momento.', anexos: [] }, { role: 'agent', autor: 'Patrícia Lima', quando: 'há 1h 30min', msg: 'Ana, vi aqui que houve um problema com a rota do nosso entregador e a entrega foi remarcada sem avisar você (desculpa por isso!). Vou fazer o seguinte:\n\n1️⃣ Entrego HOJE entre 17h e 19h sem custo adicional\n2️⃣ Dou um cupom de R$ 30 para sua próxima compra como desculpa\n\nTopa?', anexos: [] }, { role: 'customer', autor: ticket.cliente, quando: 'há 40min', msg: 'Pode ser sim, Patrícia! Obrigada por resolver. Só uma coisa: posso pedir para entregar depois das 18h? Tô chegando do trabalho nesse horário.', anexos: [] }, { role: 'agent', autor: 'Patrícia Lima', quando: 'há 14min', msg: 'Perfeito Ana! Já reagendei para 18h30-19h30. Você vai receber uma confirmação no WhatsApp quando o entregador sair da loja. 💛', anexos: [] }, ]; return (
{/* Header */}
{ticket.id} · {cm.l} SLA {ticket.sla}

{ticket.assunto}

{ticket.cliente}
· Agente: {ticket.agente || 'não atribuído'} · Aberto {ticket.criado}
{/* Conversation */}
{conv.map((c, i) => { if (c.role === 'system') return (
{c.msg} · {c.quando}
); const me = c.role === 'agent'; return (
{c.autor} · {c.quando}
{c.msg}
); })}
{/* AI suggestion */}
Sugestão de resposta · IA
"Ana, acabei de confirmar com o entregador João e ele sai daqui às 18h em ponto. Vou te mandar o rastreio assim que ele subir na moto. Qualquer coisa me chama por aqui! 💛"
{/* Composer */}