CRM WhatsApp Grupo 3 completo + Marco A/B (Asaas) + admin SaaS + refactors polimórficos

Sessão 11+: fechamento do CRM de WhatsApp com dois providers (Evolution/Twilio),
sistema de créditos com Asaas/PIX, polimorfismo de telefones/emails, e integração
admin SaaS no /saas/addons existente.

═══════════════════════════════════════════════════════════════════════════
GRUPO 3 — WORKFLOW / CRM (completo)
═══════════════════════════════════════════════════════════════════════════

3.1 Tags · migration conversation_tags + seed de 5 system tags · composable
useConversationTags.js · popover + pills no drawer e nos cards do Kanban.

3.2 Atribuição de conversa a terapeuta · migration 20260421000012 com PK
(tenant_id, thread_key), UPSERT, RLS que valida assignee como membro ativo
do mesmo tenant · view conversation_threads expandida com assigned_to +
assigned_at · composable useConversationAssignment.js · drawer com Select
filtrável + botão "Assumir" · inbox com filtro aside (Todas/Minhas/Não
atribuídas) e chip do responsável em cada card (destaca "Eu" em azul).

3.3 Notas internas · migration conversation_notes · composable + seção
colapsável no drawer · apenas o criador pode editar/apagar (RLS).

3.5 Converter desconhecido em paciente · botão + dialog quick-cadastro ·
"Vincular existente" com Select filter de até 500 pacientes · cria
telefone WhatsApp (vinculado) via upsertWhatsappForExisting.

3.6 Histórico de conversa no prontuário · nova aba "Conversas" em
PatientProntuario.vue · PatientConversationsTab.vue com stats (total /
recebidas / enviadas / primeira / última), SelectButton de filtro, timeline
com bolhas por direção, mídia inline (imagem/áudio/vídeo/doc via signed
URL), indicadores ✓ ✓✓ de delivery, botão "Abrir no CRM".

═══════════════════════════════════════════════════════════════════════════
MARCO A — UNIFICAÇÃO WHATSAPP (dois providers mutuamente exclusivos)
═══════════════════════════════════════════════════════════════════════════

- Página chooser ConfiguracoesWhatsappChooserPage.vue com 2 cards (Pessoal/
  Oficial), deactivate via edge function deactivate-notification-channel
- send-whatsapp-message refatorada com roteamento por provider; Twilio deduz
  1 crédito antes do envio e refunda em falha
- Paridade Twilio (novo): módulo compartilhado supabase/functions/_shared/
  whatsapp-hooks.ts com lógica provider-agnóstica (opt-in, opt-out, auto-
  reply, schedule helpers em TZ São Paulo, makeTwilioCreditedSendFn que
  envolve envio em dedução atômica + rollback). Consumido por Evolution E
  Twilio inbound. Evolution refatorado (~290 linhas duplicadas removidas).
- Bucket privado whatsapp-media · decrypt via Evolution getBase64From
  MediaMessage · upload com path tenant/yyyy/mm · signed URLs on-demand

═══════════════════════════════════════════════════════════════════════════
MARCO B — SISTEMA DE CRÉDITOS WHATSAPP + ASAAS
═══════════════════════════════════════════════════════════════════════════

Banco:
- Migration 20260421000007_whatsapp_credits (4 tabelas: balance,
  transactions, packages, purchases) + RPCs add_whatsapp_credits e
  deduct_whatsapp_credits (atômicas com SELECT FOR UPDATE)
- Migration 20260421000013_tenant_cpf_cnpj (coluna em tenants com CHECK
  de 11 ou 14 dígitos)

Edge functions:
- create-whatsapp-credit-charge · Asaas v3 (sandbox + prod) · PIX com
  QR code · getOrCreateAsaasCustomer patcha customer existente com CPF
  quando está faltando
- asaas-webhook · recebe PAYMENT_RECEIVED/CONFIRMED e credita balance

Frontend (tenant):
- Página /configuracoes/creditos-whatsapp com saldo + loja + histórico
- Dialog de confirmação com CPF/CNPJ (validação via isValidCPF/CNPJ de
  utils/validators, formatação on-blur, pré-fill de tenants.cpf_cnpj,
  persiste no primeiro uso) · fallback sandbox 24971563792 REMOVIDO
- Composable useWhatsappCredits extrai erros amigáveis via
  error.context.json()

Frontend (SaaS admin):
- Em /saas/addons (reuso do pattern existente, não criou página paralela):
  - Aba 4 "Pacotes WhatsApp" — CRUD whatsapp_credit_packages com DataTable,
    toggle is_active inline, dialog de edição com validação
  - Aba 5 "Topup WhatsApp" — tenant Select com saldo ao vivo · RPC
    add_whatsapp_credits com p_admin_id = auth.uid() (auditoria) · histórico
    das últimas 20 transações topup/adjustment/refund

═══════════════════════════════════════════════════════════════════════════
GRUPO 2 — AUTOMAÇÃO
═══════════════════════════════════════════════════════════════════════════

2.3 Auto-reply · conversation_autoreply_settings + conversation_autoreply_
log · 3 modos de schedule (agenda das regras semanais, business_hours
custom, custom_window) · cooldown por thread · respeita opt-out · agora
funciona em Evolution E Twilio (hooks compartilhados)

2.4 Lembretes de sessão · conversation_session_reminders_settings +
_logs · edge send-session-reminders (cron) · janelas 24h e 2h antes ·
Twilio deduz crédito com rollback em falha

═══════════════════════════════════════════════════════════════════════════
GRUPO 5 — COMPLIANCE (LGPD Art. 18 §2)
═══════════════════════════════════════════════════════════════════════════

5.2 Opt-out · conversation_optouts + conversation_optout_keywords (10 system
seed + custom por tenant) · detecção por regex word-boundary e normalização
(lowercase + strip acentos + pontuação) · ack automático (deduz crédito em
Twilio) · opt-in via "voltar", "retornar", "reativar", "restart" ·
página /configuracoes/conversas-optouts com CRUD de keywords

═══════════════════════════════════════════════════════════════════════════
REFACTOR POLIMÓRFICO — TELEFONES + EMAILS
═══════════════════════════════════════════════════════════════════════════

- contact_types + contact_phones (entity_type + entity_id) — migration
  20260421000008 · contact_email_types + contact_emails — 20260421000011
- Componentes ContactPhonesEditor.vue e ContactEmailsEditor.vue (add/edit/
  remove com confirm, primary selector, WhatsApp linked badge)
- Composables useContactPhones.js + useContactEmails.js com
  unsetOtherPrimaries() e validação
- Trocado em PatientsCadastroPage.vue e MedicosPage.vue (removidos campos
  legados telefone/telefone_alternativo e email_principal/email_alternativo)
- Migration retroativa v2 (20260421000010) detecta conversation_messages
  e cria/atualiza phone como WhatsApp vinculado

═══════════════════════════════════════════════════════════════════════════
POLIMENTO VISUAL + INFRA
═══════════════════════════════════════════════════════════════════════════

- Skeletons simplificados no dashboard do terapeuta
- Animações fade-up com stagger via [--delay:Xms] (fix specificity sobre
  .dash-card box-shadow transition)
- ConfirmDialog com group="conversation-drawer" (evita montagem duplicada)
- Image preview PrimeVue com botão de download injetado via MutationObserver
  (fetch + blob para funcionar cross-origin)
- Áudio/vídeo com preload="metadata" e controles de velocidade do browser
- friendlySendError() mapeia códigos do edge pra mensagens pt-BR via
  error.context.json()
- Teleport #cfg-page-actions para ações globais de Configurações
- Brotli/Gzip + auto-import Vue/PrimeVue + bundle analyzer
- AppLayout consolidado (removidas duplicatas por área) + RouterPassthrough
- Removido console.trace debug que estava em watch de router e queries
  Supabase (degradava perf pra todos)
- Realtime em conversation_messages via publication supabase_realtime
- Notifier global flutuante com beep + toggle mute (4 camadas: badge +
  sino + popup + browser notification)

═══════════════════════════════════════════════════════════════════════════
MIGRATIONS NOVAS (13)
═══════════════════════════════════════════════════════════════════════════

20260420000001_patient_intake_invite_info_rpc
20260420000002_audit_logs_lgpd
20260420000003_audit_logs_unified_view
20260420000004_lgpd_export_patient_rpc
20260420000005_conversation_messages
20260420000005_search_global_rpc
20260420000006_conv_messages_notifications
20260420000007_notif_channels_saas_admin_insert
20260420000008_conv_messages_realtime
20260420000009_conv_messages_delivery_status
20260421000001_whatsapp_media_bucket
20260421000002_conversation_notes
20260421000003_conversation_tags
20260421000004_conversation_autoreply
20260421000005_conversation_optouts
20260421000006_session_reminders
20260421000007_whatsapp_credits
20260421000008_contact_phones
20260421000009_retroactive_whatsapp_link
20260421000010_retroactive_whatsapp_link_v2
20260421000011_contact_emails
20260421000012_conversation_assignments
20260421000013_tenant_cpf_cnpj

═══════════════════════════════════════════════════════════════════════════
EDGE FUNCTIONS NOVAS / MODIFICADAS
═══════════════════════════════════════════════════════════════════════════

Novas:
- _shared/whatsapp-hooks.ts (módulo compartilhado)
- asaas-webhook
- create-whatsapp-credit-charge
- deactivate-notification-channel
- evolution-webhook-provision
- evolution-whatsapp-inbound
- get-intake-invite-info
- notification-webhook
- send-session-reminders
- send-whatsapp-message
- submit-patient-intake
- twilio-whatsapp-inbound

═══════════════════════════════════════════════════════════════════════════
FRONTEND — RESUMO
═══════════════════════════════════════════════════════════════════════════

Composables novos: useAddonExtrato, useAuditoria, useAutoReplySettings,
useClinicKPIs, useContactEmails, useContactPhones, useConversationAssignment,
useConversationNotes, useConversationOptouts, useConversationTags,
useConversations, useLgpdExport, useSessionReminders, useWhatsappCredits

Stores: conversationDrawerStore

Componentes novos: ConversationDrawer, GlobalInboundNotifier, GlobalSearch,
ContactEmailsEditor, ContactPhonesEditor

Páginas novas: CRMConversasPage, PatientConversationsTab, AddonsExtratoPage,
AuditoriaPage, NotificationsHistoryPage, ConfiguracoesWhatsappChooserPage,
ConfiguracoesConversasAutoreplyPage, ConfiguracoesConversasOptoutsPage,
ConfiguracoesConversasTagsPage, ConfiguracoesCreditosWhatsappPage,
ConfiguracoesLembretesSessaoPage

Utils novos: addonExtratoExport, auditoriaExport, excelExport,
lgpdExportFormats

Páginas existentes alteradas: ClinicDashboard, PatientsCadastroPage,
PatientCadastroDialog, PatientsListPage, MedicosPage, PatientProntuario,
ConfiguracoesWhatsappPage, SaasWhatsappPage, ConfiguracoesRecursosExtrasPage,
ConfiguracoesPage, AgendaTerapeutaPage, AgendaClinicaPage, NotificationItem,
NotificationDrawer, AppLayout, AppTopbar, useMenuBadges,
patientsRepository, SaasAddonsPage (aba 4 + 5 WhatsApp)

Routes: routes.clinic, routes.configs, routes.therapist atualizados
Menus: clinic.menu, therapist.menu, saas.menu atualizados

═══════════════════════════════════════════════════════════════════════════
NOTAS

- Após subir, rodar supabase functions serve --no-verify-jwt
  --env-file supabase/functions/.env pra carregar o módulo _shared
- WHATSAPP_SETUP.md reescrito (~400 linhas) com setup completo dos 3
  providers + troubleshooting + LGPD
- HANDOFF.md atualizado com estado atual e próximos passos

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/ui/ContactEmailsEditor.vue

@@ -0,0 +1,248 @@
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI — Editor de emails polimórfico
+|--------------------------------------------------------------------------
+| Uso:
+|   <ContactEmailsEditor entity-type="patient" :entity-id="patient.id" />
+|--------------------------------------------------------------------------
+-->
+<script setup>
+import { ref, onMounted, watch, reactive } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
+import { useContactEmails } from '@/composables/useContactEmails';
+
+const props = defineProps({
+    entityType: { type: String, required: true },
+    entityId: { type: String, required: false, default: null },
+    readonly: { type: Boolean, default: false },
+    confirmGroup: { type: String, default: '' }
+});
+
+const emit = defineEmits(['change']);
+
+const toast = useToast();
+const confirm = useConfirm();
+const api = useContactEmails();
+
+const showAddForm = ref(false);
+const newForm = reactive({ contact_email_type_id: null, email: '', notes: '' });
+
+function openAddForm() {
+    const defaultType = api.typeBySlug('principal') || api.types.value[0];
+    newForm.contact_email_type_id = defaultType?.id || null;
+    newForm.email = '';
+    newForm.notes = '';
+    showAddForm.value = true;
+}
+
+function cancelAddForm() {
+    showAddForm.value = false;
+}
+
+async function submitAddForm() {
+    if (!newForm.contact_email_type_id || !newForm.email.trim()) return;
+    const res = await api.addEmail(props.entityType, props.entityId, {
+        contact_email_type_id: newForm.contact_email_type_id,
+        email: newForm.email,
+        is_primary: api.emails.value.length === 0,
+        notes: newForm.notes || null
+    });
+    if (res.ok) {
+        showAddForm.value = false;
+        toast.add({ severity: 'success', summary: 'Email adicionado', life: 1800 });
+        emit('change', api.emails.value);
+    } else {
+        toast.add({ severity: 'error', summary: 'Erro', detail: res.error, life: 3500 });
+    }
+}
+
+const editingId = ref(null);
+const editForm = reactive({ contact_email_type_id: null, email: '', notes: '' });
+
+function startEdit(email) {
+    editingId.value = email.id;
+    editForm.contact_email_type_id = email.contact_email_type_id;
+    editForm.email = email.email;
+    editForm.notes = email.notes || '';
+}
+
+function cancelEdit() {
+    editingId.value = null;
+}
+
+async function saveEdit(email) {
+    const res = await api.updateEmail(props.entityType, props.entityId, email.id, {
+        contact_email_type_id: editForm.contact_email_type_id,
+        email: editForm.email,
+        notes: editForm.notes.trim() || null
+    });
+    if (res.ok) {
+        editingId.value = null;
+        toast.add({ severity: 'success', summary: 'Email atualizado', life: 1800 });
+        emit('change', api.emails.value);
+    } else {
+        toast.add({ severity: 'error', summary: 'Erro', detail: res.error, life: 3500 });
+    }
+}
+
+async function setPrimary(email) {
+    if (email.is_primary) return;
+    const res = await api.setPrimary(props.entityType, props.entityId, email.id);
+    if (res.ok) {
+        toast.add({ severity: 'success', summary: 'Email principal atualizado', life: 1800 });
+        emit('change', api.emails.value);
+    }
+}
+
+function confirmRemove(email) {
+    const typeName = api.typeById(email.contact_email_type_id)?.name || 'email';
+    confirm.require({
+        group: props.confirmGroup || undefined,
+        message: `Remover este ${typeName}${email.is_primary ? ' (principal)' : ''}?`,
+        header: 'Remover email',
+        icon: 'pi pi-exclamation-triangle',
+        acceptClass: 'p-button-danger',
+        acceptLabel: 'Remover',
+        rejectLabel: 'Cancelar',
+        accept: async () => {
+            const res = await api.removeEmail(props.entityType, props.entityId, email.id);
+            if (res.ok) {
+                toast.add({ severity: 'success', summary: 'Removido', life: 1800 });
+                emit('change', api.emails.value);
+            } else {
+                toast.add({ severity: 'error', summary: 'Erro', detail: res.error, life: 3500 });
+            }
+        }
+    });
+}
+
+onMounted(async () => {
+    await api.loadTypes();
+    if (props.entityId) await api.loadEmails(props.entityType, props.entityId);
+});
+
+watch(() => props.entityId, async (v) => {
+    if (v) await api.loadEmails(props.entityType, v);
+    else api.emails.value = [];
+});
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <div class="text-[0.7rem] text-[var(--text-color-secondary)] flex items-start gap-1.5 px-1">
+            <i class="pi pi-info-circle text-sky-500 mt-0.5 shrink-0" />
+            <span>
+                Marque um email como <strong>principal</strong> — ele é usado pra
+                <strong>envio de faturas, templates e notificações por email</strong>.
+            </span>
+        </div>
+
+        <div v-if="api.loading.value" class="text-xs text-center py-3 text-[var(--text-color-secondary)]">
+            <i class="pi pi-spin pi-spinner mr-1" /> Carregando…
+        </div>
+
+        <div v-else-if="!api.emails.value.length && !showAddForm" class="text-xs text-center py-4 italic text-[var(--text-color-secondary)] border border-dashed border-[var(--surface-border)] rounded-md">
+            Nenhum email cadastrado.
+        </div>
+
+        <div v-else class="flex flex-col gap-1.5">
+            <div
+                v-for="email in api.emails.value"
+                :key="email.id"
+                class="flex items-center gap-2 p-2 rounded-md border border-[var(--surface-border)]"
+                :class="email.is_primary ? 'bg-[var(--primary-color)]/5 border-[var(--primary-color)]/30' : 'bg-[var(--surface-card)]'"
+            >
+                <template v-if="editingId !== email.id">
+                    <div class="w-8 h-8 rounded grid place-items-center shrink-0 bg-[var(--surface-ground)]">
+                        <i :class="api.typeById(email.contact_email_type_id)?.icon || 'pi pi-envelope'" class="text-sm text-[var(--text-color-secondary)]" />
+                    </div>
+
+                    <div class="flex-1 min-w-0 flex flex-col gap-0.5">
+                        <div class="flex items-center gap-1.5 flex-wrap">
+                            <span class="text-xs font-semibold text-[var(--text-color-secondary)]">{{ api.typeById(email.contact_email_type_id)?.name || 'Email' }}</span>
+                            <span v-if="email.is_primary" class="inline-flex items-center px-1.5 py-px rounded-full text-[0.6rem] font-bold uppercase tracking-wide bg-[var(--primary-color)] text-white">Principal</span>
+                        </div>
+                        <a :href="`mailto:${email.email}`" class="text-sm font-mono truncate text-[var(--primary-color)] hover:underline" @click.stop>{{ email.email }}</a>
+                        <span v-if="email.notes" class="text-[0.7rem] italic text-[var(--text-color-secondary)]">{{ email.notes }}</span>
+                    </div>
+
+                    <div v-if="!readonly" class="flex items-center gap-0.5 shrink-0">
+                        <Button v-if="!email.is_primary" icon="pi pi-star" text size="small" class="h-7 w-7" v-tooltip.top="'Marcar como principal'" :disabled="api.saving.value" @click="setPrimary(email)" />
+                        <Button icon="pi pi-pencil" text size="small" class="h-7 w-7" v-tooltip.top="'Editar'" :disabled="api.saving.value" @click="startEdit(email)" />
+                        <Button icon="pi pi-trash" text severity="danger" size="small" class="h-7 w-7" v-tooltip.top="'Remover'" :disabled="api.saving.value" @click="confirmRemove(email)" />
+                    </div>
+                </template>
+
+                <template v-else>
+                    <div class="flex flex-col gap-1.5 flex-1 min-w-0">
+                        <div class="flex items-center gap-1.5 flex-wrap">
+                            <Select
+                                v-model="editForm.contact_email_type_id"
+                                :options="api.types.value"
+                                optionLabel="name"
+                                optionValue="id"
+                                class="text-xs"
+                                style="width: 140px"
+                                appendTo="body"
+                            >
+                                <template #option="slotProps">
+                                    <div class="flex items-center gap-1.5">
+                                        <i :class="slotProps.option.icon || 'pi pi-envelope'" class="text-xs" />
+                                        <span>{{ slotProps.option.name }}</span>
+                                    </div>
+                                </template>
+                            </Select>
+                            <InputText v-model="editForm.email" type="email" class="flex-1 text-sm font-mono" style="min-width: 200px" />
+                        </div>
+                        <InputText v-model="editForm.notes" placeholder="Observação (opcional)" class="w-full text-xs" :maxlength="200" />
+                    </div>
+                    <div class="flex items-center gap-0.5 shrink-0">
+                        <Button icon="pi pi-check" severity="primary" size="small" class="h-7 w-7" v-tooltip.top="'Salvar'" :loading="api.saving.value" @click="saveEdit(email)" />
+                        <Button icon="pi pi-times" severity="secondary" text size="small" class="h-7 w-7" v-tooltip.top="'Cancelar'" :disabled="api.saving.value" @click="cancelEdit" />
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <div v-if="showAddForm" class="flex flex-col gap-2 p-2 rounded-md border border-dashed border-[var(--primary-color)]/50 bg-[var(--primary-color)]/5">
+            <div class="flex items-center gap-1.5 flex-wrap">
+                <Select
+                    v-model="newForm.contact_email_type_id"
+                    :options="api.types.value"
+                    optionLabel="name"
+                    optionValue="id"
+                    class="text-xs"
+                    style="width: 140px"
+                    appendTo="body"
+                >
+                    <template #option="slotProps">
+                        <div class="flex items-center gap-1.5">
+                            <i :class="slotProps.option.icon || 'pi pi-envelope'" class="text-xs" />
+                            <span>{{ slotProps.option.name }}</span>
+                        </div>
+                    </template>
+                </Select>
+                <InputText v-model="newForm.email" type="email" placeholder="nome@exemplo.com" class="flex-1 text-sm font-mono" style="min-width: 200px" autofocus />
+            </div>
+            <InputText v-model="newForm.notes" placeholder="Observação (opcional)" class="w-full text-xs" :maxlength="200" />
+            <div class="flex items-center gap-1 justify-end">
+                <Button label="Cancelar" severity="secondary" text size="small" :disabled="api.saving.value" @click="cancelAddForm" />
+                <Button label="Adicionar" icon="pi pi-check" size="small" :loading="api.saving.value" :disabled="!newForm.contact_email_type_id || !newForm.email.trim()" @click="submitAddForm" />
+            </div>
+        </div>
+
+        <Button
+            v-if="!readonly && !showAddForm"
+            label="Adicionar email"
+            icon="pi pi-plus"
+            severity="secondary"
+            outlined
+            size="small"
+            class="self-start rounded-full"
+            :disabled="!props.entityId"
+            v-tooltip.right="!props.entityId ? 'Salve o cadastro primeiro pra adicionar emails' : null"
+            @click="openAddForm"
+        />
+    </div>
+</template>