Componentes Vue

O frontend usa Vuetify 3 como biblioteca de componentes e alguns componentes customizados.

---

Componentes Principais

KanbanColumn

Coluna do quadro Kanban de atendimentos.

Localização: frontend/app/components/KanbanColumn.vue

Props:

Prop	Tipo	Descrição
title	String	Título da coluna
color	String	Cor do Vuetify
icon	String	Ícone MDI
items	Array	Lista de cards
loading	Boolean	Estado de carregamento
actionLabel	String	Texto do botão
actionIcon	String	Ícone do botão
actionColor	String	Cor do botão

Eventos:

Evento	Payload	Descrição
action	item	Quando botão de ação é clicado

Uso:

<KanbanColumn
  title="Aguardando"
  color="warning"
  icon="mdi-clock-outline"
  :items="data.waiting"
  :loading="loading"
  action-label="Atender"
  action-icon="mdi-play"
  action-color="primary"
  @action="startEncounter"
/>

---

KanbanCard

Card individual dentro da coluna Kanban.

Localização: frontend/app/components/KanbanCard.vue

Props:

Prop	Tipo	Descrição
item	Object	Dados do agendamento
actionLabel	String	Texto do botão
actionIcon	String	Ícone do botão
actionColor	String	Cor do botão

Estrutura do Item:

interface KanbanItem {
  id: number
  patient_name: string
  start_at: string
  service_name: string
  professional_name: string
  arrived_at?: string
  encounter_id?: number
}

---

DiagnosisManager

Gerenciador de diagnósticos CID-10 no prontuário.

Localização: frontend/app/components/DiagnosisManager.vue

Props:

Prop	Tipo	Descrição
encounterId	Number	ID do atendimento
diagnoses	Array	Lista atual de diagnósticos

Eventos:

Evento	Payload	Descrição
update	diagnoses[]	Quando lista é atualizada

Funcionalidades:

• Busca de códigos CID-10
• Adicionar/remover diagnósticos
• Marcar diagnóstico principal

---

PrescriptionManager

Gerenciador de prescrições médicas.

Localização: frontend/app/components/PrescriptionManager.vue

Props:

Prop	Tipo	Descrição
encounterId	Number	ID do atendimento
prescriptions	Array	Lista atual de prescrições

Eventos:

Evento	Payload	Descrição
update	prescriptions[]	Quando lista é atualizada

Campos da prescrição:

• Medicamento
• Dosagem
• Frequência
• Duração
• Observações

---

AppointmentModal

Modal para criar/editar agendamentos.

Localização: frontend/app/components/AppointmentModal.vue

Props:

Prop	Tipo	Descrição
modelValue	Boolean	Controle de visibilidade
appointment	Object	Dados para edição (opcional)
selectedDate	String	Data pré-selecionada

Eventos:

Evento	Payload	Descrição
update:modelValue	Boolean	Fechar modal
saved	appointment	Após salvar

---

DynamicForm

Formulário dinâmico baseado em schema JSON.

Localização: frontend/app/components/DynamicForm.vue

Props:

Prop	Tipo	Descrição
schema	Array	Definição dos campos
modelValue	Object	Valores do formulário

---

Composables

useApi

Hook para requisições à API.

Localização: frontend/app/composables/useApi.ts

const api = useApi()

// GET
const patients = await api.get('/api/patients/')

// POST
const newPatient = await api.post('/api/patients/', { name: 'João' })

// PATCH
await api.patch('/api/patients/1/', { name: 'João Silva' })

// DELETE
await api.delete('/api/patients/1/')

Funcionalidades:

• Adiciona token JWT automaticamente
• Adiciona header X-Clinic-ID
• Trata erros de autenticação (401)
• Refresh automático de token

---

useAuth

Hook de autenticação.

Localização: frontend/app/composables/useAuth.ts

const { user, login, logout, isAuthenticated } = useAuth()

// Login
await login('admin@clinic.com', 'admin123')

// Verificar autenticação
if (isAuthenticated.value) {
  console.log(user.value.name)
}

// Logout
logout()

Estado exposto:

Propriedade	Tipo	Descrição
user	Ref	Usuário logado
isAuthenticated	Ref	Está autenticado
currentClinic	Ref	Clínica selecionada

---

Layouts

default.vue

Layout padrão com sidebar e header.

Localização: frontend/app/layouts/default.vue

Estrutura:

┌─────────────────────────────────────────┐
│  Header (logo, user menu, clinic)       │
├──────┬──────────────────────────────────┤
│      │                                  │
│ Side │       Main Content               │
│ bar  │       (slot default)             │
│      │                                  │
│      │                                  │
└──────┴──────────────────────────────────┘

Menu lateral:

• Dashboard
• Agenda
• Atendimentos (Kanban)
• Pacientes
• Serviços
• Pagamentos
• Relatórios
• Usuários
• Clínicas (admin)