NexarGrid
v beta-2.0.1 Released

Componentes Frontend: O Grid de Agendamento

05 de janeiro de 2026
beta-2.0.1
Time Técnico NexarSystems

# Visão Geral

A interface do NexarGrid é construída sobre o framework Vue.js 3, utilizando uma arquitetura baseada em componentes para garantir modularidade e reutilização. O sistema é dividido em módulos funcionais, cada um responsável por uma parte específica da experiência do usuário.

# Módulos Principais

Abaixo estão descritos os componentes core do sistema de gestão de escalas, organizados por responsabilidade, seguindo o mesmo rigor técnico dos serviços de backend.

# 1. GridScheduler Module (GridScheduler)

O motor de visualização principal. Responsável pela renderização da grade de horários e manipulação direta dos turnos.

  • Responsabilidade: Virtualização de linhas e colunas para alta performance.
  • Funcionalidades:
    • Virtual Scrolling: Renderiza apenas o viewport visível.
    • Drag-and-Drop: Movimentação intuitiva de turnos.
    • Context Menus: Ações rápidas (dividir, editar, remover).
  • Subcomponentes: GridHeader, GridSidebar, GridViewport, GridRow, GridCell.

# 2. Shift Card Module (ShiftCard)

A unidade atômica de interação. Representa um turno individual na grade.

  • Responsabilidade: Exibição de estado e dados do turno.
  • Funcionalidades:
    • Codificação Visual: Cores para status e tipos de turno.
    • Indicadores: Ícones para sobreaviso, preceptor, conflitos.
    • Modo Compacto: Tratamento especial para turnos curtos (< 60min) com expansão via Popover.
  • Interações: Tooltips detalhados, estados de seleção e “ghost” para drag-and-drop.

# 3. Conflict Resolution Module (ConflictResolver)

Interface para resolução de colisões e validação de regras.

  • Responsabilidade: Garantir a integridade da escala.
  • Funcionalidades:
    • Visual Diff: Comparação lado a lado de turnos conflitantes.
    • Ações de Resolução: Forçar atribuição, trocar profissional ou cancelar.

# 4. Documentation System (DocViewer)

O motor de renderização desta documentação técnica.

  • Responsabilidade: Transformar Markdown em uma experiência de leitura rica.
  • Funcionalidades:
    • Markdown Parsing: Suporte a GFM (GitHub Flavored Markdown).
    • Mermaid.js: Renderização de diagramas e fluxogramas.
    • PDF Export: Geração de arquivos PDF para offline.
    • Live Preview: Renderização de componentes Vue interativos dentro do texto.

# 5. Application Shell (Layout)

A estrutura global da aplicação.

  • Responsabilidade: Navegação e estrutura da página.
  • Funcionalidades:
    • Responsive Sidebar: Menu lateral adaptável.
    • Zen Mode: Modo de leitura sem distrações.
    • Global Search: Busca indexada (Cmd+K) via SearchCommand.

# Biblioteca de UI (NxComponents)

Estendemos a biblioteca base com componentes de domínio específicos para garantir consistência visual e funcional.

Componente Descrição
NxButton Botões padronizados com estados de carregamento e ícones.
NxSelect Dropdown com virtualização para listas de milhares de médicos.
NxDateRange Seletor de datas otimizado para ciclos de pagamento.
NxAvatar Avatar com geração determinística de cores baseada no nome.

# Live Component Preview

O sistema de documentação suporta a renderização de componentes vivos para demonstração.

# Exemplo: Botão de Ação

 Cliques: 0
 Event log: Idle