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/features/patients/prontuario/PatientConversationsTab.vue

@@ -0,0 +1,221 @@
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI — Histórico de conversas na ficha do paciente (CRM 3.6)
+|--------------------------------------------------------------------------
+-->
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { supabase } from '@/lib/supabase/client';
+import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
+import { formatDistanceToNow, format } from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+
+const props = defineProps({
+    patientId: { type: String, required: true },
+    patientName: { type: String, default: '' }
+});
+
+const drawerStore = useConversationDrawerStore();
+const loading = ref(false);
+const messages = ref([]);
+const mediaUrls = ref({});
+const filter = ref('all'); // all | inbound | outbound
+
+const CHANNEL_ICON = {
+    whatsapp: 'pi pi-whatsapp',
+    sms: 'pi pi-comment',
+    email: 'pi pi-envelope'
+};
+
+async function load() {
+    if (!props.patientId) return;
+    loading.value = true;
+    try {
+        const { data, error } = await supabase
+            .from('conversation_messages')
+            .select('id, channel, direction, from_number, to_number, body, media_url, media_mime, provider, kanban_status, received_at, created_at, responded_at, delivery_status')
+            .eq('patient_id', props.patientId)
+            .order('created_at', { ascending: true })
+            .limit(500);
+        if (error) throw error;
+        messages.value = data || [];
+        // Resolve signed URLs pra mídia do bucket
+        for (const m of messages.value) {
+            if (m.media_url && !/^https?:\/\//i.test(m.media_url)) {
+                const { data: signed } = await supabase.storage.from('whatsapp-media').createSignedUrl(m.media_url, 3600);
+                if (signed?.signedUrl) mediaUrls.value[m.id] = signed.signedUrl;
+            } else if (m.media_url) {
+                mediaUrls.value[m.id] = m.media_url;
+            }
+        }
+    } catch (e) {
+        console.error('[PatientConversationsTab] load:', e?.message);
+        messages.value = [];
+    } finally {
+        loading.value = false;
+    }
+}
+
+const stats = computed(() => {
+    const total = messages.value.length;
+    const inbound = messages.value.filter((m) => m.direction === 'inbound').length;
+    const outbound = messages.value.filter((m) => m.direction === 'outbound').length;
+    const first = messages.value[0]?.created_at || null;
+    const last = messages.value[messages.value.length - 1]?.created_at || null;
+    const channels = new Set(messages.value.map((m) => m.channel));
+    return { total, inbound, outbound, first, last, channels: [...channels] };
+});
+
+const filtered = computed(() => {
+    if (filter.value === 'all') return messages.value;
+    return messages.value.filter((m) => m.direction === filter.value);
+});
+
+function fmtTime(iso) {
+    if (!iso) return '';
+    try {
+        return format(new Date(iso), "dd 'de' MMM HH:mm", { locale: ptBR });
+    } catch { return ''; }
+}
+function fmtRelative(iso) {
+    if (!iso) return '';
+    try {
+        return formatDistanceToNow(new Date(iso), { addSuffix: true, locale: ptBR });
+    } catch { return ''; }
+}
+
+function isImage(mime) { return !!mime && mime.startsWith('image/'); }
+function isAudio(mime) { return !!mime && mime.startsWith('audio/'); }
+function isVideo(mime) { return !!mime && mime.startsWith('video/'); }
+
+function openInDrawer() {
+    drawerStore.openForPatient(props.patientId);
+}
+
+onMounted(() => { load(); });
+watch(() => props.patientId, () => { load(); });
+</script>
+
+<template>
+    <div class="flex flex-col gap-3 p-2">
+        <!-- Header com stats + ação -->
+        <div class="flex items-start justify-between gap-3 flex-wrap">
+            <div class="flex items-center gap-4 flex-wrap">
+                <div class="flex flex-col">
+                    <span class="text-[0.7rem] uppercase tracking-wider font-semibold text-[var(--text-color-secondary)]">Mensagens</span>
+                    <span class="text-xl font-bold leading-none">{{ stats.total }}</span>
+                </div>
+                <div class="h-8 w-px bg-[var(--surface-border)]" />
+                <div class="flex flex-col">
+                    <span class="text-[0.7rem] uppercase tracking-wider font-semibold text-[var(--text-color-secondary)]">Recebidas</span>
+                    <span class="text-base font-bold text-green-600 leading-none">{{ stats.inbound }}</span>
+                </div>
+                <div class="flex flex-col">
+                    <span class="text-[0.7rem] uppercase tracking-wider font-semibold text-[var(--text-color-secondary)]">Enviadas</span>
+                    <span class="text-base font-bold text-sky-600 leading-none">{{ stats.outbound }}</span>
+                </div>
+                <div v-if="stats.first" class="flex flex-col">
+                    <span class="text-[0.7rem] uppercase tracking-wider font-semibold text-[var(--text-color-secondary)]">Primeira</span>
+                    <span class="text-xs leading-tight">{{ fmtTime(stats.first) }}</span>
+                </div>
+                <div v-if="stats.last" class="flex flex-col">
+                    <span class="text-[0.7rem] uppercase tracking-wider font-semibold text-[var(--text-color-secondary)]">Última</span>
+                    <span class="text-xs leading-tight">{{ fmtRelative(stats.last) }}</span>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-2">
+                <SelectButton
+                    v-model="filter"
+                    :options="[
+                        { label: 'Todas', value: 'all' },
+                        { label: 'Recebidas', value: 'inbound' },
+                        { label: 'Enviadas', value: 'outbound' }
+                    ]"
+                    optionLabel="label"
+                    optionValue="value"
+                    :allowEmpty="false"
+                    size="small"
+                />
+                <Button
+                    label="Abrir no CRM"
+                    icon="pi pi-external-link"
+                    severity="primary"
+                    size="small"
+                    class="rounded-full"
+                    :disabled="!messages.length"
+                    v-tooltip.top="'Abre o drawer de conversa com histórico completo + compose'"
+                    @click="openInDrawer"
+                />
+            </div>
+        </div>
+
+        <!-- Loading -->
+        <div v-if="loading" class="flex flex-col gap-2">
+            <Skeleton v-for="n in 5" :key="n" height="4rem" class="rounded-md" />
+        </div>
+
+        <!-- Empty -->
+        <div v-else-if="!messages.length" class="flex flex-col items-center justify-center gap-2 py-12 text-center text-[var(--text-color-secondary)]">
+            <i class="pi pi-comments text-4xl opacity-30" />
+            <div class="text-sm">Nenhuma conversa registrada com este paciente ainda.</div>
+            <div class="text-xs opacity-70">
+                Quando {{ props.patientName || 'o paciente' }} enviar uma mensagem pelo WhatsApp (ou você enviar uma), vai aparecer aqui.
+            </div>
+        </div>
+
+        <!-- Timeline -->
+        <div v-else class="flex flex-col gap-1.5">
+            <div
+                v-for="m in filtered"
+                :key="m.id"
+                class="flex gap-2 items-start p-2 rounded-md border"
+                :class="m.direction === 'inbound'
+                    ? 'bg-[var(--surface-ground)] border-[var(--surface-border)]'
+                    : 'bg-emerald-500/5 border-emerald-500/20'"
+            >
+                <div class="w-7 h-7 rounded-full grid place-items-center shrink-0"
+                    :class="m.direction === 'inbound' ? 'bg-sky-500/15 text-sky-500' : 'bg-emerald-500/15 text-emerald-600'">
+                    <i :class="m.direction === 'inbound' ? 'pi pi-arrow-down' : 'pi pi-arrow-up'" class="text-[0.7rem]" />
+                </div>
+
+                <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-1.5 text-[0.68rem] text-[var(--text-color-secondary)] mb-0.5 flex-wrap">
+                        <i :class="CHANNEL_ICON[m.channel] || 'pi pi-comment'" class="text-[0.65rem]" />
+                        <span class="font-semibold">{{ m.direction === 'inbound' ? 'Paciente' : 'Clínica' }}</span>
+                        <span class="opacity-50">·</span>
+                        <span>{{ fmtTime(m.created_at) }}</span>
+                        <span v-if="m.direction === 'outbound' && m.delivery_status === 'read'" class="text-sky-500" v-tooltip.top="'Lida'">
+                            <i class="pi pi-check-double text-[0.6rem]" />
+                        </span>
+                        <span v-else-if="m.direction === 'outbound' && m.delivery_status === 'delivered'" v-tooltip.top="'Entregue'">
+                            <i class="pi pi-check-double text-[0.6rem] opacity-60" />
+                        </span>
+                    </div>
+
+                    <!-- Mídia -->
+                    <template v-if="m.media_url">
+                        <div v-if="!mediaUrls[m.id]" class="text-xs italic text-[var(--text-color-secondary)]">
+                            <i class="pi pi-spin pi-spinner mr-1" /> carregando mídia…
+                        </div>
+                        <template v-else>
+                            <img v-if="isImage(m.media_mime)" :src="mediaUrls[m.id]" class="max-w-[200px] rounded-md mt-0.5" />
+                            <audio v-else-if="isAudio(m.media_mime)" :src="mediaUrls[m.id]" controls preload="metadata" class="block max-w-full mt-0.5" />
+                            <video v-else-if="isVideo(m.media_mime)" :src="mediaUrls[m.id]" controls class="max-w-[260px] rounded-md mt-0.5" />
+                            <a v-else :href="mediaUrls[m.id]" target="_blank" rel="noopener" class="text-xs underline text-[var(--primary-color)]">
+                                <i class="pi pi-paperclip text-[0.6rem] mr-1" />Baixar anexo
+                            </a>
+                        </template>
+                    </template>
+
+                    <div v-if="m.body" class="text-sm whitespace-pre-wrap break-words">{{ m.body }}</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Footer info -->
+        <div v-if="messages.length && messages.length >= 500" class="text-[0.7rem] text-center italic text-[var(--text-color-secondary)] py-2">
+            Exibindo as últimas 500 mensagens. Abra no CRM pra navegar na conversa completa.
+        </div>
+    </div>
+</template>

src/features/patients/prontuario/PatientProntuario.vue

@@ -28,6 +28,7 @@ import { useToast } from 'primevue/usetoast';
 import { supabase } from '@/lib/supabase/client';
 
 import DocumentsListPage from '@/features/documents/DocumentsListPage.vue';
+import PatientConversationsTab from './PatientConversationsTab.vue';
 
 // ── PROPS / EMITS ──────────────────────────────────────────────
 const props = defineProps({
@@ -68,6 +69,7 @@ const mainTabs = [
     { label: 'Agenda',     icon: 'pi pi-calendar' },
     { label: 'Financeiro', icon: 'pi pi-wallet' },
     { label: 'Documentos', icon: 'pi pi-folder' },
+    { label: 'Conversas',  icon: 'pi pi-whatsapp' },
 ];
 
 // ── ACCORDION DA ABA PERFIL ────────────────────────────────────
@@ -1109,6 +1111,12 @@ Tags: ${(tags.value || []).map(t => t.name).filter(Boolean).join(', ') || '—'}
                             embedded
                         />
                     </div>
+                    <div v-show="activeTab === 5" class="p-2">
+                        <PatientConversationsTab
+                            :patient-id="patient?.id"
+                            :patient-name="patient?.nome_completo || patient?.nome_social || ''"
+                        />
+                    </div>
 
                 </main>
             </div>