rx.scoreodonto.com/RESUMO_DESENVOLVIMENTO.md

Contexto de Desenvolvimento e Melhorias Estéticas

Este documento serve como um mapa do estado atual do projeto, detalhando as diretrizes arquiteturais, o ambiente de desenvolvimento, e o que foi feito na nossa refatoração premium. O objetivo é manter o contexto intacto para continuarmos os trabalhos amanhã de onde paramos.

---

1. Contexto de Deploy e Desenvolvimento

Ambiente e Stack:

• Frontend: Vite + React (rodando no container rx_dev_client na porta 5173).
• Backend: Node.js (Express) com Socket.io (rodando no container rx_dev_api na porta 3000).
• Banco de Dados: PostgreSQL (com proxies/cache via Redis/DragonflyDB).
• Infraestrutura: Docker Compose com persistência e mapeamento de portas (network_mode: host para desenvolvimento).

Estabilidade e Otimizações Críticas Alcançadas:

1. Fim do Loop de WebSocket: O backend estava travando em um loop infinito porque JWTs (que podiam conter hífens) estavam sendo tratados como UUIDs de machine_token no login do Socket, crachando o Postgres. A regra foi substituída por uma RegEx estrita de UUID, estabilizando a API e o proxy do Vite.
2. Performance Extrema em /patients: A listagem de pacientes executava múltiplas subqueries correlacionadas dentro de um GROUP BY, causando lentidão severa. A query foi reescrita utilizando CTE (WITH) e LEFT JOIN LATERAL do Postgres, reduzindo o tempo de resposta da rota de múltiplos segundos para cerca de 9 milissegundos.
3. Resolução de Quedas do WebSocket (O bug do "WebSocket is closed before the connection is established"):
   • Diagnóstico: O erro era causado pelo React StrictMode no ambiente de desenvolvimento, que executa o useEffect duas vezes (monta, desmonta e remonta quase instantaneamente). Na primeira montagem, a conexão do Socket.IO era iniciada, mas o cleanup imediato a desconectava antes do handshake finalizar, lançando o erro no proxy do Vite e sujando o console.
   • Correção no Código: Implementamos um atraso inteligente (setTimeout(150ms)) na criação do socket dentro de SocketContext.jsx. Dessa forma, o ciclo rápido do StrictMode cancela o timer antes da conexão sequer iniciar, subindo apenas a segunda conexão de forma estável. Em Produção, isso garante um delay imperceptível sem impacto negativo.
   • Esclarecimento de Infraestrutura (Traefik): O Traefik da VPS 1 lida com conexões WSS automaticamente por padrão. Falsas soluções, como forçar middlewares de injecção de cabeçalho (Upgrade: websocket) nas rotas do Traefik, são prejudiciais pois injetam esse header em todas as requisições HTTP estáticas (ex: /favicon.ico ou /), levando o Node/Express a rejeitá-las e causando erros 502 Bad Gateway no ambiente de produção. As configurações do Traefik voltaram ao estado padrão, já que a solução de código no React eliminou o problema raiz.

---

2. Como as coisas estão sendo feitas (A Nova Diretriz)

A regra de ouro estabelecida para o UX/UI do projeto é:

"Esquece o sidebar (para aberturas dinâmicas), foque nas páginas. Vamos trocar modais empilhados por páginas dedicadas!"

Fluxo de Trabalho:

• Nenhuma ação complexa (como criar um paciente ou detalhar uma GTO) deve acontecer em um Modal apertado.
• Tudo agora utiliza rotas reais do react-router-dom (ex: /gtos/new, /patients/:id), controladas pelo hook useNavigate.
• O código das listagens perdeu centenas de linhas inúteis e ficou puramente focado em listar, buscar e filtrar.

---

3. Estética Premium: Desktop vs Mobile

Estamos implementando uma estética "WOW" moderna, que transparece profissionalismo e luxo (vibrant colors, glassmorphism, micro-animações, sombras sutis).

💻 Para Desktop:

• Telas Imersivas (Full-page): Ao invés de um modal de 400px, a criação de itens abre uma página inteira. O formulário é apresentado dentro de um card central (boxShadow: 0 4px 20px rgba(0,0,0,0.04)) com inputs largos e bem espaçados.
• Navegação "Breadcrumb": Botões nativos estilizados com setas para voltar (<I.arrowLeft />) e cabeçalhos (main-header) limpos.
• Tipografia e Cores: O contraste foi ajustado para usar var(--ink) para títulos de peso 800 e var(--muted) para legendas, entregando uma hierarquia visual sofisticada.
• Tabelas Interativas: As linhas das tabelas agora possuem hover states sutis (var(--surface-hover)) e botões de ação ("Acessar", "Editar") visíveis sem poluir o grid.

📱 Para Mobile / Responsivo:

• App-like Experience: O mobile não é apenas uma versão espremida do desktop; ele possui componentes dedicados (.mob-screen, MobileUI).
• Bottom Sheets & Drawers: Ações rápidas de revisão abrem em "Bottom Sheets" (.sheet-in) que deslizam de baixo para cima, imitando a navegação nativa do iOS/Android.
• Botões Flutuantes e Floating Actions: Botões de criar novo (+) e pesquisar foram promovidos para o topo como botões estilo pílula (.pill-btn.lg), muito mais acessíveis para toques com os polegares.
• Scroll Inteligente: Listagens no mobile usam Infinite Scroll escondendo o overflow horizontal, garantindo que o usuário só mova a tela para cima e para baixo.

---

4. Onde Paramos e Próximos Passos (Para Amanhã)

O que já está 100% migrado para a nova arquitetura de Páginas: ✅ GTOs: /gtos, /gtos/new, /gtos/:id ✅ Pacientes: /patients, /patients/new, /patients/:id

🎯 Foco para Amanhã (Acesso via API):

1. Sistema de Tokens / API:

   • Melhorar a estética do painel de integrações.
   • Criar um card premium "Zapier CRM" ao lado do botão de gerar token.
   • Criar o botão mágico "Copiar Documentação Completa" — que, após gerar o nome da integração, ativa e copia todas as APIs de uma vez (economizando tempo de implementação em outros sistemas).

2. Endpoints e Sincronização:

   • Criar paciente via App Client Windows (comunicação externa).
   • Enviar sinal de sincronização.
   • Criar acessos / clínicas via API.
   • Listar pacientes e seus RXs.
   • Listar GTOs e detalhamentos.
   • Nota: Tudo isso será feito 100% via API documentada.

3. Continuação do UI (Desktop baseando-se no Mobile):

   • Iniciar o processo inverso: pegar a estética que deu certo no Mobile/Responsivo e trazer melhorias para a versão Desktop.
   • Primeiro alvo de UI: A página Galeria (conforme solicitado anteriormente).
   • Migrar as demais páginas restantes (ex: Configurações, Usuários) removendo completamente a dependência de Modais, seguindo o padrão de rotas limpas inaugurado hoje.