agenciapsilmno/HANDOFF.md

# HANDOFF — 2026-05-06 (Melissa Pages aplicando blueprint + ConversationDrawer WhatsApp redesign + commits)

Documento de continuidade. **Quando voltar, comece lendo esta página.**

> **🟢 ENTREGUE HOJE** — Blueprint tabular aplicado nas **6 Melissa Pages restantes**
> (Compromissos, Grupos, Tags, Médicos, Conversas, Recorrências) + dialogs
> harmonizados com `FloatLabel + IconField + section dividers` + dialogs
> "Pacientes do grupo/tag/médico" com cor primary nos avatares + redesign
> completo do `ConversationDrawer` pra estilo WhatsApp (avatar circular, bg
> "papel de parede", bolhas com tail simulada, time/status overlay no canto,
> compose pill + send circular verde) + fix de cor de tags/grupos no
> MelissaPacientes (`g.cor → g.color` em 20 lugares).

> **🟢 COMMITADO** — Working tree estava com 4 sprints acumulados (~50 arquivos).
> Foram criados **5 commits** lógicos antes do push, do mais antigo pro mais
> recente. Ver seção "Histórico de commits" abaixo.

> **🟡 AINDA PENDENTE** — Sub-sessão 2 do A66 (V2 dialog): user não gostou
> do design do esqueleto entregue em 2026-05-05. Aguarda feedback específico
> antes de iterar. Detalhes na seção "Sessões dedicadas pendentes".

---

## 🚦 STATUS — Working tree LIMPA

```
On branch main
Your branch is up to date with 'origin/main'.
nothing to commit, working tree clean
```

(após `git push`. Antes do push: 5 commits ahead.)

---

## 📦 Histórico de commits criados hoje

Em ordem cronológica de criação (mais antigo → mais novo):

1. **`957e912`** — `Melissa polish + Prontuario Visao Geral + agenda historico`
   - Sprints B (05-03) + C (05-04) acumulados:
   - NotificationDrawer/Item redesign
   - Dock pins compose (`useMelissaDockPins`) + cache store global (`melissaCacheStore`)
   - MelissaAgenda timeline FullCalendar parity + cards resumo + histórico card
   - `useFeriados` cache opt-in
   - PatientProntuario aba Visão Geral nova
   - DB migration `20260504000001_fix_cancel_notifications_excluido.sql`
   - 19 files, +5203 −285

2. **`6d9b36d`** — `A66 WIP: AgendaEventDialog quebrado em 5 composables + 265 specs + V2 esqueleto`
   - 5 composables (1986L total): `agendaEventHelpers`, `useAgendaEventComposer`, `useAgendaEventActions`, `useAgendaEventPickerBilling`, `useAgendaEventLifecycle`
   - 5 specs em `__tests__/` (75+76+28+43+43 = **265 testes**, 495/495 passando)
   - AgendaEventDialog 3522 → 2632 linhas (-25%)
   - `AgendaEventDialogV2.vue` esqueleto (~1100L, 3 zonas) + preview em `/preview/agenda-dialog-v2`
   - Backup byte-idêntico em `AgendaEventDialog.vue.bak`
   - Dialogs auxiliares: `InsurancePlanQuickCreateDialog`, `ServiceQuickCreateDialog`
   - 17 files, +10966 −1298

3. **`269b531`** — `Melissa: blueprint tabular + Cadastros/Agendamentos/Pacientes + restore`
   - Sprint E (05-05): Blueprint canônico em `blueprints/melissa-table-page-blueprint.md` (~530L, 18 seções)
   - MelissaCadastrosRecebidos refator pro blueprint
   - **MelissaAgendamentosRecebidos** novo (substitui o embed)
   - MelissaPacientes refator parcial (subheader, sombras, status pills coloridas, email/phone colunas próprias, mobile pencil+popover, fix scroll com `min-height: 0`, restore de arquivados)
   - `restorePatient` no `patientsRepository`
   - 10 files, +4824 −301

4. **`98f7252`** — `Melissa: 6 Pages aplicando blueprint + dialogs unificados + Conversa estilo WhatsApp`
   - Sprint F (05-06, esta sessão):
   - **MelissaCompromissos**: blueprint mantendo row design original (color stripe + name + badges + descrição + meta inline)
   - **MelissaGrupos** + **MelissaTags**: blueprint completo + dialog "Pacientes do grupo/tag" com lista vinculada via `patient_group_patient` / `patient_patient_tag`
   - **MelissaMedicos**: blueprint + dialog "Pacientes encaminhados" usando cor primary; dialog editar com 4 seções (Identificação/Contato/Localização/Obs) espelhando PatientsCadastroPage
   - **MelissaConversas**: subheader, sidebar reestruturada, alerta unlinked no topo, kanban mobile com `min-height` nas colunas, fix bug `filters` é `ref({})` então no script precisa `.value`
   - **MelissaRecorrencias**: button list de status, busca por nome do paciente, footer Limpar filtros
   - **ConversationDrawer**: redesign WhatsApp (avatar primary, bg "papel de parede", bolhas com tail, time/status overlay, compose pill + send circular #00a884)
   - 7 files, +7879 −1467

5. **`15103ed`** — `Cleanup: backups antigos removidos + dashboard config + HANDOFF/log`
   - Backups `database-novo/backups/2026-03-27` e `2026-03-29` removidos
   - `db.config.json` + `generate-dashboard.cjs` + `dashboard.html` atualizados
   - HANDOFF.md (estado 05-05) + log.md
   - 11 files, +435 −87172

---

## 📋 RESUMO da sessão 2026-05-06

### Padrões consolidados nas 6 páginas Melissa restantes

Cada página agora segue o blueprint:

- **Subheader explicativo** logo abaixo do header (1-2 frases descrevendo a página + ações principais com `<strong>`)
- **Sidebar reestruturada** em 2 zonas:
  - `.xx-side` com `bg: var(--m-bg-soft)` + `border-right` (visual de coluna lateral)
  - `.xx-side__scroll` (flex 1, overflow auto) com cards `xx-w--side` (margin lateral 12px + sombra)
  - `.xx-side__footer` (flex-shrink 0, padding 12px, bg-soft, border-top) com botão **"Limpar filtros"** global
- **Xs inline** ao lado do título de cada filter card (vermelho 18×18, aparece só quando filtro ativo)
- **Transition `xx-clear`** no footer (fade + collapse 240ms)
- **Body sem padding/gap** (sidebar fica colada à esquerda; main column tem padding interno próprio)
- **Mobile drawer** com sidebar teleportada perde bg/border-right (drawer já tem chrome) + footer vira `position: sticky; bottom: 0` com bg blur

### Dialogs harmonizados (Tags / Grupos / Médicos)

Espelhando o pattern do **PatientsCadastroPage > Identidade**:

- **Section dividers**: `<span class="text-[0.7rem] font-bold uppercase tracking-widest text-[var(--p-primary-color)]">` + linha `h-px` primary-tinted
- **Cada campo**: `FloatLabel variant="on"` + `IconField` + `InputIcon` + InputText/Select com `variant="filled"`
- **Grid**: `grid grid-cols-1 gap-6 xl:grid-cols-2 mb-7`
- **Erro inline**: `<small class="text-red-500">` + `pi-exclamation-circle`
- **Footer**: Button PrimeVue padrão (Cancelar secondary text + Salvar com `pi-check`)
- **Bordas dos inputs**: padrão do PrimeVue (sem CSS scoped sobreescrevendo)

### Dialog "Pacientes vinculados" (Tags / Grupos / Médicos)

Pattern unificado:

- **Borda 2px na cor da entidade** (cor da tag/grupo via `:pt root style`); médicos usam `var(--p-primary-color)` (sem cor própria)
- **Header**: avatar quadrado/circular colorido + título com cor da entidade + sub com count
- **Toolbar**: search + count pill colorido
- **Estados**: loading (cor da entidade), erro (vermelho), empty (icon tinted), sem-resultado-de-busca
- **DataTable interna**: Paciente (avatar com iniciais primary-tinted + nome + email) / Telefone / Botão "Abrir" outlined
- **Click "Abrir"** → reusa `PatientCadastroDialog` com `:patient-id`
- **Sem footer "Fechar"** — o X do header é o único botão de fechar
- **X do header** estilizado como `.xx-close` (32×32, bg --m-bg-soft, border, hover bg-soft-hover) via `:pt="{ pcCloseButton: { root: { class: 'xx-pdlg-close-btn' } } }"` + CSS `:global()` (Dialog é teleportado pra body)

### ConversationDrawer redesign (estilo WhatsApp)

- **Header**: avatar circular 40×40 com iniciais + nome em destaque + sub (canal icon + número formatado mono)
- **Container de mensagens**: bg "papel de parede" (`color-mix` bege esverdeado WA + radial-gradient pattern de pontos)
- **Bolhas**:
  - Inbound light `#ffffff` / dark `#202c33` — top-left zerado simulando tail
  - Outbound light `#d9fdd3` / dark `#005c4b` — top-right zerado simulando tail
  - Padding `6/10/18/10` (extra bottom pra meta)
  - Border-radius 8px + sombra `0 1px 0.5px rgba(0,0,0,0.13)`
  - Detecção dark via `:global(.p-dark) / html.dark / [data-theme="dark"]`
- **Meta** (HH:MM + status checks): `position: absolute` no canto inferior direito DENTRO do balão
  - ✓ enviada / ✓✓ entregue / ✓✓ azul `#53bdeb` lida / ✗ vermelho falhou
- **Compose**:
  - Botões emoji + templates à esquerda do input
  - Textarea com `border-radius: 22px` (pill)
  - Botão **Send circular 40×40** verde `#00a884` (cor send WA), translate-up no hover

### Bug fix: cores de tags/grupos no MelissaPacientes

`patientsRepository.listGroups()` e `listTags()` mapeiam `cor → color` (camelCase frontend-friendly). O template do MelissaPacientes lia `g.cor` / `t.cor` (PT-BR) em **20 lugares** — sempre `undefined` → fallback caía no cinza/hex hardcoded. Trocado pra `g.color` / `t.color` via `replace_all`. Outros consumers (PatientsCadastroPage) já usavam `.color` correto, não foram afetados.

---

## 🛠️ Sessões dedicadas pendentes

### A66 — Refactor `AgendaEventDialog` V2 (3 sub-sessões)

**Estado**:
- ✅ Sub-sessão 1 (composables) — 5 composables + 265 testes, 495/495 suite passando, AgendaEventDialog 3522→2632 linhas (-25%)
- 🟡 Sub-sessão 2 (template V2) — esqueleto entregue 2026-05-05, **user não gostou do design**, aguarda feedback específico
- ⏳ Sub-sessão 3 (migração nos 9 consumers) — depende do V2 estabilizar

**Próxima ação**: user dá feedback design → eu itero V2.

Perguntas em aberto:
- Estrutura: 3 zonas (PACIENTE/QUANDO/O QUÊ) tá errado? Prefere 2 zonas? 1 coluna scroll? Tabs?
- Hierarquia: hero PACIENTE muito grande/pequeno?
- Densidade: airy demais ou apertado demais?
- Chips de duração/scope/status: muito visuais?
- Mobile: já testou viewport pequeno?
- Referência visual: Win11? Cleaner? Mais como V1? Algum app?

---

## ⏭️ PRÓXIMOS PASSOS (sugestão)

### 1. Restore arquivados na `PatientsListPage.vue` (layout Rail)

A `PatientsListPage.vue` tem KPI "Arquivados" mas SEM botão Restaurar. Replicar o pattern da MelissaPacientes:
- Helper `isArquivado(p)` (case-insensitive)
- Botão condicional ↶ "Restaurar" baseado em `p.status === 'Arquivado'`
- Click → confirm → `restorePatient(id, { tenantId })` do mesmo repository → toast + refetch
- Toggle visual: ↶ undo primary quando arquivado / 🗑 trash vermelho quando ativo

### 2. Decidir A66 V2 design

Aguarda feedback. Sem feedback, posso:
- Tentar uma direção alternativa (ex: 1 coluna scroll mais minimalista)
- Comparar com referências externas (Outlook, Cal.com, Linear)
- Voltar pro V1 polido em vez de redesenhar

### 3. Outras Melissa Pages?

Todas as 9 páginas tabulares Melissa já estão alinhadas ao blueprint:
- ✅ Cadastros Recebidos, Agendamentos Recebidos, Pacientes (Sprint E)
- ✅ Compromissos, Grupos, Tags, Médicos, Conversas, Recorrências (Sprint F)

Não há mais páginas pendentes do plano original.

---

## 📚 Tracking persistente

- **A66** — sub-sessão 2 (V2 design) aguardando feedback do user
- **Blueprint tabular Melissa** — referência canônica: `MelissaCadastrosRecebidos.vue`. Todas as 9 páginas alinhadas.
- **Restore pacientes** — implementado no Melissa; replicar no Rail (`PatientsListPage.vue`)
- **Migration aplicada local**: `20260504000001_fix_cancel_notifications_excluido.sql`. Já aplicada no DB local.

---

## 📦 Setup pra retomar

```powershell
# Limpa cache do Vite (recomendado depois de muita mudança em styles)
Remove-Item -Recurse -Force node_modules\.vite -ErrorAction SilentlyContinue

# Sobe dev
npm run dev

# Build sanity check (opcional, mas roda em ~25s)
npm run build
```

**Suite de testes** (495 testes incluindo o A66):
```powershell
npm run test
```

**Login**: user com `layout_variant=melissa` no profile pra testar
direto em `/melissa/...`. Pra testar Rail (regressão), troca em
`/account/profile` → terceiro card "Layout".

---

**Estado limpo, push pendente. Quando voltar, próximo passo natural é o feedback do A66 V2 ou o restore na PatientsListPage. Sua escolha.**