feat: update Cibersecurity SGSE title and description for clarity, and enhance Central de Chamados page by implementing filter application logic and reactivity for improved user experience

apps/web/src/routes/(dashboard)/ti/+page.svelte

@@ -234,7 +234,7 @@
 			icon: 'control'
 		},
 		{
-			title: 'Cibersecurity SGSE - Sistema de Gerenciamento de Secretaria',
+			title: 'Cibersecurity SGSE - Central de Segurança Cibernética',
 			description:
 				'Central desegurança cibernética com detecção de DDoS, SQLi, APT, bloqueios automatizados, relatórios refinados e alertas sonoros/visuais.',
 			ctaLabel: 'Abrir Central',

apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte

@@ -119,24 +119,54 @@
 
   let carregamentoToken = 0;
   
-  // Carregar chamados quando filtros mudarem
+  // Função para aplicar filtros
+  function aplicarFiltros() {
+    if (abaAtiva !== 'chamados') return;
+    
+    const filtros = {
+      status: filtroStatus === "todos" ? undefined : filtroStatus,
+      responsavelId: filtroResponsavel === "todos" || !filtroResponsavel ? undefined : filtroResponsavel,
+      setor: filtroSetor === "todos" ? undefined : filtroSetor,
+    };
+    if (import.meta.env.DEV) {
+      console.log("🚀 [aplicarFiltros] Carregando chamados com filtros:", filtros);
+      console.log("🚀 [aplicarFiltros] Valores dos filtros:", {
+        filtroStatus,
+        filtroResponsavel,
+        filtroSetor
+      });
+    }
+    carregarChamados(filtros);
+  }
+
+  // Carregar chamados quando filtros ou aba mudarem
   $effect(() => {
+    // Só carregar se estiver na aba de chamados
+    if (abaAtiva !== 'chamados') return;
+    
+    // Acessar os valores dos filtros para criar dependências reativas
+    const status = filtroStatus;
+    const responsavel = filtroResponsavel;
+    const setor = filtroSetor;
+    
     // Pequeno delay para garantir que autenticação está configurada
     const timeoutId = setTimeout(() => {
-      const filtros = {
+      aplicarFiltros();
-        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);
   });
 
+  // Carregar chamados quando mudar para a aba de chamados
+  $effect(() => {
+    if (abaAtiva === 'chamados') {
+      const timeoutId = setTimeout(() => {
+        aplicarFiltros();
+      }, 300);
+      return () => clearTimeout(timeoutId);
+    }
+  });
+
   async function carregarChamados(filtros: {
     status?: Ticket["status"];
     responsavelId?: Id<"usuarios">;
@@ -796,7 +826,11 @@
         </p>
       </div>
       <div class="flex flex-wrap gap-2">
-        <select class="select select-sm select-bordered" bind:value={filtroStatus}>
+        <select 
+          class="select select-sm select-bordered" 
+          bind:value={filtroStatus}
+          onchange={() => aplicarFiltros()}
+        >
           <option value="todos">Todos os status</option>
           <option value="aberto">Aberto</option>
           <option value="em_andamento">Em andamento</option>
@@ -805,13 +839,21 @@
           <option value="encerrado">Encerrado</option>
           <option value="cancelado">Cancelado</option>
         </select>
-        <select class="select select-sm select-bordered" bind:value={filtroResponsavel}>
+        <select 
+          class="select select-sm select-bordered" 
+          bind:value={filtroResponsavel}
+          onchange={() => aplicarFiltros()}
+        >
           <option value="todos">Todos os responsáveis</option>
           {#each usuariosTI as usuario (usuario._id)}
             <option value={usuario._id}>{usuario.nome}</option>
           {/each}
         </select>
-        <select class="select select-sm select-bordered" bind:value={filtroSetor}>
+        <select 
+          class="select select-sm select-bordered" 
+          bind:value={filtroSetor}
+          onchange={() => aplicarFiltros()}
+        >
           <option value="todos">Todos os setores</option>
           <option value="TI">TI</option>
           <option value="Infraestrutura">Infraestrutura</option>

apps/web/src/routes/(dashboard)/ti/cibersecurity/+page.svelte

@@ -4,14 +4,14 @@
 </script>
 
 <svelte:head>
-	<title>Cibersecurity SGSE - Sistema de Gerenciamento de Secretaria • Wizcard TI</title>
+	<title>Cibersecurity SGSE - Central de Segurança Cibernética</title>
 </svelte:head>
 
 <section class="space-y-8 p-4 lg:p-8">
 	<header class="flex flex-wrap items-center justify-between gap-4">
 		<div>
 			<p class="text-primary text-sm font-semibold tracking-widest uppercase">
-				Cibersecurity • SGSE - Sistema de Gerenciamento de Secretaria
+				Cibersecurity • SGSE - Central de Segurança Cibernética
 			</p>
 			<h1 class="text-base-content text-4xl font-black">Segurança Avançada</h1>
 			<p class="text-base-content/70 max-w-3xl text-sm">