542 lines
21 KiB
Vue
542 lines
21 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
|
import { useToast } from 'primevue/usetoast'
|
|
import { supabase } from '@/lib/supabase/client'
|
|
import {
|
|
createSupportSession,
|
|
listActiveSupportSessions,
|
|
listSessionHistory,
|
|
revokeSupportSession,
|
|
buildSupportUrl,
|
|
} from '@/support/supportSessionService'
|
|
|
|
const TAG = '[SaasSupportPage]'
|
|
const toast = useToast()
|
|
|
|
// ── Tabs ──────────────────────────────────────────────────────────────────────
|
|
const activeTab = ref(0)
|
|
|
|
// ── Estado — Nova Sessão ──────────────────────────────────────────────────────
|
|
const selectedTenantId = ref(null)
|
|
const ttlMinutes = ref(60)
|
|
const sessionNote = ref('')
|
|
const creating = ref(false)
|
|
const generatedUrl = ref(null)
|
|
const generatedData = ref(null)
|
|
|
|
// ── Estado — Listas ───────────────────────────────────────────────────────────
|
|
const loadingTenants = ref(false)
|
|
const loadingSessions = ref(false)
|
|
const loadingHistory = ref(false)
|
|
const revokingToken = ref(null)
|
|
|
|
const tenants = ref([])
|
|
const tenantMap = ref({})
|
|
const activeSessions = ref([])
|
|
const sessionHistory = ref([])
|
|
|
|
// ── TTL Options ───────────────────────────────────────────────────────────────
|
|
const ttlOptions = [
|
|
{ label: '15 minutos', value: 15 },
|
|
{ label: '30 minutos', value: 30 },
|
|
{ label: '1 hora', value: 60 },
|
|
{ label: '2 horas', value: 120 },
|
|
]
|
|
|
|
// ── Countdown tick ────────────────────────────────────────────────────────────
|
|
const _now = ref(Date.now())
|
|
let _tickTimer = null
|
|
|
|
function startTick () {
|
|
if (_tickTimer) return
|
|
_tickTimer = setInterval(() => { _now.value = Date.now() }, 10_000)
|
|
}
|
|
|
|
onBeforeUnmount(() => { if (_tickTimer) clearInterval(_tickTimer) })
|
|
|
|
// ── Computed ──────────────────────────────────────────────────────────────────
|
|
const expiresLabel = computed(() => {
|
|
if (!generatedData.value?.expires_at) return ''
|
|
return new Date(generatedData.value.expires_at).toLocaleString('pt-BR')
|
|
})
|
|
|
|
const tokenPreview = computed(() => {
|
|
if (!generatedData.value?.token) return ''
|
|
const t = generatedData.value.token
|
|
return `${t.slice(0, 8)}…${t.slice(-8)}`
|
|
})
|
|
|
|
const activeSessionCount = computed(() => activeSessions.value.length)
|
|
|
|
// ── Lifecycle ─────────────────────────────────────────────────────────────────
|
|
onMounted(async () => {
|
|
console.log(`${TAG} montado`)
|
|
await loadTenants()
|
|
await loadActiveSessions()
|
|
startTick()
|
|
})
|
|
|
|
// ── Tenants ───────────────────────────────────────────────────────────────────
|
|
async function loadTenants () {
|
|
loadingTenants.value = true
|
|
console.log(`${TAG} loadTenants`)
|
|
try {
|
|
const { data, error } = await supabase
|
|
.from('tenants')
|
|
.select('id, name, kind')
|
|
.order('name', { ascending: true })
|
|
|
|
if (error) throw error
|
|
|
|
const list = data || []
|
|
console.log(`${TAG} ${list.length} tenant(s) carregado(s)`)
|
|
|
|
tenantMap.value = Object.fromEntries(list.map(t => [t.id, t.name || t.id]))
|
|
tenants.value = list.map(t => ({
|
|
value: t.id,
|
|
label: `${t.name} (${t.kind ?? 'tenant'})`,
|
|
}))
|
|
} catch (e) {
|
|
console.error(`${TAG} loadTenants ERRO`, e)
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message, life: 4000 })
|
|
} finally {
|
|
loadingTenants.value = false
|
|
}
|
|
}
|
|
|
|
// ── Sessões ativas ─────────────────────────────────────────────────────────────
|
|
async function loadActiveSessions () {
|
|
loadingSessions.value = true
|
|
console.log(`${TAG} loadActiveSessions`)
|
|
try {
|
|
activeSessions.value = await listActiveSupportSessions()
|
|
console.log(`${TAG} ${activeSessions.value.length} sessão(ões) ativa(s)`)
|
|
} catch (e) {
|
|
console.error(`${TAG} loadActiveSessions ERRO`, e)
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message, life: 4000 })
|
|
} finally {
|
|
loadingSessions.value = false
|
|
}
|
|
}
|
|
|
|
// ── Histórico ─────────────────────────────────────────────────────────────────
|
|
async function loadHistory () {
|
|
if (loadingHistory.value) return
|
|
loadingHistory.value = true
|
|
console.log(`${TAG} loadHistory`)
|
|
try {
|
|
sessionHistory.value = await listSessionHistory(100)
|
|
console.log(`${TAG} histórico: ${sessionHistory.value.length} registro(s)`)
|
|
} catch (e) {
|
|
console.error(`${TAG} loadHistory ERRO`, e)
|
|
toast.add({ severity: 'error', summary: 'Erro', detail: e?.message, life: 4000 })
|
|
} finally {
|
|
loadingHistory.value = false
|
|
}
|
|
}
|
|
|
|
// ── Criar sessão ──────────────────────────────────────────────────────────────
|
|
async function handleCreate () {
|
|
if (!selectedTenantId.value) return
|
|
creating.value = true
|
|
generatedUrl.value = null
|
|
generatedData.value = null
|
|
|
|
console.log(`${TAG} handleCreate`, { tenantId: selectedTenantId.value, ttlMinutes: ttlMinutes.value, note: sessionNote.value || '(sem nota)' })
|
|
|
|
try {
|
|
const result = await createSupportSession(selectedTenantId.value, ttlMinutes.value, sessionNote.value)
|
|
generatedData.value = result
|
|
generatedUrl.value = buildSupportUrl(result.token)
|
|
|
|
console.log(`${TAG} sessão criada com sucesso`, { token: `${result.token.slice(0,8)}…`, expires_at: result.expires_at })
|
|
|
|
toast.add({ severity: 'success', summary: 'Sessão criada', detail: 'URL de suporte gerada com sucesso.', life: 4000 })
|
|
await loadActiveSessions()
|
|
} catch (e) {
|
|
console.error(`${TAG} handleCreate ERRO`, e)
|
|
toast.add({ severity: 'error', summary: 'Erro ao criar sessão', detail: e?.message, life: 5000 })
|
|
} finally {
|
|
creating.value = false
|
|
}
|
|
}
|
|
|
|
// ── Revogar ───────────────────────────────────────────────────────────────────
|
|
async function handleRevoke (token) {
|
|
revokingToken.value = token
|
|
console.log(`${TAG} handleRevoke token=${token.slice(0, 8)}…`)
|
|
try {
|
|
await revokeSupportSession(token)
|
|
toast.add({ severity: 'success', summary: 'Sessão revogada', life: 3000 })
|
|
if (generatedData.value?.token === token) {
|
|
generatedUrl.value = null
|
|
generatedData.value = null
|
|
}
|
|
await loadActiveSessions()
|
|
if (sessionHistory.value.length) await loadHistory()
|
|
} catch (e) {
|
|
console.error(`${TAG} handleRevoke ERRO`, e)
|
|
toast.add({ severity: 'error', summary: 'Erro ao revogar', detail: e?.message, life: 4000 })
|
|
} finally {
|
|
revokingToken.value = null
|
|
}
|
|
}
|
|
|
|
// ── Copiar ────────────────────────────────────────────────────────────────────
|
|
function copyUrl (url) {
|
|
if (!url) return
|
|
navigator.clipboard.writeText(url)
|
|
console.log(`${TAG} URL copiada`)
|
|
toast.add({ severity: 'info', summary: 'Copiado!', detail: 'URL copiada para a área de transferência.', life: 2000 })
|
|
}
|
|
|
|
// ── Tab change ────────────────────────────────────────────────────────────────
|
|
function onTabChange (e) {
|
|
const idx = e.index ?? e
|
|
activeTab.value = idx
|
|
console.log(`${TAG} tab mudou para ${idx}`)
|
|
if (idx === 2 && sessionHistory.value.length === 0) loadHistory()
|
|
}
|
|
|
|
// ── Helpers ───────────────────────────────────────────────────────────────────
|
|
function tenantName (id) {
|
|
return tenantMap.value[id] || id
|
|
}
|
|
|
|
function formatDate (iso) {
|
|
if (!iso) return '-'
|
|
return new Date(iso).toLocaleString('pt-BR')
|
|
}
|
|
|
|
function remainingLabel (iso) {
|
|
_now.value // dependência reativa
|
|
if (!iso) return '-'
|
|
const diff = new Date(iso) - Date.now()
|
|
if (diff <= 0) return 'Expirada'
|
|
const min = Math.floor(diff / 60000)
|
|
const h = Math.floor(min / 60)
|
|
const m = min % 60
|
|
if (h > 0) return `${h}h ${m}min`
|
|
return `${min} min`
|
|
}
|
|
|
|
function isExpiringSoon (iso) {
|
|
if (!iso) return false
|
|
const diff = (new Date(iso) - Date.now()) / 60000
|
|
return diff > 0 && diff < 15
|
|
}
|
|
|
|
function sessionStatusSeverity (session) {
|
|
if (session._expired) return 'danger'
|
|
if (isExpiringSoon(session.expires_at)) return 'warning'
|
|
return 'success'
|
|
}
|
|
|
|
function sessionStatusLabel (session) {
|
|
if (session._expired) return 'Expirada'
|
|
if (isExpiringSoon(session.expires_at)) return 'Expirando'
|
|
return 'Ativa'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="saas-support p-4 md:p-6">
|
|
<Toast />
|
|
|
|
<!-- Cabeçalho -->
|
|
<div class="flex items-center gap-3 mb-5">
|
|
<div class="flex items-center justify-center w-10 h-10 rounded-xl bg-orange-100 dark:bg-orange-900/30">
|
|
<i class="pi pi-headphones text-orange-600 dark:text-orange-400 text-lg" />
|
|
</div>
|
|
<div class="flex-1">
|
|
<h1 class="text-xl font-bold m-0">Suporte Técnico</h1>
|
|
<p class="text-sm text-surface-500 m-0">Gere e gerencie links seguros de acesso em modo debug</p>
|
|
</div>
|
|
<Tag
|
|
v-if="activeSessionCount > 0"
|
|
:value="`${activeSessionCount} sessão${activeSessionCount > 1 ? 'ões' : ''} ativa${activeSessionCount > 1 ? 's' : ''}`"
|
|
severity="warning"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<TabView @tab-change="onTabChange">
|
|
|
|
<!-- ── Tab 0: Nova Sessão ─────────────────────────────────── -->
|
|
<TabPanel header="Nova Sessão">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5 pt-2">
|
|
|
|
<!-- Formulário -->
|
|
<div class="card">
|
|
<h2 class="text-base font-semibold flex items-center gap-2 m-0 mb-4">
|
|
<i class="pi pi-plus-circle text-primary" />
|
|
Configurar acesso de suporte
|
|
</h2>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-sm font-medium">Selecionar Cliente (Tenant)</label>
|
|
<Select
|
|
v-model="selectedTenantId"
|
|
:options="tenants"
|
|
option-label="label"
|
|
option-value="value"
|
|
placeholder="Buscar tenant..."
|
|
filter
|
|
:loading="loadingTenants"
|
|
class="w-full"
|
|
empty-filter-message="Nenhum tenant encontrado"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-sm font-medium">Duração do Acesso</label>
|
|
<Select
|
|
v-model="ttlMinutes"
|
|
:options="ttlOptions"
|
|
option-label="label"
|
|
option-value="value"
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-sm font-medium">
|
|
Nota / Motivo
|
|
<span class="text-surface-400 font-normal">(opcional)</span>
|
|
</label>
|
|
<InputText
|
|
v-model="sessionNote"
|
|
placeholder="Ex: cliente reportou erro na agenda de recorrência"
|
|
class="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
label="Ativar Modo Suporte"
|
|
icon="pi pi-shield"
|
|
severity="warning"
|
|
:loading="creating"
|
|
:disabled="!selectedTenantId"
|
|
class="w-full"
|
|
@click="handleCreate"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- URL Gerada -->
|
|
<div class="card">
|
|
<h2 class="text-base font-semibold flex items-center gap-2 m-0 mb-4">
|
|
<i class="pi pi-link text-primary" />
|
|
URL Gerada
|
|
</h2>
|
|
|
|
<div v-if="generatedUrl" class="flex flex-col gap-4">
|
|
<div class="flex flex-col gap-1">
|
|
<label class="text-sm font-medium">Link de Acesso</label>
|
|
<div class="flex gap-2">
|
|
<InputText :value="generatedUrl" readonly class="flex-1 font-mono text-xs" />
|
|
<Button icon="pi pi-copy" severity="secondary" outlined v-tooltip.top="'Copiar URL'" @click="copyUrl(generatedUrl)" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<i class="pi pi-clock text-orange-500" />
|
|
<span class="text-surface-500">Expira em:</span>
|
|
<strong>{{ expiresLabel }}</strong>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 text-xs text-surface-400 font-mono">
|
|
<i class="pi pi-key" />
|
|
<span>{{ tokenPreview }}</span>
|
|
</div>
|
|
|
|
<div v-if="sessionNote" class="flex items-start gap-2 text-sm text-surface-500">
|
|
<i class="pi pi-comment mt-0.5 flex-shrink-0" />
|
|
<span class="italic">{{ sessionNote }}</span>
|
|
</div>
|
|
|
|
<Message severity="info" :closable="false" class="text-sm">
|
|
Envie este link ao terapeuta ou acesse diretamente para monitorar os logs da agenda em tempo real.
|
|
</Message>
|
|
</div>
|
|
|
|
<div v-else class="flex flex-col items-center justify-center py-12 text-surface-400 gap-3">
|
|
<i class="pi pi-shield text-4xl opacity-25" />
|
|
<span class="text-sm">Nenhuma sessão gerada ainda</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TabPanel>
|
|
|
|
<!-- ── Tab 1: Sessões Ativas ──────────────────────────────── -->
|
|
<TabPanel>
|
|
<template #header>
|
|
<span class="flex items-center gap-2">
|
|
Sessões Ativas
|
|
<Badge v-if="activeSessionCount > 0" :value="String(activeSessionCount)" severity="warning" />
|
|
</span>
|
|
</template>
|
|
|
|
<div class="card mt-2">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-base font-semibold flex items-center gap-2 m-0">
|
|
<i class="pi pi-circle-fill text-green-500 text-xs" />
|
|
Sessões em vigor
|
|
</h2>
|
|
<Button
|
|
icon="pi pi-refresh"
|
|
severity="secondary"
|
|
outlined
|
|
size="small"
|
|
:loading="loadingSessions"
|
|
label="Atualizar"
|
|
@click="loadActiveSessions"
|
|
/>
|
|
</div>
|
|
|
|
<DataTable
|
|
:value="activeSessions"
|
|
:loading="loadingSessions"
|
|
empty-message="Nenhuma sessão ativa no momento"
|
|
size="small"
|
|
striped-rows
|
|
>
|
|
<Column header="Tenant" style="min-width: 200px">
|
|
<template #body="{ data }">
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="font-medium text-sm">{{ tenantName(data.tenant_id) }}</span>
|
|
<span class="font-mono text-xs text-surface-400">{{ data.tenant_id }}</span>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Token">
|
|
<template #body="{ data }">
|
|
<span class="font-mono text-xs text-surface-400">{{ data.token.slice(0, 12) }}…</span>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Restante" style="min-width: 100px">
|
|
<template #body="{ data }">
|
|
<span :class="isExpiringSoon(data.expires_at) ? 'text-orange-500 font-semibold' : ''">
|
|
{{ remainingLabel(data.expires_at) }}
|
|
</span>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Criada em">
|
|
<template #body="{ data }">
|
|
<span class="text-sm text-surface-500">{{ formatDate(data.created_at) }}</span>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Nota">
|
|
<template #body="{ data }">
|
|
<span v-if="data._note" class="text-xs italic text-surface-500">{{ data._note }}</span>
|
|
<span v-else class="text-xs text-surface-300">—</span>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Ações" style="width: 110px">
|
|
<template #body="{ data }">
|
|
<div class="flex gap-2">
|
|
<Button icon="pi pi-copy" size="small" severity="secondary" outlined v-tooltip.top="'Copiar URL'" @click="copyUrl(buildSupportUrl(data.token))" />
|
|
<Button icon="pi pi-trash" size="small" severity="danger" outlined v-tooltip.top="'Revogar'" :loading="revokingToken === data.token" @click="handleRevoke(data.token)" />
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
</DataTable>
|
|
</div>
|
|
</TabPanel>
|
|
|
|
<!-- ── Tab 2: Histórico ───────────────────────────────────── -->
|
|
<TabPanel header="Histórico">
|
|
<div class="card mt-2">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-base font-semibold flex items-center gap-2 m-0">
|
|
<i class="pi pi-history text-primary" />
|
|
Últimas 100 sessões
|
|
</h2>
|
|
<Button
|
|
icon="pi pi-refresh"
|
|
severity="secondary"
|
|
outlined
|
|
size="small"
|
|
:loading="loadingHistory"
|
|
label="Carregar"
|
|
@click="loadHistory"
|
|
/>
|
|
</div>
|
|
|
|
<DataTable
|
|
:value="sessionHistory"
|
|
:loading="loadingHistory"
|
|
empty-message="Clique em Carregar para ver o histórico"
|
|
size="small"
|
|
striped-rows
|
|
paginator
|
|
:rows="20"
|
|
>
|
|
<Column header="Status" style="width: 110px">
|
|
<template #body="{ data }">
|
|
<Tag :value="sessionStatusLabel(data)" :severity="sessionStatusSeverity(data)" class="text-xs" />
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Tenant" style="min-width: 180px">
|
|
<template #body="{ data }">
|
|
<div class="flex flex-col gap-0.5">
|
|
<span class="font-medium text-sm">{{ tenantName(data.tenant_id) }}</span>
|
|
<span class="font-mono text-xs text-surface-400">{{ data.tenant_id }}</span>
|
|
</div>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Token">
|
|
<template #body="{ data }">
|
|
<span class="font-mono text-xs text-surface-400">{{ data.token.slice(0, 12) }}…</span>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Criada em" sortable field="created_at">
|
|
<template #body="{ data }">
|
|
<span class="text-sm text-surface-500">{{ formatDate(data.created_at) }}</span>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Expirava em">
|
|
<template #body="{ data }">
|
|
<span class="text-sm text-surface-500">{{ formatDate(data.expires_at) }}</span>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="Nota">
|
|
<template #body="{ data }">
|
|
<span v-if="data._note" class="text-xs italic text-surface-500">{{ data._note }}</span>
|
|
<span v-else class="text-xs text-surface-300">—</span>
|
|
</template>
|
|
</Column>
|
|
|
|
<Column header="" style="width: 60px">
|
|
<template #body="{ data }">
|
|
<Button
|
|
v-if="!data._expired"
|
|
icon="pi pi-trash"
|
|
size="small"
|
|
severity="danger"
|
|
outlined
|
|
v-tooltip.top="'Revogar'"
|
|
:loading="revokingToken === data.token"
|
|
@click="handleRevoke(data.token)"
|
|
/>
|
|
</template>
|
|
</Column>
|
|
</DataTable>
|
|
</div>
|
|
</TabPanel>
|
|
|
|
</TabView>
|
|
</div>
|
|
</template>
|