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,434 @@
+<!--
+|--------------------------------------------------------------------------
+| Agência PSI
+|--------------------------------------------------------------------------
+| Criado e desenvolvido por Leonardo Nohama
+|
+| Tecnologia aplicada à escuta.
+| Estrutura para o cuidado.
+|
+| Arquivo: src/layout/configuracoes/AuditoriaPage.vue
+| Data: 2026
+| Local: São Carlos/SP — Brasil
+|--------------------------------------------------------------------------
+| © 2026 — Todos os direitos reservados
+|--------------------------------------------------------------------------
+-->
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { supabase } from '@/lib/supabase/client';
+import { useTenantStore } from '@/stores/tenantStore';
+import { useAuditoria } from '@/composables/useAuditoria';
+import { downloadAuditCSV, downloadAuditPDF, auditFormatters, sourceLabel, entityLabel } from '@/utils/auditoriaExport';
+import { downloadExcel } from '@/utils/excelExport';
+
+const toast = useToast();
+const tenantStore = useTenantStore();
+
+const { rows, filters, dateRange, loading, summary, userDisplay, load } = useAuditoria();
+
+const tenantName = ref('');
+const exportingPdf = ref(false);
+
+// detalhes do evento clicado
+const detailDialog = ref(false);
+const selectedEvent = ref(null);
+
+// ── opções dos filtros ──────────────────────────────────────────────────
+
+const periodOptions = [
+    { label: 'Hoje', value: 'today' },
+    { label: 'Últimos 7 dias', value: 'last7' },
+    { label: 'Últimos 30 dias', value: 'last30' },
+    { label: 'Últimos 90 dias', value: 'last90' },
+    { label: 'Personalizado', value: 'custom' }
+];
+
+const sourceOptions = [
+    { label: 'Auditoria (CRUD)', value: 'audit_logs' },
+    { label: 'Acesso a documentos', value: 'document_access_logs' },
+    { label: 'Status de paciente', value: 'patient_status_history' },
+    { label: 'Notificações', value: 'notification_logs' },
+    { label: 'Recursos extras', value: 'addon_transactions' }
+];
+
+const entityOptions = [
+    { label: 'Paciente', value: 'patients' },
+    { label: 'Evento de agenda', value: 'agenda_eventos' },
+    { label: 'Registro financeiro', value: 'financial_records' },
+    { label: 'Documento', value: 'documents' },
+    { label: 'Membro do tenant', value: 'tenant_members' },
+    { label: 'Documento (acesso)', value: 'document' },
+    { label: 'Notificação', value: 'notification' },
+    { label: 'Status de paciente', value: 'patient_status' },
+    { label: 'Transação de recurso', value: 'addon_transaction' }
+];
+
+const actionOptions = [
+    { label: 'Criou', value: 'insert' },
+    { label: 'Alterou', value: 'update' },
+    { label: 'Excluiu', value: 'delete' },
+    { label: 'Visualizou', value: 'visualizou' },
+    { label: 'Baixou', value: 'baixou' },
+    { label: 'Imprimiu', value: 'imprimiu' },
+    { label: 'Compartilhou', value: 'compartilhou' },
+    { label: 'Assinou', value: 'assinou' },
+    { label: 'Status alterado', value: 'status_change' },
+    { label: 'Compra', value: 'purchase' },
+    { label: 'Consumo', value: 'consumption' }
+];
+
+// ── labels ─────────────────────────────────────────────────────────────
+
+const periodLabel = computed(() => {
+    const preset = periodOptions.find((p) => p.value === filters.value.periodPreset)?.label ?? '';
+    const { from, to } = dateRange.value;
+    const fmt = (d) => new Date(d).toLocaleDateString('pt-BR');
+    return `${preset} (${fmt(from)} → ${fmt(to)})`;
+});
+
+function sourceSeverity(src) {
+    const map = {
+        audit_logs: 'info',
+        document_access_logs: 'secondary',
+        patient_status_history: 'warning',
+        notification_logs: 'success',
+        addon_transactions: 'help'
+    };
+    return map[src] || 'secondary';
+}
+
+function actionSeverity(action) {
+    if (['delete', 'failed', 'bounced'].includes(action)) return 'danger';
+    if (['insert', 'sent', 'delivered', 'purchase'].includes(action)) return 'success';
+    if (['update', 'status_change'].includes(action)) return 'warning';
+    return 'info';
+}
+
+// ── ações ──────────────────────────────────────────────────────────────
+
+async function reload() {
+    await load();
+}
+
+function openDetails(ev) {
+    selectedEvent.value = ev;
+    detailDialog.value = true;
+}
+
+function prettyJson(obj) {
+    if (!obj) return '';
+    try {
+        return JSON.stringify(obj, null, 2);
+    } catch {
+        return String(obj);
+    }
+}
+
+function slugify(s) {
+    if (!s) return 'clinica';
+    return (
+        String(s)
+            .toLowerCase()
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/(^-|-$)/g, '')
+            .slice(0, 40) || 'clinica'
+    );
+}
+
+function filenameBase() {
+    const now = new Date();
+    const ym = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
+    return `auditoria-${slugify(tenantName.value)}-${ym}`;
+}
+
+function onExportCSV() {
+    try {
+        downloadAuditCSV(rows.value, summary.value, periodLabel.value, userDisplay, `${filenameBase()}.csv`);
+        toast.add({ severity: 'success', summary: 'CSV gerado', detail: `${summary.value.totalRows} evento(s) exportado(s).`, life: 3000 });
+    } catch (err) {
+        toast.add({ severity: 'error', summary: 'Falha ao gerar CSV', detail: err?.message || 'Erro inesperado', life: 5000 });
+    }
+}
+
+async function onExportPDF() {
+    if (exportingPdf.value) return;
+    exportingPdf.value = true;
+    try {
+        await downloadAuditPDF(rows.value, summary.value, periodLabel.value, tenantName.value, userDisplay, `${filenameBase()}.pdf`);
+        toast.add({ severity: 'success', summary: 'PDF gerado', detail: `${summary.value.totalRows} evento(s) exportado(s).`, life: 3000 });
+    } catch (err) {
+        toast.add({ severity: 'error', summary: 'Falha ao gerar PDF', detail: err?.message || 'Erro inesperado', life: 5000 });
+    } finally {
+        exportingPdf.value = false;
+    }
+}
+
+async function onExportExcel() {
+    try {
+        await downloadExcel({
+            filename: `${filenameBase()}.xlsx`,
+            sheetName: 'Auditoria',
+            headers: [
+                { key: 'occurred_at', label: 'Data/Hora', type: 'date', width: 20 },
+                { key: 'source_label', label: 'Origem', type: 'text', width: 18 },
+                { key: 'entity_label', label: 'Entidade', type: 'text', width: 18 },
+                { key: 'entity_id', label: 'ID entidade', type: 'text', width: 38 },
+                { key: 'action', label: 'Ação', type: 'text', width: 14 },
+                { key: 'description', label: 'Descrição', type: 'text', width: 60 },
+                { key: 'user_display', label: 'Usuário', type: 'text', width: 24 }
+            ],
+            rows: rows.value.map((r) => ({
+                ...r,
+                source_label: sourceLabel(r.source),
+                entity_label: entityLabel(r.entity_type),
+                user_display: userDisplay(r.user_id)
+            })),
+            footerRows: [
+                ['Período', periodLabel.value],
+                ['Total de registros', summary.value.totalRows],
+                ['Usuários distintos', summary.value.distinctUsers]
+            ]
+        });
+        toast.add({ severity: 'success', summary: 'Excel gerado', detail: `${summary.value.totalRows} evento(s) exportado(s).`, life: 3000 });
+    } catch (err) {
+        toast.add({ severity: 'error', summary: 'Falha ao gerar Excel', detail: err?.message || 'Erro inesperado', life: 5000 });
+    }
+}
+
+async function loadTenantName() {
+    const tenantId = tenantStore.activeTenantId;
+    if (!tenantId) return;
+    const { data } = await supabase.from('tenants').select('name').eq('id', tenantId).maybeSingle();
+    tenantName.value = data?.name || '';
+}
+
+onMounted(async () => {
+    await loadTenantName();
+    await reload();
+});
+
+watch(
+    () => tenantStore.activeTenantId,
+    async () => {
+        await loadTenantName();
+        await reload();
+    }
+);
+</script>
+
+<template>
+    <div class="flex flex-col gap-5">
+        <!-- Header -->
+        <Card>
+            <template #title>
+                <div class="flex items-center gap-2">
+                    <i class="pi pi-shield text-xl" />
+                    Auditoria da Clínica
+                </div>
+            </template>
+            <template #subtitle>
+                Registro imutável de operações de tratamento. Exigido pela <strong>LGPD Art. 37</strong>. Use para responder solicitações do titular ou investigar inconsistências.
+            </template>
+        </Card>
+
+        <!-- Filtros -->
+        <Card>
+            <template #content>
+                <div class="grid grid-cols-1 md:grid-cols-12 gap-3">
+                    <div class="md:col-span-3">
+                        <label class="text-xs font-medium text-surface-500 mb-1 block">Período</label>
+                        <Select v-model="filters.periodPreset" :options="periodOptions" optionLabel="label" optionValue="value" class="w-full" @change="reload" />
+                    </div>
+
+                    <div v-if="filters.periodPreset === 'custom'" class="md:col-span-4">
+                        <label class="text-xs font-medium text-surface-500 mb-1 block">Intervalo personalizado</label>
+                        <DatePicker v-model="filters.customRange" selectionMode="range" dateFormat="dd/mm/yy" :manualInput="false" showIcon class="w-full" @update:model-value="reload" />
+                    </div>
+
+                    <div class="md:col-span-3">
+                        <label class="text-xs font-medium text-surface-500 mb-1 block">Origem</label>
+                        <MultiSelect v-model="filters.sources" :options="sourceOptions" optionLabel="label" optionValue="value" placeholder="Todas" class="w-full" display="chip" :maxSelectedLabels="2" @change="reload" />
+                    </div>
+
+                    <div class="md:col-span-3">
+                        <label class="text-xs font-medium text-surface-500 mb-1 block">Tipo de entidade</label>
+                        <MultiSelect v-model="filters.entityTypes" :options="entityOptions" optionLabel="label" optionValue="value" placeholder="Todas" class="w-full" display="chip" :maxSelectedLabels="2" @change="reload" />
+                    </div>
+
+                    <div class="md:col-span-3">
+                        <label class="text-xs font-medium text-surface-500 mb-1 block">Ação</label>
+                        <MultiSelect v-model="filters.actions" :options="actionOptions" optionLabel="label" optionValue="value" placeholder="Todas" class="w-full" display="chip" :maxSelectedLabels="2" @change="reload" />
+                    </div>
+
+                    <div class="md:col-span-6">
+                        <label class="text-xs font-medium text-surface-500 mb-1 block">Buscar (descrição, entidade, ação, usuário)</label>
+                        <IconField>
+                            <InputIcon class="pi pi-search" />
+                            <InputText v-model="filters.search" placeholder="ex: paciente, login, email..." class="w-full" maxlength="120" />
+                        </IconField>
+                    </div>
+
+                    <div class="md:col-span-6 flex items-end gap-2">
+                        <Button label="Atualizar" icon="pi pi-refresh" severity="secondary" outlined @click="reload" :loading="loading" />
+                        <Button label="Exportar CSV" icon="pi pi-file" severity="secondary" @click="onExportCSV" :disabled="!rows.length" />
+                        <Button label="Exportar Excel" icon="pi pi-file-excel" severity="secondary" @click="onExportExcel" :disabled="!rows.length" />
+                        <Button label="Exportar PDF" icon="pi pi-file-pdf" severity="secondary" @click="onExportPDF" :disabled="!rows.length" :loading="exportingPdf" />
+                    </div>
+                </div>
+            </template>
+        </Card>
+
+        <!-- Resumo -->
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <Card>
+                <template #content>
+                    <div class="flex flex-col">
+                        <span class="text-xs text-surface-500 uppercase tracking-wide">Eventos no período</span>
+                        <span class="text-2xl font-bold mt-1">{{ summary.totalRows }}</span>
+                    </div>
+                </template>
+            </Card>
+            <Card>
+                <template #content>
+                    <div class="flex flex-col">
+                        <span class="text-xs text-surface-500 uppercase tracking-wide">Usuários distintos</span>
+                        <span class="text-2xl font-bold mt-1">{{ summary.distinctUsers }}</span>
+                    </div>
+                </template>
+            </Card>
+            <Card>
+                <template #content>
+                    <div class="flex flex-col">
+                        <span class="text-xs text-surface-500 uppercase tracking-wide">CRUD (criar/alterar/excluir)</span>
+                        <span class="text-2xl font-bold mt-1">
+                            {{ (summary.byAction.insert || 0) + (summary.byAction.update || 0) + (summary.byAction.delete || 0) }}
+                        </span>
+                    </div>
+                </template>
+            </Card>
+            <Card>
+                <template #content>
+                    <div class="flex flex-col">
+                        <span class="text-xs text-surface-500 uppercase tracking-wide">Acessos a documento</span>
+                        <span class="text-2xl font-bold mt-1">{{ summary.bySource.document_access_logs || 0 }}</span>
+                    </div>
+                </template>
+            </Card>
+        </div>
+
+        <!-- Tabela -->
+        <Card>
+            <template #content>
+                <DataTable
+                    :value="rows"
+                    :loading="loading"
+                    size="small"
+                    stripedRows
+                    paginator
+                    :rows="25"
+                    :rowsPerPageOptions="[10, 25, 50, 100, 200]"
+                    sortField="occurred_at"
+                    :sortOrder="-1"
+                    emptyMessage="Nenhum evento auditado no período. Ajuste os filtros."
+                    :pt="{
+                        bodyRow: ({ context }) => ({ class: 'cursor-pointer hover:bg-primary/5' })
+                    }"
+                    @row-click="(ev) => openDetails(ev.data)"
+                >
+                    <Column field="occurred_at" header="Data/Hora" style="min-width: 160px" sortable>
+                        <template #body="{ data }">{{ auditFormatters.fmtDate(data.occurred_at) }}</template>
+                    </Column>
+
+                    <Column field="source" header="Origem" style="width: 140px" sortable>
+                        <template #body="{ data }">
+                            <Tag :value="auditFormatters.sourceLabel(data.source)" :severity="sourceSeverity(data.source)" />
+                        </template>
+                    </Column>
+
+                    <Column field="entity_type" header="Entidade" style="width: 130px" sortable>
+                        <template #body="{ data }">{{ auditFormatters.entityLabel(data.entity_type) }}</template>
+                    </Column>
+
+                    <Column field="action" header="Ação" style="width: 120px" sortable>
+                        <template #body="{ data }">
+                            <Tag :value="data.action" :severity="actionSeverity(data.action)" />
+                        </template>
+                    </Column>
+
+                    <Column field="description" header="Descrição">
+                        <template #body="{ data }">
+                            <span class="text-sm">{{ data.description || '—' }}</span>
+                        </template>
+                    </Column>
+
+                    <Column field="user_id" header="Usuário" style="width: 180px">
+                        <template #body="{ data }">
+                            <span class="text-xs">{{ userDisplay(data.user_id) }}</span>
+                        </template>
+                    </Column>
+                </DataTable>
+            </template>
+        </Card>
+
+        <!-- Dialog de detalhes -->
+        <Dialog
+            v-model:visible="detailDialog"
+            modal
+            :draggable="false"
+            :closable="true"
+            :dismissableMask="true"
+            maximizable
+            class="dc-dialog w-[60rem]"
+            :breakpoints="{ '1199px': '92vw', '768px': '96vw' }"
+            header="Detalhes do evento"
+        >
+            <div v-if="selectedEvent" class="flex flex-col gap-3">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
+                    <div><strong>Data/Hora:</strong> {{ auditFormatters.fmtDate(selectedEvent.occurred_at) }}</div>
+                    <div><strong>Origem:</strong> {{ auditFormatters.sourceLabel(selectedEvent.source) }}</div>
+                    <div><strong>Entidade:</strong> {{ auditFormatters.entityLabel(selectedEvent.entity_type) }}</div>
+                    <div><strong>Ação:</strong> {{ selectedEvent.action }}</div>
+                    <div><strong>ID da entidade:</strong> <span class="font-mono text-xs">{{ selectedEvent.entity_id || '—' }}</span></div>
+                    <div><strong>Usuário:</strong> {{ userDisplay(selectedEvent.user_id) }}</div>
+                </div>
+
+                <Divider />
+
+                <div>
+                    <strong class="text-sm">Descrição:</strong>
+                    <p class="text-sm mt-1">{{ selectedEvent.description }}</p>
+                </div>
+
+                <div v-if="selectedEvent.details && selectedEvent.details.changed_fields?.length">
+                    <strong class="text-sm">Campos alterados:</strong>
+                    <div class="flex flex-wrap gap-1 mt-1">
+                        <Tag v-for="f in selectedEvent.details.changed_fields" :key="f" :value="f" severity="warning" />
+                    </div>
+                </div>
+
+                <div v-if="selectedEvent.details?.old_values">
+                    <strong class="text-sm">Estado anterior:</strong>
+                    <pre class="text-xs bg-surface-50 p-2 rounded border border-surface-200 overflow-auto max-h-64 mt-1">{{ prettyJson(selectedEvent.details.old_values) }}</pre>
+                </div>
+
+                <div v-if="selectedEvent.details?.new_values">
+                    <strong class="text-sm">Estado novo:</strong>
+                    <pre class="text-xs bg-surface-50 p-2 rounded border border-surface-200 overflow-auto max-h-64 mt-1">{{ prettyJson(selectedEvent.details.new_values) }}</pre>
+                </div>
+
+                <div v-if="selectedEvent.details && !selectedEvent.details.old_values && !selectedEvent.details.new_values">
+                    <strong class="text-sm">Metadados:</strong>
+                    <pre class="text-xs bg-surface-50 p-2 rounded border border-surface-200 overflow-auto max-h-64 mt-1">{{ prettyJson(selectedEvent.details) }}</pre>
+                </div>
+            </div>
+
+            <template #footer>
+                <Button label="Fechar" icon="pi pi-times" text @click="detailDialog = false" />
+            </template>
+        </Dialog>
+    </div>
+</template>