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>
2026-04-23 07:05:24 -03:00
parent 037ba3721f
commit 2644e60bb6
191 changed files with 38629 additions and 3756 deletions
@@ -0,0 +1,372 @@
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI — GlobalInboundNotifier
+|--------------------------------------------------------------------------
+| Componente global que escuta INSERTs de conversation_messages (direction
+| inbound) e mostra card flutuante no canto inferior direito, além de tocar
+| som opcional. Mesmo estando em outra tela, o usuário é avisado da nova
+| mensagem e pode clicar "Abrir" pra ir direto à conversa.
+|
+| Monta uma vez em AppLayout.
+|--------------------------------------------------------------------------
+-->
+<script setup>
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+import { supabase } from '@/lib/supabase/client';
+import { useTenantStore } from '@/stores/tenantStore';
+import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
+import { logEvent, logError } from '@/support/supportLogger';
+
+const LOG_SRC = 'GlobalInboundNotifier';
+
+const tenantStore = useTenantStore();
+const drawerStore = useConversationDrawerStore();
+
+const activeNotifs = ref([]); // array de popups ativos
+let channel = null;
+
+const SOUND_KEY = 'agenciapsi.inbound_sound_enabled';
+const soundEnabled = ref(true);
+
+function loadSoundPref() {
+    try {
+        soundEnabled.value = localStorage.getItem(SOUND_KEY) !== 'false';
+    } catch { soundEnabled.value = true; }
+}
+
+function toggleSound() {
+    soundEnabled.value = !soundEnabled.value;
+    try {
+        localStorage.setItem(SOUND_KEY, soundEnabled.value ? 'true' : 'false');
+    } catch {}
+}
+
+function playBeep() {
+    if (!soundEnabled.value) return;
+    try {
+        // WebAudio API — beep sintético de 2 tons curtos
+        const ctx = new (window.AudioContext || window.webkitAudioContext)();
+        const now = ctx.currentTime;
+        function tone(freq, start, dur, vol = 0.15) {
+            const osc = ctx.createOscillator();
+            const gain = ctx.createGain();
+            osc.type = 'sine';
+            osc.frequency.value = freq;
+            gain.gain.setValueAtTime(0, now + start);
+            gain.gain.linearRampToValueAtTime(vol, now + start + 0.01);
+            gain.gain.exponentialRampToValueAtTime(0.001, now + start + dur);
+            osc.connect(gain).connect(ctx.destination);
+            osc.start(now + start);
+            osc.stop(now + start + dur);
+        }
+        tone(880, 0, 0.12);
+        tone(1320, 0.14, 0.12);
+        // Fecha o context após som
+        setTimeout(() => { try { ctx.close(); } catch {} }, 500);
+    } catch {
+        // se WebAudio falhar (sem interação prévia, etc), apenas ignora
+    }
+}
+
+function truncate(s, n = 80) {
+    if (!s) return '';
+    const str = String(s).replace(/\s+/g, ' ').trim();
+    return str.length > n ? str.slice(0, n - 1) + '…' : str;
+}
+
+async function showNotif(msg) {
+    logEvent(LOG_SRC, 'showNotif chamado', { id: msg.id, from: msg.from_number });
+    // Se o drawer dessa thread já está aberto, não notifica (o user já vê)
+    if (drawerStore.isOpen && drawerStore.messageBelongsToCurrentThread(msg)) {
+        logEvent(LOG_SRC, 'suprimido: drawer aberto na thread', { id: msg.id });
+        return;
+    }
+    // Se está na rota /conversas com aba visível, também não notifica (já tá no Kanban)
+    const onConversasRoute = typeof window !== 'undefined' && String(window.location.pathname).includes('/conversas');
+    if (onConversasRoute && document.visibilityState === 'visible') {
+        logEvent(LOG_SRC, 'suprimido: na rota /conversas visível', { id: msg.id });
+        return;
+    }
+
+    let name = msg.from_number || 'Desconhecido';
+    if (msg.patient_id) {
+        const { data } = await supabase.from('patients').select('nome_completo').eq('id', msg.patient_id).maybeSingle();
+        if (data?.nome_completo) name = data.nome_completo;
+    }
+
+    const notif = {
+        id: msg.id,
+        name,
+        body: msg.body || (msg.media_url ? '[mídia]' : ''),
+        patient_id: msg.patient_id,
+        from_number: msg.from_number,
+        channel: msg.channel
+    };
+
+    activeNotifs.value.push(notif);
+    logEvent(LOG_SRC, 'popup push', { total: activeNotifs.value.length });
+    playBeep();
+
+    setTimeout(() => dismiss(notif.id), 10000);
+}
+
+function dismiss(id) {
+    activeNotifs.value = activeNotifs.value.filter(n => n.id !== id);
+}
+
+async function openNotif(notif) {
+    dismiss(notif.id);
+    if (notif.patient_id) {
+        await drawerStore.openForPatient(notif.patient_id);
+    } else {
+        // thread anônima (número não vinculado a paciente)
+        await drawerStore.openForThread({
+            thread_key: `anon:${notif.from_number}`,
+            tenant_id: tenantStore.activeTenantId,
+            patient_id: null,
+            patient_name: null,
+            contact_number: notif.from_number,
+            channel: notif.channel,
+            message_count: 1,
+            unread_count: 1,
+            kanban_status: 'awaiting_us',
+            last_message_at: new Date().toISOString()
+        });
+    }
+}
+
+function channelIcon(ch) {
+    const map = { whatsapp: 'pi-whatsapp', sms: 'pi-comment', email: 'pi-envelope' };
+    return map[ch] || 'pi-bell';
+}
+
+function subscribe() {
+    const tenantId = tenantStore.activeTenantId;
+    if (!tenantId) {
+        logEvent(LOG_SRC, 'subscribe skipped — sem tenant');
+        return;
+    }
+    if (channel) supabase.removeChannel(channel);
+    logEvent(LOG_SRC, 'subscribing', { tenantId });
+    channel = supabase
+        .channel(`global_inbound_${tenantId}_${Date.now()}`)
+        .on(
+            'postgres_changes',
+            {
+                event: 'INSERT',
+                schema: 'public',
+                table: 'conversation_messages',
+                filter: `tenant_id=eq.${tenantId}`
+            },
+            (payload) => {
+                const m = payload.new;
+                logEvent(LOG_SRC, 'INSERT recebido', {
+                    id: m.id,
+                    direction: m.direction,
+                    from: m.from_number,
+                    preview: m.body?.slice(0, 40)
+                });
+                if (m.direction !== 'inbound') {
+                    logEvent(LOG_SRC, 'ignorando (não é inbound)', { direction: m.direction });
+                    return;
+                }
+                showNotif(m);
+            }
+        )
+        .subscribe((status) => {
+            logEvent(LOG_SRC, 'channel status', { status });
+        });
+}
+
+function unsubscribe() {
+    if (channel) {
+        supabase.removeChannel(channel);
+        channel = null;
+    }
+}
+
+onMounted(() => {
+    loadSoundPref();
+    subscribe();
+});
+
+onUnmounted(() => unsubscribe());
+
+watch(() => tenantStore.activeTenantId, () => subscribe());
+
+// expõe toggle pra quem quiser usar (ex: na aside do CRM)
+defineExpose({ soundEnabled, toggleSound });
+</script>
+
+<template>
+    <div class="global-notif-container" aria-live="polite">
+        <TransitionGroup name="notif-slide" tag="div" class="flex flex-col gap-2">
+            <div
+                v-for="n in activeNotifs"
+                :key="n.id"
+                class="global-notif-card"
+                role="alert"
+            >
+                <div class="notif-icon" :class="n.channel === 'whatsapp' ? 'text-emerald-600 bg-emerald-500/10' : 'text-blue-600 bg-blue-500/10'">
+                    <i :class="['pi', channelIcon(n.channel)]" />
+                </div>
+                <div class="notif-body">
+                    <div class="notif-header">
+                        <span class="notif-name">{{ n.name }}</span>
+                        <span class="notif-channel">{{ n.channel === 'whatsapp' ? 'WhatsApp' : n.channel }}</span>
+                    </div>
+                    <div class="notif-preview">{{ truncate(n.body, 80) }}</div>
+                </div>
+                <div class="notif-actions">
+                    <Button label="Abrir" size="small" severity="success" class="!text-xs" @click="openNotif(n)" />
+                    <button class="notif-close" title="Dispensar" @click="dismiss(n.id)">
+                        <i class="pi pi-times" />
+                    </button>
+                </div>
+            </div>
+        </TransitionGroup>
+
+        <!-- Toggle de som (mini, aparece se tem notificação ou pode ficar sempre visível) -->
+        <button
+            v-if="activeNotifs.length > 0"
+            class="sound-toggle"
+            :title="soundEnabled ? 'Som ativado (clique pra desativar)' : 'Som desativado'"
+            @click="toggleSound"
+        >
+            <i :class="soundEnabled ? 'pi pi-volume-up' : 'pi pi-volume-off'" />
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.global-notif-container {
+    position: fixed;
+    bottom: 1.25rem;
+    right: 1.25rem;
+    z-index: 1000;
+    pointer-events: none;
+    width: min(380px, calc(100vw - 2rem));
+}
+
+.global-notif-card {
+    pointer-events: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    background: var(--surface-card, #fff);
+    border: 1px solid var(--surface-border, #e5e7eb);
+    border-radius: 10px;
+    padding: 0.75rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 3px 10px rgba(0, 0, 0, 0.08);
+}
+
+.notif-icon {
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    font-size: 1rem;
+}
+
+.notif-body {
+    flex: 1;
+    min-width: 0;
+}
+
+.notif-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
+}
+
+.notif-name {
+    font-weight: 600;
+    font-size: 0.875rem;
+    color: var(--text-color, #111827);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.notif-channel {
+    font-size: 0.65rem;
+    padding: 0 0.35rem;
+    background: var(--surface-ground, #f3f4f6);
+    color: var(--text-color-secondary, #6b7280);
+    border-radius: 999px;
+    flex-shrink: 0;
+}
+
+.notif-preview {
+    font-size: 0.8rem;
+    color: var(--text-color-secondary, #6b7280);
+    line-height: 1.3;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.notif-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    align-items: center;
+}
+
+.notif-close {
+    width: 1.75rem;
+    height: 1.75rem;
+    border: none;
+    background: transparent;
+    color: var(--text-color-secondary, #6b7280);
+    border-radius: 50%;
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+    font-size: 0.75rem;
+    transition: background 0.15s;
+}
+.notif-close:hover {
+    background: var(--surface-ground, #f3f4f6);
+}
+
+.sound-toggle {
+    pointer-events: auto;
+    margin-top: 0.5rem;
+    align-self: flex-end;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    border: 1px solid var(--surface-border, #e5e7eb);
+    background: var(--surface-card, #fff);
+    color: var(--text-color-secondary, #6b7280);
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+    font-size: 0.75rem;
+}
+.sound-toggle:hover {
+    background: var(--surface-ground, #f3f4f6);
+    color: var(--text-color, #111827);
+}
+
+/* Animação de entrada/saída */
+.notif-slide-enter-active {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.notif-slide-leave-active {
+    transition: all 0.2s ease-in;
+}
+.notif-slide-enter-from {
+    transform: translateX(400px);
+    opacity: 0;
+}
+.notif-slide-leave-to {
+    transform: translateX(400px);
+    opacity: 0;
+}
+</style>