Gemed 2.1 — Documentação

03 - Protótipo v1.0

Leitura de 4 min

⬇ Baixar .md

Épico 5 — Menu Lateral — Protótipo (v1.0)

Documentos deste épico: 01 - Definição (v1.1) · 02 - Especificação (v1.1) · 03 - Protótipo (v1.0, código executável em 03 - Protótipo v1.0.html) · 04 - Mapeamento de Banco de Dados (v1.1). Este épico faz parte do documento guarda-chuva Check-in de Usuários.

SEÇÃO 3 — PROTÓTIPO HTML

Protótipo funcional único (HTML + CSS + JS inline), mobile-first, cobrindo os touchpoints de ponta a ponta: carregamento do menu (loading), estrutura de grupos com expansão/recolhimento individual, seção Favoritos (favoritar/desfavoritar com reversão em falha), busca em tempo real com árvore achatada e estado vazio, botão Trocar condicionado à quantidade de clínicas acessíveis, comportamento responsivo (recolhido/expandido no desktop, overlay no mobile) e o estado de erro de carregamento com “Tentar novamente”. Usa os tokens do Design System (Design System.md) diretamente como CSS custom properties, mesmo padrão já usado no protótipo do Épico 6 (Épico 6 - Seleção de Clínica/03 - Protótipo v1.1.html).

Arquivo: 03 - Protótipo v1.0.html (código executável, mesma pasta deste documento).

Itens de menu usados no protótipo (exemplo, não a árvore final)

Como registrado na Seção 1 (“Lista consolidada de itens [PROPOSTA]”, item 1) e na Seção 4 (“Seeds da Funcionalidade”), a árvore completa de grupos e itens do menu em produção não está disponível para este documento. O protótipo usa uma árvore de exemplo, combinando módulos já especificados em outras partes do projeto com placeholders explicitamente identificados:

  • Grupo “Assistencial”: Central do Médico (Cockpit) e Agenda do Médico — ambos já especificados no projeto (Central do Médico (Cockpit), Agenda do Médico).
  • Grupo “Enfermagem” (placeholder de módulo futuro, ainda sem especificação): Atendimento Oncológico.
  • Grupo “Farmácia” (placeholder de módulo futuro, ainda sem especificação): Manipulação de Alto Custo.
  • Grupo “Backoffice” (placeholder de módulo futuro, ainda sem especificação): Faturamento, Contas a Pagar/Receber.
  • Sem grupo: Meu Perfil (E4, item de menu comum — o protótipo não reimplementa o conteúdo da tela) e “Suporte Gemed” ([PROPOSTA], item de exemplo com destino externo — ver Seção 1 e Seção 4).

Nenhum desses nomes deve ser lido como confirmação de que o módulo já existe em produção fora do que já está especificado em seu próprio documento — grupos e itens marcados acima como placeholder são apenas ilustrações de como a estrutura se comportaria quando esses módulos forem especificados.

Estados contemplados

  • Loading: skeleton no lugar da árvore de grupos, exibido enquanto GET /api/v1/menu está em voo.
  • Default (desktop expandido): grupos com itens, seção Favoritos (quando há ao menos um favorito), campo de busca, botão Trocar (quando há mais de uma clínica acessível), rodapé fixo.
  • Recolhido (desktop): só os ícones da seção Favoritos, coluna estreita, conteúdo principal redimensionado (CA-010.7).
  • Overlay (mobile): menu oculto por padrão, abre como camada sobre o conteúdo ao acionar o ícone de abertura, sem redimensionar nada por baixo (CA-010.8).
  • Grupo recolhido/expandido: cada grupo alterna independentemente dos demais (CA-010.9).
  • Busca ativa, com resultado: árvore achatada, mostrando só os itens cujo nome corresponde ao texto digitado (CA-010.4).
  • Busca ativa, sem resultado (EX-E5-02): estado vazio com mensagem MSG-I5-02, orientando limpar o filtro.
  • Perfil sem nenhum item (EX-E5-01): menu vazio com mensagem informativa MSG-I5-01.
  • Erro ao carregar o menu (EX-E5-04): mensagem MSG-E5-03 + botão “Tentar novamente” (MSG-B5-01), sem árvore nem favoritos exibidos.
  • Falha ao favoritar/desfavoritar (EX-E5-03): estrela reverte ao estado anterior ao toque, toast de erro MSG-E5-01.
  • Sem botão Trocar: simulação do caso de exatamente 1 clínica acessível (CA-010.5), em contraste com o caso de mais de 1 (CA-010.6).

O mock de JavaScript simula os três endpoints da Seção 2: GET /api/v1/menu (carregamento inicial, com alternância entre os cenários de exemplo acima), POST /api/v1/menu/items/{clientePerfilAcessoProcessoId}/favorite e DELETE /api/v1/menu/items/{clientePerfilAcessoProcessoId}/favorite (favoritar/desfavoritar, incluindo uma simulação de falha para demonstrar EX-E5-03). A busca (RN-CIU-030) é resolvida inteiramente no cliente, filtrando o mesmo conjunto de dados já carregado — sem chamada de rede adicional, conforme descrito na Seção 2.

Histórico de Versões

  • v1.0 (15/09/2026) — versão inicial do protótipo. Cobre os 9 critérios de aceitação (CA-010.1 a CA-010.9) e os 4 fluxos de exceção (EX-E5-01 a EX-E5-04) deste épico, com itens de menu de exemplo explicitamente identificados como placeholder, na ausência da árvore completa (mockup original perdido).

Visão de gráfico