From 5ef6ef85505f462e7debfff9a49eafe384b80b6d Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Mon, 17 Nov 2025 08:44:18 -0300
Subject: [PATCH] feat: enhance SLA management and authentication handling

- Updated the useConvexWithAuth hook to improve token management and logging for better debugging.
- Integrated automatic authentication handling in the central-chamados route, ensuring seamless user experience.
- Added a new mutation for migrating old SLA configurations to include a priority field, enhancing data consistency.
- Improved the display of SLA configurations in the UI, including detailed views and migration feedback for better user interaction.
- Refactored ticket loading logic to enrich ticket data with responsible user names, improving clarity in ticket management.
---
 RELATORIO_TESTES.md                           | 186 ++++++++
 apps/web/src/lib/hooks/useConvexWithAuth.ts   |  18 +-
 .../ti/central-chamados/+page.svelte          | 411 +++++++++++++++---
 packages/backend/convex/chamados.ts           |  56 ++-
 packages/backend/convex/schema.ts             |  12 +-
 5 files changed, 613 insertions(+), 70 deletions(-)
 create mode 100644 RELATORIO_TESTES.md

diff --git a/RELATORIO_TESTES.md b/RELATORIO_TESTES.md
new file mode 100644
index 0000000..3780090
--- /dev/null
+++ b/RELATORIO_TESTES.md
@@ -0,0 +1,186 @@
+# Relatório de Testes - Sistema de Central de Chamados
+
+**Data:** 16 de novembro de 2025  
+**Testador:** Sistema Automatizado  
+**Página Testada:** `/ti/central-chamados`
+
+## Resumo Executivo
+
+Foram realizados testes completos na página de Central de Chamados do sistema SGSE. A maioria das funcionalidades está funcionando corretamente, mas foram identificados alguns problemas que precisam ser corrigidos.
+
+## Testes Realizados
+
+### ✅ Testes Bem-Sucedidos
+
+1. **Login no Sistema**
+   - Status: ✅ PASSOU
+   - Usuário logado: Deyvison (dfw@poli.br)
+
+2. **Visualização de SLAs Configurados**
+   - Status: ✅ PASSOU
+   - Tabela de SLAs exibe 7 SLAs ativos corretamente
+   - Resumo mostra: 4 Baixa, 2 Média, 1 Alta/Crítica
+   - Detalhes completos (tempos, prioridades) são exibidos corretamente
+
+3. **Cards de Prioridade**
+   - Status: ✅ PASSOU
+   - Cards mostram corretamente "Configurado" ou "Não configurado"
+   - Botão "Configurar" funciona corretamente
+   - Detalhes dos SLAs configurados são exibidos nos cards
+
+4. **Criação de SLA**
+   - Status: ✅ PASSOU
+   - SLA criado com sucesso para prioridade "Alta"
+   - Formulário preenche corretamente quando clica em "Configurar"
+   - Tabela atualiza automaticamente após criação
+   - Card de prioridade atualiza para "Configurado"
+
+5. **Edição de SLA**
+   - Status: ✅ PASSOU
+   - Botão "Editar" abre formulário com dados corretos
+   - Atualização funciona corretamente
+
+6. **Lista de Chamados**
+   - Status: ✅ PASSOU
+   - 4 chamados sendo exibidos corretamente
+   - Filtros funcionando (status, responsável, setor)
+   - Detalhes do chamado são exibidos ao selecionar
+
+7. **Atribuição de Responsável**
+   - Status: ✅ PASSOU
+   - Dropdown mostra 2 usuários TI: Deyvison e Suporte_TI
+   - Formulário está funcional
+
+8. **Prorrogação de Prazo**
+   - Status: ✅ PASSOU
+   - Dropdown de tickets carrega corretamente (4 tickets)
+   - Formulário permite selecionar tipo de prazo e horas
+   - Botão habilita quando todos os campos estão preenchidos
+
+### ⚠️ Problemas Identificados
+
+#### 1. Templates de Email - Listagem Após Criação
+
+- **Status:** ⚠️ PROBLEMA
+- **Descrição:** Templates são criados com sucesso (mensagem "Templates padrão criados com sucesso" aparece), mas não são listados na interface após criação
+- **Ação Realizada:** Botão "Criar templates padrão" foi clicado e retornou sucesso
+- **Comportamento Esperado:** Templates deveriam aparecer em uma lista após criação
+- **Comportamento Atual:** Seção continua mostrando "Nenhum template encontrado"
+- **Severidade:** MÉDIA
+- **Impacto:** Usuários não conseguem visualizar/editar templates de email após criação
+- **Possível Causa:** Query de templates pode não estar sendo atualizada após criação, ou filtro pode estar excluindo templates de chamados
+
+#### 2. Warning no Console - Token de Autenticação
+
+- **Status:** ⚠️ AVISO (Não crítico)
+- **Descrição:** `⚠️ [useConvexWithAuth] Token não disponível` aparece no console durante carregamento inicial
+- **Severidade:** BAIXA
+- **Impacto:** Não afeta funcionalidade (autenticação funciona corretamente após carregamento)
+- **Observação:** Parece ser um problema de timing durante inicialização da página
+
+#### 3. Warning no Console - Formato de Query
+
+- **Status:** ⚠️ AVISO (Não crítico)
+- **Descrição:** `🔍 [usuariosTI] Formato inesperado: object {data: undefined, isLoading: undefined, error: undefined, isStale: undefined}` aparece no console
+- **Severidade:** BAIXA
+- **Impacto:** Não afeta funcionalidade (usuários são carregados corretamente - 2 usuários TI encontrados)
+- **Observação:** Indica possível inconsistência no formato de retorno da query durante carregamento inicial
+
+## Detalhes dos Testes
+
+### Teste de Criação de SLA
+
+- **Prioridade Testada:** Alta
+- **Valores Inseridos:**
+  - Nome: "SLA - Alta - Teste"
+  - Tempo de Resposta: 2h
+  - Tempo de Conclusão: 8h
+  - Auto-encerramento: 24h
+  - Alerta: 2h antes
+- **Resultado:** ✅ SLA criado e exibido na tabela e no card
+
+### Teste de Edição de SLA
+
+- **SLA Editado:** Prioridade Baixa
+- **Alterações:**
+  - Nome: "SLA Baixa - Editado em Teste"
+  - Tempo de Resposta: 6h
+- **Resultado:** ✅ Atualização bem-sucedida
+
+### Teste de Prorrogação
+
+- **Ticket Selecionado:** SGSE-202511-3750
+- **Prazo:** Conclusão
+- **Horas Adicionais:** 24h
+- **Motivo:** "Teste de prorrogação de prazo - necessário mais tempo para análise"
+- **Resultado:** ✅ Formulário preenchido corretamente, botão habilitado
+
+## Lista de Erros Encontrados
+
+### Erros Críticos
+
+- **Nenhum erro crítico encontrado**
+
+### Erros de Funcionalidade
+
+1. **Templates de Email não aparecem após criação**
+   - Localização: Seção "Templates de Email - Chamados"
+   - Ação necessária: Verificar query de templates e atualização reativa após criação
+
+### Avisos (Warnings)
+
+1. **Token de autenticação não disponível durante carregamento inicial**
+   - Localização: Console do navegador
+   - Ação necessária: Melhorar timing de inicialização de autenticação
+
+2. **Formato inesperado de query durante carregamento**
+   - Localização: Console do navegador (usuariosTI)
+   - Ação necessária: Verificar formato de retorno de useQuery do convex-svelte
+
+## Recomendações
+
+### Prioridade ALTA
+
+1. **Corrigir listagem de templates de email após criação**
+   - Verificar se a query `templatesChamados` está sendo atualizada após criação
+   - Verificar se o filtro de templates está correto (deve incluir templates de chamados)
+   - Adicionar refresh automático após criação de templates
+
+### Prioridade MÉDIA
+
+2. **Investigar e corrigir warnings no console**
+   - Melhorar timing de autenticação para evitar warning inicial
+   - Padronizar formato de retorno de queries do convex-svelte
+
+### Prioridade BAIXA
+
+3. **Melhorar logs de debug**
+   - Reduzir verbosidade de logs informativos
+   - Manter apenas logs de erro e warnings importantes
+
+## Conclusão
+
+O sistema está **funcionalmente operacional**, com a maioria das funcionalidades testadas funcionando corretamente:
+
+✅ **Funcionalidades Testadas e Funcionando:**
+
+- Login e autenticação
+- Visualização de SLAs (tabela e cards)
+- Criação de SLAs
+- Edição de SLAs
+- Lista de chamados
+- Atribuição de responsável
+- Prorrogação de prazo (formulário funcional)
+- Criação de templates (backend funciona, frontend não atualiza)
+
+⚠️ **Problemas Identificados:**
+
+- Templates não aparecem na lista após criação (problema de atualização reativa)
+- Warnings no console (não afetam funcionalidade)
+
+**Status Geral:** ✅ **OPERACIONAL COM PEQUENOS AJUSTES NECESSÁRIOS**
+
+**Próximos Passos:**
+
+1. Corrigir atualização reativa de templates após criação
+2. Investigar e resolver warnings do console (opcional, não crítico)
diff --git a/apps/web/src/lib/hooks/useConvexWithAuth.ts b/apps/web/src/lib/hooks/useConvexWithAuth.ts
index ca7514b..593440f 100644
--- a/apps/web/src/lib/hooks/useConvexWithAuth.ts
+++ b/apps/web/src/lib/hooks/useConvexWithAuth.ts
@@ -30,15 +30,25 @@ export function useConvexWithAuth() {
   const clientWithAuth = client as ConvexClientWithAuth;
   
   // Configurar token se disponível
-  if (clientWithAuth && typeof clientWithAuth.setAuth === "function" && token) {
+  if (clientWithAuth && token) {
     try {
-      clientWithAuth.setAuth(token);
-      if (import.meta.env.DEV) {
-        console.log("✅ [useConvexWithAuth] Token configurado:", token.substring(0, 20) + "...");
+      // Tentar setAuth se disponível
+      if (typeof clientWithAuth.setAuth === "function") {
+        clientWithAuth.setAuth(token);
+        if (import.meta.env.DEV) {
+          console.log("✅ [useConvexWithAuth] Token configurado via setAuth:", token.substring(0, 20) + "...");
+        }
+      } else {
+        // Se setAuth não estiver disponível, o token deve ser passado via createSvelteAuthClient
+        if (import.meta.env.DEV) {
+          console.log("ℹ️ [useConvexWithAuth] Token disponível, autenticação gerenciada por createSvelteAuthClient");
+        }
       }
     } catch (e) {
       console.warn("⚠️ [useConvexWithAuth] Erro ao configurar token:", e);
     }
+  } else if (!token && import.meta.env.DEV) {
+    console.warn("⚠️ [useConvexWithAuth] Token não disponível");
   }
   
   return client;
diff --git a/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte b/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
index c811492..fcfef8b 100644
--- a/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { onMount } from "svelte";
   import { useConvexClient, useQuery } from "convex-svelte";
   import { api } from "@sgse-app/backend/convex/_generated/api";
   import type { Doc, Id } from "@sgse-app/backend/convex/_generated/dataModel";
@@ -11,6 +10,7 @@
     prazoRestante,
   } from "$lib/utils/chamados";
   import { useConvexWithAuth } from "$lib/hooks/useConvexWithAuth";
+  import { authStore } from "$lib/stores/auth.svelte";
 
   type Ticket = Doc<"tickets">;
   type Usuario = Doc<"usuarios">;
@@ -18,20 +18,26 @@
   type Template = Doc<"templatesMensagens">;
 
   const client = useConvexClient();
+  
+  // createSvelteAuthClient gerencia autenticação automaticamente
+  // Não precisamos verificar token manualmente, apenas garantir que useConvexWithAuth seja chamado
+  $effect(() => {
+    // Sempre chamar useConvexWithAuth para garantir que autenticação está configurada
+    useConvexWithAuth();
+  });
+
+  // Queries - executar normalmente, o createSvelteAuthClient no layout gerencia autenticação
   const usuariosQuery = useQuery(api.usuarios.listar, {});
   const slaConfigsQuery = useQuery(api.chamados.listarSlaConfigs, {});
   const templatesQuery = useQuery(api.templatesMensagens.listarTemplates, {});
 
   // Extrair dados dos templates
   const templates = $derived.by(() => {
-    if (!templatesQuery || templatesQuery === undefined || templatesQuery === null) {
+    // useQuery retorna undefined enquanto carrega, depois retorna os dados diretamente
+    if (templatesQuery === undefined || templatesQuery === null) {
       return [];
     }
-    // Se tem propriedade data, usar os dados
-    if ('data' in templatesQuery && templatesQuery.data !== undefined) {
-      return Array.isArray(templatesQuery.data) ? templatesQuery.data : [];
-    }
-    // Se templatesQuery é diretamente um array (caso não tenha .data)
+    // useQuery retorna os dados diretamente (não em .data)
     if (Array.isArray(templatesQuery)) {
       return templatesQuery;
     }
@@ -39,22 +45,11 @@
   });
 
   const carregandoTemplates = $derived.by(() => {
-    if (!templatesQuery || templatesQuery === undefined || templatesQuery === null) {
-      return true;
-    }
-    if (typeof templatesQuery === 'object' && Object.keys(templatesQuery).length === 0) {
-      return true;
-    }
-    if (!('data' in templatesQuery)) {
-      return true;
-    }
-    if (templatesQuery.data === undefined) {
-      return true;
-    }
-    return false;
+    // useQuery retorna undefined enquanto carrega
+    return templatesQuery === undefined || templatesQuery === null;
   });
 
-  const templatesChamados = $derived(() => {
+  const templatesChamados = $derived.by(() => {
     return templates.filter((t: Template) => {
       if (!t.codigo) return false;
       return typeof t.codigo === 'string' && t.codigo.startsWith("chamado_");
@@ -107,20 +102,27 @@
   let prorrogacaoFeedback = $state<string | null>(null);
   let criandoTemplates = $state(false);
   let templatesFeedback = $state<string | null>(null);
+  let migrandoSLAs = $state(false);
+  let migracaoFeedback = $state<string | null>(null);
 
   let carregamentoToken = 0;
+  
+  // Carregar chamados quando filtros mudarem
   $effect(() => {
-    const filtros = {
-      status: filtroStatus === "todos" ? undefined : filtroStatus,
-      responsavelId: filtroResponsavel === "todos" ? undefined : filtroResponsavel,
-      setor: filtroSetor === "todos" ? undefined : filtroSetor,
-    };
-    carregarChamados(filtros);
-  });
-
-  onMount(() => {
-    // Configura token no cliente Convex
-    useConvexWithAuth();
+    // Pequeno delay para garantir que autenticação está configurada
+    const timeoutId = setTimeout(() => {
+      const filtros = {
+        status: filtroStatus === "todos" ? undefined : filtroStatus,
+        responsavelId: filtroResponsavel === "todos" ? undefined : filtroResponsavel,
+        setor: filtroSetor === "todos" ? undefined : filtroSetor,
+      };
+      if (import.meta.env.DEV) {
+        console.log("🚀 [effect] Carregando chamados com filtros:", filtros);
+      }
+      carregarChamados(filtros);
+    }, 200);
+    
+    return () => clearTimeout(timeoutId);
   });
 
   async function carregarChamados(filtros: {
@@ -131,18 +133,43 @@
     try {
       carregandoChamados = true;
       const token = ++carregamentoToken;
+      
+      if (import.meta.env.DEV) {
+        console.log("🔍 [carregarChamados] Executando query com filtros:", filtros);
+      }
+      
+      // createSvelteAuthClient gerencia autenticação automaticamente
       const data = await client.query(api.chamados.listarChamadosTI, {
         status: filtros.status,
         responsavelId: filtros.responsavelId,
         setor: filtros.setor,
       });
-      if (token !== carregamentoToken) return;
+      
+      if (token !== carregamentoToken) {
+        if (import.meta.env.DEV) {
+          console.log("🔍 [carregarChamados] Query cancelada (nova requisição iniciada)");
+        }
+        return;
+      }
+      
+      if (import.meta.env.DEV) {
+        console.log("✅ [carregarChamados] Query executada com sucesso. Chamados retornados:", data?.length ?? 0);
+      }
+      
       tickets = data ?? [];
+      
       if (!ticketSelecionado && tickets.length > 0) {
         selecionarTicket(tickets[0]._id);
       }
     } catch (error) {
-      console.error("Erro ao carregar chamados:", error);
+      console.error("❌ [carregarChamados] Erro ao carregar chamados:", error);
+      // Se erro de autenticação, tentar novamente após um pequeno delay
+      if (error instanceof Error && (error.message.includes("autenticado") || error.message.includes("authentication"))) {
+        console.warn("⚠️ [carregarChamados] Erro de autenticação detectado, tentando novamente...");
+        setTimeout(() => {
+          carregarChamados(filtros);
+        }, 1000);
+      }
     } finally {
       carregandoChamados = false;
     }
@@ -153,9 +180,61 @@
     detalheSelecionado = tickets.find((t) => t._id === ticketId) ?? null;
   }
 
-  const usuariosTI = $derived(() => {
-    if (!usuariosQuery?.data) return [];
-    return usuariosQuery.data.filter((usuario: Usuario) => usuario.setor === "TI");
+  const usuariosTI = $derived.by(() => {
+    // useQuery retorna undefined enquanto carrega, depois retorna os dados diretamente
+    if (usuariosQuery === undefined || usuariosQuery === null) {
+      if (import.meta.env.DEV) {
+        console.log("🔍 [usuariosTI] Query ainda carregando...", usuariosQuery);
+      }
+      return [];
+    }
+    
+    // Verificar se é um objeto com propriedade data (como em outros lugares do código)
+    let usuarios: any[] = [];
+    if (typeof usuariosQuery === 'object' && usuariosQuery !== null) {
+      if ('data' in usuariosQuery && Array.isArray(usuariosQuery.data)) {
+        usuarios = usuariosQuery.data;
+      } else if (Array.isArray(usuariosQuery)) {
+        usuarios = usuariosQuery;
+      } else {
+        if (import.meta.env.DEV) {
+          console.log("🔍 [usuariosTI] Formato inesperado:", typeof usuariosQuery, usuariosQuery);
+        }
+        return [];
+      }
+    } else if (Array.isArray(usuariosQuery)) {
+      usuarios = usuariosQuery;
+    } else {
+      if (import.meta.env.DEV) {
+        console.log("🔍 [usuariosTI] Tipo inesperado:", typeof usuariosQuery, usuariosQuery);
+      }
+      return [];
+    }
+    
+    if (usuarios.length === 0) {
+      if (import.meta.env.DEV) {
+        console.log("🔍 [usuariosTI] Nenhum usuário retornado");
+      }
+      return [];
+    }
+    
+    const usuariosFiltrados = usuarios.filter((usuario: any) => {
+      // Verificar se o usuário tem setor "TI" no role (case-insensitive)
+      const setor = usuario.role?.setor;
+      const temSetorTI = setor && setor.toUpperCase() === "TI";
+      if (import.meta.env.DEV && temSetorTI) {
+        console.log("✅ [usuariosTI] Usuário TI encontrado:", usuario.nome, usuario.role?.setor);
+      }
+      // Log para debug: mostrar todos os setores encontrados
+      if (import.meta.env.DEV && setor) {
+        console.log("🔍 [usuariosTI] Usuário:", usuario.nome, "Setor:", setor);
+      }
+      return temSetorTI;
+    });
+    if (import.meta.env.DEV) {
+      console.log("📊 [usuariosTI] Total de usuários:", usuarios.length, "Usuários TI:", usuariosFiltrados.length);
+    }
+    return usuariosFiltrados;
   });
 
   const estatisticas = $derived(() => {
@@ -182,11 +261,11 @@
     };
   }
 
-  function novoSla() {
+  function novoSla(prioridade?: "baixa" | "media" | "alta" | "critica") {
     slaForm = {
       nome: "",
       descricao: "",
-      prioridade: "media",
+      prioridade: prioridade || slaForm.prioridade || "media",
       tempoRespostaHoras: 4,
       tempoConclusaoHoras: 24,
       tempoEncerramentoHoras: 72,
@@ -194,6 +273,7 @@
       ativo: true,
     };
     slaFeedback = null;
+    slaParaExcluir = null;
   }
 
   async function salvarSlaConfig() {
@@ -249,8 +329,21 @@
     }
   }
 
-  const slaConfigsPorPrioridade = $derived(() => {
-    const slaConfigs = slaConfigsQuery?.data || [];
+  const slaConfigsPorPrioridade = $derived.by(() => {
+    // useQuery retorna um objeto com propriedade .data
+    if (slaConfigsQuery === undefined || slaConfigsQuery === null) {
+      return {
+        baixa: undefined,
+        media: undefined,
+        alta: undefined,
+        critica: undefined,
+      };
+    }
+    // Verificar se tem propriedade data
+    const slaConfigs = ('data' in slaConfigsQuery && slaConfigsQuery.data !== undefined)
+      ? (Array.isArray(slaConfigsQuery.data) ? slaConfigsQuery.data : [])
+      : (Array.isArray(slaConfigsQuery) ? slaConfigsQuery : []);
+    
     return {
       baixa: slaConfigs.find((s: SlaConfig) => s.prioridade === "baixa" && s.ativo),
       media: slaConfigs.find((s: SlaConfig) => s.prioridade === "media" && s.ativo),
@@ -345,12 +438,30 @@
     }
   }
 
-  // Debug: ver templates carregados
-  $effect(() => {
-    console.log("templatesQuery:", templatesQuery);
-    console.log("Templates extraídos:", templates);
-    console.log("Templates de chamados:", templatesChamados);
-  });
+  async function migrarSlaConfigs() {
+    try {
+      migrandoSLAs = true;
+      migracaoFeedback = null;
+      const resultado = await client.mutation(api.chamados.migrarSlaConfigs, {});
+      migracaoFeedback = `Migração concluída: ${resultado?.migrados || 0} SLA(s) migrado(s) de ${resultado?.total || 0} total`;
+      // Recarregar SLAs após migração
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      // Recarregar página para atualizar dados
+      window.location.reload();
+    } catch (error) {
+      console.error("Erro ao migrar SLAs:", error);
+      migracaoFeedback = error instanceof Error ? error.message : "Erro ao migrar SLAs";
+    } finally {
+      migrandoSLAs = false;
+    }
+  }
+
+  // Debug: ver templates carregados (remover em produção)
+  // $effect(() => {
+  //   console.log("templatesQuery:", templatesQuery);
+  //   console.log("Templates extraídos:", templates);
+  //   console.log("Templates de chamados:", templatesChamados);
+  // });
 </script>
 
 <main class="mx-auto w-full max-w-7xl space-y-8 px-4 py-8">
@@ -447,7 +558,7 @@
                 <td>
                   <span class={getStatusBadge(ticket.status)}>{getStatusLabel(ticket.status)}</span>
                 </td>
-                <td class="text-sm">{ticket.setorResponsavel ?? "—"}</td>
+                <td class="text-sm">{(ticket as any).responsavelNome ?? ticket.setorResponsavel ?? "—"}</td>
                 <td class="text-sm capitalize">{ticket.prioridade}</td>
                 <td class="text-xs text-base-content/70">
                   {ticket.prazoConclusao ? prazoRestante(ticket.prazoConclusao) : "--"}
@@ -592,6 +703,167 @@
     </div>
   </section>
 
+  <!-- Seção: SLAs Existentes - Visualização Detalhada -->
+  <section class="rounded-3xl border border-base-200 bg-base-100/80 p-6 shadow-xl">
+    <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+      <div>
+        <h3 class="text-lg font-semibold text-base-content">SLAs Configurados</h3>
+        <p class="text-sm text-base-content/60">Visualize todos os SLAs ativos com seus tempos e configurações</p>
+      </div>
+    </div>
+
+    {#if slaConfigsQuery === undefined || slaConfigsQuery === null || ('data' in slaConfigsQuery && slaConfigsQuery.data === undefined)}
+      <div class="flex justify-center py-8">
+        <span class="loading loading-spinner loading-md"></span>
+      </div>
+    {:else}
+      {@const slaConfigs = ('data' in slaConfigsQuery && slaConfigsQuery.data !== undefined)
+        ? (Array.isArray(slaConfigsQuery.data) ? slaConfigsQuery.data : [])
+        : (Array.isArray(slaConfigsQuery) ? slaConfigsQuery : [])}
+      {@const slaConfigsAtivos = slaConfigs.filter((s: SlaConfig) => s.ativo)}
+      {@const slaConfigsPorPrioridadeCount = {
+        baixa: slaConfigsAtivos.filter((s: SlaConfig) => s.prioridade === 'baixa').length,
+        media: slaConfigsAtivos.filter((s: SlaConfig) => s.prioridade === 'media').length,
+        alta: slaConfigsAtivos.filter((s: SlaConfig) => s.prioridade === 'alta').length,
+        critica: slaConfigsAtivos.filter((s: SlaConfig) => s.prioridade === 'critica').length,
+      }}
+      
+      {#if slaConfigsAtivos.length === 0}
+        <div class="rounded-2xl border border-base-300 bg-base-200/50 p-8 text-center">
+          <p class="text-sm font-semibold text-base-content/70">Nenhum SLA configurado</p>
+          <p class="mt-2 text-xs text-base-content/50">Configure SLAs para cada prioridade na seção abaixo</p>
+        </div>
+      {:else}
+        <!-- Resumo de SLAs -->
+        <div class="mb-4 grid grid-cols-2 gap-3 md:grid-cols-4">
+          <div class="rounded-xl border border-base-300 bg-base-200/30 p-3 text-center">
+            <div class="text-2xl font-bold text-base-content">{slaConfigsAtivos.length}</div>
+            <div class="text-xs text-base-content/60">Total de SLAs</div>
+          </div>
+          <div class="rounded-xl border border-base-300 bg-base-200/30 p-3 text-center">
+            <div class="text-2xl font-bold text-success">{slaConfigsPorPrioridadeCount.baixa}</div>
+            <div class="text-xs text-base-content/60">Prioridade Baixa</div>
+          </div>
+          <div class="rounded-xl border border-base-300 bg-base-200/30 p-3 text-center">
+            <div class="text-2xl font-bold text-info">{slaConfigsPorPrioridadeCount.media}</div>
+            <div class="text-xs text-base-content/60">Prioridade Média</div>
+          </div>
+          <div class="rounded-xl border border-base-300 bg-base-200/30 p-3 text-center">
+            <div class="text-2xl font-bold text-warning">{slaConfigsPorPrioridadeCount.alta + slaConfigsPorPrioridadeCount.critica}</div>
+            <div class="text-xs text-base-content/60">Prioridade Alta/Crítica</div>
+          </div>
+        </div>
+
+        <!-- Tabela de SLAs -->
+        <div class="overflow-x-auto rounded-xl border border-base-300">
+          <table class="table w-full">
+            <thead class="bg-base-200/50">
+              <tr>
+                <th class="font-semibold text-base-content">Nome</th>
+                <th class="font-semibold text-base-content">Prioridade</th>
+                <th class="font-semibold text-base-content">Tempo de Resposta</th>
+                <th class="font-semibold text-base-content">Tempo de Conclusão</th>
+                <th class="font-semibold text-base-content">Auto-encerramento</th>
+                <th class="font-semibold text-base-content">Alerta Antecedência</th>
+                <th class="font-semibold text-base-content">Status</th>
+                <th class="font-semibold text-base-content text-center">Ações</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each slaConfigsAtivos as sla (sla._id)}
+                <tr class="hover:bg-base-200/30 transition-colors">
+                  <td>
+                    <div class="font-medium text-base-content">{sla.nome}</div>
+                    {#if sla.descricao}
+                      <div class="text-xs text-base-content/60 mt-1 line-clamp-1">{sla.descricao}</div>
+                    {/if}
+                  </td>
+                  <td>
+                    <span class="badge badge-outline capitalize {
+                      sla.prioridade === 'critica' ? 'badge-error' :
+                      sla.prioridade === 'alta' ? 'badge-warning' :
+                      sla.prioridade === 'media' ? 'badge-info' :
+                      'badge-success'
+                    }">
+                      {sla.prioridade}
+                    </span>
+                  </td>
+                  <td>
+                    <div class="flex flex-col">
+                      <span class="font-semibold text-base-content">{sla.tempoRespostaHoras}h</span>
+                      {#if sla.tempoRespostaHoras >= 24}
+                        <span class="text-xs text-base-content/50">
+                          ({Math.floor(sla.tempoRespostaHoras / 24)}d {sla.tempoRespostaHoras % 24}h)
+                        </span>
+                      {/if}
+                    </div>
+                  </td>
+                  <td>
+                    <div class="flex flex-col">
+                      <span class="font-semibold text-base-content">{sla.tempoConclusaoHoras}h</span>
+                      {#if sla.tempoConclusaoHoras >= 24}
+                        <span class="text-xs text-base-content/50">
+                          ({Math.floor(sla.tempoConclusaoHoras / 24)}d {sla.tempoConclusaoHoras % 24}h)
+                        </span>
+                      {/if}
+                    </div>
+                  </td>
+                  <td>
+                    {#if sla.tempoEncerramentoHoras}
+                      <div class="flex flex-col">
+                        <span class="font-semibold text-base-content">{sla.tempoEncerramentoHoras}h</span>
+                        {#if sla.tempoEncerramentoHoras >= 24}
+                          <span class="text-xs text-base-content/50">
+                            ({Math.floor(sla.tempoEncerramentoHoras / 24)}d {sla.tempoEncerramentoHoras % 24}h)
+                          </span>
+                        {/if}
+                      </div>
+                    {:else}
+                      <span class="text-base-content/40 text-sm italic">Não configurado</span>
+                    {/if}
+                  </td>
+                  <td>
+                    <div class="flex items-center gap-1">
+                      <span class="font-semibold text-base-content">{sla.alertaAntecedenciaHoras}h</span>
+                      <span class="text-xs text-base-content/50">antes</span>
+                    </div>
+                  </td>
+                  <td>
+                    <span class="badge badge-success badge-sm gap-1">
+                      <span class="h-2 w-2 rounded-full bg-success"></span>
+                      Ativo
+                    </span>
+                  </td>
+                  <td>
+                    <div class="flex justify-center gap-1">
+                      <button
+                        class="btn btn-xs btn-ghost hover:btn-primary"
+                        type="button"
+                        onclick={() => selecionarSla(sla)}
+                        title="Editar SLA"
+                      >
+                        ✏️
+                      </button>
+                      <button
+                        class="btn btn-xs btn-ghost hover:btn-error"
+                        type="button"
+                        onclick={() => (slaParaExcluir = sla._id)}
+                        title="Excluir SLA"
+                      >
+                        🗑️
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
+    {/if}
+  </section>
+
+  <!-- Seção: Configuração de SLA por Prioridade -->
   <section class="rounded-3xl border border-base-200 bg-base-100/80 p-6 shadow-xl">
     <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
       <div>
@@ -602,14 +874,32 @@
         <button class="btn btn-sm btn-primary" type="button" onclick={novoSla}>
           Novo SLA
         </button>
+        <button
+          class="btn btn-sm btn-warning"
+          type="button"
+          onclick={migrarSlaConfigs}
+          disabled={migrandoSLAs}
+        >
+          {#if migrandoSLAs}
+            <span class="loading loading-spinner loading-sm"></span>
+            Migrando...
+          {:else}
+            🔧 Migrar SLAs Antigos
+          {/if}
+        </button>
       </div>
+      {#if migracaoFeedback}
+        <div class={`alert ${migracaoFeedback.includes('concluída') ? 'alert-success' : 'alert-error'} mt-2`}>
+          <span class="text-sm">{migracaoFeedback}</span>
+        </div>
+      {/if}
     </div>
 
-    <!-- Lista de SLAs por prioridade -->
+    <!-- Cards rápidos de prioridade -->
     <div class="mt-6 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
       {#each ["baixa", "media", "alta", "critica"] as prioridade}
         {@const slaAtual = slaConfigsPorPrioridade[prioridade]}
-        <div class="rounded-2xl border border-base-200 bg-base-100/50 p-4">
+        <div class="rounded-2xl border border-base-200 bg-base-100/50 p-4 transition-all hover:shadow-md">
           <div class="mb-2 flex items-center justify-between">
             <h4 class="font-semibold capitalize text-base-content">{prioridade}</h4>
             {#if slaAtual}
@@ -620,24 +910,28 @@
           </div>
           {#if slaAtual}
             <div class="space-y-2 text-xs">
-              <div>
+              <div class="flex justify-between">
                 <span class="text-base-content/60">Resposta:</span>
-                <span class="font-semibold">{slaAtual.tempoRespostaHoras}h</span>
+                <span class="font-semibold text-base-content">{slaAtual.tempoRespostaHoras}h</span>
               </div>
-              <div>
+              <div class="flex justify-between">
                 <span class="text-base-content/60">Conclusão:</span>
-                <span class="font-semibold">{slaAtual.tempoConclusaoHoras}h</span>
+                <span class="font-semibold text-base-content">{slaAtual.tempoConclusaoHoras}h</span>
               </div>
               {#if slaAtual.tempoEncerramentoHoras}
-                <div>
+                <div class="flex justify-between">
                   <span class="text-base-content/60">Auto-encerramento:</span>
-                  <span class="font-semibold">{slaAtual.tempoEncerramentoHoras}h</span>
+                  <span class="font-semibold text-base-content">{slaAtual.tempoEncerramentoHoras}h</span>
                 </div>
               {/if}
+              <div class="flex justify-between">
+                <span class="text-base-content/60">Alerta:</span>
+                <span class="font-semibold text-base-content">{slaAtual.alertaAntecedenciaHoras}h antes</span>
+              </div>
             </div>
             <div class="mt-3 flex gap-1">
               <button
-                class="btn btn-xs btn-ghost"
+                class="btn btn-xs btn-ghost flex-1"
                 type="button"
                 onclick={() => selecionarSla(slaAtual)}
               >
@@ -656,8 +950,7 @@
               class="btn btn-xs btn-primary btn-outline mt-2 w-full"
               type="button"
               onclick={() => {
-                slaForm.prioridade = prioridade as "baixa" | "media" | "alta" | "critica";
-                novoSla();
+                novoSla(prioridade as "baixa" | "media" | "alta" | "critica");
               }}
             >
               Configurar
diff --git a/packages/backend/convex/chamados.ts b/packages/backend/convex/chamados.ts
index c98497e..499182d 100644
--- a/packages/backend/convex/chamados.ts
+++ b/packages/backend/convex/chamados.ts
@@ -328,8 +328,23 @@ export const listarChamadosTI = query({
       return true;
     });
 
-    filtrados.sort((a, b) => b.atualizadoEm - a.atualizadoEm);
-    return args.limite ? filtrados.slice(0, args.limite) : filtrados;
+    // Enriquecer tickets com nome do responsável
+    const ticketsEnriquecidos = await Promise.all(
+      filtrados.map(async (ticket) => {
+        let responsavelNome: string | undefined = undefined;
+        if (ticket.responsavelId) {
+          const responsavel = await ctx.db.get(ticket.responsavelId);
+          responsavelNome = responsavel?.nome;
+        }
+        return {
+          ...ticket,
+          responsavelNome,
+        };
+      })
+    );
+
+    ticketsEnriquecidos.sort((a, b) => b.atualizadoEm - a.atualizadoEm);
+    return args.limite ? ticketsEnriquecidos.slice(0, args.limite) : ticketsEnriquecidos;
   },
 });
 
@@ -703,3 +718,40 @@ export const generateUploadUrl = mutation({
   },
 });
 
+/**
+ * Migração: Adiciona o campo 'prioridade' aos SLAs antigos que não possuem
+ * Esta mutation corrige documentos criados antes da migração do schema
+ */
+export const migrarSlaConfigs = mutation({
+  args: {},
+  handler: async (ctx) => {
+    const usuario = await assertAuth(ctx);
+    
+    // Buscar todos os SLAs
+    const slaConfigs = await ctx.db.query("slaConfigs").collect();
+    
+    let migrados = 0;
+    for (const sla of slaConfigs) {
+      // Verificar se o documento não tem o campo 'prioridade'
+      // Usando type assertion para acessar campos não tipados
+      const slaDoc = sla as any;
+      if (!slaDoc.prioridade) {
+        // Adicionar prioridade padrão "media" para SLAs antigos
+        await ctx.db.patch(sla._id, {
+          prioridade: "media" as "baixa" | "media" | "alta" | "critica",
+          atualizadoPor: usuario._id,
+          atualizadoEm: Date.now(),
+        });
+        migrados++;
+        console.log(`✅ SLA migrado: ${sla.nome} (ID: ${sla._id})`);
+      }
+    }
+    
+    return {
+      sucesso: true,
+      migrados,
+      total: slaConfigs.length,
+    };
+  },
+});
+
diff --git a/packages/backend/convex/schema.ts b/packages/backend/convex/schema.ts
index e08aeac..00e59b9 100644
--- a/packages/backend/convex/schema.ts
+++ b/packages/backend/convex/schema.ts
@@ -913,11 +913,13 @@ export default defineSchema({
   slaConfigs: defineTable({
     nome: v.string(),
     descricao: v.optional(v.string()),
-    prioridade: v.union(
-      v.literal("baixa"),
-      v.literal("media"),
-      v.literal("alta"),
-      v.literal("critica")
+    prioridade: v.optional(
+      v.union(
+        v.literal("baixa"),
+        v.literal("media"),
+        v.literal("alta"),
+        v.literal("critica")
+      )
     ),
     tempoRespostaHoras: v.number(),
     tempoConclusaoHoras: v.number(),