Dashboard de Suporte Interno
Construído do zero dentro de uma codebase Rails + React em produção — 100+ usuários diários, ainda em uso ativo.
Overview
Havia uma lacuna evidente: equipes de suporte e engenharia não tinham ferramentas internas compartilhadas para investigar o estado de produção, gerenciar cobranças e acessos, ou depurar falhas em funcionalidades complexas. Construí um dashboard de suporte interno do zero — com responsabilidade total pelo frontend e sua camada de integração GraphQL — dentro de uma codebase existente em Ruby on Rails e TypeScript/React. O dashboard cobre todos os principais aspectos operacionais: busca de usuários e organizações com visão completa do perfil, mascaramento de contas para replicação de sessões de suporte, gerenciamento de cobranças e paywalls, ações administrativas (desbloqueio de IP, atualização de e-mail, vinculação de contas, conversão de métricas e moedas), histórico de versões com diffs por campo, e um painel de parceiros de integração Harbor para gerenciar chaves de API e acesso de organizações parceiras. Um painel dedicado de troubleshooting para o recurso de IA — construído dentro do mesmo dashboard — dá às equipes de suporte uma visão por consulta dos jobs de captura de transcrição, cadeias de chamadas LLM, status das tarefas e diagnósticos de configuração. Construir ferramentas internas complexas dentro de uma codebase de produção existente é uma disciplina diferente de um projeto do zero: trabalhar dentro de um schema GraphQL estabelecido, coordenar com engenheiros de backend para novas estruturas de queries, integrar state proxy Valtio para estado de mascaramento entre componentes sem prop drilling, e estruturar containers React profundamente aninhados para que outros engenheiros possam estendê-los. O dashboard tem 100+ usuários ativos diários em equipes multifuncionais e ainda está em uso em produção. *Os exemplos de código nesta página são ilustrações representativas dos padrões arquiteturais utilizados — não são código-fonte proprietário real do sistema em produção.*
Technical Stack
Frontend
- ▸TypeScript
- ▸React
- ▸GraphQL
- ▸React Query
- ▸Valtio
- ▸CSS Modules
- ▸SCSS
Backend
- ▸Ruby on Rails
- ▸GraphQL API
- ▸PostgreSQL
- ▸RSpec
Ferramentas
- ▸Jest
- ▸React Testing Library
- ▸CircleCI
- ▸ESLint
Key Features
Busca de usuários e organizações com inspeção completa do estado da conta em produção
Mascaramento e desmascaramento de conta — impersone qualquer usuário para replicar sessões de suporte com exatidão
Gerenciamento de cobranças e paywalls — estenda ou modifique estados de trial e assinatura sem um painel admin separado
Ações administrativas: desbloqueio de IPs, atualização de e-mail, vinculação de contas, conversão de unidades e moedas
Histórico de versões com diffs por campo para qualquer registro da aplicação
Painel de parceiros de integração Harbor — crie, pesquise, configure e revogue chaves de API para integrações de terceiros
Painel de troubleshooting de IA — visão por consulta dos jobs de captura de transcrição, cadeias de chamadas LLM, status e diagnósticos de configuração
State proxy Valtio para indicador de mascaramento entre componentes com desmascaramento em um clique em qualquer tela
Code Examples
Technical Challenges
Integrar uma grande área de superfície nova em um schema GraphQL estabelecido sem quebrar consumidores existentes
Projetar para usuários de suporte não técnicos sem sacrificar a profundidade que engenheiros precisam para diagnósticos em produção
Gerenciar o state de mascaramento (impersonação) entre componentes de forma limpa sem prop drilling em containers profundamente aninhados
Coordenar com engenheiros de backend para entregar novas estruturas de queries na mesma cadência de release que o frontend
Construir um painel de troubleshooting para um recurso de IA ao vivo cujas falhas se estendem por múltiplos serviços