Pular para conteúdo

Páginas e Rotas

Estrutura de Rotas

Rota Arquivo Descrição Autenticação
/ index.vue Dashboard ✅
/login login.vue Tela de login ❌
/agenda agenda.vue Calendário de agendamentos ✅
/kanban kanban.vue Kanban de atendimentos ✅
/atendimento/:id atendimento/[id].vue Prontuário eletrônico ✅
/pacientes pacientes.vue Lista de pacientes ✅
/servicos servicos.vue Serviços oferecidos ✅
/pagamentos pagamentos.vue Gestão financeira ✅
/relatorios relatorios.vue Relatórios ✅
/usuarios usuarios.vue Gestão de usuários ✅ (admin)
/clinicas clinicas.vue Gestão de clínicas ✅ (admin)

Páginas Principais

Login (/login)

Tela de autenticação.

Funcionalidades:

  • Login com email/senha
  • Botão de demonstração com credenciais de teste
  • Redirect para dashboard após login

Dashboard (/)

Visão geral da clínica.

Cards exibidos:

  • Total de pacientes
  • Agendamentos do dia
  • Atendimentos em andamento
  • Faturamento do mês

Agenda (/agenda)

Calendário interativo de agendamentos.

Funcionalidades:

  • Visualização por dia/semana/mês
  • Criar novo agendamento
  • Editar/cancelar agendamento
  • Filtrar por profissional
  • Transições de status (confirmar, check-in)

Screenshot:

┌──────────────────────────────────────────────┐
│  < Janeiro 2026 >    [Dia] [Semana] [Mês]    │
├──────┬──────┬──────┬──────┬──────┬──────┬────┤
│ Dom  │ Seg  │ Ter  │ Qua  │ Qui  │ Sex  │Sab │
├──────┼──────┼──────┼──────┼──────┼──────┼────┤
│      │  1   │  2   │  3   │  4   │  5   │ 6  │
│      │      │ •••  │ ••   │      │ •    │    │
├──────┼──────┼──────┼──────┼──────┼──────┼────┤

Kanban (/kanban)

Quadro visual do fluxo de atendimentos do dia.

Colunas:

  1. Agendado - Consultas agendadas
  2. Confirmado - Paciente confirmou presença
  3. Aguardando - Check-in feito, aguarda atendimento
  4. Em Atendimento - Consulta em andamento
  5. Concluído - Atendimento finalizado
  6. Não Compareceu - Paciente faltou
  7. Cancelado - Consulta cancelada

Ações por coluna:

Coluna Botão Ação
Agendado CONFIRMAR Muda para Confirmado
Confirmado CHECK-IN Muda para Aguardando
Aguardando ATENDER Inicia atendimento
Em Atendimento CONTINUAR Abre prontuário
Concluído VER Visualiza prontuário

Features:

  • Toggle entre visualização Kanban e Lista
  • Seletor de data
  • Auto-refresh a cada 30 segundos
  • Badges com contagem por coluna

Atendimento (/atendimento/:id)

Prontuário eletrônico com metodologia SOAP.

Tabs:

  1. SOAP - Registro clínico
  2. S (Subjetivo) - Queixa do paciente
  3. O (Objetivo) - Exame físico
  4. A (Avaliação) - Diagnóstico

  5. P (Plano) - Tratamento

  6. Diagnóstico - Códigos CID-10

  7. Busca por código ou descrição
  8. Múltiplos diagnósticos

  9. Diagnóstico principal

  10. Prescrição - Medicamentos

  11. Nome do medicamento
  12. Dosagem
  13. Frequência
  14. Duração

Ações:

  • Salvar Rascunho - Salva sem finalizar
  • Finalizar Atendimento - Conclui a consulta

Pacientes (/pacientes)

CRUD de pacientes.

Campos:

  • Nome completo
  • CPF
  • Data de nascimento
  • Telefone
  • Email
  • Endereço
  • Observações

Funcionalidades:

  • Busca por nome/CPF
  • Paginação
  • Histórico de atendimentos

Serviços (/servicos)

Catálogo de serviços da clínica.

Campos:

  • Nome do serviço
  • Preço
  • Duração (minutos)
  • Status (ativo/inativo)

Middleware de Autenticação

Localização: frontend/app/middleware/auth.ts

export default defineNuxtRouteMiddleware((to) => {
  const { isAuthenticated } = useAuth()

  // Páginas públicas
  if (to.path === '/login') return

  // Redireciona para login se não autenticado
  if (!isAuthenticated.value) {
    return navigateTo('/login')
  }
})

A navegação é controlada pelo layout default.vue:

const menuItems = [
  { title: 'Dashboard', icon: 'mdi-view-dashboard', to: '/' },
  { title: 'Agenda', icon: 'mdi-calendar', to: '/agenda' },
  { title: 'Atendimentos', icon: 'mdi-clipboard-pulse', to: '/kanban' },
  { title: 'Pacientes', icon: 'mdi-account-group', to: '/pacientes' },
  { title: 'Serviços', icon: 'mdi-medical-bag', to: '/servicos' },
  { title: 'Pagamentos', icon: 'mdi-currency-usd', to: '/pagamentos' },
  { title: 'Relatórios', icon: 'mdi-chart-bar', to: '/relatorios' },
  { title: 'Usuários', icon: 'mdi-account-cog', to: '/usuarios' },
  { title: 'Clínicas', icon: 'mdi-hospital-building', to: '/clinicas' },
]