Runbook - Departamentos do Sagazchat

Manual operacional para uma IA ou pessoa gerenciar Configuracoes > Departamento no Sagazchat. Departamentos sao setores (Vendas, Financeiro, RH…) que organizam o atendimento e definem o que cada usuario consegue ver.

Status: validado em 2026-05-11 na conta exemplo. Foi criado e excluido o registro LAB - Departamento Teste (id=158) para mapeamento.

1. Onde fica

• Sidebar: Configurações > Departamento (Configuracoes precisa estar expandido).
• URL: https://app.sagazchat.com/department
• Endpoint backend: /queue (atencao: backend usa queue, UI usa department).

2. Estrutura da lista

A tela /department mostra:

• breadcrumb Painel de controle > Departamento;
• botao Adicionar (canto superior direito, verde);
• campo de busca Pesquisar…;
• tabela com colunas Cor e Nome;
• kebab ⋮ em cada linha.

Departamentos reais da conta exemplo (capturados em 2026-05-11):

id	Nome	Cor
77	Comercial - Atendente 1	#2194C5
78	Comercial - Atendente 2	#?
79	Financeiro/RH	#?

Estes IDs sao os mesmos usados em GET /queue (ver runbook assistentes-ia secao 4).

3. Criar departamento

3.1 Passo a passo via UI

1. Clicar Adicionar no canto superior direito.

2. Modal Adicionar departamento abre com:

   • secao Informações básicas com campo Nome;
   • secao Defina a cor: barra de preview no topo + 15 swatches predefinidos + botao + para cor customizada;
   • botoes Cancelar / Adicionar.

   

3. Preencher Nome (texto livre).

4. Clicar em um swatch ou no + para escolher a cor.

   

5. Clicar Adicionar. O modal fecha e o novo departamento aparece no topo da lista.

3.2 Endpoint

POST https://backend.sagazchat.com/queue
Authorization: Bearer <jwt do localStorage.token>
Content-Type: application/json

{ "name": "LAB - Departamento Teste", "color": "#A855F7" }

Resposta validada (id=158):

{
  "id": 158,
  "name": "LAB - Departamento Teste",
  "color": "#A855F7",
  "greetingMessage": "",
  "outOfHoursMessage": "",
  "companyId": 39,
  "schedules": [
    { "weekday": "Segunda-feira", "weekdayEn": "monday",    "startTime": "08:00", "endTime": "18:00" },
    { "weekday": "Terça-feira",   "weekdayEn": "tuesday",   "startTime": "08:00", "endTime": "18:00" },
    { "weekday": "Quarta-feira",  "weekdayEn": "wednesday", "startTime": "08:00", "endTime": "18:00" },
    { "weekday": "Quinta-feira",  "weekdayEn": "thursday",  "startTime": "08:00", "endTime": "18:00" },
    { "weekday": "Sexta-feira",   "weekdayEn": "friday",    "startTime": "08:00", "endTime": "18:00" }
  ]
}

Observacoes:

• O modal de criar só pede Nome e Cor. Os campos greetingMessage, outOfHoursMessage e schedules sao gravados com defaults pelo backend (Seg-Sex 08:00-18:00, mensagens vazias).
• Esses campos provavelmente sao editaveis em outra UI (ver § 6 — investigacao pendente).

3.3 Cores predefinidas

15 swatches mapeados (em ordem na grade 7 + 7 + +):

Slot	Cor	Hex aproximado
1	Azul	#3B82F6
2	Roxo	#A855F7
3	Teal	#14B8A6
4	Cinza	#64748B
5	Indigo	#6366F1
6	Rosa	#EC4899
7	Cyan	#06B6D4
8	Violeta	#8B5CF6
9	Magenta	#D946EF
10	Sky	#0EA5E9
11	Lime	#D1F349
12	Azul forte	#3563FF
13	Verde	#4CCB4A
14	Vermelho	#E24C37
15	Amarelo	#F5C539
+	Custom	abre color picker

4. Editar departamento

1. Clicar no kebab ⋮ da linha.

2. Menu mostra Editar / Excluir.

   

3. Clicar Editar. Modal Editar departamento abre com Nome preenchido e cor atual destacada. Botoes: Cancelar / Salvar.

   

4. Alterar campos e clicar Salvar.

Endpoint (inferido, nao validado em UI nesta sessao):

PUT https://backend.sagazchat.com/queue/{id}

5. Excluir departamento

1. Kebab ⋮ > Excluir.

2. Modal de confirmacao abre:

   • Titulo: Excluir {nome}?
   • Texto: “Você tem certeza? Essa ação não pode ser revertida! Os atendimentos desse departamento continuarão existindo, mas não terão mais nenhum departamento atribuído.”
   • Botoes: Cancelar / Deletar

   

3. Clicar Deletar confirma. A linha some da lista. Os atendimentos historicos do departamento ficam orfaos (sem departamento atribuido), mas nao sao excluidos.

Endpoint (inferido):

DELETE https://backend.sagazchat.com/queue/{id}

6. Investigacao pendente

• Como editar greetingMessage, outOfHoursMessage e schedules (horarios proprios por departamento)? Os campos existem no payload do POST mas nao aparecem no modal Adicionar/Editar de /department. Hipoteses:
  • Estao em Configurações > Horários (/office-hours) com vinculo por departamento.
  • Estao em uma aba/secao nao visivel do modal atual.
  • Foram migrados para outro modulo.
• Cor customizada via botao +: nao testado o color picker.

7. Acoes seguras e perigosas

Acao	Impacto	Regra
Abrir lista	Leitura	Seguro.
Buscar	Leitura	Seguro.
Criar LAB - *	Cria registro	Permitido para teste, lembrar de excluir no cleanup.
Editar departamento real (Atendente 1/Atendente 2/Financeiro-RH)	Afeta atendimento	Nao fazer sem ordem explicita.
Excluir departamento real	Deixa atendimentos orfaos	Nao fazer sem ordem explicita.
Excluir LAB criado para teste	Limpa lab	Sempre fazer ao final da auditoria.

8. Quirks de automacao

• Swatches NAO sao <button> — sao <div class="MuiBox-root css-XXX"> com cursor: pointer. Selector por <button> retorna vazio. Identificar por getComputedStyle(el).cursor === 'pointer' + backgroundColor matching o hex desejado.
• Endpoint != rota UI: UI /department chama /queue no backend.
• Botao Confirmar = “Deletar”, nao “Excluir”. O nome do menuitem (Excluir) e do botao do modal de confirmacao (Deletar) divergem.
• Modal mantem cor azul como default mesmo apos cancelar e reabrir (reset por sessao do React).
• Campos backend invisíveis: greetingMessage, outOfHoursMessage e schedules sao gravados com defaults sem aparecer no modal.

9. Snippets

9.1 Listar departamentos via API

const v = localStorage.getItem('token');
const token = v?.startsWith('"') ? JSON.parse(v) : v;
const res = await fetch('https://backend.sagazchat.com/queue', {
  headers: { Authorization: `Bearer ${token}` },
});
const list = await res.json();
console.table(list.map((d) => ({ id: d.id, name: d.name, color: d.color })));

9.2 Criar departamento via UI (sem reload)

// Assume pagina /department aberta
// 1. Abrir modal
document.querySelector('button:has-text("Adicionar")')?.click(); // ou Array.from + filter

// 2. Preencher nome via locator do Playwright:
// await page.locator('[role="dialog"] input[name="name"]').fill('Novo Setor');

// 3. Selecionar swatch (div com cursor pointer + cor especifica):
const d = Array.from(document.querySelectorAll('[role="dialog"]')).find((el) => el.getBoundingClientRect().width > 50);
const swatch = Array.from(d.querySelectorAll('div')).find((el) =>
  getComputedStyle(el).cursor === 'pointer' && getComputedStyle(el).backgroundColor === 'rgb(168, 85, 247)'
);
swatch?.click();

// 4. Submeter
Array.from(d.querySelectorAll('button')).find((b) => b.innerText.trim() === 'Adicionar')?.click();

9.3 Excluir via UI

// 1. Abrir kebab da linha alvo
const row = Array.from(document.querySelectorAll('tr, [class*="MuiTableRow"]')).find((r) => /Nome do depto/.test(r.innerText));
Array.from(row.querySelectorAll('button')).pop().click();

// 2. Click Excluir (menuitem)
Array.from(document.querySelectorAll('[role="menuitem"]')).find((m) => /Excluir/.test(m.innerText))?.click();

// 3. Confirmar com Deletar (NAO Excluir!)
const dlg = Array.from(document.querySelectorAll('[role="dialog"]')).find((el) => el.getBoundingClientRect().width > 50);
Array.from(dlg.querySelectorAll('button')).find((b) => b.innerText.trim() === 'Deletar')?.click();

10. Relacao com outros modulos

• Equipe (/users): cada usuario pode ser atribuido a um ou mais departamentos. Usuarios so veem conversas dos departamentos atribuidos. Ver runbook futuro equipe.
• Assistentes IA (/manager-ia): editor do assistente tem Encaminhar para setor que aceita um departamentId. Ver assistentes-ia § 4-5.
• Bate Papo (/dashboard): redirecionar conversa para departamento usa o mesmo queue.id.
• Fluxos de Conversa: bloco Ação > Redirecionar para departamento usa o mesmo id. Ver fluxos.

11. Imagens

• public/media/nova-ui/departamentos-lista.png
• public/media/nova-ui/departamentos-modal-add.png
• public/media/nova-ui/departamentos-modal-add-preenchido.png
• public/media/nova-ui/departamentos-kebab.png
• public/media/nova-ui/departamentos-modal-edit.png
• public/media/nova-ui/departamentos-modal-excluir.png

12. Scripts validados

node scripts/sagaz-departamentos-mapear.mjs   # lista + estrutura inicial
node scripts/sagaz-dept-inspect-modais.mjs    # modal Adicionar + menu kebab
node scripts/sagaz-dept-swatch-real.mjs       # mapeia divs clicaveis (swatches)
node scripts/sagaz-dept-continuar.mjs         # criar LAB + Editar (inspect) + Excluir (inspect)
node scripts/sagaz-dept-cleanup.mjs           # excluir LAB (botao Deletar)