Sistema de Suporte , Documentação

src/views/pages/saas/SaasSupportPage.vue

@@ -1,237 +1,60 @@
-<template>
-  <div class="saas-support p-4 md:p-6">
-    <Toast />
-
-    <!-- Cabeçalho -->
-    <div class="flex items-center gap-3 mb-6">
-      <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>
-        <h1 class="text-xl font-bold text-surface-900 dark:text-surface-0 m-0">Suporte Técnico</h1>
-        <p class="text-sm text-surface-500 m-0">Gere links seguros para acessar a agenda de um cliente em modo debug</p>
-      </div>
-    </div>
-
-    <!-- Card: Gerar nova sessão -->
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-      <div class="card">
-        <h2 class="text-base font-semibold mb-4 flex items-center gap-2">
-          <i class="pi pi-plus-circle text-primary" />
-          Nova Sessão de Suporte
-        </h2>
-
-        <div class="flex flex-col gap-4">
-          <!-- Seleção de tenant -->
-          <div class="flex flex-col gap-1">
-            <label class="text-sm font-medium text-surface-700 dark:text-surface-300">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>
-
-          <!-- TTL -->
-          <div class="flex flex-col gap-1">
-            <label class="text-sm font-medium text-surface-700 dark:text-surface-300">Duração do Acesso</label>
-            <Select
-              v-model="ttlMinutes"
-              :options="ttlOptions"
-              option-label="label"
-              option-value="value"
-              class="w-full"
-            />
-          </div>
-
-          <!-- Botão -->
-          <Button
-            label="Ativar Modo Suporte"
-            icon="pi pi-shield"
-            severity="warning"
-            :loading="creating"
-            :disabled="!selectedTenantId"
-            class="w-full"
-            @click="handleCreate"
-          />
-        </div>
-      </div>
-
-      <!-- Card: URL Gerada -->
-      <div class="card">
-        <h2 class="text-base font-semibold mb-4 flex items-center gap-2">
-          <i class="pi pi-link text-primary" />
-          URL de Suporte Gerada
-        </h2>
-
-        <div v-if="generatedUrl" class="flex flex-col gap-3">
-          <!-- URL -->
-          <div class="flex flex-col gap-1">
-            <label class="text-sm font-medium text-surface-700 dark:text-surface-300">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"
-              />
-            </div>
-          </div>
-
-          <!-- Expira em -->
-          <div class="flex items-center gap-2 text-sm text-surface-500">
-            <i class="pi pi-clock text-orange-500" />
-            <span>Expira em: <strong class="text-surface-700 dark:text-surface-300">{{ expiresLabel }}</strong></span>
-          </div>
-
-          <!-- Token (reduzido) -->
-          <div class="flex items-center gap-2 text-xs text-surface-400 font-mono">
-            <i class="pi pi-key" />
-            <span>{{ tokenPreview }}</span>
-          </div>
-
-          <!-- Instruções -->
-          <Message severity="info" :closable="false" class="text-sm">
-            Envie este link ao terapeuta ou acesse diretamente para ver os logs da agenda.
-            O link expira automaticamente.
-          </Message>
-        </div>
-
-        <div v-else class="flex flex-col items-center justify-center py-10 text-surface-400 gap-2">
-          <i class="pi pi-shield text-4xl opacity-30" />
-          <span class="text-sm">Nenhuma sessão gerada ainda</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Sessões ativas -->
-    <div class="card mt-6">
-      <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-list text-primary" />
-          Sessões Ativas
-        </h2>
-        <Button
-          icon="pi pi-refresh"
-          severity="secondary"
-          outlined
-          size="small"
-          :loading="loadingSessions"
-          @click="loadActiveSessions"
-        />
-      </div>
-
-      <DataTable
-        :value="activeSessions"
-        :loading="loadingSessions"
-        empty-message="Nenhuma sessão ativa no momento"
-        size="small"
-        striped-rows
-      >
-        <Column field="tenant_id" header="Tenant ID">
-          <template #body="{ data }">
-            <span class="font-mono text-xs">{{ data.tenant_id }}</span>
-          </template>
-        </Column>
-
-        <Column header="Token">
-          <template #body="{ data }">
-            <span class="font-mono text-xs">{{ data.token.slice(0, 16) }}…</span>
-          </template>
-        </Column>
-
-        <Column header="Expira em">
-          <template #body="{ data }">
-            <span :class="isExpiringSoon(data.expires_at) ? 'text-orange-500 font-semibold' : ''">
-              {{ formatExpires(data.expires_at) }}
-            </span>
-          </template>
-        </Column>
-
-        <Column header="Criada">
-          <template #body="{ data }">
-            {{ formatDate(data.created_at) }}
-          </template>
-        </Column>
-
-        <Column header="Ações">
-          <template #body="{ data }">
-            <div class="flex gap-2">
-              <Button
-                icon="pi pi-copy"
-                size="small"
-                severity="secondary"
-                outlined
-                v-tooltip.top="'Copiar URL'"
-                @click="copySessionUrl(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>
-  </div>
-</template>
-
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+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()
 
-// ── Estado ─────────────────────────────────────────────────────────────────
+// ── 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 loadingTenants   = ref(false)
-const loadingSessions  = ref(false)
-const revokingToken    = ref(null)
+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([])
 
-const generatedUrl  = ref(null)
-const generatedData = ref(null) // { token, expires_at }
-
-// ── Opções de TTL ──────────────────────────────────────────────────────────
-
+// ── TTL Options ───────────────────────────────────────────────────────────────
 const ttlOptions = [
+  { label: '15 minutos', value: 15 },
   { label: '30 minutos', value: 30 },
-  { label: '60 minutos', value: 60 },
+  { label: '1 hora',     value: 60 },
   { label: '2 horas',    value: 120 },
 ]
 
-// ── Computed ───────────────────────────────────────────────────────────────
+// ── 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')
@@ -243,17 +66,20 @@ const tokenPreview = computed(() => {
   return `${t.slice(0, 8)}…${t.slice(-8)}`
 })
 
-// ── Lifecycle ──────────────────────────────────────────────────────────────
+const activeSessionCount = computed(() => activeSessions.value.length)
 
-onMounted(() => {
-  loadTenants()
-  loadActiveSessions()
+// ── Lifecycle ─────────────────────────────────────────────────────────────────
+onMounted(async () => {
+  console.log(`${TAG} montado`)
+  await loadTenants()
+  await loadActiveSessions()
+  startTick()
 })
 
-// ── Métodos ────────────────────────────────────────────────────────────────
-
+// ── Tenants ───────────────────────────────────────────────────────────────────
 async function loadTenants () {
   loadingTenants.value = true
+  console.log(`${TAG} loadTenants`)
   try {
     const { data, error } = await supabase
       .from('tenants')
@@ -262,56 +88,83 @@ async function loadTenants () {
 
     if (error) throw error
 
-    tenants.value = (data || []).map(t => ({
+    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
+  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)
+    const result = await createSupportSession(selectedTenantId.value, ttlMinutes.value, sessionNote.value)
     generatedData.value = result
     generatedUrl.value  = buildSupportUrl(result.token)
 
-    toast.add({
-      severity: 'success',
-      summary: 'Sessão criada',
-      detail: 'URL de suporte gerada com sucesso.',
-      life: 4000,
-    })
+    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 })
@@ -320,45 +173,369 @@ async function handleRevoke (token) {
       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
   }
 }
 
-function copyUrl () {
-  if (!generatedUrl.value) return
-  navigator.clipboard.writeText(generatedUrl.value)
+// ── 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 })
 }
 
-function copySessionUrl (token) {
-  const url = buildSupportUrl(token)
-  navigator.clipboard.writeText(url)
-  toast.add({ severity: 'info', summary: 'Copiado!', 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()
 }
 
-// ── Formatação ─────────────────────────────────────────────────────────────
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function tenantName (id) {
+  return tenantMap.value[id] || id
+}
 
 function formatDate (iso) {
   if (!iso) return '-'
   return new Date(iso).toLocaleString('pt-BR')
 }
 
-function formatExpires (iso) {
+function remainingLabel (iso) {
+  _now.value // dependência reativa
   if (!iso) return '-'
-  const d = new Date(iso)
-  const now = new Date()
-  const diffMin = Math.round((d - now) / 60000)
-  if (diffMin < 0) return 'Expirada'
-  if (diffMin < 60) return `em ${diffMin} min`
-  return new Date(iso).toLocaleString('pt-BR')
+  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 diffMin = (new Date(iso) - new Date()) / 60000
-  return diffMin > 0 && diffMin < 15
+  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>