Pular para o conteúdo
Todos os projetos

Sistema de gestão clínica · CRM com IA · Protótipo de alta fidelidade

Articula

Sistema de gestão clínica e CRM com IA para uma clínica de ATM e cervical: 52 telas navegáveis, 5 perfis de acesso e design system próprio

Projeto privado — sem link público

Cliente
Clínica In Vita · Fisioterapia + Ortodontia
Cargo
Engenheiro de Software Front-end · Product Designer
Ano
2026
Tecnologias
  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Zustand
  • Radix UI
  • Recharts
  • dnd-kit
  • Framer Motion

Contexto

Articula é o sistema de gestão e CRM desenvolvido para a Clínica In Vita, que une fisioterapia e ortodontia com foco em DTM/ATM e coluna cervical. As duas especialidades cobram de formas diferentes: pacote de sessões na fisioterapia e entrada mais mensalidades na ortodontia. O protótipo de alta fidelidade em Next.js e React foi feito para a clínica navegar e validar o fluxo antes do desenvolvimento, e serviu de base para a proposta comercial. As telas mantêm a marca da clínica (white-label), identificam o módulo comercial como Articula CRM e usam dados fictícios.

Desafio

Reunir recepção, fisioterapia, ortodontia, gestão e paciente em um único sistema, com controle de acesso por perfil (RBAC) e navegação própria para cada um. O funil comercial precisava converter leads do WhatsApp e do Meta Ads em pacientes sem depender de resposta manual, mantendo revisão humana nas conversas sobre preço.

Resultados

telas navegáveis no sistema da clínica
52
perfis de acesso, cada um com a própria navegação
5
componentes no design system
25
telas no CRM de vendas
12

Principais entregas

  1. 01Desenvolvi em Next.js 16, React 19 e TypeScript um protótipo navegável de alta fidelidade com 52 telas e 5 perfis de acesso com navegação por papel (RBAC), com estado global em Zustand
  2. 02Criei um design system com 25 componentes React em Tailwind CSS 4, com os interativos (modal, select, popover, tooltip, switch) sobre Radix UI: tokens de cor e tipografia, material liquid glass, tema claro e escuro e guia de uso documentado
  3. 03Implementei a Avaliação ATM & Cervical com exame estruturado e impressão diagnóstica por regras recalculada a cada campo, além de odontograma FDI interativo em SVG
  4. 04Projetei o Articula CRM com War Room de KPIs, pipeline kanban arrastável (dnd-kit) com colunas editáveis e cadência automatizada de D0 a D+90, para que nenhum lead fique sem follow-up
  5. 05Prototipei em React e Zustand o atendimento no WhatsApp, com agente de IA ativável por conversa, copiloto que sugere respostas e transferência automática para a equipe em assuntos de preço, mantendo revisão humana nas negociações
  6. 06Construí o portal do paciente mobile-first com 8 telas, incluindo evolução da dor em gráficos Recharts, agendamento, teleconsulta e pagamentos

Telas e componentes

  1. War Room

    A War Room junta meta, receita, funil e risco numa tela só, e as pendências do dia aparecem no topo. Dados fictícios.

    War Room do Articula CRM: alerta de 11 pendências críticas, receita do mês de R$ 13.810 (alta de 30% e 86% da meta) com a curva de abril a setembro, cartões de pipeline em aberto, conversão de 32% e pacientes ativos, e barras das metas de 2026.
    War Room do Articula CRM: alerta de 11 pendências críticas, receita do mês de R$ 13.810 (alta de 30% e 86% da meta) com a curva de abril a setembro, cartões de pipeline em aberto, conversão de 32% e pacientes ativos, e barras das metas de 2026.

  2. Pipeline editável

    Cada coluna do pipeline tem rótulo, cor, automações e agentes de IA editáveis, sem mexer na etapa que os relatórios usam. Dados fictícios.

    Pipeline comercial em kanban com 28 leads ativos e R$ 97.280 em negociação: faixa de chips com as automações de cada coluna e cinco colunas (Chegou agora, Em conversa, Avaliação marcada, Avaliou — decidindo, Proposta na mesa) com cartões de valor, origem e tag de fisioterapia ou ortodontia.
    Pipeline comercial em kanban com 28 leads ativos e R$ 97.280 em negociação: faixa de chips com as automações de cada coluna e cinco colunas (Chegou agora, Em conversa, Avaliação marcada, Avaliou — decidindo, Proposta na mesa) com cartões de valor, origem e tag de fisioterapia ou ortodontia.

  3. Conversas com IA

    Quando o assunto é preço, a conversa fica com a equipe: a IA sugere a resposta e diagnostica a objeção, e uma pessoa decide o que enviar.

    Caixa de conversas do WhatsApp com a lista de leads e pacientes e uma negociação aberta em que o lead pede parcelamento. O modo autônomo está desligado nessa conversa, a resposta sugerida pela IA aguarda revisão no campo de mensagem e, à direita, aparecem as métricas da conversa e o diagnóstico da IA sobre a objeção de preço.
    Caixa de conversas do WhatsApp com a lista de leads e pacientes e uma negociação aberta em que o lead pede parcelamento. O modo autônomo está desligado nessa conversa, a resposta sugerida pela IA aguarda revisão no campo de mensagem e, à direita, aparecem as métricas da conversa e o diagnóstico da IA sobre a objeção de preço.

  4. Dashboard da gestão

    O dashboard da gestão reúne receita, funil, ocupação e a agenda do dia. Dados fictícios.

    Dashboard de gestão do Articula com a marca In Vita: menu lateral com os grupos Principal, Comercial, Clínica e IA clínica; cartões de receita do mês (R$ 13.810, alta de 30%), novos pacientes, conversão do funil de 32% e ocupação da agenda de 77%; gráfico de receita e inadimplência de abril a setembro, rosca de 60 leads por canal e a lista de atendimentos do dia.
    Dashboard de gestão do Articula com a marca In Vita: menu lateral com os grupos Principal, Comercial, Clínica e IA clínica; cartões de receita do mês (R$ 13.810, alta de 30%), novos pacientes, conversão do funil de 32% e ocupação da agenda de 77%; gráfico de receita e inadimplência de abril a setembro, rosca de 60 leads por canal e a lista de atendimentos do dia.

  5. Avaliação ATM

    Do exame estruturado sai uma impressão diagnóstica por regras, recalculada a cada campo, para a fisioterapeuta confirmar.

    Avaliação ATM & Cervical preenchida: exame de ATM com abertura bucal de 38 mm, desvio à direita, estalido na abertura e graus de palpação de 0 a 3 para sete músculos; embaixo, a impressão do sistema com os selos DTM muscular, Componente articular, Cervicalgia tensional e Limitação de abertura, cada um com a justificativa; ao lado, o histórico de abertura bucal (32 mm para 38 mm) e a tabela de referências normais.
    Avaliação ATM & Cervical preenchida: exame de ATM com abertura bucal de 38 mm, desvio à direita, estalido na abertura e graus de palpação de 0 a 3 para sete músculos; embaixo, a impressão do sistema com os selos DTM muscular, Componente articular, Cervicalgia tensional e Limitação de abertura, cada um com a justificativa; ao lado, o histórico de abertura bucal (32 mm para 38 mm) e a tabela de referências normais.

  6. Odontograma

    No odontograma interativo, um clique em cada dente muda o estado dele, e a fase do aparelho fica junto.

    Documentação ortodôntica de um aparelho fixo metálico no mês 6 de 24: odontograma FDI de 32 dentes com estados normal, bráquete, banda, em erupção e extraído, timeline com 6 visitas (5 realizadas com o arco usado e 1 agendada), painel com arco atual, elásticos e as 5 fases do tratamento, e a grade de fotos padronizadas com 3 de 6 imagens registradas (ilustrações) e 3 pendentes.
    Documentação ortodôntica de um aparelho fixo metálico no mês 6 de 24: odontograma FDI de 32 dentes com estados normal, bráquete, banda, em erupção e extraído, timeline com 6 visitas (5 realizadas com o arco usado e 1 agendada), painel com arco atual, elásticos e as 5 fases do tratamento, e a grade de fotos padronizadas com 3 de 6 imagens registradas (ilustrações) e 3 pendentes.

  7. Portal do paciente

    O início do portal mostra a próxima sessão, o progresso do plano e a situação dos pagamentos. O paciente acompanha a queda da dor sessão por sessão, vê as sessões feitas e as orientações da equipe para casa e faz a reavaliação online no navegador, sem instalar nada.

    • Início do portal do paciente no celular: próxima sessão hoje às 8h, progresso de 17 de 20 sessões, pagamentos em dia e gráfico da dor caindo de 7 para 2.
      Início do portal do paciente no celular: próxima sessão hoje às 8h, progresso de 17 de 20 sessões, pagamentos em dia e gráfico da dor caindo de 7 para 2.
    • Tela Minha Evolução no celular: gráfico da dor ao longo do tratamento, de 7/10 para 2/10, e a linha do tempo das sessões com o que foi trabalhado em cada uma.
      Tela Minha Evolução no celular: gráfico da dor ao longo do tratamento, de 7/10 para 2/10, e a linha do tempo das sessões com o que foi trabalhado em cada uma.
    • Tela Meu Plano no celular: pacote de 20 sessões para DTM e cervicalgia com 85% concluído, mapa de presença por sessão, técnicas trabalhadas e orientações da equipe para casa.
      Tela Meu Plano no celular: pacote de 20 sessões para DTM e cervicalgia com 85% concluído, mapa de presença por sessão, técnicas trabalhadas e orientações da equipe para casa.
    • Tela Teleconsulta no celular: próxima reavaliação online com a fisioterapeuta, com data, horário e duração, botões Entrar na sala e Remarcar, os três passos de como funciona e quando a teleconsulta é indicada.
      Tela Teleconsulta no celular: próxima reavaliação online com a fisioterapeuta, com data, horário e duração, botões Entrar na sala e Remarcar, os três passos de como funciona e quando a teleconsulta é indicada.

  8. Design system

    A prancha reproduz os tokens e primitivos do design system a partir do código do protótipo, nos temas claro e escuro.

    Prancha do design system do Articula, com a marca do produto no topo e a indicação white-label In Vita: tokens de cor com hex (marca teal, chrome da sidebar, superfícies, areia para IA, azul de fisioterapia, violeta de ortodontia e status), tipografia em Manrope, Playfair Display e Sacramento, botões em 6 variantes, 3 tamanhos e nos estados padrão, hover, foco, carregando e desabilitado, campos com ícone, sufixo e erro, badges em 9 tons, avatares, barras de progresso e o mesmo cartão de pacote renderizado nos temas claro e escuro.
    Prancha do design system do Articula, com a marca do produto no topo e a indicação white-label In Vita: tokens de cor com hex (marca teal, chrome da sidebar, superfícies, areia para IA, azul de fisioterapia, violeta de ortodontia e status), tipografia em Manrope, Playfair Display e Sacramento, botões em 6 variantes, 3 tamanhos e nos estados padrão, hover, foco, carregando e desabilitado, campos com ícone, sufixo e erro, badges em 9 tons, avatares, barras de progresso e o mesmo cartão de pacote renderizado nos temas claro e escuro.

  9. Componentes de domínio

    Os componentes de domínio aparecem com anatomia, estados e a composição que vai do átomo ao pipeline.

    Prancha de componentes de domínio do Articula numa grade de 12 colunas: anatomia do StatCard com medidas de padding, raio e ícone e a tabela de props; o cartão de negócio do pipeline nos estados padrão, hover, arrastando e coluna alvo; o ciclo de estados de um dente FDI, a palpação de 0 a 3 e os badges de dor EVA por faixa; as 5 variantes de mensagem (lead, equipe, agente de IA, transferência por assunto de preço e sugestão do copiloto); e a composição de átomos (badge, avatar, botão) em cartão, coluna de kanban e pipeline.
    Prancha de componentes de domínio do Articula numa grade de 12 colunas: anatomia do StatCard com medidas de padding, raio e ícone e a tabela de props; o cartão de negócio do pipeline nos estados padrão, hover, arrastando e coluna alvo; o ciclo de estados de um dente FDI, a palpação de 0 a 3 e os badges de dor EVA por faixa; as 5 variantes de mensagem (lead, equipe, agente de IA, transferência por assunto de preço e sugestão do copiloto); e a composição de átomos (badge, avatar, botão) em cartão, coluna de kanban e pipeline.

Funcionalidades e as dores que resolvem

Cada funcionalidade nasceu de um problema real da operação.

  1. 01

    Pipeline com cadência D0 → D+90

    Dor
    O anúncio gera contato no WhatsApp, mas sem funil ninguém sabe quem respondeu, quem agendou e quem desistiu no meio do caminho, e os toques de D+1, D+3 e D+7 dependem de alguém lembrar de fazer à mão.
    Solução
    Kanban arrastável (dnd-kit) em que cada coluna tem automações próprias ao entrar e em D+N: WhatsApp com modelo, tarefa para a equipe, aviso à recepção ou acionamento de um agente de IA. Rótulo e cor de cada coluna são editáveis, e a etapa que os relatórios usam continua a mesma.

    Impacto: 7 etapas e 12 automações (9 ativas), das boas-vindas no D0 ao pedido de indicação 90 dias após o fechamento

  2. 02

    Conversas com agente de IA

    Dor
    O lead que escreve à noite ou no fim de semana espera a recepção abrir para ter resposta.
    Solução
    Na caixa do WhatsApp, o agente autônomo é ligado conversa a conversa, com persona escolhida (ex.: a SDR que qualifica e oferece a avaliação), e o copiloto deixa uma resposta sugerida para a equipe revisar. No desenho do protótipo, um modo global (Desligado, Sombra ou Ativo) define até onde a IA vai, e preço e negociação, reclamação, dor forte ou pedido de falar com uma pessoa voltam para a equipe.

    Impacto: Critério de segurança padrão: 4 assuntos voltam para a equipe

  3. 03

    Atribuição e ROI de anúncios

    Dor
    A clínica investe em Meta e Google sem saber qual campanha traz o paciente que de fato fecha tratamento.
    Solução
    Cada lead nasce com a origem registrada (campanha ou canal; nos anúncios da Meta, via utm_id), e o paciente criado na conversão mantém o vínculo com esse lead. O Gerenciador de Anúncios cruza isso com o gasto para mostrar CAC e ROI por campanha, com leads reais nas campanhas ligadas ao funil e estimativa nas demais, e audita as UTMs de cada anúncio.

    Impacto: Lead que chega sem utm_id aparece sinalizado como não atribuível a campanha

  4. 04

    Cross-sell entre especialidades

    Dor
    A demanda cruzada da própria base não fica visível para a clínica: quem trata DTM na fisioterapia pode precisar de avaliação de oclusão, e quem usa aparelho pode desenvolver tensão mastigatória e cervical.
    Solução
    O CRM agrupa a base em grupos de cross-sell entre fisioterapia e ortodontia, cada um com a justificativa clínica, e sugere campanhas com projeção de resultado e o cálculo aberto em “Ver a conta”. A IA prepara a campanha e quem dispara é a equipe.

    Impacto: Projeção conservador–esperado–otimista (Wilson, 80%) sobre a taxa modelada, com a origem de cada taxa

  5. 05

    War Room e Metas

    Dor
    Para a gestão, faltas e parcelas vencidas só aparecem no fechamento do mês, tarde demais para agir.
    Solução
    Uma sala de comando em 6 abas (Visão Geral, Meta & Receita, Funil, Caixa, Risco e Pacientes), toda derivada dos mesmos dados das outras telas, com as pendências críticas no topo e os pacientes com atraso de pagamento ou falta nos últimos 30 dias sinalizados. As metas editadas na tela de Metas alimentam o medidor ao vivo.

    Impacto: 4 metas mensais configuráveis: receita, novos leads, planos fechados e avaliações agendadas

  6. 06

    Planos, cobrança e inadimplência

    Dor
    Com dois jeitos de cobrar, a parcela vencida é descoberta tarde, e a cobrança manual é demorada e constrangedora para a equipe.
    Solução
    Um só cadastro de plano cobre pacote de sessões e ortodontia (entrada + mensalidades), e cada parcela vira fatura. A tela de inadimplência agrupa os atrasos com atraso médio e maior atraso, e a baixa de um pagamento aparece na hora no dashboard; a régua automática de D-3 a D+15 fica para a fase de Automações.

    Impacto: 2 modelos de cobrança (pacote de sessões e entrada + mensalidades) no mesmo cadastro de plano

  7. 07

    Agenda, lista de espera e fila

    Dor
    Com agenda em papel e planilha, remarcações e encaixes viram retrabalho manual, e um horário cancelado vira buraco na agenda.
    Solução
    A agenda por profissional só oferece horários sem conflito, considerando a duração de cada serviço, e a lista de espera guarda especialidade e turno preferido, então quando um horário abre a recepção agenda direto dali. Na recepção, a fila do dia mostra quem chegou e há quanto tempo espera.

    Impacto: Horário conflitante nem aparece no modal de nova sessão; espera acima de 20 min entra em alerta

  8. 08

    Avaliação ATM & Cervical

    Dor
    A avaliação de DTM não tem roteiro estruturado: cada registro começa numa folha em branco.
    Solução
    Exame estruturado (abertura bucal em mm, desvio, ruídos articulares, palpação de 0 a 3 e amplitude cervical) gera uma impressão diagnóstica por regras, recalculada a cada campo, que a fisioterapeuta confirma e salva no prontuário, e a abertura bucal entra num histórico entre avaliações.

    Impacto: 7 pontos de palpação, 6 movimentos cervicais e 5 regras de impressão diagnóstica

  9. 09

    Documentação ortodôntica

    Dor
    Um tratamento ortodôntico dura meses de manutenções, e o ortodontista precisa ver num só lugar o estado de cada dente, o arco usado em cada visita e as fotos de controle.
    Solução
    Odontograma FDI interativo em SVG, em que um clique muda o estado do dente, ao lado da timeline de manutenções com o arco de cada visita, das fases do aparelho e da grade de registros padronizados.

    Impacto: 32 dentes, 5 estados por dente, 5 fases de tratamento e 6 registros padrão (5 fotos e a panorâmica)

  10. 10

    Consulta com IA Escriba

    Dor
    Escrever o prontuário depois de cada consulta toma tempo da profissional.
    Solução
    A consulta é transcrita ao vivo e a IA monta o prontuário em SOAP (os dois simulados no protótipo), em blocos que a profissional edita antes de salvar como evolução do paciente.

    Impacto: Prontuário em 4 blocos SOAP editáveis; nada entra no prontuário sem a profissional confirmar

  11. 11

    Portal do paciente

    Dor
    Quem faz um pacote de sessões ou usa aparelho quer acompanhar o plano, a próxima sessão e os pagamentos no celular, sem depender da clínica para isso.
    Solução
    Portal mobile-first com a evolução da dor em gráfico (Recharts) e em linguagem leiga, o plano com as sessões feitas, orientações para casa, agendamento, teleconsulta no navegador (simulada no protótipo), anamnese e pagamentos.

    Impacto: 8 telas; o texto clínico do prontuário nunca aparece para o paciente, só um resumo leigo feito dos dados da sessão

  12. 12

    Perfis de acesso (RBAC)

    Dor
    Recepção, fisioterapia, ortodontia, gestão e paciente fazem trabalhos diferentes e precisam de telas diferentes.
    Solução
    O menu de cada perfil é montado a partir de uma matriz de papéis, e cada perfil entra direto na própria página inicial; no menu do paciente, só o portal.

    Impacto: 5 perfis com menu próprio: Recepção 7 telas, Fisioterapia 11, Ortodontia 11, Gestão 37 e Paciente 8