Como componentes se combinam para formar os fluxos reais de usuário —
composição de telas, estados, edge cases e interações entre componentes.
12
Patterns
127
Estados
Auth Flow
17 componentes18 estados0 passos8 edge cases
Fluxo completo de autenticacao do Pedbot. Inclui: login com captcha (Turnstile/AWS WAF), recuperacao de senha, redefinicao de senha, two-factor authentication (Google Authenticator), inatividade/unlock, e swap de sessao de usuario. Todas as telas de auth sao paginas isoladas (sem sidebar/navbar) em fundo branco, card centralizado.
full-screen-centered
Telas de auth: background branco (min-height: 100vh), card centralizado max-w-md, sem sidebar/navbar. Completamente isoladas do layout principal do app.
Vuesax componente padrão do Vuesax
Custom componente criado pelo Pedbot
sso-funcional
isFuncional=true (VUE_APP_IS_FUNCIONAL). Link 'Entrar com a Funcional' aparece no login.
Impacto: Redirect para OAuth2 Funcional. Retorno com ?code= na URL → loginSSO() automatico.
captcha-provider-dinamico
setCaptchaProvider() consulta API do tenant ao montar a tela de login.
Impacto: Renderiza Turnstile ou AwsCaptcha dependendo da resposta. Dev local: captcha bypassado.
senha-expirada
localStorage.expiration='true' e email salvo. Login redireciona automaticamente para /forgot.
Impacto: ForgotPassword auto-envia o email na criacao do componente.
ja-logado
checkLogin() detecta que o usuario ja esta autenticado.
Impacto: vs.notify warning 'You are already logged in!' + processo de login abortado.
token-invalido-forgot
Token do link de email invalido ou expirado.
Impacto: API retorna erro. Sem feedback visual especifico documentado.
2fa-session-persistida
twoFactorValidatedInSession no localStorage.
Impacto: Tela /two-factor e pulada automaticamente — boa UX para logins repetidos na mesma sessao do browser.
lembrar-de-mim
checkboxRememberMe=true. Salvo em localStorage.
Impacto: Token de autenticacao com maior duracao. Toggle pre-selecionado na proxima visita.
password-visibility-toggle
Icone visibility/visibility_off sobre o campo de senha.
Impacto: Todos os campos de senha tem toggle de visibilidade via vs-icon absoluto.
src/views/pages/login/LoginJWT.vuemain-login
Tela de login principal. Email + senha com toggle de visibilidade. Switch 'Lembrar de Mim'. Captcha condicional (Turnstile ou AWS WAF). Botao 'Acessar Pedbot'. Link SSO Funcional (condicional). Link 'Esqueceu a senha'. Link 'Ver termos de uso' (abre overlay com PDF iframe). Redireciona para /two-factor se twofactor_activity=true.
Tela de recuperacao de senha. Icone de cadeado + titulo 'Recupere sua Senha' + campo email + botao 'Enviar' (desabilitado 10s apos envio para prevenir spam). vs.notify success apos envio. Link 'Voltar para Login' com ChevronLeftIcon. Auto-envia se localStorage tem email e expiration=true.
Tela de redefinicao de senha (acessada via link do email). Icone de cadeado. vs-alert primario collapsible com requisitos de senha (mesmo pattern do UpdatePasswordPopup). 2 campos de senha com toggle visibility. PasswordStrong. Botao 'Salvar'. Link 'Voltar para Login'.
src/views/pages/LockScreen.vuelock-screen
Tela de sessao bloqueada (Vuexy template — pouco customizado). Imagem lock-screen + username + password. Botao Unlock. Link para /login. Usado como fallback de sessao expirada.
Setup e validacao de 2FA via Google Authenticator. Rota /two-factor. Alert laranja (#f9ebdd) 'Configure o 2FA'. QR Code SVG base64 para scan. Input de codigo TOTP 6 digitos. Botao confirmar. Se ja validado na sessao (localStorage.twoFactorValidatedInSession) pula automaticamente.
Captcha AWS WAF. Script dinamico injetado. Renderiza widget da AWS. Chama onVerify(token) apos resolucao. Usado na tela de login quando captchaProvider='aws'.
Captcha Cloudflare Turnstile. Script dinamico injetado. Theme: light, lang: pt-br. Chama onVerify(token) apos resolucao. Cleanup em beforeDestroy. Usado na tela de login quando captchaProvider != 'aws'.
4 paineis RGBA(0,0,0,0.5) cobrindo a tela com recorte em torno do #__lock_element (icone de cadeado na sidebar). z-index 999999. Ativado por inatividade do usuario logado. Requer clique no cadeado para desbloquear (aciona unlock flow).
src/components/user/TwoFactor.vuetwo-factor-popup
Popup 500x250px de validacao de 2FA no contexto de swap de sessao. Diferente da tela /two-factor — este e um popup inline no chat-attendance.
src/components/user/LoginSwap.vuelogin-swap-popup
Popup 500x300px de login rapido para swap de sessao. Campo de senha + botao. Fluxo de troca de usuario sem sair da tela.
Popup 1050x470px de selecao de usuario para swap. Filtros por disponibilidade/departamento/permissao. Tabela de usuarios com avatar + status online.
src/components/user/Logout.vuelogout-popup
Popup de confirmacao de logout.
src/components/user/Unlock.vueunlock-popup
Popup de desbloqueio de sessao apos inatividade.
mobileCard max-w-md full-width com px-4. Todos os campos empilhados. Captcha widget se adapta. Terms modal full-width.
tabletIdem mobile. Card centralizado no viewport.
desktopCard fixo max-w-md centralizado. Background branco full-screen.
Documentar 6 frames principais: (1) Login: card max-w-md centrado, logo 30px, titulo 35px bold, 2 inputs com icone, switch + link, captcha widget placeholder, botao full-width. Variante com SSO Funcional. (2) Termos: overlay escuro + modal 960px com iframe. (3) Forgot Password: icone cadeado 96px bg-blue-100, titulo, campo email, botao, link voltar. (4) New Password: icone cadeado 50px, alert azul collapsible (2 estados), 2 inputs senha + visibility toggle, PasswordStrong, botao. (5) Two-Factor: tela separada com alert laranja + QR Code + input TOTP 6 digitos. (6) Inactivity Overlay: 4 retangulos semiopa sobre qualquer tela, com buraco no cadeado. Cores: fundo branco (#fff), textos #2C2C2C/#565656, primario (#7367F0), alert 2FA laranja (#f9ebdd).
Campaigns — Gestão de Campanhas
21 componentes10 estados15 passos8 edge cases
Criação e gestão de campanhas de disparo em massa para WhatsApp, SMS e Email. Lista de campanhas + formulário de criação com scheduling, rate control, upload, preview de mensagem e popup de confirmação.
full-table + full-form
Tela de lista: vs-table full-width. Tela de add/edit: form centralizado com seções empilhadas (Configurações Gerais, upload, mensagem). vs-popup de preview sobreposto.
table-listTableCampaigns com header (Adicionar Nova + itens por página) + vs-table + expand rows
form-add-editViewCampaign: seções verticais de configuração + preview popup
Componente de tabela compartilhado entre WhatsApp/SMS/Email. Props: type, campaigns, allowCancel, fixed, isSms, isEmail. Dois modos: fixed=false (lista de campanhas) e fixed=true (campanhas fixas/reutilizáveis).
src/views/campaigns/ViewCampaign.vueadd-edit-form
Formulário completo de criação/edição de campanha. Adapta-se por type (whatsapp/sms/email). Inclui configurações gerais, scheduling, rate control, message config e popup de revisão.
Lista de contatos da campanha exibida na linha expandida (tr.fixed=false). Props: campaign-id, research, type, campaign_is_cancelled, customer-group, isSms, isEmail.
mobileTabela com scroll horizontal. Formulário em coluna única. Chips e botões adaptados.
tabletFormulário com flexbox row parcial (md:w-3/12 por seção).
desktopFormulário com seções lado a lado (upload + mensagem em flex-row).
Criar frames: (1) CampaignsList — tabela WhatsApp com todas as colunas incluindo chips coloridos (Interativa, Humanizada, Opt-Out, Cancelada) e thumbnail de imagem. (2) Linha expandida com TableCampaignCustomers. (3) ViewCampaign WhatsApp — form completo com v-select conexão + switches em grid horizontal + upload card + v-tree quando Bot de Conversa ativo. (4) ViewCampaign com scheduling: flat-pickr Data Inicial + Horário Inicial/Final. (5) Review popup: 2 vs-cards (configurações texto + preview de message-bubble simulando WhatsApp com header/body/footer/buttons). Criar component set para WhatsApp message preview bubble com variantes: simples (texto), com imagem, com template (header/body/footer/buttons), com cards horizontais.
Catalog
15 componentes8 estados0 passos7 edge cases
Gestão do catálogo de produtos no WhatsApp Business — criação, edição e organização de itens e coleções vinculados a instâncias Business.
tabs-per-instance
vs-tabs alignment='left' com aba fixa 'Introdução' + uma aba por instância WhatsApp Business. Cada aba de instância contém vs-tabs internos com funcionalidades específicas.
Vuesax componente padrão do Vuesax
Custom componente criado pelo Pedbot
feature_gate
hasCatalogFeature verificado via hasFeature() — se false, toda a view não renderiza
Impacto: Sem mensagem de erro ou redirect — UI simplesmente não aparece
instancia_business
Filtro: formatNumber(instance.phone_number) === isBusiness.id — apenas instâncias que correspondem ao isBusiness são exibidas como tabs
Impacto: Instâncias não-Business não geram aba mesmo que ativas
status_meta_review
Itens passam por análise do Meta (capability_to_review_status). NO_REVIEW = em análise, não visível para clientes. APPROVED = aprovado e visível. Outros = rejeitado.
Impacto: Ícone colorido na tabela; tooltip explica o status ao atendente
preco_zero
Campo preço sem valor → padrão R$0,00 (tooltip de aviso no campo)
Impacto: Produto pode ser cadastrado sem preço; vx-tooltip com icon=info color=warning avisa
url_invalida
Campo Link com URL inválida → borderColor=red + mensagem 'Por favor, insira um URL válido.'
Impacto: Validação client-side; botão Criar ainda funciona (sem validação de bloqueio)
colecao_sem_repeticao
Versão atual do catálogo WhatsApp não permite que um item pertença a múltiplas coleções simultaneamente
Impacto: Aviso inline no popup de criar coleção; itens já em outra coleção podem não aparecer no v-select
imagem_cdn
Imagens armazenadas via CDN — uploadApiUrl = baseUrl + '/api/file/upload'; Authorization: Bearer token no header da requisição
View de itens: vs-tabs com aba Introdução + aba por instância WhatsApp Business. Aba de instância tem sub-tabs Itens (tabela) e Adicionar Item (formulário).
View de coleções: mesma estrutura de vs-tabs. Aba de instância tem sub-tab Coleções com tabela expansível mostrando itens de cada coleção.
mobilevs-tabs com alignment=left se comporta como tabs horizontais no mobile; formulários ficam em coluna única
tabletLayout mantém vs-card centralizado para introdução; tabela com scroll horizontal
desktopLayout completo; tabela com todas as colunas visíveis
Criar 3 frames por view (ItensCatalog e ColletionsCatalog): (1) Tab Introdução — vs-card onboarding centralizado com botão. (2) Tab Instância / sub-tab Itens — tabela com ícones de status coloridos e coluna Ações (3 ícones). (3) Tab Instância / sub-tab Adicionar Item — formulário de 2 colunas (upload à esquerda, campos à direita) + textarea full-width. Criar component set para o ícone de status Meta Review (3 variantes: pending/approved/rejected). Para ColletionsCatalog: criar frame com row expand mostrando sub-tabela de itens.
Chat Attendance
/chat-attendance (nova versao: NewIndex.vue)
34 componentes13 estados11 passos10 edge cases
Fluxo completo de atendimento humano via chat. Tela principal do operador — onde ele ve, filtra e responde conversas de clientes via WhatsApp, Instagram, Facebook Messenger. Suporta dois modos de visualizacao: lista (sidebar + chat) e kanban (colunas por status). E a view mais complexa do sistema.
multi-column + optional-overlay-sidebars
3 colunas: plataforma (estreita) + sidebar de lista + area principal. Modo kanban substitui a area principal por colunas.
platform-colestreita (~50px)Coluna estreita com icones de plataforma (WhatsApp, Facebook, Instagram). Altura total.
sidebar-colfixo, colapsavel em mobileSidebar de lista de conversas. Contem: busca, filtros rapidos, filtro avancado (dropdown), lista de contatos, footer de acoes em massa.
main-colflex (ocupa o restante)Area principal. Modo lista: header (navbar) + historico de mensagens + input. Modo kanban: filterbar + colunas kanban.
profile-sidebarPainel de perfil do cliente. Overlay sobre a area principal quando activeProfileSidebar=true.
Impacto: Input desabilitado com mensagem 'Contato invalido'
atendimento-inbox
activeChatUser.inbox=true. Nao e possivel responder a partir da aba incorreta.
Impacto: Input com mensagem orientando a usar a aba correta
open-by-template
Atendimento aberto via template WhatsApp. activeChatUser.open_by_template=true.
Impacto: Input bloqueado — aguarda resposta do cliente antes de poder enviar
conexao-perdida-whatsapp
Status da conexao WhatsApp degradado.
Impacto: NewChatStatusChecker exibe banner de alerta no topo da sidebar
single-sign-on
singleSignOn=true. Header alternativo na sidebar com avatar + email + botoes de sessao (lock/logout/selectUser).
Impacto: Atendente pode trocar de usuario sem sair da tela
sessao-inativa
InactivityOverlay ativo (componente user-components). Tela bloqueada por inatividade.
Impacto: 4 paineis escuros cobrem a tela com recorte no icone de lock. Requer unlock.
src/views/chat-attendance/NewIndex.vuemain
Orchestrator principal. Gerencia toda a logica de estado: contatos, mensagens, filtros, transferencias, modos de visualizacao (lista/kanban). Arquivo grande (~2000+ linhas).
Banner de alerta no topo da sidebar — alerta sobre status de conexao WhatsApp.
mobileSidebar colapsavel (class chat-sidebar-col--collapsed). Botao X para fechar. Botoes de acao no menu + compacto (vs-dropdown com radio icon add). Botao send com icon 'send'. MicIcon visivel no input.
tabletLayout intermediario. Sidebar ainda colapsavel.
desktopLayout completo 3 colunas. Dropdown '+' expandido com todos os itens. Botao send com icon 'arrow_upward'.
Criar frames para cada estado principal: (1) No-conversation: icone central + CTA. (2) Active-conversation: 3 colunas (platform strip + sidebar + chat). (3) Kanban-view: filterbar + colunas. Documentar o input com todos os modos (normal, comment, audio, blocked). Criar component set de NewChatContact com variantes: padrao, ativo, nao-lido, com badge. Documentar o filtro avancado como dropdown com accordion. O header da conversa (NewChatNavbar) merece frame proprio com todas as acoes. Cores: input normal = primary, comment mode = warning (#FF9F43), bot mode = pill roxo. Banner de cloud alert = cor de destaque amarela/laranja.
Chat Flows — Editor de Fluxos do Bot
19 componentes10 estados12 passos8 edge cases
Editor de fluxos de conversa do bot (Bot de Triagem e Bot de Campanhas). Árvore interativa de nós + sidebar de edição + aba de horário de atendimento. Inclui também configuração da MarIA (new-chat-flows).
tabs-main + right-sidebar
vs-card principal com vs-tabs (2 tabs). vs-sidebar deslizante da direita para edição. vs-popup para preview.
tabs-containervs-card com vs-tabs: Tab 1 = árvore do fluxo, Tab 2 = horário de atendimento
tree-areav-tree (vue-tree-halower) com nós inline-editáveis. Botões 'adicionar fluxo', 'adicionar opção', 'editar', 'remover' renderizados via tpl() JSX
sidebar-editvs-sidebar right fixo ao body. Abre ao clicar em adicionar/editar nó.
preview-popupvs-popup 'sizePopup' com ChatFlowPreview simulando conversa do bot.
Vuesax componente padrão do Vuesax
Custom componente criado pelo Pedbot
active_sem_schedule
Tab 'Horário de Atendimento' é desabilitada (disabled) para fluxo active (Bot de Campanhas)
Impacto: Usuário no fluxo de campanhas não vê a aba de horário — ela existe mas não é acessível
link_type_apenas_cloud
Tipo de interação 'Link' (type=3) só aparece no select se hasCloud=true
Impacto: Conexões WhatsApp Web não têm opção de link no editor
delete_em_cascata
Ao remover um nó, todas as sub-opções são excluídas em cadeia
Impacto: Confirmação obrigatória via vs-dialog antes da remoção
limite_caracteres_interativo
No modo interativo (settingButtons ou is_interactive), textarea tem counter='20' e maxlength='20'
Impacto: Mensagens em nós interativos limitadas a 20 chars para caber em botões WhatsApp Cloud
back_option
Quando backOptionIsActive (setting enable_back_option_passive_flow), sidebar mostra checkbox 'Voltar para opção anterior'. Número do nó é decrementado automaticamente.
Impacto: Fluxo ganha opção '0 - Voltar' automática em cada nível
maria_activation
Checkbox 'Ativar MarIA' aparece apenas no passive flow quando hasMaria=true e o nó tem parent_option_id
Impacto: Ao marcar: trigger_new_passive_flow=true, nó não pode ter sub-opções
schedule_validacao
Salvar schedule valida: ao menos 1 dia selecionado, mensagem fora do horário preenchida, horas início != fim por dia, pausa configurada corretamente
Impacto: Notificações de erro específicas por tipo de falha de validação
maria_config_gated
NewChatFlowsList tem v-if='mariaIsEnabled && canSee()' — renderiza vazio se MarIA não ativa ou sem permissão
Impacto: Tela em branco sem mensagem de feedback para usuários sem MarIA
src/views/chat-flows/ChatFlowsList.vuemain
View principal com vs-tabs (Fluxo Bot + Horário de Atendimento). Árvore de nós via v-tree (vue-tree-halower). Shared por passive e active via route param.
Lista de memórias da MarIA para gestão de contexto persistente.
mobileSidebar de edição em full-width. Árvore pode ser difícil de navegar em telas pequenas.
tabletSidebar ocupa ~50% da tela. Árvore com scroll horizontal se fluxo for profundo.
desktopLayout completo. Sidebar fixa à direita (~400px). Árvore com scroll vertical.
Criar frames: (1) ChatFlowsList empty state (árvore com apenas Exemplo de Fluxo + Adicionar Fluxo button). (2) ChatFlowsList populated (árvore com nós criados, mostrando botões inline por nó). (3) ChatFlowViewSidebar — criar 4 variantes: Novo Fluxo, Adicionar Opção tipo=0, Adicionar Opção tipo=2 (Anexo), Adicionar Opção tipo=3 (Link). (4) Schedule tab: variantes inactive/active/active-com-departamentos. (5) ChatFlowPreview popup: variante passive (numerado) e active (chips). Usar cores das labels dos nós: #FA9E43 (exemplo), #1E1E1E (triagem), #7367F0 (campanhas).
Configs — Configurações do Sistema
16 componentes10 estados8 passos6 edge cases
Grupo de sub-rotas de configurações do Pedbot. Cada rota tem propósito distinto: ajustes dinâmicos de atendimento, mensagens automatizadas, respostas rápidas, formulário de farmácia e ferramentas Meta. Padrão comum: vs-card por seção + vs-switch/vs-checkbox + sidebars de edição.
per-route
Cada sub-rota tem seu próprio layout. DynamicSettings: vs-row/vs-col grid de vs-card. Messages: vs-table full-width + sidebar. BusinessAccount: sidebar-left (280px) + content-area. ClientForm: vs-card stack centralizado.
dynamic-settingsGrid de vs-card com vs-row/vs-col. Cada card = uma seção temática de configuração.
messages-viewsvs-table (ou vx-table) + vs-sidebar direito deslizante para edição.
business-accountSidebar menu esquerda (280px) com vs-card + content-area à direita.
vuex: settingshttp: requests/messages
1. Usuário acessa sub-rota de config via menu lateral (ex: /configs/dynamic-settings)
2. DynamicSettings: vê grid de cards por seção. Ativa/desativa switches e checkboxes — salva automaticamente via watchers.
3. Para habilitar MarIA: ativa 'Triagem Automática' → toggle para 'MarIA' → seleciona tipo → vincula conexões via popup
4. Para mensagens: acessa sub-rota (/closing-messages, /nps-messages, etc.) → vê vs-table com mensagens existentes
5. Clica EditIcon na linha → vs-sidebar desliza com textarea/fields da mensagem → Salvar
Vuesax componente padrão do Vuesax
Custom componente criado pelo Pedbot
interdependencias_checkboxes
DynamicSettings tem checkboxes fortemente interdependentes: Distribuição Automática requer Caixa de Entrada ativa para ser habilitada. Caixa de Entrada Inteligente é disabled=true e se ativa automaticamente.
Impacto: UI comunica interdependências via :disabled e vs-icon notices. Sem mensagens de erro explícitas.
maria_vs_passive_flow
Toggle entre 'Bot de Triagem' e 'MarIA' muda completamente os controles visíveis no card
Impacto: Ativar MarIA desativa o fluxo passivo antigo. Tooltip InfoIcon warning avisa sobre isso.
client_form_farmacia_only
ClientForm.vue tem vs-card explicitando 'Esta seção é exclusiva para lojas com segmento farmacêutico'
Impacto: Outros tipos de negócio veem a tela mas com aviso de que não se aplica a eles
auto_save
DynamicSettings não tem botão Salvar explícito — persiste via watchers automaticamente
Impacto: Cada toggle dispara imediatamente um save. Sem confirmação ou desfazer.
caixa_inteligente_disabled
vs-checkbox 'Caixa de Entrada Inteligente' tem disabled=true sempre — é auto-ativado pelo sistema
Impacto: Usuário não pode controlar diretamente. Mostra estado informativo apenas.
hasMaria_feature_flag
Seção 'Triagem Automática' só aparece se features.hasMaria=true
Impacto: Tenants sem MarIA não veem o card de triagem automática
src/views/configs/DynamicSettings.vuemain
Ajustes dinâmicos de atendimento. vs-row/vs-col grid de vs-card por seção. Salva via watchers (sem botão explícito). Popup para seleção de conexões MarIA.
src/views/messages/Settings.vueclosing-messages
vs-table de mensagens de encerramento. Apenas coluna de nome + EditIcon → SettingViewSidebar.
src/views/messages/MessageNPS.vuenps-messages
vs-table ou vx-table de mensagens NPS com sidebar de edição.
vx-table de respostas rápidas. Botão 'Nova Resposta Rápida' + items per page + search + sidebar (MessageTemplateViewSidebar).
src/views/configs/ClientForm.vuepharmacy-form
Formulário de dados da farmácia. vs-card exclusivo para farmácias com aviso de segmento + campos: Nome Fantasia, Razão Social, CNPJ (v-mask), Sobre Nós.
src/views/configs/BusinessAccount.vuemeta-tools
Ferramentas Meta. Layout sidebar-esquerda (280px vs-card menu) + content-area. Abas: Limites de Mensagens e Tiers da Meta.
Visualização/geração de PDF de proposta de contrato.
mobilevs-card stack em coluna única. Sidebar full-width. BusinessAccount sidebar menu colapsa.
tabletvs-row/vs-col com 2 colunas. Sidebar ~50% tela.
desktopGrid de vs-card 2 colunas. BusinessAccount com sidebar 280px fixo.
Criar frames para cada sub-rota: (1) DynamicSettings — grid de 3 vs-card com seções Unificar Conexões, Atendimento Automatizado, Triagem Automática. Variantes: modo PassiveFlow (checkboxes) e modo MarIA (v-select + chips + checkboxes). (2) Messages table — vs-table simples nome + EditIcon. Sidebar de edição com textarea. (3) Quick Answers — vx-table com botão 'Nova Resposta Rápida'. (4) BusinessAccount — layout sidebar-menu 280px + content-area. (5) ClientForm — stack de vs-cards com formulário. Importante: documentar os vs-icon notices (subdirectory_arrow_right, cor #0a93ff) como padrão de UI para dependências entre campos.
Customers — Gestão de Contatos
/customers/list
20 componentes10 estados13 passos7 edge cases
Lista e gestão completa de contatos (clientes) do Pedbot. vs-table server-side com busca, ordenação, paginação, sidebar de edição, categorias/tags, download de planilha e sincronização com ERP.
full-table
Tabela vs-table ocupa toda a área de conteúdo. Sidebar deslizante direito para edição. Modais sobrepostos para ERP, download e confirmações.
table-headerBotões de ação (Adicionar, Download, '...' dropdown) + seletor de itens por página com paginação atual
table-bodyLinhas de contato com colunas variáveis por feature flags. Linha expansível com TableCustomerCategory.
paginationvs-pagination max=7 na parte inferior
vuex: customer
1. Usuário acessa /customers/list via menu lateral
2. Vê vs-table com lista de contatos (busca e ordenação server-side)
3. Para adicionar: clica 'Adicionar Novo' → CustomersViewSidebar desliza da direita
4. Sidebar: preenche Nome + Telefone (obrigatórios), Email opcional, Informações, flags de bloqueio
5. Para categorias: clica vs-chip 'Adicionar Categoria' → popup abre com TableCategoryOfCustomer
6. Seleciona categorias → popup fecha → chips coloridos aparecem no sidebar
7. Clica Salvar → contato criado → tabela recarrega
8. Para editar: clica EditIcon na linha → sidebar reabre com dados do contato
9. Para expandir categorias: clica na linha (expand slot) → TableCustomerCategory aparece abaixo
10. Para deletar: clica TrashIcon → vs-popup confirm com avatar + nome + identificador
11. Para bulk delete: '...' → 'Selecionar Contatos' → checkboxes aparecem nas linhas → seleciona → TrashIcon → confirmação em lista
12. Para download: 'Baixar Lista de Contatos' → CustomersDownload popup → escolhe tipo + quantidade → baixa planilha(s)
13. Para sync ERP: '...' → 'Sincronizar com ERP' → CustomersSyncErpModal → seleciona ERP → sincroniza
empty
Nenhum contato cadastrado
vs-table com noDataText='Sem dados disponíveis' + botão 'Adicionar Novo' no header
populated
Tabela com contatos
Linhas com nome, identificador, status chips, favorito chip, conexão, ações. vs-pagination na base.
select_mode
Modo de seleção em massa ativo
Coluna de vs-checkbox adicionada à esquerda de cada linha. Dropdown de ações, paginação e seletor de itens por página ocultados. Ícone delete + close no header.
vs-popup para download da lista de contatos. Opções: Todos, Por Conexão, Por Período. input-number para quantidade de planilhas.
mobileTabela com scroll horizontal. Sidebar full-width. Chips de status podem ficar comprimidos.
tabletTabela com algumas colunas visíveis. Sidebar ~50% largura.
desktopLayout completo. Todas as colunas visíveis. Sidebar ~400px.
Criar frames: (1) CustomersList populated — tabela completa com todas as colunas (desktop). (2) CustomersList select mode — coluna de checkboxes ativa, bulk delete visível. (3) Linha expandida com TableCustomerCategory (grupos como chips coloridos com nome). (4) CustomersViewSidebar — variantes: new (vazio) e edit (preenchido com categorias). (5) Status chips — criar componente com variantes: Ativo (green), Pedbot bloqueado (red), WhatsApp bloqueado (orange), SMS bloqueado, Email bloqueado — e variante multi-status. (6) Delete confirm popup (singular e bulk). Usar vs-chip para categorias com suporte a cor customizável por grupo.
Dashboard / Analytics
13 componentes7 estados10 passos7 edge cases
Telas de analytics e relatórios do Pedbot, compostas por filtros de data + iframes Metabase ou cards nativos Vue/Apex.
single-column
Layout de coluna única: filter card fixo no topo + expansão opcional de filtros adicionais + iframes Metabase empilhados
active-filters-expansionCard condicional (v-if countFilter > 0) com grid de listas de seleção múltipla (slim lists). Número de colunas = countFilter (máx auto)
metabase-iframesUm ou mais iframes Metabase empilhados, cada um com altura em vw relativa ao tipo de dashboard (iframe-dafault: 235vw, iframe-cloud: 87vw, iframe-campaigns: 58vw, iframe-orders: 220vw, iframe-maria: 330vw, iframe-control-panel: 220vw)
Vuesax componente padrão do Vuesax
Custom componente criado pelo Pedbot
sem_conexao_oficial
Se hasOfficial=false, beforeMount aguarda 3s antes de esconder loading (delay para estabilizar o estado da store)
Impacto: iframe-cloud não é exibido; loading inicial mais lento
features_desabilitadas
features.hasCampaigns=false → iframe-campaigns não aparece; features.hasMaria=false → maria-panel não renderiza iframe; features.hasOrders=false → order-panel sem iframe
Impacto: Número de iframes renderizados varia por tenant/feature flag
troca_de_rota
watch em $route.name → ao navegar entre analytics/control-panel/order-panel/maria-panel o componente reutiliza a mesma instância; clear() reseta todos os filtros e loadMetabase() recarrega com o dashboard correto
Impacto: Estado de filtros é limpo automaticamente ao mudar de painel
auto_sync_destruicao
beforeDestroy cancela clearInterval e reseta autoSync=false
Impacto: Auto-refresh para ao navegar para outra seção
data_minima
fetchMinDatetime() busca data mínima de dados disponíveis na API; configura minDate dos dois flat-pickr
Impacto: Usuário não pode selecionar período anterior à data mínima
control_panel_intervalo_maximo
Para dashboard-control-panel, intervalo máximo é 15 dias (14 * 24 * 60 * 60 * 1000 ms); calendarChange limita maxDate do flat-pickr final
Impacto: Usuário recebe range truncado automaticamente se tentar selecionar mais de 15 dias
filtro_sem_departamento
UserDepartmentsSlimList tem opção showWithout que seta departmentsSelected=[999999999] para filtrar contatos sem departamento
Impacto: Parâmetro department_ids na JWT payload = '999999999'
src/views/analytics/MetabaseAnalytics.vuemain
View principal do dashboard — filtros de data + iframes Metabase assinados via JWT. Serve 4 rotas diferentes (analytics, control-panel, order-panel, maria-panel)
src/views/analytics/Analytics.vuesecondary
View legada com charts nativos Vue/Apex (KPI cards + radialBar + pie charts + tabela de atendimentos). Não está mais referenciada no router — substituída pelo MetabaseAnalytics.vue
src/views/DashboardECommerce.vuetemplate-demo
Demo do template Vuexy (não usado em produção — sem rota ativa). Contém dados mockados em inglês.
src/views/report/Report.vuereport
Relatório legado de métricas de atendentes com exportação
mobileGrid de filtros passa para minmax(240px, 1fr); iframes com altura em vw aumentam drasticamente (dafault: 1890vw em <576px)
tabletGrid de filtros com minmax(280px, 1fr); iframes com altura intermediária
desktopGrid auto-fit completo com todos os painéis visíveis lado a lado
Criar component set para o FilterCard com variantes por tipo de painel (analytics, control-panel, order-panel, maria-panel). O conteúdo principal é um placeholder de iframe — não há UI real para prototipar além do filter bar. Focar na anatomia do FilterCard: 4 painéis em grid responsivo. Criar frame separado para o estado 'filtros expandidos' com as slim lists.
Navigation
16 componentes11 estados10 passos7 edge cases
Shell de layout principal do Pedbot — sidebar vertical, navbar, breadcrumb, dropdowns de perfil/notificações/status e popup de transferência de atendimento.
sidebar-content
Sidebar fixa à esquerda (vs-sidebar) + content-area à direita. No mobile (<1200px), sidebar é drawer oculto acionado por hambúrguer.
sidebar
navbar
router-headerh2 com routeTitle + VxBreadcrumb — visível quando $route.meta.breadcrumb ou $route.meta.pageTitle, exceto na rota 'Atendimento'
content-arearouter-view com transition (routerTransition from themeConfig) + NotificationPopup + ContractPopup + UpdatePasswordPopup globais
Criar 5 frames de layout: (1) Desktop sidebar expandida, (2) Desktop sidebar reduzida (ícones), (3) Mobile com drawer fechado (top navbar), (4) Mobile com drawer aberto (overlay), (5) Rota Atendimento (edge-to-edge). ProfileDropDown: criar component set com variante expandida (horizontal) e minimal (vertical stack). Ticket Transfer popup: criar overlay modal com countdown pill e dois botões. Usar Auto Layout na sidebar para acomodar ambos os estados collapsed/expanded.
Onboarding — Conexões
/instances/list
13 componentes12 estados14 passos8 edge cases
Fluxo de criação e gestão de conexões (WhatsApp Web, WhatsApp Cloud, Instagram, Messenger). Inclui wizard de 5 etapas para nova conexão e lista de instâncias ativas.
grid-cards
Grid responsivo de cards de instância. Wizard de nova conexão em modal vs-popup sobreposto.
instances-gridGrid de CardInstance cards, uma por conexão ativa
wizard-modalvs-popup com step indicators + conteúdo dinâmico por etapa
vuex: instanceenv_vars
1. Usuário acessa /instances/list via menu lateral
2. Vê grid de CardInstance (instâncias ativas) ou tela vazia
3. Clica em 'Nova Conexão' → BuildInstance wizard abre em vs-popup
4. Step 0 (Configuração Inicial): tela informativa com requisitos (3 ícones + textos)
5. Step 1 (Conta do Facebook): dados de conta — formulário varia por plataforma
6. Step 2 (Dados Comerciais): dados comerciais + botão 'Cadastrar'
Vuesax componente padrão do Vuesax
Custom componente criado pelo Pedbot
whatsapp_web_separate_flow
Instâncias WhatsApp Web (non-official) não usam o wizard. Conexão via QR Code (GenerateQrCode popup) acionado pelo CardInstance dropdown.
Impacto: Dois fluxos de onboarding distintos na mesma view
meta_oauth_sdk_not_loaded
MetaConnectButton fica desabilitado até fbSdkLoaded=true. FB SDK carregado de forma assíncrona.
Impacto: Botão de conexão aparece mas não responde até SDK estar pronto
no_businesses_found
BusinessSelectionModal não encontra contas Meta
Impacto: AlertCircleIcon + texto de aviso, sem opção de continuar
no_pages_found_instagram
PageTokenSelectionModal sem páginas com Instagram vinculado
Impacto: Mensagem específica: 'Nenhuma página com Instagram vinculado foi encontrada'
instance_in_maintenance
CardInstance.checkInstanceInMaintenance() bloqueia ações do dropdown se instância em manutenção
Impacto: Dropdown de ações fica bloqueado
permissions_rbac
Dropdown do CardInstance tem itens protegidos por canSee(). Ex: instances-list-wpp-auth, instance-edit, chat-batch-finalize, chat-lgpd-febrafar
Impacto: Ações não disponíveis para perfis sem permissão
app_title_whitelabel
AuthorizeStage e CloudStage usam VUE_APP_APP_TITLE (fallback 'PedBot'). Step 3 do wizard diz 'Autorizar o {AppTitle}'.
Impacto: Título da plataforma varia por whitelabel
maria_icon_badge
CardInstance exibe ícone da MarIA (icon_pedbot_cinza_png) se instance.maria_enabled
Impacto: Identificação visual de instâncias com IA ativa
src/views/instances/InstancesList.vuemain
Grid de cards de instâncias ativas + botão de nova conexão. Orquestra todos os popups do fluxo.
src/views/instances/BuildInstance.vuewizard
Wizard de 5 etapas em vs-popup para criação de nova instância. Renderização dinâmica de stage por plataforma.
src/views/instances/CardInstance.vuecard
Card individual de instância: ícone de plataforma, nome/apelido, status chip, dropdown de ações.
mobileGrid de cards empilhado em coluna única. Wizard em popup full-screen.
tabletGrid de 2 colunas. Popup modal centered.
desktopGrid de 3+ colunas. Popup modal com tamanho fixo.
Criar dois frames principais: (1) InstancesList com grid de cards — variantes: empty state e populated com 1/2/3+ cards. CardInstance component set com variantes por plataforma (whatsapp-web, whatsapp-cloud, instagram, messenger) × com/sem MarIA badge × status (ativo, inativo, manutenção). (2) BuildInstance wizard modal — criar 5 frames (um por step) com step indicators em vs-chip. Para step 3: variante whatsapp (authorize-stage + connect-button) e variante meta (meta-authorize-stage + MetaConnectButton). Criar componentes separados: BusinessSelectionModal (3 estados: loading/empty/populated) e PageTokenSelectionModal (3 estados: loading/empty/populated, instagram mostra @username).
Orders / Checkout
12 componentes8 estados0 passos8 edge cases
Fluxo completo de orçamentos e pedidos do Pedbot — lista de pedidos, lista de orçamentos, wizard multi-step de criação e resumo do pedido.
full-page-table
Páginas de lista ocupam toda a área de conteúdo com vs-table. Wizard de criação é um vs-popup fullscreen sobreposto.
Vuesax componente padrão do Vuesax
Custom componente criado pelo Pedbot
feature_orders_desabilitada
hasFeature('orders') retorna false na montagem de ProductOrders.vue
Impacto: Redirect automático para /not-authorized
draft_persistence
Durante atendimento chat (origin='chat'), cada mudança de step salva o estado em localStorage via saveDraft(chatTicketId). Ao reabrir o wizard para o mesmo cliente, getDraft() restaura o estado.
Impacto: Usuário pode retomar orçamento interrompido sem perder dados
origin_chat_vs_out_chat
origin='chat': começa no step 1 (Orçamentos), tem MinusIcon, fecha com confirmação. origin='out-chat': começa no step 0 (Cliente), sem minimize, botão voltar não aparece no OrderSummary
Impacto: Fluxo e header do wizard diferem conforme origem
servicos_vs_produtos
preOrder pode ter products (produtos físicos) OU services (serviços). Navegação entre steps difere: steps de Quantidade e Desconto são para produtos; steps 6-7 (CustomerKnowledge, NotesAndFiles) são para serviços. Se não tem products, pula steps de produto.
Impacto: previousStep() tem lógica especial para não pular steps incorretamente
erp_integration
hasErpFeature=true (verificado via API em mounted): adiciona colunas ERP na tabela, adiciona coluna Pagamento Efetuado. Tooltip HelpCircleIcon explica o status de integração ERP por pedido.
Impacto: UI da tabela é significativamente diferente com/sem ERP
status_colorido_customizavel
Statuses de pedidos são configurados por tenant em /orders/status. Cada status tem name e color personalizado. O botão de status na tabela usa background-color inline com a cor do status atual.
Impacto: A paleta de cores da tabela varia totalmente por tenant
pre_order_turn_into_order
Na PreOrders.vue, o evento @turnIntoOrder da PreOrdersTable chama $refs.ordersMain.setPreOrder(value) e abre o wizard no step do OrderSummary
Impacto: Orçamento convertido diretamente em pedido sem refazer o fluxo completo
before_route_leave
beforeRouteLeave em ProductOrders.vue dispara $events.fire('closeAllPopUps') e aguarda 200ms antes de navegar. Em PreOrders.vue, fecha todos os popups e reseta openOrdersFlow=false antes de navegar.
Impacto: Garante que popups aninhados fechem corretamente ao navegar
Wizard multi-step em vs-popup com 13 steps (0-12). Compartilhado entre origem chat e standalone. Suporta draft persistence e minimize durante atendimento.
Tabela de pedidos com colunas Nº, Data Criação, Nome, Documento, Identificador, Usuário, Finalizado, colunas ERP condicionais, Status dropdown colorido
Tabela de itens do orçamento: Imagem 50px, Nome, Preço com Desconto, Preço original, Quantidade (produtos) ou Categoria (serviços)
mobilevs-table perde visibilidade de colunas; wizard ocupa tela cheia no mobile
tabletTabela com scroll horizontal
desktopLayout completo: tabela 102% de largura, popup com width dinâmica por step
Criar 3 frames principais: (1) Lista de Pedidos com variantes 'sem ERP' e 'com ERP' — usar component set para a linha de status colorida. (2) Lista de Orçamentos com header '+ Criar Orçamento'. (3) Wizard OrdersMain como overlay popup — criar frame para cada step (13 frames) + variante 'com alerta de draft'. A largura do popup muda por step — definir uma largura padrão para os frames Figma e adicionar nota sobre variação dinâmica.
WhatsApp/Meta Templates
/meta/template-messages
19 componentes10 estados11 passos8 edge cases
Gestao completa dos Modelos de Mensagem WhatsApp (Meta Template Messages). Inclui listagem com status de aprovacao, criacao via wizard 2 etapas, edicao inline, remocao, visualizacao de templates pendentes e atribuicao de permissoes. Integra com a API oficial da Meta para aprovacao de templates.
full-page-table + wizard + popups
Pagina principal: tabela full-width com header de acoes. Criacao: pagina separada com wizard centralizado em cards. Edicoes/remocao: popups modais sobre a tabela.
list-headerLinha superior da tabela: botao 'Adicionar Novo' (PlusIcon) + botao 'Sincronizar Modelos' (RefreshCcwIcon) a esquerda; dropdown de items-por-pagina a direita.
tablevs-table com busca integrada, paginacao e ordenacao por coluna (sort-key). Colunas: Nome, Status, Categoria, Acoes.
wizard-cardsWizard de criacao: cards centralizados (w-6/12) empilhados verticalmente, cada secao numa 'items-card'. Navegacao: botao Voltar/Proximo entre as etapas.
popups4 popups sobrepostos: Update (edicao completa), Remove (confirmacao), View (preview), UpdateRole (permissoes). Classe sizePopup no Update.
httpvuex: setShowLoadingOverlayacl
1. Admin acessa /meta/template-messages pelo menu Configuracoes → Templates
2. Ve tabela com todos os templates: nome, status (chip colorido), categoria
3. Clica 'Adicionar Novo' para criar. Navega para /meta/template-messages/add
4. Etapa 1 (Configuration): escolhe categoria (Utilidade/Marketing com custo), define nome, ativa modelo generico se for FB/Instagram
!canSee('add'). Botao 'Adicionar Novo' nao renderizado na lista.
Impacto: Admin restrito nao pode criar templates
variavel-mal-posicionada
Variavel {{N}} no inicio/fim do texto ou apos caractere especial.
Impacto: vs-alert danger com explicacao + link para diretrizes da Meta
src/views/meta-template-messages/List.vuemain
Tabela principal com todos os templates. Header com botoes Adicionar e Sincronizar. Colunas: Nome, Status (chip colorido), Categoria, Acoes (editar/deletar/visualizar/configurar). Gerencia abertura dos 4 popups de acao.
Wizard de 2 etapas para criacao de template. Gerencia o objeto metaTemplateMessages e a navegacao entre paginas (page=0 → Configuration, page=1 → Message). Suporta criacao em lote (addModels) com batchSize=5.
Etapa 1: configuracoes basicas. Secoes: Canais e Modelo Generico (toggle + checkboxes Facebook/Instagram), Categoria (radios: Utilidade/Marketing — com custo unitario por plano), Nome do template (vs-input com validacao de unicidade), Clonagem de modelos (switch useModel + numero de copias).
vs-popup 'Editar Modelo'. Mostra nome (disabled) + categoria (disabled se APPROVED) + chips de blocos toggle: Cabecalho/Corpo/Rodape/Botoes/Carrossel (primario quando ativo). Permite editar o conteudo de cada bloco ativado. Suporta modo carrossel.
vs-popup para atribuir permissoes (roles) ao template. Define quais perfis de usuario podem usar o template no chat. Campo vazio = disponivel para todos.
Documentar 3 fluxos separados: (1) List: tabela com header de acoes, chips de status coloridos (success/warning/danger/grey), icones de acao condicionais. (2) Wizard: 2 frames (Configuration + Message) com cards centralizados. Cada secao e uma 'items-card' com titulo e subtitulo. Frame de erro (alert danger vermelho). (3) Popups: Update (chips de blocos ativos/inativos), Remove (confirmacao simples), View (preview), Sync (popup simples). Cores dos status: APPROVED=success (#28C76F), PENDING=warning (#FF9F43), REJECTED=danger (#EA5455). Botoes de formatacao no corpo: border primary com icone material. Carrossel: card com borda rgba(0,0,0,0.2), border-radius 10px.