Analytics 7.1: tempo médio de 1ª resposta WhatsApp no dashboard
Card novo pra clínica e terapeuta com 3 métricas + sparkline: - Tempo médio (e mediana) de 1ª resposta no período - Taxa de SLA cumprido — % de respostas dentro do threshold configurado - Contagem total de respostas no período - Sparkline da evolução com indicador de tendência (melhorando/piorando) - Ranking top 5 terapeutas (só no ClinicDashboard) Filtro de período: 7/30/90 dias (muda granularidade do bucket: 1/7/15 dias pra sparkline com ~5-6 pontos). Banco (migration 20260423000006): - Helper interno _first_response_runs: identifica "runs" de inbound (sequências do paciente sem outbound entre) e calcula delta até a próxima outbound. Evita contar múltiplas mensagens repetidas do paciente. responder_id vem de conversation_assignments. - first_response_stats: agregados (count, avg, median, min, max, sla_compliance_rate baseado em conversation_sla_rules). - first_response_by_therapist: ranking com avg e count por assigned_to. - first_response_evolution: série temporal com bucket alinhado a p_from (p_from + bucket_index * N days). Parâmetro p_bucket_days deixa o frontend escolher granularidade por período. Todas SECURITY DEFINER + GRANT authenticated/service_role. Filtro opcional por therapist_id nas funções que aplicam. Frontend: - useFirstResponseAnalytics composable wraps as 3 RPCs com cache via Promise.all paralelo. Helper formatSeconds (Ns/Xmin/Xh). - FirstResponseCard.vue renderiza sparkline SVG nativo (sem lib extra), cor da taxa SLA por threshold (verde ≥80%, âmbar ≥50%, vermelho). - Integrado em ClinicDashboard (visão global) e TherapistDashboard (filtrado por ownerId, sem ranking). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
@@ -0,0 +1,175 @@
|
||||
<!--
|
||||
|--------------------------------------------------------------------------
|
||||
| Agência PSI — Card de analytics: Tempo médio de 1ª resposta WhatsApp
|
||||
|--------------------------------------------------------------------------
|
||||
| Usado em ClinicDashboard (global do tenant) e TherapistDashboard
|
||||
| (filtrado por user.id). 3 métricas + sparkline de evolução.
|
||||
|--------------------------------------------------------------------------
|
||||
-->
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useFirstResponseAnalytics } from '@/composables/useFirstResponseAnalytics';
|
||||
|
||||
const props = defineProps({
|
||||
therapistId: { type: String, default: null }, // se passar, filtra por user_id
|
||||
showRanking: { type: Boolean, default: true } // desliga ranking (usado no therapist dashboard)
|
||||
});
|
||||
|
||||
const api = useFirstResponseAnalytics();
|
||||
|
||||
const period = ref('30d');
|
||||
|
||||
const PERIOD_OPTIONS = [
|
||||
{ label: '7 dias', value: '7d' },
|
||||
{ label: '30 dias', value: '30d' },
|
||||
{ label: '90 dias', value: '90d' }
|
||||
];
|
||||
|
||||
async function reload() {
|
||||
await api.loadAll({ period: period.value, therapistId: props.therapistId });
|
||||
}
|
||||
|
||||
// Sparkline: pega avg_seconds por bucket, normaliza pra 0..1
|
||||
const sparkPoints = computed(() => {
|
||||
const buckets = api.evolution.value || [];
|
||||
if (buckets.length < 2) return '';
|
||||
const values = buckets.map((b) => Number(b.avg_seconds) || 0);
|
||||
const max = Math.max(...values);
|
||||
const min = Math.min(...values);
|
||||
const range = max - min || 1;
|
||||
const width = 100;
|
||||
const height = 32;
|
||||
return buckets
|
||||
.map((b, i) => {
|
||||
const x = (i / (buckets.length - 1)) * width;
|
||||
const normalized = ((Number(b.avg_seconds) || 0) - min) / range;
|
||||
// Inverte Y (SVG cresce pra baixo) e deixa margem
|
||||
const y = height - (normalized * (height - 4)) - 2;
|
||||
return `${x.toFixed(2)},${y.toFixed(2)}`;
|
||||
})
|
||||
.join(' ');
|
||||
});
|
||||
|
||||
const sparkTrend = computed(() => {
|
||||
const buckets = api.evolution.value || [];
|
||||
if (buckets.length < 2) return null;
|
||||
const first = Number(buckets[0].avg_seconds) || 0;
|
||||
const last = Number(buckets[buckets.length - 1].avg_seconds) || 0;
|
||||
if (first === 0) return null;
|
||||
const pct = ((last - first) / first) * 100;
|
||||
return { pct: Math.round(pct), improving: last < first };
|
||||
});
|
||||
|
||||
// Formata SLA %: se null/undefined → "—"
|
||||
const slaComplianceLabel = computed(() => {
|
||||
const rate = api.stats.value?.sla_compliance_rate;
|
||||
if (rate === null || rate === undefined) return '—';
|
||||
return `${rate}%`;
|
||||
});
|
||||
|
||||
const slaComplianceColor = computed(() => {
|
||||
const rate = Number(api.stats.value?.sla_compliance_rate);
|
||||
if (!rate && rate !== 0) return 'text-[var(--text-color-secondary)]';
|
||||
if (rate >= 80) return 'text-emerald-600';
|
||||
if (rate >= 50) return 'text-amber-600';
|
||||
return 'text-red-600';
|
||||
});
|
||||
|
||||
onMounted(reload);
|
||||
watch(() => [period.value, props.therapistId], reload);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dash-card rounded-md overflow-hidden">
|
||||
<div class="dash-card__head gap-2.5 p-3 flex items-center">
|
||||
<div class="grid place-items-center w-10 h-10 rounded-md shrink-0 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
|
||||
<i class="pi pi-stopwatch text-lg" />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="dash-card__title">Tempo de 1ª resposta</div>
|
||||
<div class="dash-card__sub">{{ therapistId ? 'Suas respostas no WhatsApp' : 'Respostas da clínica no WhatsApp' }}</div>
|
||||
</div>
|
||||
<Select v-model="period" :options="PERIOD_OPTIONS" optionLabel="label" optionValue="value" class="!text-xs" :pt="{ root: { style: 'width: 7rem' } }" />
|
||||
</div>
|
||||
|
||||
<div class="p-3 flex flex-col gap-3">
|
||||
<!-- Loading state -->
|
||||
<div v-if="api.loading.value" class="flex justify-center py-6">
|
||||
<ProgressSpinner style="width: 32px; height: 32px" />
|
||||
</div>
|
||||
|
||||
<!-- Sem dados -->
|
||||
<div v-else-if="!api.hasData.value" class="text-center py-6 text-sm text-[var(--text-color-secondary)]">
|
||||
<i class="pi pi-inbox text-2xl opacity-40 block mb-2" />
|
||||
Sem respostas registradas no período.
|
||||
</div>
|
||||
|
||||
<!-- Métricas -->
|
||||
<template v-else>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<div class="rounded-md border border-[var(--surface-border)] p-2.5 flex flex-col">
|
||||
<span class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)]">Média</span>
|
||||
<span class="text-lg font-bold">{{ api.formatSeconds(api.stats.value?.avg_seconds) }}</span>
|
||||
<span class="text-[0.65rem] text-[var(--text-color-secondary)]">mediana {{ api.formatSeconds(api.stats.value?.median_seconds) }}</span>
|
||||
</div>
|
||||
<div class="rounded-md border border-[var(--surface-border)] p-2.5 flex flex-col">
|
||||
<span class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)]">SLA cumprido</span>
|
||||
<span class="text-lg font-bold" :class="slaComplianceColor">{{ slaComplianceLabel }}</span>
|
||||
<span class="text-[0.65rem] text-[var(--text-color-secondary)]">
|
||||
<template v-if="api.stats.value?.sla_threshold_seconds">
|
||||
≤ {{ Math.round(api.stats.value.sla_threshold_seconds / 60) }}min
|
||||
</template>
|
||||
<template v-else>SLA desativado</template>
|
||||
</span>
|
||||
</div>
|
||||
<div class="rounded-md border border-[var(--surface-border)] p-2.5 flex flex-col">
|
||||
<span class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)]">Respostas</span>
|
||||
<span class="text-lg font-bold">{{ api.stats.value?.runs_count }}</span>
|
||||
<span class="text-[0.65rem] text-[var(--text-color-secondary)]">no período</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sparkline -->
|
||||
<div v-if="sparkPoints" class="flex items-center gap-3 border-t border-[var(--surface-border)] pt-2">
|
||||
<svg viewBox="0 0 100 32" preserveAspectRatio="none" class="h-8 flex-1">
|
||||
<polyline
|
||||
:points="sparkPoints"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
:class="sparkTrend?.improving ? 'text-emerald-500' : 'text-orange-500'"
|
||||
/>
|
||||
</svg>
|
||||
<div v-if="sparkTrend" class="flex flex-col items-end text-[0.7rem] leading-tight">
|
||||
<span :class="sparkTrend.improving ? 'text-emerald-600' : 'text-orange-600'" class="font-semibold">
|
||||
{{ sparkTrend.improving ? '↓' : '↑' }} {{ Math.abs(sparkTrend.pct) }}%
|
||||
</span>
|
||||
<span class="text-[var(--text-color-secondary)]">
|
||||
{{ sparkTrend.improving ? 'melhorando' : 'piorando' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ranking (só clínica) -->
|
||||
<div v-if="showRanking && api.ranking.value.length > 0" class="border-t border-[var(--surface-border)] pt-2">
|
||||
<div class="text-[0.65rem] uppercase tracking-wide text-[var(--text-color-secondary)] mb-1.5">Ranking terapeutas</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div v-for="(t, i) in api.ranking.value.slice(0, 5)" :key="t.therapist_id"
|
||||
class="flex items-center justify-between text-xs py-1 px-1.5 rounded hover:bg-[var(--surface-hover)]">
|
||||
<span class="flex items-center gap-2 min-w-0 flex-1">
|
||||
<span class="font-mono text-[0.65rem] text-[var(--text-color-secondary)] w-4">{{ i + 1 }}.</span>
|
||||
<span class="font-mono text-[0.68rem] truncate">{{ t.therapist_id.slice(0, 8) }}…</span>
|
||||
</span>
|
||||
<span class="flex items-center gap-2 text-[var(--text-color-secondary)]">
|
||||
<span>{{ t.runs_count }}</span>
|
||||
<span class="font-mono">{{ api.formatSeconds(t.avg_seconds) }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,106 @@
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Agência PSI
|
||||
|--------------------------------------------------------------------------
|
||||
| Arquivo: src/composables/useFirstResponseAnalytics.js
|
||||
|
|
||||
| Wrapper das 3 RPCs de analytics de tempo de 1ª resposta:
|
||||
| - first_response_stats (agregados do período)
|
||||
| - first_response_by_therapist (ranking)
|
||||
| - first_response_evolution (série temporal)
|
||||
|
|
||||
| Filtros: period ('7d' | '30d' | '90d') + therapist_id opcional.
|
||||
|--------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import { ref, computed } from 'vue';
|
||||
import { supabase } from '@/lib/supabase/client';
|
||||
import { useTenantStore } from '@/stores/tenantStore';
|
||||
|
||||
const PERIOD_DAYS = { '7d': 7, '30d': 30, '90d': 90 };
|
||||
const BUCKET_BY_PERIOD = { '7d': 1, '30d': 7, '90d': 15 };
|
||||
|
||||
export function useFirstResponseAnalytics() {
|
||||
const tenantStore = useTenantStore();
|
||||
|
||||
const stats = ref(null);
|
||||
const ranking = ref([]);
|
||||
const evolution = ref([]);
|
||||
const loading = ref(false);
|
||||
const error = ref(null);
|
||||
|
||||
async function loadAll({ period = '30d', therapistId = null } = {}) {
|
||||
const tenantId = tenantStore.activeTenantId;
|
||||
if (!tenantId) return;
|
||||
|
||||
const days = PERIOD_DAYS[period] || 30;
|
||||
const bucketDays = BUCKET_BY_PERIOD[period] || 7;
|
||||
const to = new Date();
|
||||
const from = new Date(Date.now() - days * 24 * 3600 * 1000);
|
||||
const fromIso = from.toISOString();
|
||||
const toIso = to.toISOString();
|
||||
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const [sRes, rRes, eRes] = await Promise.all([
|
||||
supabase.rpc('first_response_stats', {
|
||||
p_tenant_id: tenantId,
|
||||
p_from: fromIso,
|
||||
p_to: toIso,
|
||||
p_therapist_id: therapistId
|
||||
}),
|
||||
supabase.rpc('first_response_by_therapist', {
|
||||
p_tenant_id: tenantId,
|
||||
p_from: fromIso,
|
||||
p_to: toIso
|
||||
}),
|
||||
supabase.rpc('first_response_evolution', {
|
||||
p_tenant_id: tenantId,
|
||||
p_from: fromIso,
|
||||
p_to: toIso,
|
||||
p_bucket_days: bucketDays,
|
||||
p_therapist_id: therapistId
|
||||
})
|
||||
]);
|
||||
|
||||
if (sRes.error) throw sRes.error;
|
||||
if (rRes.error) throw rRes.error;
|
||||
if (eRes.error) throw eRes.error;
|
||||
|
||||
stats.value = Array.isArray(sRes.data) ? (sRes.data[0] || null) : sRes.data;
|
||||
ranking.value = rRes.data || [];
|
||||
evolution.value = eRes.data || [];
|
||||
} catch (e) {
|
||||
error.value = e;
|
||||
stats.value = null;
|
||||
ranking.value = [];
|
||||
evolution.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Helpers de formatação
|
||||
function formatSeconds(s) {
|
||||
const n = Number(s) || 0;
|
||||
if (n < 60) return `${n}s`;
|
||||
if (n < 3600) return `${Math.floor(n / 60)}min`;
|
||||
const h = Math.floor(n / 3600);
|
||||
const m = Math.floor((n % 3600) / 60);
|
||||
return m > 0 ? `${h}h ${m}min` : `${h}h`;
|
||||
}
|
||||
|
||||
const hasData = computed(() => (stats.value?.runs_count || 0) > 0);
|
||||
|
||||
return {
|
||||
stats,
|
||||
ranking,
|
||||
evolution,
|
||||
loading,
|
||||
error,
|
||||
hasData,
|
||||
loadAll,
|
||||
formatSeconds
|
||||
};
|
||||
}
|
||||
@@ -22,6 +22,7 @@ import Menu from 'primevue/menu';
|
||||
import { supabase } from '@/lib/supabase/client';
|
||||
import { useTenantStore } from '@/stores/tenantStore';
|
||||
import { useClinicKPIs } from '@/composables/useClinicKPIs';
|
||||
import FirstResponseCard from '@/components/dashboard/FirstResponseCard.vue';
|
||||
|
||||
// Fase 3a — KPIs financeiros/operacionais da clínica
|
||||
const kpis = useClinicKPIs();
|
||||
@@ -953,6 +954,9 @@ onMounted(async () => {
|
||||
<div class="dash-card__foot" @click="$router.push('/admin/agendamentos-recebidos')">Ver todas →</div>
|
||||
</div>
|
||||
|
||||
<!-- Analytics: tempo de 1ª resposta WhatsApp -->
|
||||
<FirstResponseCard v-if="!loading" />
|
||||
|
||||
<!-- Cadastros externos -->
|
||||
<div v-if="!loading" class="dash-card">
|
||||
<div class="dash-card__head gap-2.5 p-2.5">
|
||||
|
||||
@@ -26,6 +26,7 @@ import { useAgendaEvents } from '@/features/agenda/composables/useAgendaEvents';
|
||||
import AgendaEventDialog from '@/features/agenda/components/AgendaEventDialog.vue';
|
||||
import { useDeterminedCommitments } from '@/features/agenda/composables/useDeterminedCommitments';
|
||||
import PatientProntuario from '@/features/patients/prontuario/PatientProntuario.vue';
|
||||
import FirstResponseCard from '@/components/dashboard/FirstResponseCard.vue';
|
||||
|
||||
const dashHeroSentinelRef = ref(null);
|
||||
const heroStuck = ref(false);
|
||||
@@ -1082,6 +1083,11 @@ onMounted(async () => {
|
||||
<div class="dash-card__foot" @click="$router.push('/therapist/agendamentos-recebidos')">Ver todas →</div>
|
||||
</div>
|
||||
|
||||
<!-- Analytics: tempo de 1ª resposta WhatsApp (minhas) -->
|
||||
<div id="card-first-response" class="anim-child [--delay:40ms]">
|
||||
<FirstResponseCard :therapistId="ownerId" :showRanking="false" />
|
||||
</div>
|
||||
|
||||
<!-- Cadastros externos -->
|
||||
<div id="card-cadastros" class="anim-child [--delay:80ms] dash-card">
|
||||
<div class="dash-card__head gap-2.5 p-2.5">
|
||||
|
||||
Reference in New Issue
Block a user