From 1774b135b3e2f90a3b282d2e9ba1b9f786144525 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Wed, 5 Nov 2025 10:40:30 -0300
Subject: [PATCH 1/6] feat: enhance chat functionality with global
 notifications and user management

- Implemented global notifications for new messages, allowing users to receive alerts even when the chat is minimized or closed.
- Added functionality for users to leave group conversations and meeting rooms, with appropriate notifications sent to remaining participants.
- Introduced a modal for sending notifications within meeting rooms, enabling admins to communicate important messages to all participants.
- Enhanced the chat components to support mention functionality, allowing users to tag participants in messages for better engagement.
- Updated backend mutations to handle user exit from conversations and sending notifications, ensuring robust data handling and user experience.
---
 .../src/lib/components/chat/ChatWidget.svelte | 171 ++++++++++++
 .../src/lib/components/chat/ChatWindow.svelte | 251 +++++++++++++++++-
 .../lib/components/chat/MessageInput.svelte   | 130 ++++++++-
 .../lib/components/chat/MessageList.svelte    | 143 ++++++++++
 .../components/chat/SalaReuniaoManager.svelte |   6 +-
 packages/backend/convex/chat.ts               | 170 ++++++++++++
 6 files changed, 853 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/lib/components/chat/ChatWidget.svelte b/apps/web/src/lib/components/chat/ChatWidget.svelte
index f014d77..325db0c 100644
--- a/apps/web/src/lib/components/chat/ChatWidget.svelte
+++ b/apps/web/src/lib/components/chat/ChatWidget.svelte
@@ -7,6 +7,7 @@
     minimizarChat,
     maximizarChat,
     abrirChat,
+    abrirConversa,
   } from "$lib/stores/chatStore";
   import { useQuery } from "convex-svelte";
   import { api } from "@sgse-app/backend/convex/_generated/api";
@@ -70,6 +71,9 @@
   }
 
   let windowSize = $state(getSavedSize());
+  let isMaximized = $state(false);
+  let previousSize = $state({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
+  let previousPosition = $state({ x: 0, y: 0 });
 
   // Salvar tamanho no localStorage
   function saveSize() {
@@ -152,6 +156,94 @@
     activeConversation = $conversaAtiva;
   });
 
+  // Detectar novas mensagens globalmente (mesmo quando chat está fechado/minimizado)
+  const todasConversas = useQuery(api.chat.listarConversas, {});
+  let ultimoTimestampGlobal = $state<number>(0);
+  let showGlobalNotificationPopup = $state(false);
+  let globalNotificationMessage = $state<{ remetente: string; conteudo: string; conversaId: string } | null>(null);
+  let globalNotificationTimeout: ReturnType<typeof setTimeout> | null = null;
+  
+  // Função para tocar som de notificação
+  function tocarSomNotificacaoGlobal() {
+    try {
+      const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
+      const audioContext = new AudioContext();
+      if (audioContext.state === 'suspended') {
+        audioContext.resume().then(() => {
+          const oscillator = audioContext.createOscillator();
+          const gainNode = audioContext.createGain();
+          oscillator.connect(gainNode);
+          gainNode.connect(audioContext.destination);
+          oscillator.frequency.value = 800;
+          oscillator.type = 'sine';
+          gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
+          gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
+          oscillator.start(audioContext.currentTime);
+          oscillator.stop(audioContext.currentTime + 0.3);
+        }).catch(() => {});
+      } else {
+        const oscillator = audioContext.createOscillator();
+        const gainNode = audioContext.createGain();
+        oscillator.connect(gainNode);
+        gainNode.connect(audioContext.destination);
+        oscillator.frequency.value = 800;
+        oscillator.type = 'sine';
+        gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
+        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
+        oscillator.start(audioContext.currentTime);
+        oscillator.stop(audioContext.currentTime + 0.3);
+      }
+    } catch (e) {
+      // Ignorar erro de áudio
+    }
+  }
+  
+  $effect(() => {
+    if (todasConversas?.data && authStore.usuario?._id) {
+      // Encontrar o maior timestamp de todas as conversas
+      let maiorTimestamp = 0;
+      let conversaComNovaMensagem: any = null;
+      
+      todasConversas.data.forEach((conv: any) => {
+        if (conv.ultimaMensagemTimestamp && conv.ultimaMensagemTimestamp > maiorTimestamp) {
+          maiorTimestamp = conv.ultimaMensagemTimestamp;
+          conversaComNovaMensagem = conv;
+        }
+      });
+      
+      // Se há nova mensagem (timestamp maior) e não estamos vendo essa conversa, tocar som e mostrar popup
+      if (maiorTimestamp > ultimoTimestampGlobal && conversaComNovaMensagem) {
+        const conversaAtivaId = activeConversation ? String(activeConversation) : null;
+        const conversaIdStr = String(conversaComNovaMensagem._id);
+        
+        // Só mostrar notificação se não estamos vendo essa conversa
+        if (!isOpen || conversaAtivaId !== conversaIdStr) {
+          // Tocar som de notificação
+          tocarSomNotificacaoGlobal();
+          
+          // Mostrar popup de notificação
+          globalNotificationMessage = {
+            remetente: conversaComNovaMensagem.outroUsuario?.nome || conversaComNovaMensagem.nome || "Usuário",
+            conteudo: conversaComNovaMensagem.ultimaMensagem || "",
+            conversaId: conversaComNovaMensagem._id
+          };
+          showGlobalNotificationPopup = true;
+          
+          // Ocultar popup após 5 segundos
+          if (globalNotificationTimeout) {
+            clearTimeout(globalNotificationTimeout);
+          }
+          globalNotificationTimeout = setTimeout(() => {
+            showGlobalNotificationPopup = false;
+            globalNotificationMessage = null;
+          }, 5000);
+        }
+        
+        ultimoTimestampGlobal = maiorTimestamp;
+      }
+    }
+  });
+
   function handleToggle() {
     if (isOpen && !isMinimized) {
       minimizarChat();
@@ -169,6 +261,31 @@
   }
 
   function handleMaximize() {
+    if (isMaximized) {
+      // Restaurar tamanho anterior
+      windowSize = previousSize;
+      position = previousPosition;
+      isMaximized = false;
+      saveSize();
+      ajustarPosicao();
+    } else {
+      // Salvar tamanho e posição atuais
+      previousSize = { ...windowSize };
+      previousPosition = { ...position };
+      
+      // Maximizar completamente: usar toda a largura e altura da tela
+      windowSize = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+      position = {
+        x: 0,
+        y: 0
+      };
+      isMaximized = true;
+      saveSize();
+      ajustarPosicao();
+    }
     maximizarChat();
   }
 
@@ -546,6 +663,60 @@
   </div>
 {/if}
 
+<!-- Popup Global de Notificação de Nova Mensagem (quando chat está fechado/minimizado) -->
+{#if showGlobalNotificationPopup && globalNotificationMessage}
+  <div
+    class="fixed top-4 right-4 z-[1000] bg-base-100 rounded-lg shadow-2xl border border-primary/20 p-4 max-w-sm cursor-pointer"
+    style="box-shadow: 0 10px 40px -10px rgba(0,0,0,0.3); animation: slideInRight 0.3s ease-out;"
+    onclick={() => {
+      showGlobalNotificationPopup = false;
+      globalNotificationMessage = null;
+      if (globalNotificationTimeout) {
+        clearTimeout(globalNotificationTimeout);
+      }
+      // Abrir chat e conversa ao clicar
+      abrirChat();
+      abrirConversa(globalNotificationMessage.conversaId as any);
+    }}
+  >
+    <div class="flex items-start gap-3">
+      <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="w-5 h-5 text-primary"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
+        </svg>
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="font-semibold text-base-content text-sm mb-1">Nova mensagem de {globalNotificationMessage.remetente}</p>
+        <p class="text-xs text-base-content/70 line-clamp-2">{globalNotificationMessage.conteudo}</p>
+        <p class="text-xs text-primary mt-1">Clique para abrir</p>
+      </div>
+      <button
+        type="button"
+        class="flex-shrink-0 w-6 h-6 rounded-full hover:bg-base-200 flex items-center justify-center transition-colors"
+        onclick={(e) => {
+          e.stopPropagation();
+          showGlobalNotificationPopup = false;
+          globalNotificationMessage = null;
+          if (globalNotificationTimeout) {
+            clearTimeout(globalNotificationTimeout);
+          }
+        }}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  </div>
+{/if}
+
 <style>
   /* Animação do badge com bounce suave */
   @keyframes badge-bounce {
diff --git a/apps/web/src/lib/components/chat/ChatWindow.svelte b/apps/web/src/lib/components/chat/ChatWindow.svelte
index 27e455f..9706eb7 100644
--- a/apps/web/src/lib/components/chat/ChatWindow.svelte
+++ b/apps/web/src/lib/components/chat/ChatWindow.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { useQuery } from "convex-svelte";
+  import { useQuery, useConvexClient } from "convex-svelte";
   import { api } from "@sgse-app/backend/convex/_generated/api";
   import { voltarParaLista } from "$lib/stores/chatStore";
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
@@ -10,6 +10,7 @@
   import ScheduleMessageModal from "./ScheduleMessageModal.svelte";
   import SalaReuniaoManager from "./SalaReuniaoManager.svelte";
   import { getAvatarUrl } from "$lib/utils/avatarGenerator";
+  import { authStore } from "$lib/stores/auth.svelte";
 
   interface Props {
     conversaId: string;
@@ -17,8 +18,12 @@
 
   let { conversaId }: Props = $props();
   
+  const client = useConvexClient();
+  
   let showScheduleModal = $state(false);
   let showSalaManager = $state(false);
+  let showAdminMenu = $state(false);
+  let showNotificacaoModal = $state(false);
 
   const conversas = useQuery(api.chat.listarConversas, {});
   const isAdmin = useQuery(api.chat.verificarSeEhAdmin, { conversaId: conversaId as any });
@@ -73,11 +78,36 @@
     }
     return null;
   }
+
+  async function handleSairGrupoOuSala() {
+    const c = conversa();
+    if (!c || (c.tipo !== "grupo" && c.tipo !== "sala_reuniao")) return;
+    
+    const tipoTexto = c.tipo === "sala_reuniao" ? "sala de reunião" : "grupo";
+    if (!confirm(`Tem certeza que deseja sair da ${tipoTexto} "${c.nome || "Sem nome"}"?`)) {
+      return;
+    }
+
+    try {
+      const resultado = await client.mutation(api.chat.sairGrupoOuSala, {
+        conversaId: conversaId as any,
+      });
+
+      if (resultado.sucesso) {
+        voltarParaLista();
+      } else {
+        alert(resultado.erro || "Erro ao sair da conversa");
+      }
+    } catch (error: any) {
+      console.error("Erro ao sair da conversa:", error);
+      alert(error.message || "Erro ao sair da conversa");
+    }
+  }
 </script>
 
-<div class="flex flex-col h-full">
+<div class="flex flex-col h-full" onclick={() => (showAdminMenu = false)}>
   <!-- Header -->
-  <div class="flex items-center gap-3 px-4 py-3 border-b border-base-300 bg-base-200">
+  <div class="flex items-center gap-3 px-4 py-3 border-b border-base-300 bg-base-200" onclick={(e) => e.stopPropagation()}>
     <!-- Botão Voltar -->
     <button
       type="button"
@@ -170,17 +200,20 @@
 
     <!-- Botões de ação -->
     <div class="flex items-center gap-1">
-      <!-- Botão Gerenciar Sala (apenas para salas de reunião) -->
-      {#if conversa()?.tipo === "sala_reuniao"}
+      <!-- Botão Sair (apenas para grupos e salas de reunião) -->
+      {#if conversa() && (conversa()?.tipo === "grupo" || conversa()?.tipo === "sala_reuniao")}
         <button
           type="button"
           class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
-          style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2);"
-          onclick={() => (showSalaManager = true)}
-          aria-label="Gerenciar sala"
-          title="Gerenciar sala de reunião"
+          style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
+          onclick={(e) => {
+            e.stopPropagation();
+            handleSairGrupoOuSala();
+          }}
+          aria-label="Sair"
+          title="Sair da conversa"
         >
-          <div class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/10 transition-colors duration-300"></div>
+          <div class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/10 transition-colors duration-300"></div>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -189,13 +222,117 @@
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="w-5 h-5 text-blue-500 relative z-10 group-hover:scale-110 transition-transform"
+            class="w-5 h-5 text-red-500 relative z-10 group-hover:scale-110 transition-transform"
           >
-            <circle cx="12" cy="12" r="3"/>
-            <path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24"/>
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+            <polyline points="16 17 21 12 16 7"/>
+            <line x1="21" y1="12" x2="9" y2="12"/>
           </svg>
         </button>
       {/if}
+
+      <!-- Botão Menu Administrativo (apenas para salas de reunião e apenas para admins) -->
+      {#if conversa()?.tipo === "sala_reuniao" && isAdmin?.data}
+        <div class="relative admin-menu-container">
+          <button
+            type="button"
+            class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
+            style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2);"
+            onclick={(e) => {
+              e.stopPropagation();
+              showAdminMenu = !showAdminMenu;
+            }}
+            aria-label="Menu administrativo"
+            title="Recursos administrativos"
+          >
+            <div class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/10 transition-colors duration-300"></div>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="w-5 h-5 text-blue-500 relative z-10 group-hover:scale-110 transition-transform"
+            >
+              <circle cx="12" cy="12" r="1"/>
+              <circle cx="12" cy="5" r="1"/>
+              <circle cx="12" cy="19" r="1"/>
+            </svg>
+          </button>
+          {#if showAdminMenu}
+            <ul
+              class="absolute right-0 top-full mt-2 bg-base-100 rounded-lg shadow-xl border border-base-300 w-56 z-[100] overflow-hidden"
+              onclick={(e) => e.stopPropagation()}
+            >
+              <li>
+                <button
+                  type="button"
+                  class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors flex items-center gap-2"
+                  onclick={(e) => {
+                    e.stopPropagation();
+                    showSalaManager = true;
+                    showAdminMenu = false;
+                  }}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+                  </svg>
+                  Gerenciar Participantes
+                </button>
+              </li>
+              <li>
+                <button
+                  type="button"
+                  class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors flex items-center gap-2"
+                  onclick={(e) => {
+                    e.stopPropagation();
+                    showNotificacaoModal = true;
+                    showAdminMenu = false;
+                  }}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
+                  </svg>
+                  Enviar Notificação
+                </button>
+              </li>
+              <li>
+                <button
+                  type="button"
+                  class="w-full text-left px-4 py-3 hover:bg-error/10 transition-colors flex items-center gap-2 text-error"
+                  onclick={(e) => {
+                    e.stopPropagation();
+                    (async () => {
+                      if (!confirm("Tem certeza que deseja encerrar esta reunião? Todos os participantes serão removidos.")) return;
+                      try {
+                        const resultado = await client.mutation(api.chat.encerrarReuniao, {
+                          conversaId: conversaId as any,
+                        });
+                        if (resultado.sucesso) {
+                          alert("Reunião encerrada com sucesso!");
+                          voltarParaLista();
+                        } else {
+                          alert(resultado.erro || "Erro ao encerrar reunião");
+                        }
+                      } catch (error: any) {
+                        alert(error.message || "Erro ao encerrar reunião");
+                      }
+                      showAdminMenu = false;
+                    })();
+                  }}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                  </svg>
+                  Encerrar Reunião
+                </button>
+              </li>
+            </ul>
+          {/if}
+        </div>
+      {/if}
       
       <!-- Botão Agendar MODERNO -->
       <button
@@ -252,3 +389,91 @@
   />
 {/if}
 
+<!-- Modal de Enviar Notificação -->
+{#if showNotificacaoModal && conversa()?.tipo === "sala_reuniao" && isAdmin?.data}
+  <div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50" onclick={() => (showNotificacaoModal = false)}>
+    <div
+      class="bg-base-100 rounded-xl shadow-2xl w-full max-w-md m-4"
+      onclick={(e) => e.stopPropagation()}
+    >
+      <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
+        <h2 class="text-xl font-semibold">Enviar Notificação</h2>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm btn-circle"
+          onclick={() => (showNotificacaoModal = false)}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="p-6">
+        <form
+          onsubmit={async (e) => {
+            e.preventDefault();
+            const formData = new FormData(e.currentTarget);
+            const titulo = formData.get("titulo") as string;
+            const mensagem = formData.get("mensagem") as string;
+            
+            if (!titulo.trim() || !mensagem.trim()) {
+              alert("Preencha todos os campos");
+              return;
+            }
+
+            try {
+              const resultado = await client.mutation(api.chat.enviarNotificacaoReuniao, {
+                conversaId: conversaId as any,
+                titulo: titulo.trim(),
+                mensagem: mensagem.trim(),
+              });
+
+              if (resultado.sucesso) {
+                alert("Notificação enviada com sucesso!");
+                showNotificacaoModal = false;
+              } else {
+                alert(resultado.erro || "Erro ao enviar notificação");
+              }
+            } catch (error: any) {
+              alert(error.message || "Erro ao enviar notificação");
+            }
+          }}
+        >
+          <div class="mb-4">
+            <label class="label">
+              <span class="label-text">Título</span>
+            </label>
+            <input
+              type="text"
+              name="titulo"
+              placeholder="Título da notificação"
+              class="input input-bordered w-full"
+              required
+            />
+          </div>
+          <div class="mb-4">
+            <label class="label">
+              <span class="label-text">Mensagem</span>
+            </label>
+            <textarea
+              name="mensagem"
+              placeholder="Mensagem da notificação"
+              class="textarea textarea-bordered w-full"
+              rows="4"
+              required
+            ></textarea>
+          </div>
+          <div class="flex gap-2">
+            <button type="button" class="btn btn-ghost flex-1" onclick={() => (showNotificacaoModal = false)}>
+              Cancelar
+            </button>
+            <button type="submit" class="btn btn-primary flex-1">
+              Enviar
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+{/if}
+
diff --git a/apps/web/src/lib/components/chat/MessageInput.svelte b/apps/web/src/lib/components/chat/MessageInput.svelte
index 5e04763..99834b5 100644
--- a/apps/web/src/lib/components/chat/MessageInput.svelte
+++ b/apps/web/src/lib/components/chat/MessageInput.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
+  import { useConvexClient, useQuery } from "convex-svelte";
   import { api } from "@sgse-app/backend/convex/_generated/api";
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
   import { onMount } from "svelte";
+  import { authStore } from "$lib/stores/auth.svelte";
 
   interface Props {
     conversaId: Id<"conversas">;
@@ -11,6 +12,7 @@
   let { conversaId }: Props = $props();
 
   const client = useConvexClient();
+  const conversas = useQuery(api.chat.listarConversas, {});
 
   let mensagem = $state("");
   let textarea: HTMLTextAreaElement;
@@ -19,6 +21,9 @@
   let digitacaoTimeout: ReturnType<typeof setTimeout> | null = null;
   let showEmojiPicker = $state(false);
   let mensagemRespondendo: { id: Id<"mensagens">; conteudo: string; remetente: string } | null = $state(null);
+  let showMentionsDropdown = $state(false);
+  let mentionQuery = $state("");
+  let mentionStartPos = $state(0);
 
   // Emojis mais usados
   const emojis = [
@@ -37,13 +42,55 @@
     }
   }
 
-  // Auto-resize do textarea
-  function handleInput() {
+  // Obter conversa atual
+  const conversa = $derived(() => {
+    if (!conversas?.data) return null;
+    return conversas.data.find((c: any) => c._id === conversaId);
+  });
+
+  // Obter participantes para menções (apenas grupos e salas)
+  const participantesParaMencoes = $derived(() => {
+    const c = conversa();
+    if (!c || (c.tipo !== "grupo" && c.tipo !== "sala_reuniao")) return [];
+    return c.participantesInfo || [];
+  });
+
+  // Filtrar participantes para dropdown de menções
+  const participantesFiltrados = $derived(() => {
+    if (!mentionQuery.trim()) return participantesParaMencoes().slice(0, 5);
+    const query = mentionQuery.toLowerCase();
+    return participantesParaMencoes().filter((p: any) =>
+      p.nome?.toLowerCase().includes(query) ||
+      p.email?.toLowerCase().includes(query)
+    ).slice(0, 5);
+  });
+
+  // Auto-resize do textarea e detectar menções
+  function handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement;
     if (textarea) {
       textarea.style.height = "auto";
       textarea.style.height = Math.min(textarea.scrollHeight, 120) + "px";
     }
 
+    // Detectar menções (@)
+    const cursorPos = target.selectionStart || 0;
+    const textBeforeCursor = mensagem.substring(0, cursorPos);
+    const lastAtIndex = textBeforeCursor.lastIndexOf('@');
+    
+    if (lastAtIndex !== -1) {
+      const textAfterAt = textBeforeCursor.substring(lastAtIndex + 1);
+      // Se não há espaço após o @, mostrar dropdown
+      if (!textAfterAt.includes(' ') && !textAfterAt.includes('\n')) {
+        mentionQuery = textAfterAt;
+        mentionStartPos = lastAtIndex;
+        showMentionsDropdown = true;
+        return;
+      }
+    }
+    
+    showMentionsDropdown = false;
+
     // Indicador de digitação (debounce de 1s)
     if (digitacaoTimeout) {
       clearTimeout(digitacaoTimeout);
@@ -55,15 +102,46 @@
     }, 1000);
   }
 
+  function inserirMencao(participante: any) {
+    const nome = participante.nome.split(' ')[0]; // Usar primeiro nome
+    const antes = mensagem.substring(0, mentionStartPos);
+    const depois = mensagem.substring(textarea.selectionStart || mensagem.length);
+    mensagem = antes + `@${nome} ` + depois;
+    showMentionsDropdown = false;
+    mentionQuery = "";
+    if (textarea) {
+      textarea.focus();
+      const newPos = antes.length + nome.length + 2;
+      setTimeout(() => {
+        textarea.setSelectionRange(newPos, newPos);
+      }, 0);
+    }
+  }
+
   async function handleEnviar() {
     const texto = mensagem.trim();
     if (!texto || enviando) return;
 
+    // Extrair menções do texto (@nome)
+    const mencoesIds: Id<"usuarios">[] = [];
+    const mentionRegex = /@(\w+)/g;
+    let match;
+    while ((match = mentionRegex.exec(texto)) !== null) {
+      const nomeMencionado = match[1];
+      const participante = participantesParaMencoes().find((p: any) => 
+        p.nome.split(' ')[0].toLowerCase() === nomeMencionado.toLowerCase()
+      );
+      if (participante) {
+        mencoesIds.push(participante._id);
+      }
+    }
+
     console.log("📤 [MessageInput] Enviando mensagem:", {
       conversaId,
       conteudo: texto,
       tipo: "texto",
       respostaPara: mensagemRespondendo?.id,
+      mencoes: mencoesIds,
     });
 
     try {
@@ -73,12 +151,15 @@
         conteudo: texto,
         tipo: "texto",
         respostaPara: mensagemRespondendo?.id,
+        mencoes: mencoesIds.length > 0 ? mencoesIds : undefined,
       });
       
       console.log("✅ [MessageInput] Mensagem enviada com sucesso! ID:", result);
       
       mensagem = "";
       mensagemRespondendo = null;
+      showMentionsDropdown = false;
+      mentionQuery = "";
       if (textarea) {
         textarea.style.height = "auto";
       }
@@ -119,6 +200,22 @@
   });
 
   function handleKeyDown(e: KeyboardEvent) {
+    // Navegar dropdown de menções
+    if (showMentionsDropdown && participantesFiltrados().length > 0) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
+        e.preventDefault();
+        // Implementação simples: selecionar primeiro participante
+        if (e.key === "Enter") {
+          inserirMencao(participantesFiltrados()[0]);
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        showMentionsDropdown = false;
+        return;
+      }
+    }
+    
     // Enter sem Shift = enviar
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -295,11 +392,36 @@
         bind:value={mensagem}
         oninput={handleInput}
         onkeydown={handleKeyDown}
-        placeholder="Digite uma mensagem..."
+        placeholder="Digite uma mensagem... (use @ para mencionar)"
         class="textarea textarea-bordered w-full resize-none min-h-[44px] max-h-[120px] pr-10"
         rows="1"
         disabled={enviando || uploadingFile}
       ></textarea>
+      
+      <!-- Dropdown de Menções -->
+      {#if showMentionsDropdown && participantesFiltrados().length > 0 && (conversa()?.tipo === "grupo" || conversa()?.tipo === "sala_reuniao")}
+        <div class="absolute bottom-full left-0 mb-2 bg-base-100 rounded-lg shadow-xl border border-base-300 z-50 w-64 max-h-48 overflow-y-auto">
+          {#each participantesFiltrados() as participante (participante._id)}
+            <button
+              type="button"
+              class="w-full text-left px-4 py-2 hover:bg-base-200 transition-colors flex items-center gap-2"
+              onclick={() => inserirMencao(participante)}
+            >
+              <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center overflow-hidden">
+                {#if participante.fotoPerfilUrl}
+                  <img src={participante.fotoPerfilUrl} alt={participante.nome} class="w-full h-full object-cover" />
+                {:else}
+                  <span class="text-xs font-semibold">{participante.nome.charAt(0).toUpperCase()}</span>
+                {/if}
+              </div>
+              <div class="flex-1 min-w-0">
+                <p class="text-sm font-medium truncate">{participante.nome}</p>
+                <p class="text-xs text-base-content/60 truncate">@{participante.nome.split(' ')[0]}</p>
+              </div>
+            </button>
+          {/each}
+        </div>
+      {/if}
     </div>
 
     <!-- Botão de enviar MODERNO -->
diff --git a/apps/web/src/lib/components/chat/MessageList.svelte b/apps/web/src/lib/components/chat/MessageList.svelte
index a3196d9..e850e61 100644
--- a/apps/web/src/lib/components/chat/MessageList.svelte
+++ b/apps/web/src/lib/components/chat/MessageList.svelte
@@ -21,6 +21,10 @@
   let messagesContainer: HTMLDivElement;
   let shouldScrollToBottom = true;
   let lastMessageCount = 0;
+  let lastMessageId = $state<string | null>(null);
+  let showNotificationPopup = $state(false);
+  let notificationMessage = $state<{ remetente: string; conteudo: string } | null>(null);
+  let notificationTimeout: ReturnType<typeof setTimeout> | null = null;
 
   // Obter ID do usuário atual - usar $state para garantir reatividade
   let usuarioAtualId = $state<string | null>(null);
@@ -36,12 +40,101 @@
     }
   });
 
+  // Função para tocar som de notificação
+  function tocarSomNotificacao() {
+    try {
+      // Usar AudioContext (requer interação do usuário para iniciar)
+      const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
+      let audioContext: AudioContext | null = null;
+      
+      try {
+        audioContext = new AudioContext();
+      } catch (e) {
+        // Se falhar, tentar resumir contexto existente
+        console.warn("Não foi possível criar AudioContext:", e);
+        return;
+      }
+      
+      // Resumir contexto se estiver suspenso (necessário após interação do usuário)
+      if (audioContext.state === 'suspended') {
+        audioContext.resume().then(() => {
+          const oscillator = audioContext!.createOscillator();
+          const gainNode = audioContext!.createGain();
+          
+          oscillator.connect(gainNode);
+          gainNode.connect(audioContext!.destination);
+          
+          oscillator.frequency.value = 800;
+          oscillator.type = 'sine';
+          
+          gainNode.gain.setValueAtTime(0.2, audioContext!.currentTime);
+          gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext!.currentTime + 0.3);
+          
+          oscillator.start(audioContext!.currentTime);
+          oscillator.stop(audioContext!.currentTime + 0.3);
+        }).catch(() => {
+          // Ignorar erro se não conseguir resumir
+        });
+      } else {
+        const oscillator = audioContext.createOscillator();
+        const gainNode = audioContext.createGain();
+        
+        oscillator.connect(gainNode);
+        gainNode.connect(audioContext.destination);
+        
+        oscillator.frequency.value = 800;
+        oscillator.type = 'sine';
+        
+        gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
+        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
+        
+        oscillator.start(audioContext.currentTime);
+        oscillator.stop(audioContext.currentTime + 0.3);
+      }
+    } catch (error) {
+      console.error("Erro ao tocar som de notificação:", error);
+    }
+  }
+
   // Auto-scroll para a última mensagem quando novas mensagens chegam
+  // E detectar novas mensagens para tocar som e mostrar popup
   $effect(() => {
     if (mensagens?.data && messagesContainer) {
       const currentCount = mensagens.data.length;
       const isNewMessage = currentCount > lastMessageCount;
       
+      // Detectar nova mensagem de outro usuário
+      if (isNewMessage && mensagens.data.length > 0 && usuarioAtualId) {
+        const ultimaMensagem = mensagens.data[mensagens.data.length - 1];
+        const remetenteIdStr = ultimaMensagem.remetenteId 
+          ? String(ultimaMensagem.remetenteId).trim() 
+          : (ultimaMensagem.remetente?._id ? String(ultimaMensagem.remetente._id).trim() : null);
+        
+        // Se é uma nova mensagem de outro usuário (não minha)
+        if (remetenteIdStr && remetenteIdStr !== usuarioAtualId && ultimaMensagem._id !== lastMessageId) {
+          // Tocar som de notificação
+          tocarSomNotificacao();
+          
+          // Mostrar popup de notificação
+          notificationMessage = {
+            remetente: ultimaMensagem.remetente?.nome || "Usuário",
+            conteudo: ultimaMensagem.conteudo.substring(0, 100) + (ultimaMensagem.conteudo.length > 100 ? "..." : "")
+          };
+          showNotificationPopup = true;
+          
+          // Ocultar popup após 5 segundos
+          if (notificationTimeout) {
+            clearTimeout(notificationTimeout);
+          }
+          notificationTimeout = setTimeout(() => {
+            showNotificationPopup = false;
+            notificationMessage = null;
+          }, 5000);
+          
+          lastMessageId = ultimaMensagem._id;
+        }
+      }
+      
       if (isNewMessage || shouldScrollToBottom) {
         // Usar requestAnimationFrame para garantir que o DOM foi atualizado
         requestAnimationFrame(() => {
@@ -536,3 +629,53 @@
   {/if}
 </div>
 
+<!-- Popup de Notificação de Nova Mensagem -->
+{#if showNotificationPopup && notificationMessage}
+  <div
+    class="fixed top-4 right-4 z-[1000] bg-base-100 rounded-lg shadow-2xl border border-primary/20 p-4 max-w-sm animate-in slide-in-from-top-5 fade-in duration-300"
+    style="box-shadow: 0 10px 40px -10px rgba(0,0,0,0.3);"
+    onclick={() => {
+      showNotificationPopup = false;
+      notificationMessage = null;
+      if (notificationTimeout) {
+        clearTimeout(notificationTimeout);
+      }
+    }}
+  >
+    <div class="flex items-start gap-3">
+      <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="w-5 h-5 text-primary"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
+        </svg>
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="font-semibold text-base-content text-sm mb-1">Nova mensagem de {notificationMessage.remetente}</p>
+        <p class="text-xs text-base-content/70 line-clamp-2">{notificationMessage.conteudo}</p>
+      </div>
+      <button
+        type="button"
+        class="flex-shrink-0 w-6 h-6 rounded-full hover:bg-base-200 flex items-center justify-center transition-colors"
+        onclick={(e) => {
+          e.stopPropagation();
+          showNotificationPopup = false;
+          notificationMessage = null;
+          if (notificationTimeout) {
+            clearTimeout(notificationTimeout);
+          }
+        }}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  </div>
+{/if}
+
diff --git a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
index 0413796..104efb9 100644
--- a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
+++ b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
@@ -151,7 +151,11 @@
   }
 </script>
 
-<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50" onclick={onClose}>
+<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50" onclick={(e) => {
+  if (e.target === e.currentTarget) {
+    onClose();
+  }
+}}>
   <div
     class="bg-base-100 rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col m-4"
     onclick={(e) => e.stopPropagation()}
diff --git a/packages/backend/convex/chat.ts b/packages/backend/convex/chat.ts
index b36b449..28978fe 100644
--- a/packages/backend/convex/chat.ts
+++ b/packages/backend/convex/chat.ts
@@ -1300,6 +1300,176 @@ export const rebaixarAdministrador = mutation({
   },
 });
 
+/**
+ * Permite que um usuário saia de um grupo ou sala de reunião
+ */
+export const sairGrupoOuSala = mutation({
+  args: {
+    conversaId: v.id("conversas"),
+  },
+  returns: v.object({ sucesso: v.boolean(), erro: v.optional(v.string()) }),
+  handler: async (ctx, args) => {
+    const usuarioAtual = await getUsuarioAutenticado(ctx);
+    if (!usuarioAtual) {
+      return { sucesso: false, erro: "Não autenticado" };
+    }
+
+    const conversa = await ctx.db.get(args.conversaId);
+    if (!conversa) {
+      return { sucesso: false, erro: "Conversa não encontrada" };
+    }
+
+    // Verificar se é grupo ou sala de reunião
+    if (conversa.tipo !== "grupo" && conversa.tipo !== "sala_reuniao") {
+      return { sucesso: false, erro: "Esta funcionalidade é apenas para grupos e salas de reunião" };
+    }
+
+    // Verificar se usuário é participante
+    if (!conversa.participantes.includes(usuarioAtual._id)) {
+      return { sucesso: false, erro: "Você não é participante desta conversa" };
+    }
+
+    // Remover usuário dos participantes
+    const novosParticipantes = conversa.participantes.filter((p) => p !== usuarioAtual._id);
+    
+    // Se for sala de reunião e o usuário for administrador, removê-lo também dos administradores
+    let novosAdministradores = conversa.administradores;
+    if (conversa.tipo === "sala_reuniao" && conversa.administradores) {
+      novosAdministradores = conversa.administradores.filter((adminId) => adminId !== usuarioAtual._id);
+    }
+
+    await ctx.db.patch(args.conversaId, {
+      participantes: novosParticipantes,
+      administradores: novosAdministradores && novosAdministradores.length > 0 ? novosAdministradores : undefined,
+    });
+
+    // Criar notificação para outros participantes informando que o usuário saiu
+    const tipoTexto = conversa.tipo === "sala_reuniao" ? "sala de reunião" : "grupo";
+    for (const participanteId of novosParticipantes) {
+      await ctx.db.insert("notificacoes", {
+        usuarioId: participanteId,
+        tipo: "nova_mensagem",
+        conversaId: args.conversaId,
+        remetenteId: usuarioAtual._id,
+        titulo: "Participante saiu",
+        descricao: `${usuarioAtual.nome} saiu da ${tipoTexto} "${conversa.nome || "Sem nome"}"`,
+        lida: false,
+        criadaEm: Date.now(),
+      });
+    }
+
+    return { sucesso: true };
+  },
+});
+
+/**
+ * Encerra uma sala de reunião (apenas administradores)
+ * Remove todos os participantes e marca a sala como encerrada
+ */
+export const encerrarReuniao = mutation({
+  args: {
+    conversaId: v.id("conversas"),
+  },
+  returns: v.object({ sucesso: v.boolean(), erro: v.optional(v.string()) }),
+  handler: async (ctx, args) => {
+    const usuarioAtual = await getUsuarioAutenticado(ctx);
+    if (!usuarioAtual) {
+      return { sucesso: false, erro: "Não autenticado" };
+    }
+
+    const conversa = await ctx.db.get(args.conversaId);
+    if (!conversa) {
+      return { sucesso: false, erro: "Sala de reunião não encontrada" };
+    }
+
+    // Verificar se é sala de reunião
+    if (conversa.tipo !== "sala_reuniao") {
+      return { sucesso: false, erro: "Esta funcionalidade é apenas para salas de reunião" };
+    }
+
+    // Verificar se usuário é administrador
+    const isAdmin = await verificarPermissaoAdmin(ctx, args.conversaId, usuarioAtual._id);
+    if (!isAdmin) {
+      return { sucesso: false, erro: "Apenas administradores podem encerrar a reunião" };
+    }
+
+    // Criar notificação para todos os participantes informando que a reunião foi encerrada
+    for (const participanteId of conversa.participantes) {
+      if (participanteId !== usuarioAtual._id) {
+        await ctx.db.insert("notificacoes", {
+          usuarioId: participanteId,
+          tipo: "nova_mensagem",
+          conversaId: args.conversaId,
+          remetenteId: usuarioAtual._id,
+          titulo: "Reunião encerrada",
+          descricao: `A sala de reunião "${conversa.nome || "Sem nome"}" foi encerrada por ${usuarioAtual.nome}`,
+          lida: false,
+          criadaEm: Date.now(),
+        });
+      }
+    }
+
+    // Remover todos os participantes (exceto o criador, se necessário manter histórico)
+    // Por enquanto, vamos apenas limpar a lista de participantes
+    await ctx.db.patch(args.conversaId, {
+      participantes: [],
+      administradores: undefined,
+    });
+
+    return { sucesso: true };
+  },
+});
+
+/**
+ * Envia uma notificação para todos os participantes de uma sala de reunião (apenas administradores)
+ */
+export const enviarNotificacaoReuniao = mutation({
+  args: {
+    conversaId: v.id("conversas"),
+    titulo: v.string(),
+    mensagem: v.string(),
+  },
+  returns: v.object({ sucesso: v.boolean(), erro: v.optional(v.string()) }),
+  handler: async (ctx, args) => {
+    const usuarioAtual = await getUsuarioAutenticado(ctx);
+    if (!usuarioAtual) {
+      return { sucesso: false, erro: "Não autenticado" };
+    }
+
+    const conversa = await ctx.db.get(args.conversaId);
+    if (!conversa) {
+      return { sucesso: false, erro: "Sala de reunião não encontrada" };
+    }
+
+    // Verificar se é sala de reunião
+    if (conversa.tipo !== "sala_reuniao") {
+      return { sucesso: false, erro: "Esta funcionalidade é apenas para salas de reunião" };
+    }
+
+    // Verificar se usuário é administrador
+    const isAdmin = await verificarPermissaoAdmin(ctx, args.conversaId, usuarioAtual._id);
+    if (!isAdmin) {
+      return { sucesso: false, erro: "Apenas administradores podem enviar notificações" };
+    }
+
+    // Criar notificação para todos os participantes
+    for (const participanteId of conversa.participantes) {
+      await ctx.db.insert("notificacoes", {
+        usuarioId: participanteId,
+        tipo: "nova_mensagem",
+        conversaId: args.conversaId,
+        remetenteId: usuarioAtual._id,
+        titulo: args.titulo || "Notificação da sala de reunião",
+        descricao: args.mensagem,
+        lida: false,
+        criadaEm: Date.now(),
+      });
+    }
+
+    return { sucesso: true };
+  },
+});
+
 // ========== QUERIES ==========
 
 /**
-- 
2.49.1


From 6cb7414dccd153559109bd637181eb35280ebf44 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Wed, 5 Nov 2025 11:52:01 -0300
Subject: [PATCH 2/6] fix: update dependencies and improve chat component
 structure

- Updated `lucide-svelte` dependency to version 0.552.0 across multiple files for consistency.
- Refactored chat components to enhance structure and readability, including adjustments to the Sidebar, ChatList, and MessageInput components.
- Improved notification handling in chat components to ensure better user experience and responsiveness.
- Added type safety enhancements in various components to ensure better integration with backend data models.
---
 apps/web/package.json                         |   1 +
 apps/web/src/lib/components/Sidebar.svelte    |  64 +++----
 .../src/lib/components/chat/ChatList.svelte   | 136 +++++++--------
 .../src/lib/components/chat/ChatWidget.svelte | 109 +++++++++---
 .../src/lib/components/chat/ChatWindow.svelte |  26 +--
 .../lib/components/chat/MessageInput.svelte   |  42 +++--
 .../lib/components/chat/MessageList.svelte    |  88 +++++++---
 .../chat/NewConversationModal.svelte          |  80 +++------
 .../components/chat/SalaReuniaoManager.svelte |  56 +++---
 .../chat/ScheduleMessageModal.svelte          | 159 ++----------------
 apps/web/vite.config.ts                       |   3 +
 bun.lock                                      |   6 +-
 package.json                                  |   2 +-
 packages/backend/convex/chat.ts               |  12 +-
 packages/backend/convex/schema.ts             |   1 +
 15 files changed, 377 insertions(+), 408 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index d5ac91d..7061285 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -44,6 +44,7 @@
     "emoji-picker-element": "^1.27.0",
     "jspdf": "^3.0.3",
     "jspdf-autotable": "^5.0.2",
+    "lucide-svelte": "^0.552.0",
     "papaparse": "^5.4.1",
     "svelte-sonner": "^1.0.5",
     "zod": "^4.1.12"
diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index 6c0fc37..0df953f 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -230,7 +230,7 @@
     {#if authStore.autenticado}
       <!-- Sino de notificações no canto superior direito -->
       <div class="relative">
-        <NotificationBell />
+      <NotificationBell />
       </div>
       
       <div class="hidden lg:flex flex-col items-end mr-2">
@@ -261,15 +261,15 @@
             />
           {:else}
             <!-- Ícone de usuário moderno (fallback) -->
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
-              style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
-            >
-              <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
-            </svg>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
+            style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
+          >
+            <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
+          </svg>
           {/if}
           
           <!-- Badge de status online -->
@@ -328,31 +328,31 @@
     <div class="flex-1 overflow-y-auto">
       {@render children?.()}
     </div>
-    
-    <!-- Footer -->
+      
+      <!-- Footer -->
     <footer class="footer footer-center bg-gradient-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm text-base-content p-6 border-t-2 border-primary/20 shadow-inner flex-shrink-0">
-      <div class="grid grid-flow-col gap-6 text-sm font-medium">
-        <button type="button" class="link link-hover hover:text-primary transition-colors" onclick={() => openAboutModal()}>Sobre</button>
-        <span class="text-base-content/30">•</span>
-        <a href="/" class="link link-hover hover:text-primary transition-colors">Contato</a>
-        <span class="text-base-content/30">•</span>
-        <a href="/" class="link link-hover hover:text-primary transition-colors">Suporte</a>
-        <span class="text-base-content/30">•</span>
-        <a href="/" class="link link-hover hover:text-primary transition-colors">Privacidade</a>
-      </div>
-      <div class="flex items-center gap-3 mt-2">
-        <div class="avatar">
-          <div class="w-10 rounded-lg bg-white p-1.5 shadow-md">
-            <img src={logo} alt="Logo" class="w-full h-full object-contain" />
+        <div class="grid grid-flow-col gap-6 text-sm font-medium">
+          <button type="button" class="link link-hover hover:text-primary transition-colors" onclick={() => openAboutModal()}>Sobre</button>
+          <span class="text-base-content/30">•</span>
+          <a href="/" class="link link-hover hover:text-primary transition-colors">Contato</a>
+          <span class="text-base-content/30">•</span>
+          <a href="/" class="link link-hover hover:text-primary transition-colors">Suporte</a>
+          <span class="text-base-content/30">•</span>
+          <a href="/" class="link link-hover hover:text-primary transition-colors">Privacidade</a>
+        </div>
+        <div class="flex items-center gap-3 mt-2">
+          <div class="avatar">
+            <div class="w-10 rounded-lg bg-white p-1.5 shadow-md">
+              <img src={logo} alt="Logo" class="w-full h-full object-contain" />
+            </div>
+          </div>
+          <div class="text-left">
+            <p class="text-xs font-bold text-primary">Governo do Estado de Pernambuco</p>
+            <p class="text-xs text-base-content/70">Secretaria de Esportes</p>
           </div>
         </div>
-        <div class="text-left">
-          <p class="text-xs font-bold text-primary">Governo do Estado de Pernambuco</p>
-          <p class="text-xs text-base-content/70">Secretaria de Esportes</p>
-        </div>
-      </div>
-      <p class="text-xs text-base-content/60 mt-2">© {new Date().getFullYear()} - Todos os direitos reservados</p>
-    </footer>
+        <p class="text-xs text-base-content/60 mt-2">© {new Date().getFullYear()} - Todos os direitos reservados</p>
+      </footer>
   </div>
   <div class="drawer-side z-40 fixed" style="margin-top: 96px;">
     <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
diff --git a/apps/web/src/lib/components/chat/ChatList.svelte b/apps/web/src/lib/components/chat/ChatList.svelte
index b5c9b81..003ecdb 100644
--- a/apps/web/src/lib/components/chat/ChatList.svelte
+++ b/apps/web/src/lib/components/chat/ChatList.svelte
@@ -247,14 +247,14 @@
   <div class="flex-1 overflow-y-auto">
     {#if activeTab === "usuarios"}
       <!-- Lista de usuários -->
-      {#if usuarios?.data && usuariosFiltrados.length > 0}
-        {#each usuariosFiltrados as usuario (usuario._id)}
-          <button
-            type="button"
-            class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando ? 'opacity-50 cursor-wait' : 'cursor-pointer'}"
-            onclick={() => handleClickUsuario(usuario)}
-            disabled={processando}
-          >
+    {#if usuarios?.data && usuariosFiltrados.length > 0}
+      {#each usuariosFiltrados as usuario (usuario._id)}
+        <button
+          type="button"
+          class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando ? 'opacity-50 cursor-wait' : 'cursor-pointer'}"
+          onclick={() => handleClickUsuario(usuario)}
+          disabled={processando}
+        >
             <!-- Ícone de mensagem -->
             <div class="flex-shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110"
                  style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border: 1px solid rgba(102, 126, 234, 0.2);">
@@ -273,67 +273,67 @@
               </svg>
             </div>
 
-            <!-- Avatar -->
-            <div class="relative flex-shrink-0">
-              <UserAvatar 
-                avatar={usuario.avatar}
-                fotoPerfilUrl={usuario.fotoPerfilUrl}
-                nome={usuario.nome}
-                size="md"
-              />
-              <!-- Status badge -->
-              <div class="absolute bottom-0 right-0">
-                <UserStatusBadge status={usuario.statusPresenca || "offline"} size="sm" />
-              </div>
-            </div>
-
-            <!-- Conteúdo -->
-            <div class="flex-1 min-w-0">
-              <div class="flex items-center justify-between mb-1">
-                <p class="font-semibold text-base-content truncate">
-                  {usuario.nome}
-                </p>
-                <span class="text-xs px-2 py-0.5 rounded-full {
-                  usuario.statusPresenca === 'online' ? 'bg-success/20 text-success' :
-                  usuario.statusPresenca === 'ausente' ? 'bg-warning/20 text-warning' :
-                  usuario.statusPresenca === 'em_reuniao' ? 'bg-error/20 text-error' :
-                  'bg-base-300 text-base-content/50'
-                }">
-                  {getStatusLabel(usuario.statusPresenca)}
-                </span>
-              </div>
-              <div class="flex items-center gap-2">
-                <p class="text-sm text-base-content/70 truncate">
-                  {usuario.statusMensagem || usuario.email}
-                </p>
-              </div>
-            </div>
-          </button>
-        {/each}
-      {:else if !usuarios?.data}
-        <!-- Loading -->
-        <div class="flex items-center justify-center h-full">
-          <span class="loading loading-spinner loading-lg"></span>
-        </div>
-      {:else}
-        <!-- Nenhum usuário encontrado -->
-        <div class="flex flex-col items-center justify-center h-full text-center px-4">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-16 h-16 text-base-content/30 mb-4"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+          <!-- Avatar -->
+          <div class="relative flex-shrink-0">
+            <UserAvatar 
+              avatar={usuario.avatar}
+              fotoPerfilUrl={usuario.fotoPerfilUrl}
+              nome={usuario.nome}
+              size="md"
             />
-          </svg>
-          <p class="text-base-content/70">Nenhum usuário encontrado</p>
-        </div>
+            <!-- Status badge -->
+            <div class="absolute bottom-0 right-0">
+              <UserStatusBadge status={usuario.statusPresenca || "offline"} size="sm" />
+            </div>
+          </div>
+
+          <!-- Conteúdo -->
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center justify-between mb-1">
+              <p class="font-semibold text-base-content truncate">
+                {usuario.nome}
+              </p>
+              <span class="text-xs px-2 py-0.5 rounded-full {
+                usuario.statusPresenca === 'online' ? 'bg-success/20 text-success' :
+                usuario.statusPresenca === 'ausente' ? 'bg-warning/20 text-warning' :
+                usuario.statusPresenca === 'em_reuniao' ? 'bg-error/20 text-error' :
+                'bg-base-300 text-base-content/50'
+              }">
+                {getStatusLabel(usuario.statusPresenca)}
+              </span>
+            </div>
+            <div class="flex items-center gap-2">
+              <p class="text-sm text-base-content/70 truncate">
+                {usuario.statusMensagem || usuario.email}
+              </p>
+            </div>
+          </div>
+        </button>
+      {/each}
+    {:else if !usuarios?.data}
+      <!-- Loading -->
+      <div class="flex items-center justify-center h-full">
+        <span class="loading loading-spinner loading-lg"></span>
+      </div>
+    {:else}
+      <!-- Nenhum usuário encontrado -->
+      <div class="flex flex-col items-center justify-center h-full text-center px-4">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-16 h-16 text-base-content/30 mb-4"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+          />
+        </svg>
+        <p class="text-base-content/70">Nenhum usuário encontrado</p>
+      </div>
       {/if}
     {:else}
       <!-- Lista de conversas (grupos e salas) -->
diff --git a/apps/web/src/lib/components/chat/ChatWidget.svelte b/apps/web/src/lib/components/chat/ChatWidget.svelte
index 325db0c..01854d9 100644
--- a/apps/web/src/lib/components/chat/ChatWidget.svelte
+++ b/apps/web/src/lib/components/chat/ChatWidget.svelte
@@ -11,6 +11,7 @@
   } from "$lib/stores/chatStore";
   import { useQuery } from "convex-svelte";
   import { api } from "@sgse-app/backend/convex/_generated/api";
+  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
   import ChatList from "./ChatList.svelte";
   import ChatWindow from "./ChatWindow.svelte";
   import { authStore } from "$lib/stores/auth.svelte";
@@ -156,18 +157,70 @@
     activeConversation = $conversaAtiva;
   });
 
+  // Tipos para conversas
+  type ConversaComTimestamp = {
+    _id: string;
+    ultimaMensagemTimestamp?: number;
+    ultimaMensagemRemetenteId?: string; // ID do remetente da última mensagem
+    ultimaMensagem?: string;
+    nome?: string;
+    outroUsuario?: { nome: string };
+  };
+
   // Detectar novas mensagens globalmente (mesmo quando chat está fechado/minimizado)
   const todasConversas = useQuery(api.chat.listarConversas, {});
-  let ultimoTimestampGlobal = $state<number>(0);
+  let mensagensNotificadasGlobal = $state<Set<string>>(new Set());
   let showGlobalNotificationPopup = $state(false);
   let globalNotificationMessage = $state<{ remetente: string; conteudo: string; conversaId: string } | null>(null);
   let globalNotificationTimeout: ReturnType<typeof setTimeout> | null = null;
   
+  // Carregar mensagens já notificadas do localStorage ao montar
+  let mensagensCarregadasGlobal = $state(false);
+  
+  $effect(() => {
+    if (typeof window !== 'undefined' && !mensagensCarregadasGlobal) {
+      const saved = localStorage.getItem('chat-mensagens-notificadas-global');
+      if (saved) {
+        try {
+          const ids = JSON.parse(saved) as string[];
+          mensagensNotificadasGlobal = new Set(ids);
+        } catch {
+          mensagensNotificadasGlobal = new Set();
+        }
+      }
+      mensagensCarregadasGlobal = true;
+      
+      // Marcar todas as mensagens atuais como já visualizadas (não tocar beep ao abrir)
+      if (todasConversas?.data) {
+        const conversas = todasConversas.data as ConversaComTimestamp[];
+        conversas.forEach((conv) => {
+          if (conv.ultimaMensagemTimestamp) {
+            const mensagemId = `${conv._id}-${conv.ultimaMensagemTimestamp}`;
+            mensagensNotificadasGlobal.add(mensagemId);
+          }
+        });
+        salvarMensagensNotificadasGlobal();
+      }
+    }
+  });
+
+  // Salvar mensagens notificadas no localStorage
+  function salvarMensagensNotificadasGlobal() {
+    if (typeof window !== 'undefined') {
+      const ids = Array.from(mensagensNotificadasGlobal);
+      // Limitar a 1000 IDs para não encher o localStorage
+      const idsLimitados = ids.slice(-1000);
+      localStorage.setItem('chat-mensagens-notificadas-global', JSON.stringify(idsLimitados));
+    }
+  }
+  
   // Função para tocar som de notificação
   function tocarSomNotificacaoGlobal() {
     try {
-      const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
-      const audioContext = new AudioContext();
+      const AudioContextClass = window.AudioContext || (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+      if (!AudioContextClass) return;
+      
+      const audioContext = new AudioContextClass();
       if (audioContext.state === 'suspended') {
         audioContext.resume().then(() => {
           const oscillator = audioContext.createOscillator();
@@ -200,32 +253,44 @@
   
   $effect(() => {
     if (todasConversas?.data && authStore.usuario?._id) {
-      // Encontrar o maior timestamp de todas as conversas
-      let maiorTimestamp = 0;
-      let conversaComNovaMensagem: any = null;
+      const conversas = todasConversas.data as ConversaComTimestamp[];
       
-      todasConversas.data.forEach((conv: any) => {
-        if (conv.ultimaMensagemTimestamp && conv.ultimaMensagemTimestamp > maiorTimestamp) {
-          maiorTimestamp = conv.ultimaMensagemTimestamp;
-          conversaComNovaMensagem = conv;
+      // Encontrar conversas com novas mensagens
+      const meuId = String(authStore.usuario._id);
+      
+      conversas.forEach((conv) => {
+        if (!conv.ultimaMensagemTimestamp) return;
+        
+        // Verificar se a última mensagem foi enviada pelo usuário atual
+        const remetenteIdStr = conv.ultimaMensagemRemetenteId ? String(conv.ultimaMensagemRemetenteId) : null;
+        if (remetenteIdStr && remetenteIdStr === meuId) {
+          // Mensagem enviada pelo próprio usuário - não tocar beep nem mostrar notificação
+          return;
         }
-      });
-      
-      // Se há nova mensagem (timestamp maior) e não estamos vendo essa conversa, tocar som e mostrar popup
-      if (maiorTimestamp > ultimoTimestampGlobal && conversaComNovaMensagem) {
+        
+        // Criar ID único para esta mensagem: conversaId-timestamp
+        const mensagemId = `${conv._id}-${conv.ultimaMensagemTimestamp}`;
+        
+        // Verificar se já foi notificada
+        if (mensagensNotificadasGlobal.has(mensagemId)) return;
+        
         const conversaAtivaId = activeConversation ? String(activeConversation) : null;
-        const conversaIdStr = String(conversaComNovaMensagem._id);
+        const conversaIdStr = String(conv._id);
         
         // Só mostrar notificação se não estamos vendo essa conversa
         if (!isOpen || conversaAtivaId !== conversaIdStr) {
-          // Tocar som de notificação
+          // Marcar como notificada antes de tocar som (evita duplicação)
+          mensagensNotificadasGlobal.add(mensagemId);
+          salvarMensagensNotificadasGlobal();
+          
+          // Tocar som de notificação (apenas uma vez)
           tocarSomNotificacaoGlobal();
           
           // Mostrar popup de notificação
           globalNotificationMessage = {
-            remetente: conversaComNovaMensagem.outroUsuario?.nome || conversaComNovaMensagem.nome || "Usuário",
-            conteudo: conversaComNovaMensagem.ultimaMensagem || "",
-            conversaId: conversaComNovaMensagem._id
+            remetente: conv.outroUsuario?.nome || conv.nome || "Usuário",
+            conteudo: conv.ultimaMensagem || "",
+            conversaId: conv._id
           };
           showGlobalNotificationPopup = true;
           
@@ -238,9 +303,7 @@
             globalNotificationMessage = null;
           }, 5000);
         }
-        
-        ultimoTimestampGlobal = maiorTimestamp;
-      }
+      });
     }
   });
 
@@ -676,7 +739,7 @@
       }
       // Abrir chat e conversa ao clicar
       abrirChat();
-      abrirConversa(globalNotificationMessage.conversaId as any);
+      abrirConversa(globalNotificationMessage.conversaId as Id<"conversas">);
     }}
   >
     <div class="flex items-start gap-3">
diff --git a/apps/web/src/lib/components/chat/ChatWindow.svelte b/apps/web/src/lib/components/chat/ChatWindow.svelte
index 9706eb7..14636f6 100644
--- a/apps/web/src/lib/components/chat/ChatWindow.svelte
+++ b/apps/web/src/lib/components/chat/ChatWindow.svelte
@@ -11,6 +11,7 @@
   import SalaReuniaoManager from "./SalaReuniaoManager.svelte";
   import { getAvatarUrl } from "$lib/utils/avatarGenerator";
   import { authStore } from "$lib/stores/auth.svelte";
+  import { Bell, X } from "lucide-svelte";
 
   interface Props {
     conversaId: string;
@@ -122,8 +123,8 @@
         fill="none"
         stroke="currentColor"
         stroke-width="2.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         class="w-6 h-6 text-primary"
       >
         <path d="M19 12H5M12 19l-7-7 7-7"/>
@@ -391,21 +392,19 @@
 
 <!-- Modal de Enviar Notificação -->
 {#if showNotificacaoModal && conversa()?.tipo === "sala_reuniao" && isAdmin?.data}
-  <div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50" onclick={() => (showNotificacaoModal = false)}>
-    <div
-      class="bg-base-100 rounded-xl shadow-2xl w-full max-w-md m-4"
-      onclick={(e) => e.stopPropagation()}
-    >
+  <dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && (showNotificacaoModal = false)}>
+    <div class="modal-box max-w-md" onclick={(e) => e.stopPropagation()}>
       <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
-        <h2 class="text-xl font-semibold">Enviar Notificação</h2>
+        <h2 class="text-xl font-semibold flex items-center gap-2">
+          <Bell class="w-5 h-5 text-primary" />
+          Enviar Notificação
+        </h2>
         <button
           type="button"
           class="btn btn-ghost btn-sm btn-circle"
           onclick={() => (showNotificacaoModal = false)}
         >
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-          </svg>
+          <X class="w-5 h-5" />
         </button>
       </div>
       <div class="p-6">
@@ -474,6 +473,9 @@
         </form>
       </div>
     </div>
-  </div>
+    <form method="dialog" class="modal-backdrop">
+      <button type="button" onclick={() => (showNotificacaoModal = false)}>fechar</button>
+    </form>
+  </dialog>
 {/if}
 
diff --git a/apps/web/src/lib/components/chat/MessageInput.svelte b/apps/web/src/lib/components/chat/MessageInput.svelte
index 99834b5..4878c6d 100644
--- a/apps/web/src/lib/components/chat/MessageInput.svelte
+++ b/apps/web/src/lib/components/chat/MessageInput.svelte
@@ -9,6 +9,20 @@
     conversaId: Id<"conversas">;
   }
 
+  type ParticipanteInfo = {
+    _id: Id<"usuarios">;
+    nome: string;
+    email?: string;
+    fotoPerfilUrl?: string;
+    avatar?: string;
+  };
+
+  type ConversaComParticipantes = {
+    _id: Id<"conversas">;
+    tipo: "individual" | "grupo" | "sala_reuniao";
+    participantesInfo?: ParticipanteInfo[];
+  };
+
   let { conversaId }: Props = $props();
 
   const client = useConvexClient();
@@ -43,25 +57,25 @@
   }
 
   // Obter conversa atual
-  const conversa = $derived(() => {
+  const conversa = $derived((): ConversaComParticipantes | null => {
     if (!conversas?.data) return null;
-    return conversas.data.find((c: any) => c._id === conversaId);
+    return (conversas.data as ConversaComParticipantes[]).find((c) => c._id === conversaId) || null;
   });
 
   // Obter participantes para menções (apenas grupos e salas)
-  const participantesParaMencoes = $derived(() => {
+  const participantesParaMencoes = $derived((): ParticipanteInfo[] => {
     const c = conversa();
     if (!c || (c.tipo !== "grupo" && c.tipo !== "sala_reuniao")) return [];
     return c.participantesInfo || [];
   });
 
   // Filtrar participantes para dropdown de menções
-  const participantesFiltrados = $derived(() => {
+  const participantesFiltrados = $derived((): ParticipanteInfo[] => {
     if (!mentionQuery.trim()) return participantesParaMencoes().slice(0, 5);
     const query = mentionQuery.toLowerCase();
-    return participantesParaMencoes().filter((p: any) =>
+    return participantesParaMencoes().filter((p) =>
       p.nome?.toLowerCase().includes(query) ||
-      p.email?.toLowerCase().includes(query)
+      (p.email && p.email.toLowerCase().includes(query))
     ).slice(0, 5);
   });
 
@@ -102,7 +116,7 @@
     }, 1000);
   }
 
-  function inserirMencao(participante: any) {
+  function inserirMencao(participante: ParticipanteInfo) {
     const nome = participante.nome.split(' ')[0]; // Usar primeiro nome
     const antes = mensagem.substring(0, mentionStartPos);
     const depois = mensagem.substring(textarea.selectionStart || mensagem.length);
@@ -128,7 +142,7 @@
     let match;
     while ((match = mentionRegex.exec(texto)) !== null) {
       const nomeMencionado = match[1];
-      const participante = participantesParaMencoes().find((p: any) => 
+      const participante = participantesParaMencoes().find((p) => 
         p.nome.split(' ')[0].toLowerCase() === nomeMencionado.toLowerCase()
       );
       if (participante) {
@@ -175,13 +189,19 @@
     mensagemRespondendo = null;
   }
 
+  type MensagemComRemetente = {
+    _id: Id<"mensagens">;
+    conteudo: string;
+    remetente?: { nome: string } | null;
+  };
+
   // Escutar evento de resposta
   onMount(() => {
     const handler = (e: Event) => {
       const customEvent = e as CustomEvent<{ mensagemId: Id<"mensagens"> }>;
       // Buscar informações da mensagem para exibir preview
       client.query(api.chat.obterMensagens, { conversaId, limit: 100 }).then((mensagens) => {
-        const msg = mensagens.find((m: any) => m._id === customEvent.detail.mensagemId);
+        const msg = (mensagens as MensagemComRemetente[]).find((m) => m._id === customEvent.detail.mensagemId);
         if (msg) {
           mensagemRespondendo = {
             id: msg._id,
@@ -254,11 +274,11 @@
       const { storageId } = await result.json();
 
       // 3. Enviar mensagem com o arquivo
-      const tipo = file.type.startsWith("image/") ? "imagem" : "arquivo";
+      const tipo: "imagem" | "arquivo" = file.type.startsWith("image/") ? "imagem" : "arquivo";
       await client.mutation(api.chat.enviarMensagem, {
         conversaId,
         conteudo: tipo === "imagem" ? "" : file.name,
-        tipo: tipo as any,
+        tipo,
         arquivoId: storageId,
         arquivoNome: file.name,
         arquivoTamanho: file.size,
diff --git a/apps/web/src/lib/components/chat/MessageList.svelte b/apps/web/src/lib/components/chat/MessageList.svelte
index e850e61..44b056b 100644
--- a/apps/web/src/lib/components/chat/MessageList.svelte
+++ b/apps/web/src/lib/components/chat/MessageList.svelte
@@ -21,14 +21,49 @@
   let messagesContainer: HTMLDivElement;
   let shouldScrollToBottom = true;
   let lastMessageCount = 0;
-  let lastMessageId = $state<string | null>(null);
+  let mensagensNotificadas = $state<Set<string>>(new Set());
   let showNotificationPopup = $state(false);
   let notificationMessage = $state<{ remetente: string; conteudo: string } | null>(null);
   let notificationTimeout: ReturnType<typeof setTimeout> | null = null;
+  let mensagensCarregadas = $state(false);
 
   // Obter ID do usuário atual - usar $state para garantir reatividade
   let usuarioAtualId = $state<string | null>(null);
 
+  // Carregar mensagens já notificadas do localStorage ao montar
+  $effect(() => {
+    if (typeof window !== 'undefined' && !mensagensCarregadas) {
+      const saved = localStorage.getItem('chat-mensagens-notificadas');
+      if (saved) {
+        try {
+          const ids = JSON.parse(saved) as string[];
+          mensagensNotificadas = new Set(ids);
+        } catch {
+          mensagensNotificadas = new Set();
+        }
+      }
+      mensagensCarregadas = true;
+      
+      // Marcar todas as mensagens atuais como já visualizadas (não tocar beep ao abrir)
+      if (mensagens?.data && mensagens.data.length > 0) {
+        mensagens.data.forEach((msg) => {
+          mensagensNotificadas.add(String(msg._id));
+        });
+        salvarMensagensNotificadas();
+      }
+    }
+  });
+
+  // Salvar mensagens notificadas no localStorage
+  function salvarMensagensNotificadas() {
+    if (typeof window !== 'undefined') {
+      const ids = Array.from(mensagensNotificadas);
+      // Limitar a 1000 IDs para não encher o localStorage
+      const idsLimitados = ids.slice(-1000);
+      localStorage.setItem('chat-mensagens-notificadas', JSON.stringify(idsLimitados));
+    }
+  }
+
   // Atualizar usuarioAtualId sempre que authStore.usuario mudar
   $effect(() => {
     const usuario = authStore.usuario;
@@ -44,7 +79,9 @@
   function tocarSomNotificacao() {
     try {
       // Usar AudioContext (requer interação do usuário para iniciar)
-      const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
+      const AudioContextClass = window.AudioContext || (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+      if (!AudioContextClass) return;
+      
       let audioContext: AudioContext | null = null;
       
       try {
@@ -106,13 +143,18 @@
       // Detectar nova mensagem de outro usuário
       if (isNewMessage && mensagens.data.length > 0 && usuarioAtualId) {
         const ultimaMensagem = mensagens.data[mensagens.data.length - 1];
+        const mensagemId = String(ultimaMensagem._id);
         const remetenteIdStr = ultimaMensagem.remetenteId 
           ? String(ultimaMensagem.remetenteId).trim() 
           : (ultimaMensagem.remetente?._id ? String(ultimaMensagem.remetente._id).trim() : null);
         
-        // Se é uma nova mensagem de outro usuário (não minha)
-        if (remetenteIdStr && remetenteIdStr !== usuarioAtualId && ultimaMensagem._id !== lastMessageId) {
-          // Tocar som de notificação
+        // Se é uma nova mensagem de outro usuário (não minha) E ainda não foi notificada
+        if (remetenteIdStr && remetenteIdStr !== usuarioAtualId && !mensagensNotificadas.has(mensagemId)) {
+          // Marcar como notificada antes de tocar som (evita duplicação)
+          mensagensNotificadas.add(mensagemId);
+          salvarMensagensNotificadas();
+          
+          // Tocar som de notificação (apenas uma vez)
           tocarSomNotificacao();
           
           // Mostrar popup de notificação
@@ -130,8 +172,6 @@
             showNotificationPopup = false;
             notificationMessage = null;
           }, 5000);
-          
-          lastMessageId = ultimaMensagem._id;
         }
       }
       
@@ -311,11 +351,11 @@
           alert(resultado.erro || "Erro ao deletar mensagem");
         }
       } else {
-        await client.mutation(api.chat.deletarMensagem, {
-          mensagemId,
-        });
+      await client.mutation(api.chat.deletarMensagem, {
+        mensagemId,
+      });
       }
-    } catch (error: any) {
+    } catch (error) {
       console.error("Erro ao deletar mensagem:", error);
       alert(error.message || "Erro ao deletar mensagem");
     }
@@ -548,20 +588,20 @@
               <div class="flex gap-1">
                 {#if isMinha}
                   <!-- Ações para minhas próprias mensagens -->
-                  <button
-                    class="text-xs text-base-content/50 hover:text-primary transition-colors"
-                    onclick={() => editarMensagem(mensagem)}
-                    title="Editar mensagem"
-                  >
-                    ✏️
-                  </button>
-                  <button
-                    class="text-xs text-base-content/50 hover:text-error transition-colors"
+                <button
+                  class="text-xs text-base-content/50 hover:text-primary transition-colors"
+                  onclick={() => editarMensagem(mensagem)}
+                  title="Editar mensagem"
+                >
+                  ✏️
+                </button>
+                <button
+                  class="text-xs text-base-content/50 hover:text-error transition-colors"
                     onclick={() => deletarMensagem(mensagem._id, false)}
-                    title="Deletar mensagem"
-                  >
-                    🗑️
-                  </button>
+                  title="Deletar mensagem"
+                >
+                  🗑️
+                </button>
                 {:else if isAdmin?.data}
                   <!-- Ações para admin deletar mensagens de outros -->
                   <button
diff --git a/apps/web/src/lib/components/chat/NewConversationModal.svelte b/apps/web/src/lib/components/chat/NewConversationModal.svelte
index 965401a..53b9d1c 100644
--- a/apps/web/src/lib/components/chat/NewConversationModal.svelte
+++ b/apps/web/src/lib/components/chat/NewConversationModal.svelte
@@ -5,6 +5,7 @@
   import { authStore } from "$lib/stores/auth.svelte";
   import UserStatusBadge from "./UserStatusBadge.svelte";
   import UserAvatar from "./UserAvatar.svelte";
+  import { MessageSquare, User, Users, Video, X, Search, ChevronRight, Plus, UserX } from "lucide-svelte";
 
   interface Props {
     onClose: () => void;
@@ -134,38 +135,21 @@
   }
 </script>
 
-<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm" onclick={onClose}>
-  <div
-    class="bg-base-100 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[85vh] flex flex-col m-4 border border-base-300 overflow-hidden"
-    onclick={(e) => e.stopPropagation()}
-    style="box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.3);"
-  >
-    <!-- Header com gradiente -->
-    <div class="flex items-center justify-between px-6 py-5 border-b border-base-300 relative overflow-hidden"
-         style="background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);">
-      <div class="absolute inset-0 opacity-20" style="background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.3) 0%, transparent 50%);"></div>
-      <h2 class="text-2xl font-bold text-white relative z-10 flex items-center gap-2">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
-        </svg>
+<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
+  <div class="modal-box max-w-2xl max-h-[85vh] flex flex-col p-0" onclick={(e) => e.stopPropagation()}>
+    <!-- Header -->
+    <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
+      <h2 class="text-2xl font-bold flex items-center gap-2">
+        <MessageSquare class="w-6 h-6 text-primary" />
         Nova Conversa
       </h2>
       <button
         type="button"
-        class="btn btn-ghost btn-sm btn-circle hover:bg-white/20 transition-all duration-200 relative z-10"
+        class="btn btn-ghost btn-sm btn-circle"
         onclick={onClose}
         aria-label="Fechar"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="2"
-          stroke="currentColor"
-          class="w-5 h-5 text-white"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-        </svg>
+        <X class="w-5 h-5" />
       </button>
     </div>
 
@@ -184,9 +168,7 @@
           searchQuery = "";
         }}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
-        </svg>
+        <User class="w-4 h-4" />
         Individual
       </button>
       <button
@@ -202,9 +184,7 @@
           searchQuery = "";
         }}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
-        </svg>
+        <Users class="w-4 h-4" />
         Grupo
       </button>
       <button
@@ -220,9 +200,7 @@
           searchQuery = "";
         }}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
-        </svg>
+        <Video class="w-4 h-4" />
         Sala de Reunião
       </button>
     </div>
@@ -280,20 +258,11 @@
       <div class="mb-4 relative">
         <input
           type="text"
-          placeholder="🔍 Buscar usuários por nome, email ou matrícula..."
+          placeholder="Buscar usuários por nome, email ou matrícula..."
           class="input input-bordered w-full pl-10 focus:input-primary transition-colors"
           bind:value={searchQuery}
         />
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="2"
-          stroke="currentColor"
-          class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
-        </svg>
+        <Search class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40" />
       </div>
 
       <!-- Lista de usuários -->
@@ -351,9 +320,7 @@
                 </div>
               {:else}
                 <!-- Ícone de seta para individual -->
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-base-content/40">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
-                </svg>
+                <ChevronRight class="w-5 h-5 text-base-content/40" />
               {/if}
             </button>
           {/each}
@@ -364,9 +331,7 @@
           </div>
         {:else}
           <div class="flex flex-col items-center justify-center py-12 text-center">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-16 h-16 text-base-content/30 mb-4">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
-            </svg>
+            <UserX class="w-16 h-16 text-base-content/30 mb-4" />
             <p class="text-base-content/70 font-medium">
               {searchQuery.trim() ? "Nenhum usuário encontrado" : "Nenhum usuário disponível"}
             </p>
@@ -391,9 +356,7 @@
             <span class="loading loading-spinner"></span>
             Criando grupo...
           {:else}
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-            </svg>
+            <Plus class="w-5 h-5" />
             Criar Grupo
           {/if}
         </button>
@@ -413,9 +376,7 @@
             <span class="loading loading-spinner"></span>
             Criando sala...
           {:else}
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-            </svg>
+            <Plus class="w-5 h-5" />
             Criar Sala de Reunião
           {/if}
         </button>
@@ -425,5 +386,8 @@
       </div>
     {/if}
   </div>
-</div>
+  <form method="dialog" class="modal-backdrop">
+    <button type="button" onclick={onClose}>fechar</button>
+  </form>
+</dialog>
 
diff --git a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
index 104efb9..56b776f 100644
--- a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
+++ b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
@@ -4,6 +4,7 @@
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
   import UserAvatar from "./UserAvatar.svelte";
   import UserStatusBadge from "./UserStatusBadge.svelte";
+  import { X, Users, UserPlus, ArrowUp, ArrowDown, Trash2, Search } from "lucide-svelte";
 
   interface Props {
     conversaId: Id<"conversas">;
@@ -151,19 +152,15 @@
   }
 </script>
 
-<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50" onclick={(e) => {
-  if (e.target === e.currentTarget) {
-    onClose();
-  }
-}}>
-  <div
-    class="bg-base-100 rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col m-4"
-    onclick={(e) => e.stopPropagation()}
-  >
+<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
+  <div class="modal-box max-w-2xl max-h-[80vh] flex flex-col p-0" onclick={(e) => e.stopPropagation()}>
     <!-- Header -->
     <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
       <div>
-        <h2 class="text-xl font-semibold">Gerenciar Sala de Reunião</h2>
+        <h2 class="text-xl font-semibold flex items-center gap-2">
+          <Users class="w-5 h-5 text-primary" />
+          Gerenciar Sala de Reunião
+        </h2>
         <p class="text-sm text-base-content/60">{conversa()?.nome || "Sem nome"}</p>
       </div>
       <button
@@ -172,16 +169,7 @@
         onclick={onClose}
         aria-label="Fechar"
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="w-5 h-5"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-        </svg>
+        <X class="w-5 h-5" />
       </button>
     </div>
 
@@ -190,16 +178,18 @@
       <div class="tabs tabs-boxed p-4">
         <button
           type="button"
-          class={`tab ${activeTab === "participantes" ? "tab-active" : ""}`}
+          class={`tab flex items-center gap-2 ${activeTab === "participantes" ? "tab-active" : ""}`}
           onclick={() => (activeTab = "participantes")}
         >
+          <Users class="w-4 h-4" />
           Participantes
         </button>
         <button
           type="button"
-          class={`tab ${activeTab === "adicionar" ? "tab-active" : ""}`}
+          class={`tab flex items-center gap-2 ${activeTab === "adicionar" ? "tab-active" : ""}`}
           onclick={() => (activeTab = "adicionar")}
         >
+          <UserPlus class="w-4 h-4" />
           Adicionar Participante
         </button>
       </div>
@@ -209,7 +199,9 @@
     {#if error}
       <div class="mx-6 mt-2 alert alert-error">
         <span>{error}</span>
-        <button type="button" class="btn btn-sm btn-ghost" onclick={() => (error = null)}>✕</button>
+        <button type="button" class="btn btn-sm btn-ghost" onclick={() => (error = null)}>
+          <X class="w-4 h-4" />
+        </button>
       </div>
     {/if}
 
@@ -269,7 +261,7 @@
                         {#if isLoading && loading?.includes("rebaixar")}
                           <span class="loading loading-spinner loading-xs"></span>
                         {:else}
-                          ⬇️
+                          <ArrowDown class="w-4 h-4" />
                         {/if}
                       </button>
                     {:else}
@@ -283,7 +275,7 @@
                         {#if isLoading && loading?.includes("promover")}
                           <span class="loading loading-spinner loading-xs"></span>
                         {:else}
-                          ⬆️
+                          <ArrowUp class="w-4 h-4" />
                         {/if}
                       </button>
                     {/if}
@@ -297,7 +289,7 @@
                       {#if isLoading && loading?.includes("remover")}
                         <span class="loading loading-spinner loading-xs"></span>
                       {:else}
-                        ✕
+                        <Trash2 class="w-4 h-4" />
                       {/if}
                     </button>
                   </div>
@@ -312,13 +304,14 @@
         </div>
       {:else if activeTab === "adicionar" && isAdmin}
         <!-- Adicionar Participante -->
-        <div class="mb-4">
+        <div class="mb-4 relative">
           <input
             type="text"
             placeholder="Buscar usuários..."
-            class="input input-bordered w-full"
+            class="input input-bordered w-full pl-10"
             bind:value={searchQuery}
           />
+          <Search class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40" />
         </div>
 
         <div class="space-y-2">
@@ -356,7 +349,7 @@
                 {#if isLoading}
                   <span class="loading loading-spinner loading-sm"></span>
                 {:else}
-                  <span class="text-primary">+</span>
+                  <UserPlus class="w-5 h-5 text-primary" />
                 {/if}
               </button>
             {/each}
@@ -376,5 +369,8 @@
       </button>
     </div>
   </div>
-</div>
+  <form method="dialog" class="modal-backdrop">
+    <button type="button" onclick={onClose}>fechar</button>
+  </form>
+</dialog>
 
diff --git a/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte b/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
index 7ed6791..03dbf74 100644
--- a/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
+++ b/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
@@ -99,70 +99,21 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50" 
-  onclick={onClose}
-  onkeydown={(e) => e.key === 'Escape' && onClose()}
->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class="bg-base-100 rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col m-4"
-    onclick={(e) => e.stopPropagation()}
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="modal-title"
-    tabindex="-1"
-  >
-    <!-- Header ULTRA MODERNO -->
-    <div class="flex items-center justify-between px-6 py-5 relative overflow-hidden" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);">
-      <!-- Efeitos de fundo -->
-      <div class="absolute inset-0 opacity-20" style="background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%); animation: shimmer 3s infinite;"></div>
-      
-      <h2 id="modal-title" class="text-xl font-bold flex items-center gap-3 text-white relative z-10">
-        <!-- Ícone moderno de relógio -->
-        <div class="relative flex items-center justify-center w-10 h-10 rounded-xl" style="background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="w-5 h-5"
-          >
-            <circle cx="12" cy="12" r="10"/>
-            <polyline points="12 6 12 12 16 14"/>
-          </svg>
-        </div>
-        <span style="text-shadow: 0 2px 8px rgba(0,0,0,0.3);">Agendar Mensagem</span>
+<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
+  <div class="modal-box max-w-2xl max-h-[90vh] flex flex-col p-0" onclick={(e) => e.stopPropagation()}>
+    <!-- Header -->
+    <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
+      <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2">
+        <Clock class="w-5 h-5 text-primary" />
+        Agendar Mensagem
       </h2>
-      
-      <!-- Botão fechar moderno -->
       <button
         type="button"
-        class="flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 group relative overflow-hidden z-10"
-        style="background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2);"
+        class="btn btn-ghost btn-sm btn-circle"
         onclick={onClose}
         aria-label="Fechar"
       >
-        <div class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/30 transition-colors duration-300"></div>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="w-5 h-5 text-white relative z-10 group-hover:scale-110 group-hover:rotate-90 transition-all duration-300"
-          style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));"
-        >
-          <line x1="18" y1="6" x2="6" y2="18"/>
-          <line x1="6" y1="6" x2="18" y2="18"/>
-        </svg>
+        <X class="w-5 h-5" />
       </button>
     </div>
 
@@ -220,20 +171,7 @@
 
           {#if getPreviewText()}
             <div class="alert alert-info">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="w-6 h-6"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-                />
-              </svg>
+              <Clock class="w-6 h-6" />
               <span>{getPreviewText()}</span>
             </div>
           {/if}
@@ -255,19 +193,7 @@
                   <span class="loading loading-spinner loading-sm"></span>
                   <span>Agendando...</span>
                 {:else}
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    class="w-5 h-5 group-hover:scale-110 transition-transform"
-                  >
-                    <circle cx="12" cy="12" r="10"/>
-                    <polyline points="12 6 12 12 16 14"/>
-                  </svg>
+                  <Clock class="w-5 h-5 group-hover:scale-110 transition-transform" />
                   <span class="group-hover:scale-105 transition-transform">Agendar</span>
                 {/if}
               </div>
@@ -286,20 +212,7 @@
               {#each mensagensAgendadas.data as msg (msg._id)}
                 <div class="flex items-start gap-3 p-3 bg-base-100 rounded-lg">
                   <div class="flex-shrink-0 mt-1">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="w-5 h-5 text-primary"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-                      />
-                    </svg>
+                    <Clock class="w-5 h-5 text-primary" />
                   </div>
                   
                   <div class="flex-1 min-w-0">
@@ -320,21 +233,7 @@
                     aria-label="Cancelar"
                   >
                     <div class="absolute inset-0 bg-error/0 group-hover:bg-error/20 transition-colors duration-300"></div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      class="w-5 h-5 text-error relative z-10 group-hover:scale-110 transition-transform"
-                    >
-                      <polyline points="3 6 5 6 21 6"/>
-                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-                      <line x1="10" y1="11" x2="10" y2="17"/>
-                      <line x1="14" y1="11" x2="14" y2="17"/>
-                    </svg>
+                    <Trash2 class="w-5 h-5 text-error relative z-10 group-hover:scale-110 transition-transform" />
                   </button>
                 </div>
               {/each}
@@ -345,20 +244,7 @@
             </div>
           {:else}
             <div class="text-center py-8 text-base-content/50">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="w-12 h-12 mx-auto mb-2 opacity-50"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-                />
-              </svg>
+              <Clock class="w-12 h-12 mx-auto mb-2 opacity-50" />
               <p class="text-sm">Nenhuma mensagem agendada</p>
             </div>
           {/if}
@@ -366,16 +252,7 @@
       </div>
     </div>
   </div>
-</div>
-
-<style>
-  /* Efeito shimmer para o header */
-  @keyframes shimmer {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
-    }
-  }
-</style>
+  <form method="dialog" class="modal-backdrop">
+    <button type="button" onclick={onClose}>fechar</button>
+  </form>
+</dialog>
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index e13ff68..e43a543 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -4,4 +4,7 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
 	plugins: [tailwindcss(), sveltekit()],
+	resolve: {
+		dedupe: ["lucide-svelte"],
+	},
 });
diff --git a/bun.lock b/bun.lock
index 16a9a59..fca6f51 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,7 +6,7 @@
       "dependencies": {
         "@tanstack/svelte-form": "^1.23.8",
         "chart.js": "^4.5.1",
-        "lucide-svelte": "^0.548.0",
+        "lucide-svelte": "^0.552.0",
         "svelte-chartjs": "^3.1.5",
         "svelte-sonner": "^1.0.5",
       },
@@ -61,7 +61,7 @@
       "version": "1.0.0",
       "dependencies": {
         "@dicebear/avataaars": "^9.2.4",
-        "convex": "^1.17.4",
+        "convex": "catalog:",
         "nodemailer": "^7.0.10",
       },
       "devDependencies": {
@@ -624,7 +624,7 @@
 
     "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
 
-    "lucide-svelte": ["lucide-svelte@0.548.0", "", { "peerDependencies": { "svelte": "^3 || ^4 || ^5.0.0-next.42" } }, "sha512-aW2BfHWBLWf/XPSKytTPV16AWfFeFIJeUyOg7eHY2rhzVQ0u0LIvoS4pm2oskr+OJVw+NsS8fPvlBVqPfUO1XQ=="],
+    "lucide-svelte": ["lucide-svelte@0.552.0", "", { "peerDependencies": { "svelte": "^3 || ^4 || ^5.0.0-next.42" } }, "sha512-zynJ64KOsuQG3I4tSqfvvl7Kc9x4mWkppbxsuyrbegQwma9HFhBp4aE6HuQNF4c3pS0AHWHki5CAMs5m3QXA5w=="],
 
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
diff --git a/package.json b/package.json
index f8b266d..9088df1 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
   "dependencies": {
     "@tanstack/svelte-form": "^1.23.8",
     "chart.js": "^4.5.1",
-    "lucide-svelte": "^0.548.0",
+    "lucide-svelte": "^0.552.0",
     "svelte-chartjs": "^3.1.5",
     "svelte-sonner": "^1.0.5"
   },
diff --git a/packages/backend/convex/chat.ts b/packages/backend/convex/chat.ts
index 28978fe..127b3bf 100644
--- a/packages/backend/convex/chat.ts
+++ b/packages/backend/convex/chat.ts
@@ -369,6 +369,7 @@ export const enviarMensagem = mutation({
     await ctx.db.patch(args.conversaId, {
       ultimaMensagem: args.conteudo.substring(0, 100),
       ultimaMensagemTimestamp: Date.now(),
+      ultimaMensagemRemetenteId: usuarioAtual._id, // Guardar ID do remetente da última mensagem
     });
 
     // Criar notificações para participantes (com tratamento de erro)
@@ -1815,10 +1816,10 @@ export const listarAgendamentosChat = query({
     return mensagensEnriquecidas
       .filter((m): m is NonNullable<typeof m> => m !== null)
       .sort((a, b) => {
-        const dataA = a.agendadaPara ?? 0;
-        const dataB = b.agendadaPara ?? 0;
-        return dataA - dataB;
-      });
+      const dataA = a.agendadaPara ?? 0;
+      const dataB = b.agendadaPara ?? 0;
+      return dataA - dataB;
+    });
   },
 });
 
@@ -2071,7 +2072,7 @@ export const buscarMensagens = query({
       // Filtrar por remetente (já verificado acima, mas garantir novamente)
       if (args.remetenteId) {
         if (m.remetenteId !== args.remetenteId) {
-          return false;
+        return false;
         }
         // Verificar novamente se o remetente é participante da conversa específica desta mensagem
         if (!conversaDaMensagem.participantes.includes(args.remetenteId)) {
@@ -2269,6 +2270,7 @@ export const enviarMensagensAgendadas = internalMutation({
         await ctx.db.patch(mensagem.conversaId, {
           ultimaMensagem: mensagem.conteudo.substring(0, 100),
           ultimaMensagemTimestamp: agora,
+          ultimaMensagemRemetenteId: mensagem.remetenteId, // Guardar ID do remetente
         });
 
         // Criar notificações para outros participantes
diff --git a/packages/backend/convex/schema.ts b/packages/backend/convex/schema.ts
index 28bfdae..7a3fb75 100644
--- a/packages/backend/convex/schema.ts
+++ b/packages/backend/convex/schema.ts
@@ -626,6 +626,7 @@ export default defineSchema({
     administradores: v.optional(v.array(v.id("usuarios"))), // IDs dos administradores (apenas para sala_reuniao)
     ultimaMensagem: v.optional(v.string()),
     ultimaMensagemTimestamp: v.optional(v.number()),
+    ultimaMensagemRemetenteId: v.optional(v.id("usuarios")), // ID do remetente da última mensagem
     criadoPor: v.id("usuarios"),
     criadoEm: v.number(),
   })
-- 
2.49.1


From c4592979685ccb5f51648803c16c12198462714b Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Wed, 5 Nov 2025 12:09:41 -0300
Subject: [PATCH 3/6] refactor: update components to use lucide icons and
 improve structure

- Replaced SVG icons with lucide-svelte components across various files for consistency and improved performance.
- Refactored ActionGuard, ErrorModal, FileUpload, and other components to enhance readability and maintainability.
- Updated the dashboard pages to include new icons and improved layout for better user experience.
- Enhanced StatsCard component to support dynamic icon rendering, allowing for more flexible usage.
- Improved overall styling and structure in multiple components to align with design standards.
---
 .../web/src/lib/components/ActionGuard.svelte |  154 +--
 apps/web/src/lib/components/ErrorModal.svelte |   17 +-
 apps/web/src/lib/components/FileUpload.svelte |   30 +-
 .../lib/components/ModelosDeclaracoes.svelte  |  321 +++--
 apps/web/src/lib/components/PrintModal.svelte |  921 +++++++------
 apps/web/src/lib/components/Sidebar.svelte    |   94 +-
 .../src/lib/components/chat/ChatWindow.svelte |   75 +-
 .../lib/components/chat/MessageInput.svelte   |   41 +-
 .../components/chat/NotificationBell.svelte   |  105 +-
 .../src/lib/components/ti/StatsCard.svelte    |   81 +-
 apps/web/src/routes/(dashboard)/+page.svelte  | 1161 ++++++++---------
 .../routes/(dashboard)/compras/+page.svelte   |   91 +-
 .../(dashboard)/comunicacao/+page.svelte      |   91 +-
 .../(dashboard)/controladoria/+page.svelte    |  187 ++-
 .../(dashboard)/financeiro/+page.svelte       |  187 ++-
 .../routes/(dashboard)/juridico/+page.svelte  |   91 +-
 .../(dashboard)/licitacoes/+page.svelte       |  187 ++-
 .../programas-esportivos/+page.svelte         |   91 +-
 .../(dashboard)/recursos-humanos/+page.svelte |  534 ++++----
 .../ti/painel-administrativo/+page.svelte     |   29 +-
 .../routes/(dashboard)/ti/perfis/+page.svelte |   11 +-
 .../ti/solicitacoes-acesso/+page.svelte       |    9 +-
 22 files changed, 2085 insertions(+), 2423 deletions(-)

diff --git a/apps/web/src/lib/components/ActionGuard.svelte b/apps/web/src/lib/components/ActionGuard.svelte
index 90cbe93..d88ca22 100644
--- a/apps/web/src/lib/components/ActionGuard.svelte
+++ b/apps/web/src/lib/components/ActionGuard.svelte
@@ -1,83 +1,71 @@
-<script lang="ts">
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { authStore } from "$lib/stores/auth.svelte";
-  import { loginModalStore } from "$lib/stores/loginModal.svelte";
-
-  interface Props {
-    recurso: string;
-    acao: string;
-    children?: any;
-  }
-
-  let { recurso, acao, children }: Props = $props();
-
-  let verificando = $state(true);
-  let permitido = $state(false);
-
-  const permissaoQuery = $derived(
-    authStore.usuario
-      ? useQuery(api.permissoesAcoes.verificarAcao, {
-          usuarioId: authStore.usuario._id as Id<"usuarios">,
-          recurso,
-          acao,
-        })
-      : null
-  );
-
-  $effect(() => {
-    if (!authStore.autenticado) {
-      verificando = false;
-      permitido = false;
-      const currentPath = window.location.pathname;
-      loginModalStore.open(currentPath);
-      return;
-    }
-
-    if (permissaoQuery?.error) {
-      verificando = false;
-      permitido = false;
-    } else if (permissaoQuery && !permissaoQuery.isLoading) {
-      // Backend retorna null quando permitido
-      verificando = false;
-      permitido = true;
-    }
-  });
-</script>
-
-{#if verificando}
-  <div class="flex items-center justify-center min-h-screen">
-    <div class="text-center">
-      <span class="loading loading-spinner loading-lg text-primary"></span>
-      <p class="mt-4 text-base-content/70">Verificando permissões...</p>
-    </div>
-  </div>
-{:else if permitido}
-  {@render children?.()}
-{:else}
-  <div class="flex items-center justify-center min-h-screen">
-    <div class="text-center">
-      <div class="p-4 bg-error/10 rounded-full inline-block mb-4">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-16 w-16 text-error"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          />
-        </svg>
-      </div>
-      <h2 class="text-2xl font-bold text-base-content mb-2">Acesso Negado</h2>
-      <p class="text-base-content/70">
-        Você não tem permissão para acessar esta ação.
-      </p>
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import { useQuery } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+  import { authStore } from "$lib/stores/auth.svelte";
+  import { loginModalStore } from "$lib/stores/loginModal.svelte";
+  import { AlertTriangle } from "lucide-svelte";
+
+  interface Props {
+    recurso: string;
+    acao: string;
+    children?: any;
+  }
+
+  let { recurso, acao, children }: Props = $props();
+
+  let verificando = $state(true);
+  let permitido = $state(false);
+
+  const permissaoQuery = $derived(
+    authStore.usuario
+      ? useQuery(api.permissoesAcoes.verificarAcao, {
+          usuarioId: authStore.usuario._id as Id<"usuarios">,
+          recurso,
+          acao,
+        })
+      : null
+  );
+
+  $effect(() => {
+    if (!authStore.autenticado) {
+      verificando = false;
+      permitido = false;
+      const currentPath = window.location.pathname;
+      loginModalStore.open(currentPath);
+      return;
+    }
+
+    if (permissaoQuery?.error) {
+      verificando = false;
+      permitido = false;
+    } else if (permissaoQuery && !permissaoQuery.isLoading) {
+      // Backend retorna null quando permitido
+      verificando = false;
+      permitido = true;
+    }
+  });
+</script>
+
+{#if verificando}
+  <div class="flex items-center justify-center min-h-screen">
+    <div class="text-center">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+      <p class="mt-4 text-base-content/70">Verificando permissões...</p>
+    </div>
+  </div>
+{:else if permitido}
+  {@render children?.()}
+{:else}
+  <div class="flex items-center justify-center min-h-screen">
+    <div class="text-center">
+      <div class="p-4 bg-error/10 rounded-full inline-block mb-4">
+        <AlertTriangle class="h-16 w-16 text-error" strokeWidth={2} />
+      </div>
+      <h2 class="text-2xl font-bold text-base-content mb-2">Acesso Negado</h2>
+      <p class="text-base-content/70">
+        Você não tem permissão para acessar esta ação.
+      </p>
+    </div>
+  </div>
+{/if}
diff --git a/apps/web/src/lib/components/ErrorModal.svelte b/apps/web/src/lib/components/ErrorModal.svelte
index e5b1ca0..410886c 100644
--- a/apps/web/src/lib/components/ErrorModal.svelte
+++ b/apps/web/src/lib/components/ErrorModal.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { AlertCircle } from "lucide-svelte";
+  
   interface Props {
     open: boolean;
     title?: string;
@@ -20,20 +22,7 @@
   <div class="modal modal-open">
     <div class="modal-box">
       <h3 class="font-bold text-lg text-error mb-4 flex items-center gap-2">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
+        <AlertCircle class="h-6 w-6" strokeWidth={2} />
         {title}
       </h3>
       <p class="py-4 text-base-content">{message}</p>
diff --git a/apps/web/src/lib/components/FileUpload.svelte b/apps/web/src/lib/components/FileUpload.svelte
index 60e9e77..2f3227c 100644
--- a/apps/web/src/lib/components/FileUpload.svelte
+++ b/apps/web/src/lib/components/FileUpload.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { useConvexClient } from "convex-svelte";
+  import { ExternalLink, FileText, File, Upload, Trash2, Eye, RefreshCw } from "lucide-svelte";
   
   interface Props {
     label: string;
@@ -159,9 +160,7 @@
             class="text-primary hover:text-primary-focus transition-colors"
             aria-label="Acessar link"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-            </svg>
+            <ExternalLink class="h-4 w-4" strokeWidth={2} />
           </a>
         </div>
       {/if}
@@ -186,15 +185,11 @@
           <img src={previewUrl} alt="Preview" class="w-12 h-12 object-cover rounded" />
         {:else if fileType === "application/pdf" || fileName.endsWith(".pdf")}
           <div class="w-12 h-12 bg-error/10 rounded flex items-center justify-center">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-            </svg>
+            <FileText class="h-6 w-6 text-error" strokeWidth={2} />
           </div>
         {:else}
           <div class="w-12 h-12 bg-success/10 rounded flex items-center justify-center">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
+            <File class="h-6 w-6 text-success" strokeWidth={2} />
           </div>
         {/if}
       </div>
@@ -221,10 +216,7 @@
             disabled={uploading || disabled}
             title="Visualizar arquivo"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-            </svg>
+            <Eye class="h-4 w-4" strokeWidth={2} />
           </button>
         {/if}
         <button
@@ -234,9 +226,7 @@
           disabled={uploading || disabled}
           title="Substituir arquivo"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-          </svg>
+          <RefreshCw class="h-4 w-4" strokeWidth={2} />
         </button>
         <button
           type="button"
@@ -245,9 +235,7 @@
           disabled={uploading || disabled}
           title="Remover arquivo"
         >
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-          </svg>
+          <Trash2 class="h-4 w-4" strokeWidth={2} />
         </button>
       </div>
     </div>
@@ -262,9 +250,7 @@
         <span class="loading loading-spinner loading-sm"></span>
         Carregando...
       {:else}
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-        </svg>
+        <Upload class="h-5 w-5" strokeWidth={2} />
         Selecionar arquivo (PDF ou imagem, máx. 10MB)
       {/if}
     </button>
diff --git a/apps/web/src/lib/components/ModelosDeclaracoes.svelte b/apps/web/src/lib/components/ModelosDeclaracoes.svelte
index 0760935..4f1e873 100644
--- a/apps/web/src/lib/components/ModelosDeclaracoes.svelte
+++ b/apps/web/src/lib/components/ModelosDeclaracoes.svelte
@@ -1,162 +1,159 @@
-<script lang="ts">
-  import { modelosDeclaracoes } from "$lib/utils/modelosDeclaracoes";
-  import {
-    gerarDeclaracaoAcumulacaoCargo,
-    gerarDeclaracaoDependentesIR,
-    gerarDeclaracaoIdoneidade,
-    gerarTermoNepotismo,
-    gerarTermoOpcaoRemuneracao,
-    downloadBlob
-  } from "$lib/utils/declaracoesGenerator";
-
-  interface Props {
-    funcionario?: any;
-    showPreencherButton?: boolean;
-  }
-
-  let { funcionario, showPreencherButton = false }: Props = $props();
-  let generating = $state(false);
-
-  function baixarModelo(arquivoUrl: string, nomeModelo: string) {
-    const link = document.createElement('a');
-    link.href = arquivoUrl;
-    link.download = nomeModelo + '.pdf';
-    link.target = '_blank';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }
-
-  async function gerarPreenchido(modeloId: string) {
-    if (!funcionario) {
-      alert('Dados do funcionário não disponíveis');
-      return;
-    }
-
-    try {
-      generating = true;
-      let blob: Blob;
-      let nomeArquivo: string;
-
-      switch (modeloId) {
-        case 'acumulacao_cargo':
-          blob = await gerarDeclaracaoAcumulacaoCargo(funcionario);
-          nomeArquivo = `Declaracao_Acumulacao_Cargo_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
-          break;
-        
-        case 'dependentes_ir':
-          blob = await gerarDeclaracaoDependentesIR(funcionario);
-          nomeArquivo = `Declaracao_Dependentes_IR_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
-          break;
-        
-        case 'idoneidade':
-          blob = await gerarDeclaracaoIdoneidade(funcionario);
-          nomeArquivo = `Declaracao_Idoneidade_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
-          break;
-        
-        case 'nepotismo':
-          blob = await gerarTermoNepotismo(funcionario);
-          nomeArquivo = `Termo_Nepotismo_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
-          break;
-        
-        case 'opcao_remuneracao':
-          blob = await gerarTermoOpcaoRemuneracao(funcionario);
-          nomeArquivo = `Termo_Opcao_Remuneracao_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
-          break;
-        
-        default:
-          alert('Modelo não encontrado');
-          return;
-      }
-
-      downloadBlob(blob, nomeArquivo);
-    } catch (error) {
-      console.error('Erro ao gerar declaração:', error);
-      alert('Erro ao gerar declaração preenchida');
-    } finally {
-      generating = false;
-    }
-  }
-</script>
-
-<div class="card bg-base-100 shadow-xl">
-  <div class="card-body">
-    <h2 class="card-title text-xl border-b pb-3">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-      </svg>
-      Modelos de Declarações
-    </h2>
-
-    <div class="alert alert-info shadow-sm mb-4">
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-5 w-5" fill="none" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-      <div class="text-sm">
-        <p class="font-semibold">Baixe os modelos, preencha, assine e faça upload no sistema</p>
-        <p class="text-xs opacity-80 mt-1">Estes documentos são necessários para completar o cadastro do funcionário</p>
-      </div>
-    </div>
-
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {#each modelosDeclaracoes as modelo}
-        <div class="card bg-base-200 shadow-sm hover:shadow-md transition-shadow">
-          <div class="card-body p-4">
-            <div class="flex items-start gap-3">
-              <!-- Ícone PDF -->
-              <div class="flex-shrink-0 w-12 h-12 bg-error/10 rounded-lg flex items-center justify-center">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                </svg>
-              </div>
-
-              <!-- Conteúdo -->
-              <div class="flex-1 min-w-0">
-                <h3 class="font-semibold text-sm mb-1 line-clamp-2">{modelo.nome}</h3>
-                <p class="text-xs text-base-content/70 mb-3 line-clamp-2">{modelo.descricao}</p>
-
-                <!-- Ações -->
-                <div class="flex flex-col gap-2">
-                  <button
-                    type="button"
-                    class="btn btn-primary btn-xs gap-1"
-                    onclick={() => baixarModelo(modelo.arquivo, modelo.nome)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-                    </svg>
-                    Baixar Modelo
-                  </button>
-
-                  {#if showPreencherButton && modelo.podePreencherAutomaticamente && funcionario}
-                    <button
-                      type="button"
-                      class="btn btn-outline btn-xs gap-1"
-                      onclick={() => gerarPreenchido(modelo.id)}
-                      disabled={generating}
-                    >
-                      {#if generating}
-                        <span class="loading loading-spinner loading-xs"></span>
-                        Gerando...
-                      {:else}
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                        </svg>
-                        Gerar Preenchido
-                      {/if}
-                    </button>
-                  {/if}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      {/each}
-    </div>
-
-    <div class="mt-4 text-xs text-base-content/60 text-center">
-      <p>💡 Dica: Após preencher e assinar os documentos, faça upload na seção "Documentação Anexa"</p>
-    </div>
-  </div>
-</div>
-
+<script lang="ts">
+  import { modelosDeclaracoes } from "$lib/utils/modelosDeclaracoes";
+  import {
+    gerarDeclaracaoAcumulacaoCargo,
+    gerarDeclaracaoDependentesIR,
+    gerarDeclaracaoIdoneidade,
+    gerarTermoNepotismo,
+    gerarTermoOpcaoRemuneracao,
+    downloadBlob
+  } from "$lib/utils/declaracoesGenerator";
+  import { FileText, Info } from "lucide-svelte";
+
+  interface Props {
+    funcionario?: any;
+    showPreencherButton?: boolean;
+  }
+
+  let { funcionario, showPreencherButton = false }: Props = $props();
+  let generating = $state(false);
+
+  function baixarModelo(arquivoUrl: string, nomeModelo: string) {
+    const link = document.createElement('a');
+    link.href = arquivoUrl;
+    link.download = nomeModelo + '.pdf';
+    link.target = '_blank';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
+  async function gerarPreenchido(modeloId: string) {
+    if (!funcionario) {
+      alert('Dados do funcionário não disponíveis');
+      return;
+    }
+
+    try {
+      generating = true;
+      let blob: Blob;
+      let nomeArquivo: string;
+
+      switch (modeloId) {
+        case 'acumulacao_cargo':
+          blob = await gerarDeclaracaoAcumulacaoCargo(funcionario);
+          nomeArquivo = `Declaracao_Acumulacao_Cargo_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
+          break;
+        
+        case 'dependentes_ir':
+          blob = await gerarDeclaracaoDependentesIR(funcionario);
+          nomeArquivo = `Declaracao_Dependentes_IR_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
+          break;
+        
+        case 'idoneidade':
+          blob = await gerarDeclaracaoIdoneidade(funcionario);
+          nomeArquivo = `Declaracao_Idoneidade_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
+          break;
+        
+        case 'nepotismo':
+          blob = await gerarTermoNepotismo(funcionario);
+          nomeArquivo = `Termo_Nepotismo_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
+          break;
+        
+        case 'opcao_remuneracao':
+          blob = await gerarTermoOpcaoRemuneracao(funcionario);
+          nomeArquivo = `Termo_Opcao_Remuneracao_${funcionario.nome.replace(/ /g, '_')}_${Date.now()}.pdf`;
+          break;
+        
+        default:
+          alert('Modelo não encontrado');
+          return;
+      }
+
+      downloadBlob(blob, nomeArquivo);
+    } catch (error) {
+      console.error('Erro ao gerar declaração:', error);
+      alert('Erro ao gerar declaração preenchida');
+    } finally {
+      generating = false;
+    }
+  }
+</script>
+
+<div class="card bg-base-100 shadow-xl">
+  <div class="card-body">
+    <h2 class="card-title text-xl border-b pb-3">
+      <FileText class="h-5 w-5" strokeWidth={2} />
+      Modelos de Declarações
+    </h2>
+
+    <div class="alert alert-info shadow-sm mb-4">
+      <Info class="stroke-current shrink-0 h-5 w-5" strokeWidth={2} />
+      <div class="text-sm">
+        <p class="font-semibold">Baixe os modelos, preencha, assine e faça upload no sistema</p>
+        <p class="text-xs opacity-80 mt-1">Estes documentos são necessários para completar o cadastro do funcionário</p>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {#each modelosDeclaracoes as modelo}
+        <div class="card bg-base-200 shadow-sm hover:shadow-md transition-shadow">
+          <div class="card-body p-4">
+            <div class="flex items-start gap-3">
+              <!-- Ícone PDF -->
+              <div class="flex-shrink-0 w-12 h-12 bg-error/10 rounded-lg flex items-center justify-center">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+              </div>
+
+              <!-- Conteúdo -->
+              <div class="flex-1 min-w-0">
+                <h3 class="font-semibold text-sm mb-1 line-clamp-2">{modelo.nome}</h3>
+                <p class="text-xs text-base-content/70 mb-3 line-clamp-2">{modelo.descricao}</p>
+
+                <!-- Ações -->
+                <div class="flex flex-col gap-2">
+                  <button
+                    type="button"
+                    class="btn btn-primary btn-xs gap-1"
+                    onclick={() => baixarModelo(modelo.arquivo, modelo.nome)}
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                    </svg>
+                    Baixar Modelo
+                  </button>
+
+                  {#if showPreencherButton && modelo.podePreencherAutomaticamente && funcionario}
+                    <button
+                      type="button"
+                      class="btn btn-outline btn-xs gap-1"
+                      onclick={() => gerarPreenchido(modelo.id)}
+                      disabled={generating}
+                    >
+                      {#if generating}
+                        <span class="loading loading-spinner loading-xs"></span>
+                        Gerando...
+                      {:else}
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                        </svg>
+                        Gerar Preenchido
+                      {/if}
+                    </button>
+                  {/if}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+
+    <div class="mt-4 text-xs text-base-content/60 text-center">
+      <p>💡 Dica: Após preencher e assinar os documentos, faça upload na seção "Documentação Anexa"</p>
+    </div>
+  </div>
+</div>
+
diff --git a/apps/web/src/lib/components/PrintModal.svelte b/apps/web/src/lib/components/PrintModal.svelte
index d411b57..566f550 100644
--- a/apps/web/src/lib/components/PrintModal.svelte
+++ b/apps/web/src/lib/components/PrintModal.svelte
@@ -1,463 +1,458 @@
-<script lang="ts">
-  import jsPDF from 'jspdf';
-  import autoTable from 'jspdf-autotable';
-  import { maskCPF, maskCEP, maskPhone } from "$lib/utils/masks";
-  import { 
-    SEXO_OPTIONS, ESTADO_CIVIL_OPTIONS, GRAU_INSTRUCAO_OPTIONS,
-    GRUPO_SANGUINEO_OPTIONS, FATOR_RH_OPTIONS, APOSENTADO_OPTIONS
-  } from "$lib/utils/constants";
-  import logoGovPE from "$lib/assets/logo_governo_PE.png";
-
-  interface Props {
-    funcionario: any;
-    onClose: () => void;
-  }
-
-  let { funcionario, onClose }: Props = $props();
-
-  let modalRef: HTMLDialogElement;
-  let generating = $state(false);
-
-  // Seções selecionáveis
-  let sections = $state({
-    dadosPessoais: true,
-    filiacao: true,
-    naturalidade: true,
-    documentos: true,
-    formacao: true,
-    saude: true,
-    endereco: true,
-    contato: true,
-    cargo: true,
-    bancario: true,
-  });
-
-  function getLabelFromOptions(value: string | undefined, options: Array<{value: string, label: string}>): string {
-    if (!value) return "-";
-    return options.find(opt => opt.value === value)?.label || value;
-  }
-
-  function selectAll() {
-    Object.keys(sections).forEach(key => {
-      sections[key as keyof typeof sections] = true;
-    });
-  }
-
-  function deselectAll() {
-    Object.keys(sections).forEach(key => {
-      sections[key as keyof typeof sections] = false;
-    });
-  }
-
-  async function gerarPDF() {
-    try {
-      generating = true;
-
-      const doc = new jsPDF();
-
-      // Logo no canto superior esquerdo (proporcional)
-      let yPosition = 20;
-      try {
-        const logoImg = new Image();
-        logoImg.src = logoGovPE;
-        await new Promise<void>((resolve, reject) => {
-          logoImg.onload = () => resolve();
-          logoImg.onerror = () => reject();
-          setTimeout(() => reject(), 3000); // timeout após 3s
-        });
-        
-        // Logo proporcional: largura 25mm, altura ajustada automaticamente
-        const logoWidth = 25;
-        const aspectRatio = logoImg.height / logoImg.width;
-        const logoHeight = logoWidth * aspectRatio;
-        
-        doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
-        
-        // Ajustar posição inicial do texto para ficar ao lado da logo
-        yPosition = Math.max(20, 10 + logoHeight / 2);
-      } catch (err) {
-        console.warn('Não foi possível carregar a logo:', err);
-      }
-
-      // Cabeçalho (alinhado com a logo)
-      doc.setFontSize(16);
-      doc.setFont('helvetica', 'bold');
-      doc.text('Secretaria de Esportes', 50, yPosition);
-      doc.setFontSize(12);
-      doc.setFont('helvetica', 'normal');
-      doc.text('Governo de Pernambuco', 50, yPosition + 7);
-      
-      yPosition = Math.max(45, yPosition + 25);
-      
-      // Título da ficha
-      doc.setFontSize(18);
-      doc.setFont('helvetica', 'bold');
-      doc.text('FICHA CADASTRAL DE FUNCIONÁRIO', 105, yPosition, { align: 'center' });
-      
-      yPosition += 8;
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.text(`Gerado em: ${new Date().toLocaleString('pt-BR')}`, 105, yPosition, { align: 'center' });
-      
-      yPosition += 12;
-
-      // Dados Pessoais
-      if (sections.dadosPessoais) {
-        const dadosPessoais: any[] = [
-          ['Nome', funcionario.nome],
-          ['Matrícula', funcionario.matricula],
-          ['CPF', maskCPF(funcionario.cpf)],
-          ['RG', funcionario.rg],
-          ['Data Nascimento', funcionario.nascimento],
-        ];
-
-        if (funcionario.rgOrgaoExpedidor) dadosPessoais.push(['Órgão Expedidor RG', funcionario.rgOrgaoExpedidor]);
-        if (funcionario.rgDataEmissao) dadosPessoais.push(['Data Emissão RG', funcionario.rgDataEmissao]);
-        if (funcionario.sexo) dadosPessoais.push(['Sexo', getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)]);
-        if (funcionario.estadoCivil) dadosPessoais.push(['Estado Civil', getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)]);
-        if (funcionario.nacionalidade) dadosPessoais.push(['Nacionalidade', funcionario.nacionalidade]);
-
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['DADOS PESSOAIS', '']],
-          body: dadosPessoais,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
-
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
-
-      // Filiação
-      if (sections.filiacao && (funcionario.nomePai || funcionario.nomeMae)) {
-        const filiacao: any[] = [];
-        if (funcionario.nomePai) filiacao.push(['Nome do Pai', funcionario.nomePai]);
-        if (funcionario.nomeMae) filiacao.push(['Nome da Mãe', funcionario.nomeMae]);
-
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['FILIAÇÃO', '']],
-          body: filiacao,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
-
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
-
-      // Naturalidade
-      if (sections.naturalidade && (funcionario.naturalidade || funcionario.naturalidadeUF)) {
-        const naturalidade: any[] = [];
-        if (funcionario.naturalidade) naturalidade.push(['Cidade', funcionario.naturalidade]);
-        if (funcionario.naturalidadeUF) naturalidade.push(['UF', funcionario.naturalidadeUF]);
-
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['NATURALIDADE', '']],
-          body: naturalidade,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
-
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
-
-      // Documentos
-      if (sections.documentos) {
-        const documentosData: any[] = [];
-        
-        if (funcionario.carteiraProfissionalNumero) {
-          documentosData.push(['Cart. Profissional', `Nº ${funcionario.carteiraProfissionalNumero}${funcionario.carteiraProfissionalSerie ? ' - Série: ' + funcionario.carteiraProfissionalSerie : ''}`]);
-        }
-        if (funcionario.reservistaNumero) {
-          documentosData.push(['Reservista', `Nº ${funcionario.reservistaNumero}${funcionario.reservistaSerie ? ' - Série: ' + funcionario.reservistaSerie : ''}`]);
-        }
-        if (funcionario.tituloEleitorNumero) {
-          let titulo = `Nº ${funcionario.tituloEleitorNumero}`;
-          if (funcionario.tituloEleitorZona) titulo += ` - Zona: ${funcionario.tituloEleitorZona}`;
-          if (funcionario.tituloEleitorSecao) titulo += ` - Seção: ${funcionario.tituloEleitorSecao}`;
-          documentosData.push(['Título Eleitor', titulo]);
-        }
-        if (funcionario.pisNumero) documentosData.push(['PIS/PASEP', funcionario.pisNumero]);
-
-        if (documentosData.length > 0) {
-          autoTable(doc, {
-            startY: yPosition,
-            head: [['DOCUMENTOS', '']],
-            body: documentosData,
-            theme: 'grid',
-            headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-            styles: { fontSize: 9 },
-          });
-
-          yPosition = (doc as any).lastAutoTable.finalY + 10;
-        }
-      }
-
-      // Formação
-      if (sections.formacao && (funcionario.grauInstrucao || funcionario.formacao)) {
-        const formacaoData: any[] = [];
-        if (funcionario.grauInstrucao) formacaoData.push(['Grau Instrução', getLabelFromOptions(funcionario.grauInstrucao, GRAU_INSTRUCAO_OPTIONS)]);
-        if (funcionario.formacao) formacaoData.push(['Formação', funcionario.formacao]);
-        if (funcionario.formacaoRegistro) formacaoData.push(['Registro Nº', funcionario.formacaoRegistro]);
-
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['FORMAÇÃO', '']],
-          body: formacaoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
-
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
-
-      // Saúde
-      if (sections.saude && (funcionario.grupoSanguineo || funcionario.fatorRH)) {
-        const saudeData: any[] = [];
-        if (funcionario.grupoSanguineo) saudeData.push(['Grupo Sanguíneo', funcionario.grupoSanguineo]);
-        if (funcionario.fatorRH) saudeData.push(['Fator RH', getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)]);
-
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['SAÚDE', '']],
-          body: saudeData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
-
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
-
-      // Endereço
-      if (sections.endereco) {
-        const enderecoData: any[] = [
-          ['Endereço', funcionario.endereco],
-          ['Cidade', funcionario.cidade],
-          ['UF', funcionario.uf],
-          ['CEP', maskCEP(funcionario.cep)],
-        ];
-
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['ENDEREÇO', '']],
-          body: enderecoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
-
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
-
-      // Contato
-      if (sections.contato) {
-        const contatoData: any[] = [
-          ['E-mail', funcionario.email],
-          ['Telefone', maskPhone(funcionario.telefone)],
-        ];
-
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['CONTATO', '']],
-          body: contatoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
-
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
-
-      // Nova página para cargo
-      if (yPosition > 200) {
-        doc.addPage();
-        yPosition = 20;
-      }
-
-      // Cargo e Vínculo
-      if (sections.cargo) {
-        const cargoData: any[] = [
-          ['Tipo', funcionario.simboloTipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'],
-        ];
-
-        if (funcionario.simbolo) {
-          cargoData.push(['Símbolo', funcionario.simbolo.nome]);
-        }
-        if (funcionario.descricaoCargo) cargoData.push(['Descrição', funcionario.descricaoCargo]);
-        if (funcionario.admissaoData) cargoData.push(['Data Admissão', funcionario.admissaoData]);
-        if (funcionario.nomeacaoPortaria) cargoData.push(['Portaria', funcionario.nomeacaoPortaria]);
-        if (funcionario.nomeacaoData) cargoData.push(['Data Nomeação', funcionario.nomeacaoData]);
-        if (funcionario.nomeacaoDOE) cargoData.push(['DOE', funcionario.nomeacaoDOE]);
-        if (funcionario.pertenceOrgaoPublico) {
-          cargoData.push(['Pertence Órgão Público', 'Sim']);
-          if (funcionario.orgaoOrigem) cargoData.push(['Órgão Origem', funcionario.orgaoOrigem]);
-        }
-        if (funcionario.aposentado && funcionario.aposentado !== 'nao') {
-          cargoData.push(['Aposentado', getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)]);
-        }
-
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['CARGO E VÍNCULO', '']],
-          body: cargoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
-
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
-
-      // Dados Bancários
-      if (sections.bancario && funcionario.contaBradescoNumero) {
-        const bancarioData: any[] = [
-          ['Conta', `${funcionario.contaBradescoNumero}${funcionario.contaBradescoDV ? '-' + funcionario.contaBradescoDV : ''}`],
-        ];
-        if (funcionario.contaBradescoAgencia) bancarioData.push(['Agência', funcionario.contaBradescoAgencia]);
-
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['DADOS BANCÁRIOS - BRADESCO', '']],
-          body: bancarioData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
-
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
-
-      // Adicionar rodapé em todas as páginas
-      const pageCount = (doc as any).internal.getNumberOfPages();
-      for (let i = 1; i <= pageCount; i++) {
-        doc.setPage(i);
-        doc.setFontSize(9);
-        doc.setFont('helvetica', 'normal');
-        doc.setTextColor(128, 128, 128);
-        doc.text('SGSE - Sistema de Gerenciamento da Secretaria de Esportes', 105, 285, { align: 'center' });
-        doc.text(`Página ${i} de ${pageCount}`, 195, 285, { align: 'right' });
-      }
-
-      // Salvar PDF
-      doc.save(`Ficha_${funcionario.nome.replace(/ /g, '_')}_${new Date().getTime()}.pdf`);
-
-      onClose();
-    } catch (error) {
-      console.error('Erro ao gerar PDF:', error);
-      alert('Erro ao gerar PDF. Verifique o console para mais detalhes.');
-    } finally {
-      generating = false;
-    }
-  }
-
-  $effect(() => {
-    if (modalRef) {
-      modalRef.showModal();
-    }
-  });
-</script>
-
-<dialog bind:this={modalRef} class="modal">
-  <div class="modal-box max-w-4xl">
-    <h3 class="font-bold text-2xl mb-4">Imprimir Ficha Cadastral</h3>
-    <p class="text-sm text-base-content/70 mb-6">Selecione as seções que deseja incluir no PDF</p>
-
-    <!-- Botões de seleção -->
-    <div class="flex gap-2 mb-6">
-      <button type="button" class="btn btn-sm btn-outline" onclick={selectAll}>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        Selecionar Todos
-      </button>
-      <button type="button" class="btn btn-sm btn-outline" onclick={deselectAll}>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-        Desmarcar Todos
-      </button>
-    </div>
-
-    <!-- Grid de checkboxes -->
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6 max-h-96 overflow-y-auto p-2 border rounded-lg bg-base-200">
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.dadosPessoais} />
-        <span class="label-text">Dados Pessoais</span>
-      </label>
-
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.filiacao} />
-        <span class="label-text">Filiação</span>
-      </label>
-
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.naturalidade} />
-        <span class="label-text">Naturalidade</span>
-      </label>
-
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.documentos} />
-        <span class="label-text">Documentos</span>
-      </label>
-
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.formacao} />
-        <span class="label-text">Formação</span>
-      </label>
-
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.saude} />
-        <span class="label-text">Saúde</span>
-      </label>
-
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.endereco} />
-        <span class="label-text">Endereço</span>
-      </label>
-
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.contato} />
-        <span class="label-text">Contato</span>
-      </label>
-
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.cargo} />
-        <span class="label-text">Cargo e Vínculo</span>
-      </label>
-
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.bancario} />
-        <span class="label-text">Dados Bancários</span>
-      </label>
-    </div>
-
-    <!-- Ações -->
-    <div class="modal-action">
-      <button type="button" class="btn btn-ghost" onclick={onClose} disabled={generating}>
-        Cancelar
-      </button>
-      <button type="button" class="btn btn-primary gap-2" onclick={gerarPDF} disabled={generating}>
-        {#if generating}
-          <span class="loading loading-spinner loading-sm"></span>
-          Gerando PDF...
-        {:else}
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
-          </svg>
-          Gerar PDF
-        {/if}
-      </button>
-    </div>
-  </div>
-
-  <form method="dialog" class="modal-backdrop">
-    <button type="button" onclick={onClose}>fechar</button>
-  </form>
-</dialog>
-
+<script lang="ts">
+  import jsPDF from 'jspdf';
+  import autoTable from 'jspdf-autotable';
+  import { maskCPF, maskCEP, maskPhone } from "$lib/utils/masks";
+  import { 
+    SEXO_OPTIONS, ESTADO_CIVIL_OPTIONS, GRAU_INSTRUCAO_OPTIONS,
+    GRUPO_SANGUINEO_OPTIONS, FATOR_RH_OPTIONS, APOSENTADO_OPTIONS
+  } from "$lib/utils/constants";
+  import logoGovPE from "$lib/assets/logo_governo_PE.png";
+  import { CheckCircle2, X, Printer } from "lucide-svelte";
+
+  interface Props {
+    funcionario: any;
+    onClose: () => void;
+  }
+
+  let { funcionario, onClose }: Props = $props();
+
+  let modalRef: HTMLDialogElement;
+  let generating = $state(false);
+
+  // Seções selecionáveis
+  let sections = $state({
+    dadosPessoais: true,
+    filiacao: true,
+    naturalidade: true,
+    documentos: true,
+    formacao: true,
+    saude: true,
+    endereco: true,
+    contato: true,
+    cargo: true,
+    bancario: true,
+  });
+
+  function getLabelFromOptions(value: string | undefined, options: Array<{value: string, label: string}>): string {
+    if (!value) return "-";
+    return options.find(opt => opt.value === value)?.label || value;
+  }
+
+  function selectAll() {
+    Object.keys(sections).forEach(key => {
+      sections[key as keyof typeof sections] = true;
+    });
+  }
+
+  function deselectAll() {
+    Object.keys(sections).forEach(key => {
+      sections[key as keyof typeof sections] = false;
+    });
+  }
+
+  async function gerarPDF() {
+    try {
+      generating = true;
+
+      const doc = new jsPDF();
+
+      // Logo no canto superior esquerdo (proporcional)
+      let yPosition = 20;
+      try {
+        const logoImg = new Image();
+        logoImg.src = logoGovPE;
+        await new Promise<void>((resolve, reject) => {
+          logoImg.onload = () => resolve();
+          logoImg.onerror = () => reject();
+          setTimeout(() => reject(), 3000); // timeout após 3s
+        });
+        
+        // Logo proporcional: largura 25mm, altura ajustada automaticamente
+        const logoWidth = 25;
+        const aspectRatio = logoImg.height / logoImg.width;
+        const logoHeight = logoWidth * aspectRatio;
+        
+        doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
+        
+        // Ajustar posição inicial do texto para ficar ao lado da logo
+        yPosition = Math.max(20, 10 + logoHeight / 2);
+      } catch (err) {
+        console.warn('Não foi possível carregar a logo:', err);
+      }
+
+      // Cabeçalho (alinhado com a logo)
+      doc.setFontSize(16);
+      doc.setFont('helvetica', 'bold');
+      doc.text('Secretaria de Esportes', 50, yPosition);
+      doc.setFontSize(12);
+      doc.setFont('helvetica', 'normal');
+      doc.text('Governo de Pernambuco', 50, yPosition + 7);
+      
+      yPosition = Math.max(45, yPosition + 25);
+      
+      // Título da ficha
+      doc.setFontSize(18);
+      doc.setFont('helvetica', 'bold');
+      doc.text('FICHA CADASTRAL DE FUNCIONÁRIO', 105, yPosition, { align: 'center' });
+      
+      yPosition += 8;
+      doc.setFontSize(10);
+      doc.setFont('helvetica', 'normal');
+      doc.text(`Gerado em: ${new Date().toLocaleString('pt-BR')}`, 105, yPosition, { align: 'center' });
+      
+      yPosition += 12;
+
+      // Dados Pessoais
+      if (sections.dadosPessoais) {
+        const dadosPessoais: any[] = [
+          ['Nome', funcionario.nome],
+          ['Matrícula', funcionario.matricula],
+          ['CPF', maskCPF(funcionario.cpf)],
+          ['RG', funcionario.rg],
+          ['Data Nascimento', funcionario.nascimento],
+        ];
+
+        if (funcionario.rgOrgaoExpedidor) dadosPessoais.push(['Órgão Expedidor RG', funcionario.rgOrgaoExpedidor]);
+        if (funcionario.rgDataEmissao) dadosPessoais.push(['Data Emissão RG', funcionario.rgDataEmissao]);
+        if (funcionario.sexo) dadosPessoais.push(['Sexo', getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)]);
+        if (funcionario.estadoCivil) dadosPessoais.push(['Estado Civil', getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)]);
+        if (funcionario.nacionalidade) dadosPessoais.push(['Nacionalidade', funcionario.nacionalidade]);
+
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['DADOS PESSOAIS', '']],
+          body: dadosPessoais,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
+
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
+
+      // Filiação
+      if (sections.filiacao && (funcionario.nomePai || funcionario.nomeMae)) {
+        const filiacao: any[] = [];
+        if (funcionario.nomePai) filiacao.push(['Nome do Pai', funcionario.nomePai]);
+        if (funcionario.nomeMae) filiacao.push(['Nome da Mãe', funcionario.nomeMae]);
+
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['FILIAÇÃO', '']],
+          body: filiacao,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
+
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
+
+      // Naturalidade
+      if (sections.naturalidade && (funcionario.naturalidade || funcionario.naturalidadeUF)) {
+        const naturalidade: any[] = [];
+        if (funcionario.naturalidade) naturalidade.push(['Cidade', funcionario.naturalidade]);
+        if (funcionario.naturalidadeUF) naturalidade.push(['UF', funcionario.naturalidadeUF]);
+
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['NATURALIDADE', '']],
+          body: naturalidade,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
+
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
+
+      // Documentos
+      if (sections.documentos) {
+        const documentosData: any[] = [];
+        
+        if (funcionario.carteiraProfissionalNumero) {
+          documentosData.push(['Cart. Profissional', `Nº ${funcionario.carteiraProfissionalNumero}${funcionario.carteiraProfissionalSerie ? ' - Série: ' + funcionario.carteiraProfissionalSerie : ''}`]);
+        }
+        if (funcionario.reservistaNumero) {
+          documentosData.push(['Reservista', `Nº ${funcionario.reservistaNumero}${funcionario.reservistaSerie ? ' - Série: ' + funcionario.reservistaSerie : ''}`]);
+        }
+        if (funcionario.tituloEleitorNumero) {
+          let titulo = `Nº ${funcionario.tituloEleitorNumero}`;
+          if (funcionario.tituloEleitorZona) titulo += ` - Zona: ${funcionario.tituloEleitorZona}`;
+          if (funcionario.tituloEleitorSecao) titulo += ` - Seção: ${funcionario.tituloEleitorSecao}`;
+          documentosData.push(['Título Eleitor', titulo]);
+        }
+        if (funcionario.pisNumero) documentosData.push(['PIS/PASEP', funcionario.pisNumero]);
+
+        if (documentosData.length > 0) {
+          autoTable(doc, {
+            startY: yPosition,
+            head: [['DOCUMENTOS', '']],
+            body: documentosData,
+            theme: 'grid',
+            headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+            styles: { fontSize: 9 },
+          });
+
+          yPosition = (doc as any).lastAutoTable.finalY + 10;
+        }
+      }
+
+      // Formação
+      if (sections.formacao && (funcionario.grauInstrucao || funcionario.formacao)) {
+        const formacaoData: any[] = [];
+        if (funcionario.grauInstrucao) formacaoData.push(['Grau Instrução', getLabelFromOptions(funcionario.grauInstrucao, GRAU_INSTRUCAO_OPTIONS)]);
+        if (funcionario.formacao) formacaoData.push(['Formação', funcionario.formacao]);
+        if (funcionario.formacaoRegistro) formacaoData.push(['Registro Nº', funcionario.formacaoRegistro]);
+
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['FORMAÇÃO', '']],
+          body: formacaoData,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
+
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
+
+      // Saúde
+      if (sections.saude && (funcionario.grupoSanguineo || funcionario.fatorRH)) {
+        const saudeData: any[] = [];
+        if (funcionario.grupoSanguineo) saudeData.push(['Grupo Sanguíneo', funcionario.grupoSanguineo]);
+        if (funcionario.fatorRH) saudeData.push(['Fator RH', getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)]);
+
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['SAÚDE', '']],
+          body: saudeData,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
+
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
+
+      // Endereço
+      if (sections.endereco) {
+        const enderecoData: any[] = [
+          ['Endereço', funcionario.endereco],
+          ['Cidade', funcionario.cidade],
+          ['UF', funcionario.uf],
+          ['CEP', maskCEP(funcionario.cep)],
+        ];
+
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['ENDEREÇO', '']],
+          body: enderecoData,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
+
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
+
+      // Contato
+      if (sections.contato) {
+        const contatoData: any[] = [
+          ['E-mail', funcionario.email],
+          ['Telefone', maskPhone(funcionario.telefone)],
+        ];
+
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['CONTATO', '']],
+          body: contatoData,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
+
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
+
+      // Nova página para cargo
+      if (yPosition > 200) {
+        doc.addPage();
+        yPosition = 20;
+      }
+
+      // Cargo e Vínculo
+      if (sections.cargo) {
+        const cargoData: any[] = [
+          ['Tipo', funcionario.simboloTipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'],
+        ];
+
+        if (funcionario.simbolo) {
+          cargoData.push(['Símbolo', funcionario.simbolo.nome]);
+        }
+        if (funcionario.descricaoCargo) cargoData.push(['Descrição', funcionario.descricaoCargo]);
+        if (funcionario.admissaoData) cargoData.push(['Data Admissão', funcionario.admissaoData]);
+        if (funcionario.nomeacaoPortaria) cargoData.push(['Portaria', funcionario.nomeacaoPortaria]);
+        if (funcionario.nomeacaoData) cargoData.push(['Data Nomeação', funcionario.nomeacaoData]);
+        if (funcionario.nomeacaoDOE) cargoData.push(['DOE', funcionario.nomeacaoDOE]);
+        if (funcionario.pertenceOrgaoPublico) {
+          cargoData.push(['Pertence Órgão Público', 'Sim']);
+          if (funcionario.orgaoOrigem) cargoData.push(['Órgão Origem', funcionario.orgaoOrigem]);
+        }
+        if (funcionario.aposentado && funcionario.aposentado !== 'nao') {
+          cargoData.push(['Aposentado', getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)]);
+        }
+
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['CARGO E VÍNCULO', '']],
+          body: cargoData,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
+
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
+
+      // Dados Bancários
+      if (sections.bancario && funcionario.contaBradescoNumero) {
+        const bancarioData: any[] = [
+          ['Conta', `${funcionario.contaBradescoNumero}${funcionario.contaBradescoDV ? '-' + funcionario.contaBradescoDV : ''}`],
+        ];
+        if (funcionario.contaBradescoAgencia) bancarioData.push(['Agência', funcionario.contaBradescoAgencia]);
+
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['DADOS BANCÁRIOS - BRADESCO', '']],
+          body: bancarioData,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
+
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
+
+      // Adicionar rodapé em todas as páginas
+      const pageCount = (doc as any).internal.getNumberOfPages();
+      for (let i = 1; i <= pageCount; i++) {
+        doc.setPage(i);
+        doc.setFontSize(9);
+        doc.setFont('helvetica', 'normal');
+        doc.setTextColor(128, 128, 128);
+        doc.text('SGSE - Sistema de Gerenciamento da Secretaria de Esportes', 105, 285, { align: 'center' });
+        doc.text(`Página ${i} de ${pageCount}`, 195, 285, { align: 'right' });
+      }
+
+      // Salvar PDF
+      doc.save(`Ficha_${funcionario.nome.replace(/ /g, '_')}_${new Date().getTime()}.pdf`);
+
+      onClose();
+    } catch (error) {
+      console.error('Erro ao gerar PDF:', error);
+      alert('Erro ao gerar PDF. Verifique o console para mais detalhes.');
+    } finally {
+      generating = false;
+    }
+  }
+
+  $effect(() => {
+    if (modalRef) {
+      modalRef.showModal();
+    }
+  });
+</script>
+
+<dialog bind:this={modalRef} class="modal">
+  <div class="modal-box max-w-4xl">
+    <h3 class="font-bold text-2xl mb-4">Imprimir Ficha Cadastral</h3>
+    <p class="text-sm text-base-content/70 mb-6">Selecione as seções que deseja incluir no PDF</p>
+
+    <!-- Botões de seleção -->
+    <div class="flex gap-2 mb-6">
+      <button type="button" class="btn btn-sm btn-outline" onclick={selectAll}>
+        <CheckCircle2 class="h-4 w-4" strokeWidth={2} />
+        Selecionar Todos
+      </button>
+      <button type="button" class="btn btn-sm btn-outline" onclick={deselectAll}>
+        <X class="h-4 w-4" strokeWidth={2} />
+        Desmarcar Todos
+      </button>
+    </div>
+
+    <!-- Grid de checkboxes -->
+    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6 max-h-96 overflow-y-auto p-2 border rounded-lg bg-base-200">
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.dadosPessoais} />
+        <span class="label-text">Dados Pessoais</span>
+      </label>
+
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.filiacao} />
+        <span class="label-text">Filiação</span>
+      </label>
+
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.naturalidade} />
+        <span class="label-text">Naturalidade</span>
+      </label>
+
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.documentos} />
+        <span class="label-text">Documentos</span>
+      </label>
+
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.formacao} />
+        <span class="label-text">Formação</span>
+      </label>
+
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.saude} />
+        <span class="label-text">Saúde</span>
+      </label>
+
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.endereco} />
+        <span class="label-text">Endereço</span>
+      </label>
+
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.contato} />
+        <span class="label-text">Contato</span>
+      </label>
+
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.cargo} />
+        <span class="label-text">Cargo e Vínculo</span>
+      </label>
+
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.bancario} />
+        <span class="label-text">Dados Bancários</span>
+      </label>
+    </div>
+
+    <!-- Ações -->
+    <div class="modal-action">
+      <button type="button" class="btn btn-ghost" onclick={onClose} disabled={generating}>
+        Cancelar
+      </button>
+      <button type="button" class="btn btn-primary gap-2" onclick={gerarPDF} disabled={generating}>
+        {#if generating}
+          <span class="loading loading-spinner loading-sm"></span>
+          Gerando PDF...
+        {:else}
+          <Printer class="h-5 w-5" strokeWidth={2} />
+          Gerar PDF
+        {/if}
+      </button>
+    </div>
+  </div>
+
+  <form method="dialog" class="modal-backdrop">
+    <button type="button" onclick={onClose}>fechar</button>
+  </form>
+</dialog>
+
diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index 0df953f..cc0b25b 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -12,6 +12,7 @@
   import PresenceManager from "$lib/components/chat/PresenceManager.svelte";
   import { getBrowserInfo } from "$lib/utils/browserInfo";
   import { getAvatarUrl } from "$lib/utils/avatarGenerator";
+  import { Menu, User, Home, UserPlus, XCircle, LogIn, Tag, Plus, Check } from "lucide-svelte";
 
   let { children }: { children: Snippet } = $props();
 
@@ -180,21 +181,11 @@
       <div class="absolute inset-0 bg-gradient-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
       
       <!-- Ícone de menu hambúrguer -->
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
+      <Menu
         class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
         style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2.5"
-          d="M4 6h16M4 12h16M4 18h16"
-          stroke="currentColor"
-        ></path>
-      </svg>
+        strokeWidth={2.5}
+      />
     </label>
   </div>
   <div class="flex-1 flex items-center gap-4 lg:gap-6">
@@ -261,15 +252,10 @@
             />
           {:else}
             <!-- Ícone de usuário moderno (fallback) -->
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
+          <User
             class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
             style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
-          >
-            <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
-          </svg>
+          />
           {/if}
           
           <!-- Badge de status online -->
@@ -301,21 +287,11 @@
         <div class="absolute inset-0 rounded-full bg-white/10 group-hover:animate-ping"></div>
         
         <!-- Ícone de login premium -->
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
+        <User
           class="h-8 w-8 relative z-10 text-white group-hover:scale-110 transition-all duration-500"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          stroke-width="2.5"
           style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-          />
-        </svg>
+          strokeWidth={2.5}
+        />
       </button>
     {/if}
   </div>
@@ -365,20 +341,10 @@
             href="/"
             class={getMenuClasses(currentPath === "/")}
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
+            <Home
               class="h-5 w-5 group-hover:scale-110 transition-transform"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-              />
-            </svg>
+              strokeWidth={2}
+            />
             <span>Dashboard</span>
           </a>
         </li>
@@ -399,20 +365,10 @@
             href="/solicitar-acesso"
             class={getSolicitarClasses(currentPath === "/solicitar-acesso")}
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
+            <UserPlus
               class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
-              />
-            </svg>
+              strokeWidth={2}
+            />
             <span>Solicitar acesso</span>
           </a>
         </li>
@@ -446,9 +402,7 @@
 
         {#if erroLogin}
           <div class="alert alert-error mb-4">
-            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
+            <XCircle class="stroke-current shrink-0 h-6 w-6" strokeWidth={2} />
             <span>{erroLogin}</span>
           </div>
         {/if}
@@ -492,9 +446,7 @@
                 <span class="loading loading-spinner loading-sm"></span>
                 Entrando...
               {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
-                </svg>
+                <LogIn class="h-5 w-5" strokeWidth={2} />
                 Entrar
               {/if}
             </button>
@@ -559,16 +511,12 @@
         <!-- Informações de Versão -->
         <div class="bg-primary/10 rounded-xl p-6 space-y-3">
           <div class="flex items-center justify-center gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
-            </svg>
+            <Tag class="h-5 w-5 text-primary" strokeWidth={2} />
             <p class="text-sm font-medium text-base-content/70">Versão</p>
           </div>
           <p class="text-2xl font-bold text-primary">1.0 26_2025</p>
           <div class="badge badge-warning badge-lg gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-            </svg>
+            <Plus class="h-4 w-4" strokeWidth={2} />
             Em Desenvolvimento
           </div>
         </div>
@@ -603,9 +551,7 @@
             class="btn btn-primary btn-lg w-full max-w-xs mx-auto shadow-lg hover:shadow-xl transition-all duration-300"
             onclick={closeAboutModal}
           >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-            </svg>
+            <Check class="h-6 w-6" strokeWidth={2} />
             OK
           </button>
         </div>
diff --git a/apps/web/src/lib/components/chat/ChatWindow.svelte b/apps/web/src/lib/components/chat/ChatWindow.svelte
index 14636f6..39fe45a 100644
--- a/apps/web/src/lib/components/chat/ChatWindow.svelte
+++ b/apps/web/src/lib/components/chat/ChatWindow.svelte
@@ -11,7 +11,7 @@
   import SalaReuniaoManager from "./SalaReuniaoManager.svelte";
   import { getAvatarUrl } from "$lib/utils/avatarGenerator";
   import { authStore } from "$lib/stores/auth.svelte";
-  import { Bell, X } from "lucide-svelte";
+  import { Bell, X, ArrowLeft, LogOut, MoreVertical, Users, Clock, XCircle } from "lucide-svelte";
 
   interface Props {
     conversaId: string;
@@ -117,18 +117,10 @@
       aria-label="Voltar"
       title="Voltar para lista de conversas"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+      <ArrowLeft
         class="w-6 h-6 text-primary"
-      >
-        <path d="M19 12H5M12 19l-7-7 7-7"/>
-      </svg>
+        strokeWidth={2.5}
+      />
     </button>
 
     <!-- Avatar e Info -->
@@ -215,20 +207,10 @@
           title="Sair da conversa"
         >
           <div class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/10 transition-colors duration-300"></div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
+          <LogOut
             class="w-5 h-5 text-red-500 relative z-10 group-hover:scale-110 transition-transform"
-          >
-            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
-            <polyline points="16 17 21 12 16 7"/>
-            <line x1="21" y1="12" x2="9" y2="12"/>
-          </svg>
+            strokeWidth={2}
+          />
         </button>
       {/if}
 
@@ -247,20 +229,10 @@
             title="Recursos administrativos"
           >
             <div class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/10 transition-colors duration-300"></div>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
+            <MoreVertical
               class="w-5 h-5 text-blue-500 relative z-10 group-hover:scale-110 transition-transform"
-            >
-              <circle cx="12" cy="12" r="1"/>
-              <circle cx="12" cy="5" r="1"/>
-              <circle cx="12" cy="19" r="1"/>
-            </svg>
+              strokeWidth={2}
+            />
           </button>
           {#if showAdminMenu}
             <ul
@@ -277,9 +249,7 @@
                     showAdminMenu = false;
                   }}
                 >
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
-                  </svg>
+                  <Users class="w-4 h-4" strokeWidth={2} />
                   Gerenciar Participantes
                 </button>
               </li>
@@ -293,9 +263,7 @@
                     showAdminMenu = false;
                   }}
                 >
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
-                  </svg>
+                  <Bell class="w-4 h-4" strokeWidth={2} />
                   Enviar Notificação
                 </button>
               </li>
@@ -324,9 +292,7 @@
                     })();
                   }}
                 >
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-                  </svg>
+                  <XCircle class="w-4 h-4" strokeWidth={2} />
                   Encerrar Reunião
                 </button>
               </li>
@@ -345,19 +311,10 @@
         title="Agendar mensagem"
       >
         <div class="absolute inset-0 bg-purple-500/0 group-hover:bg-purple-500/10 transition-colors duration-300"></div>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+        <Clock
           class="w-5 h-5 text-purple-500 relative z-10 group-hover:scale-110 transition-transform"
-        >
-          <circle cx="12" cy="12" r="10"/>
-          <polyline points="12 6 12 12 16 14"/>
-        </svg>
+          strokeWidth={2}
+        />
       </button>
     </div>
   </div>
diff --git a/apps/web/src/lib/components/chat/MessageInput.svelte b/apps/web/src/lib/components/chat/MessageInput.svelte
index 4878c6d..8f35137 100644
--- a/apps/web/src/lib/components/chat/MessageInput.svelte
+++ b/apps/web/src/lib/components/chat/MessageInput.svelte
@@ -4,6 +4,7 @@
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
   import { onMount } from "svelte";
   import { authStore } from "$lib/stores/auth.svelte";
+  import { Paperclip, Smile, Send } from "lucide-svelte";
 
   interface Props {
     conversaId: Id<"conversas">;
@@ -340,18 +341,10 @@
         <span class="loading loading-spinner loading-sm relative z-10"></span>
       {:else}
         <!-- Ícone de clipe moderno -->
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+        <Paperclip
           class="w-5 h-5 text-primary relative z-10 group-hover:scale-110 transition-transform"
-        >
-          <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
-        </svg>
+          strokeWidth={2}
+        />
       {/if}
     </label>
 
@@ -367,21 +360,10 @@
         title="Adicionar emoji"
       >
         <div class="absolute inset-0 bg-warning/0 group-hover:bg-warning/10 transition-colors duration-300"></div>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+        <Smile
           class="w-5 h-5 text-warning relative z-10 group-hover:scale-110 transition-transform"
-        >
-          <circle cx="12" cy="12" r="10"/>
-          <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
-          <line x1="9" y1="9" x2="9.01" y2="9"/>
-          <line x1="15" y1="9" x2="15.01" y2="9"/>
-        </svg>
+          strokeWidth={2}
+        />
       </button>
 
       <!-- Picker de Emojis -->
@@ -458,14 +440,9 @@
         <span class="loading loading-spinner loading-sm relative z-10 text-white"></span>
       {:else}
         <!-- Ícone de avião de papel moderno -->
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
+        <Send
           class="w-5 h-5 text-white relative z-10 group-hover:scale-110 group-hover:translate-x-1 transition-all"
-        >
-          <path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z"/>
-        </svg>
+        />
       {/if}
     </button>
   </div>
diff --git a/apps/web/src/lib/components/chat/NotificationBell.svelte b/apps/web/src/lib/components/chat/NotificationBell.svelte
index 047f7da..6bf2489 100644
--- a/apps/web/src/lib/components/chat/NotificationBell.svelte
+++ b/apps/web/src/lib/components/chat/NotificationBell.svelte
@@ -6,6 +6,7 @@
   import { ptBR } from "date-fns/locale";
   import { onMount } from "svelte";
   import { authStore } from "$lib/stores/auth.svelte";
+  import { Bell, Mail, AtSign, Users, Calendar, Clock, BellOff } from "lucide-svelte";
 
   // Queries e Client
   const client = useConvexClient();
@@ -200,22 +201,14 @@
     {/if}
 
     <!-- Ícone do sino PREENCHIDO moderno -->
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="currentColor"
+    <Bell
       class="w-7 h-7 text-white relative z-10 transition-all duration-300 group-hover:scale-110"
       style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); animation: {count &&
       count > 0
         ? 'bell-ring 2s ease-in-out infinite'
         : 'none'};"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
-        clip-rule="evenodd"
-      />
-    </svg>
+      fill="currentColor"
+    />
 
     <!-- Badge premium MODERNO com gradiente -->
     {#if count + (notificacoesFerias?.length || 0) > 0}
@@ -264,50 +257,11 @@
                 <!-- Ícone -->
                 <div class="flex-shrink-0 mt-1">
                   {#if notificacao.tipo === "nova_mensagem"}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="w-5 h-5 text-primary"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
-                      />
-                    </svg>
+                    <Mail class="w-5 h-5 text-primary" strokeWidth={1.5} />
                   {:else if notificacao.tipo === "mencao"}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="w-5 h-5 text-warning"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25"
-                      />
-                    </svg>
+                    <AtSign class="w-5 h-5 text-warning" strokeWidth={1.5} />
                   {:else}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="w-5 h-5 text-info"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
-                      />
-                    </svg>
+                    <Users class="w-5 h-5 text-info" strokeWidth={1.5} />
                   {/if}
                 </div>
 
@@ -349,20 +303,7 @@
               <div class="flex items-start gap-3">
                 <!-- Ícone -->
                 <div class="flex-shrink-0 mt-1">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="w-5 h-5 text-purple-600"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    />
-                  </svg>
+                  <Calendar class="w-5 h-5 text-purple-600" strokeWidth={2} />
                 </div>
 
                 <!-- Conteúdo -->
@@ -398,20 +339,7 @@
               <div class="flex items-start gap-3">
                 <!-- Ícone -->
                 <div class="flex-shrink-0 mt-1">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="w-5 h-5 text-orange-600"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
+                  <Clock class="w-5 h-5 text-orange-600" strokeWidth={2} />
                 </div>
 
                 <!-- Conteúdo -->
@@ -436,20 +364,7 @@
         <!-- Sem notificações -->
         {#if notificacoes.length === 0 && notificacoesFerias.length === 0 && notificacoesAusencias.length === 0}
           <div class="px-4 py-8 text-center text-base-content/50">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="w-12 h-12 mx-auto mb-2 opacity-50"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M9.143 17.082a24.248 24.248 0 0 0 3.844.148m-3.844-.148a23.856 23.856 0 0 1-5.455-1.31 8.964 8.964 0 0 0 2.3-5.542m3.155 6.852a3 3 0 0 0 5.667 1.97m1.965-2.277L21 21m-4.225-4.225a23.81 23.81 0 0 0 3.536-1.003A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6.53 6.53m10.245 10.245L6.53 6.53M3 3l3.53 3.53"
-              />
-            </svg>
+            <BellOff class="w-12 h-12 mx-auto mb-2 opacity-50" strokeWidth={1.5} />
             <p class="text-sm">Nenhuma notificação</p>
           </div>
         {/if}
diff --git a/apps/web/src/lib/components/ti/StatsCard.svelte b/apps/web/src/lib/components/ti/StatsCard.svelte
index 8e879ae..8d17419 100644
--- a/apps/web/src/lib/components/ti/StatsCard.svelte
+++ b/apps/web/src/lib/components/ti/StatsCard.svelte
@@ -1,39 +1,42 @@
-<script lang="ts">
-  interface Props {
-    title: string;
-    value: string | number;
-    icon?: string;
-    trend?: {
-      value: number;
-      isPositive: boolean;
-    };
-    description?: string;
-    color?: "primary" | "secondary" | "accent" | "success" | "warning" | "error";
-  }
-
-  let { title, value, icon, trend, description, color = "primary" }: Props = $props();
-</script>
-
-<div class="stats shadow bg-base-100">
-  <div class="stat">
-    <div class="stat-figure text-{color}">
-      {#if icon}
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current">
-          {@html icon}
-        </svg>
-      {/if}
-    </div>
-    <div class="stat-title">{title}</div>
-    <div class="stat-value text-{color}">{value}</div>
-    {#if description}
-      <div class="stat-desc">{description}</div>
-    {/if}
-    {#if trend}
-      <div class="stat-desc {trend.isPositive ? 'text-success' : 'text-error'}">
-        {trend.isPositive ? '↗︎' : '↘︎'} {Math.abs(trend.value)}%
-      </div>
-    {/if}
-  </div>
-</div>
-
-
+<script lang="ts">
+  import type { Component } from "svelte";
+
+  interface Props {
+    title: string;
+    value: string | number;
+    Icon?: Component;
+    icon?: string; // Mantido para compatibilidade retroativa
+    trend?: {
+      value: number;
+      isPositive: boolean;
+    };
+    description?: string;
+    color?: "primary" | "secondary" | "accent" | "success" | "warning" | "error";
+  }
+
+  let { title, value, Icon, icon, trend, description, color = "primary" }: Props = $props();
+</script>
+
+<div class="stats shadow bg-base-100">
+  <div class="stat">
+    <div class="stat-figure text-{color}">
+      {#if Icon}
+        <svelte:component this={Icon} class="inline-block w-8 h-8 stroke-current" strokeWidth={2} />
+      {:else if icon}
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current">
+          {@html icon}
+        </svg>
+      {/if}
+    </div>
+    <div class="stat-title">{title}</div>
+    <div class="stat-value text-{color}">{value}</div>
+    {#if description}
+      <div class="stat-desc">{description}</div>
+    {/if}
+    {#if trend}
+      <div class="stat-desc {trend.isPositive ? 'text-success' : 'text-error'}">
+        {trend.isPositive ? '↗︎' : '↘︎'} {Math.abs(trend.value)}%
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/apps/web/src/routes/(dashboard)/+page.svelte b/apps/web/src/routes/(dashboard)/+page.svelte
index fe42423..c3eb11c 100644
--- a/apps/web/src/routes/(dashboard)/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/+page.svelte
@@ -1,582 +1,579 @@
-<script lang="ts">
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { onMount } from "svelte";
-  import { page } from "$app/stores";
-  import { goto } from "$app/navigation";
-
-  // Queries para dados do dashboard
-  const statsQuery = useQuery(api.dashboard.getStats, {});
-  const activityQuery = useQuery(api.dashboard.getRecentActivity, {});
-  
-  // Queries para monitoramento em tempo real
-  const statusSistemaQuery = useQuery(api.monitoramento.getStatusSistema, {});
-  const atividadeBDQuery = useQuery(api.monitoramento.getAtividadeBancoDados, {});
-  const distribuicaoQuery = useQuery(api.monitoramento.getDistribuicaoRequisicoes, {});
-
-  // Estado para animações
-  let mounted = $state(false);
-  let currentTime = $state(new Date());
-  let showAlert = $state(false);
-  let alertType = $state<"auth_required" | "access_denied" | "invalid_token" | null>(null);
-  let redirectRoute = $state("");
-
-  // Forçar atualização das queries de monitoramento a cada 1 segundo
-  let refreshKey = $state(0);
-  
-  onMount(() => {
-    mounted = true;
-    
-    // Verificar se há mensagem de erro na URL
-    const urlParams = new URLSearchParams(window.location.search);
-    const error = urlParams.get("error");
-    const route = urlParams.get("route") || urlParams.get("redirect") || "";
-    
-    if (error) {
-      alertType = error as any;
-      redirectRoute = route;
-      showAlert = true;
-      
-      // Limpar URL
-      const newUrl = window.location.pathname;
-      window.history.replaceState({}, "", newUrl);
-      
-      // Auto-fechar após 10 segundos
-      setTimeout(() => {
-        showAlert = false;
-      }, 10000);
-    }
-    
-    // Atualizar relógio e forçar refresh das queries a cada segundo
-    const interval = setInterval(() => {
-      currentTime = new Date();
-      refreshKey = (refreshKey + 1) % 1000; // Incrementar para forçar re-render
-    }, 1000);
-    
-    return () => clearInterval(interval);
-  });
-
-  function closeAlert() {
-    showAlert = false;
-  }
-
-  function getAlertMessage(): { title: string; message: string; icon: string } {
-    switch (alertType) {
-      case "auth_required":
-        return {
-          title: "Autenticação Necessária",
-          message: `Para acessar "${redirectRoute}", você precisa fazer login no sistema.`,
-          icon: "🔐"
-        };
-      case "access_denied":
-        return {
-          title: "Acesso Negado",
-          message: `Você não tem permissão para acessar "${redirectRoute}". Entre em contato com a equipe de TI para solicitar acesso.`,
-          icon: "⛔"
-        };
-      case "invalid_token":
-        return {
-          title: "Sessão Expirada",
-          message: "Sua sessão expirou. Por favor, faça login novamente.",
-          icon: "⏰"
-        };
-      default:
-        return {
-          title: "Aviso",
-          message: "Ocorreu um erro. Tente novamente.",
-          icon: "⚠️"
-        };
-    }
-  }
-
-  // Função para formatar números
-  function formatNumber(num: number): string {
-    return new Intl.NumberFormat("pt-BR").format(num);
-  }
-
-  // Função para calcular porcentagem
-  function calcPercentage(value: number, total: number): number {
-    if (total === 0) return 0;
-    return Math.round((value / total) * 100);
-  }
-
-  // Obter saudação baseada na hora
-  function getSaudacao(): string {
-    const hora = currentTime.getHours();
-    if (hora < 12) return "Bom dia";
-    if (hora < 18) return "Boa tarde";
-    return "Boa noite";
-  }
-</script>
-
-<main class="container mx-auto px-4 py-4">
-  <!-- Alerta de Acesso Negado / Autenticação -->
-  {#if showAlert}
-    {@const alertData = getAlertMessage()}
-    <div class="alert {alertType === 'access_denied' ? 'alert-error' : alertType === 'auth_required' ? 'alert-warning' : 'alert-info'} mb-6 shadow-xl animate-pulse">
-      <div class="flex items-start gap-4">
-        <span class="text-4xl">{alertData.icon}</span>
-        <div class="flex-1">
-          <h3 class="font-bold text-lg mb-1">{alertData.title}</h3>
-          <p class="text-sm">{alertData.message}</p>
-          {#if alertType === "access_denied"}
-            <div class="mt-3 flex gap-2">
-              <a href="/solicitar-acesso" class="btn btn-sm btn-primary">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
-                </svg>
-                Solicitar Acesso
-              </a>
-              <a href="/ti" class="btn btn-sm btn-ghost">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                </svg>
-                Contatar TI
-              </a>
-            </div>
-          {/if}
-        </div>
-        <button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={closeAlert}>✕</button>
-      </div>
-    </div>
-  {/if}
-
-  <!-- Cabeçalho com Boas-vindas -->
-  <div class="bg-gradient-to-r from-primary/20 to-secondary/20 rounded-2xl p-8 mb-6 shadow-lg">
-    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
-      <div>
-        <h1 class="text-4xl font-bold text-primary mb-2">
-          {getSaudacao()}! 👋
-        </h1>
-        <p class="text-xl text-base-content/80">
-          Bem-vindo ao Sistema de Gerenciamento da Secretaria de Esportes
-        </p>
-        <p class="text-sm text-base-content/60 mt-2">
-          {currentTime.toLocaleDateString("pt-BR", {
-            weekday: "long",
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-          })}
-          {" - "}
-          {currentTime.toLocaleTimeString("pt-BR")}
-        </p>
-      </div>
-      <div class="flex gap-2">
-        <div class="badge badge-primary badge-lg">Sistema Online</div>
-        <div class="badge badge-success badge-lg">Atualizado</div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Cards de Estatísticas Principais -->
-  {#if statsQuery.isLoading}
-    <div class="flex justify-center items-center py-12">
-      <span class="loading loading-spinner loading-lg text-primary"></span>
-    </div>
-  {:else if statsQuery.data}
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
-      <!-- Total de Funcionários -->
-      <div class="card bg-gradient-to-br from-blue-500/10 to-blue-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
-        <div class="card-body">
-          <div class="flex items-center justify-between">
-            <div>
-              <p class="text-sm text-base-content/70 font-semibold">Total de Funcionários</p>
-              <h2 class="text-4xl font-bold text-primary mt-2">
-                {formatNumber(statsQuery.data.totalFuncionarios)}
-              </h2>
-              <p class="text-xs text-base-content/60 mt-1">
-                {statsQuery.data.funcionariosAtivos} ativos
-              </p>
-            </div>
-            <div class="radial-progress text-primary" style="--value:{calcPercentage(statsQuery.data.funcionariosAtivos, statsQuery.data.totalFuncionarios)}; --size:4rem;">
-              <span class="text-xs font-bold">{calcPercentage(statsQuery.data.funcionariosAtivos, statsQuery.data.totalFuncionarios)}%</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Solicitações Pendentes -->
-      <div class="card bg-gradient-to-br from-yellow-500/10 to-yellow-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
-        <div class="card-body">
-          <div class="flex items-center justify-between">
-            <div>
-              <p class="text-sm text-base-content/70 font-semibold">Solicitações Pendentes</p>
-              <h2 class="text-4xl font-bold text-warning mt-2">
-                {formatNumber(statsQuery.data.solicitacoesPendentes)}
-              </h2>
-              <p class="text-xs text-base-content/60 mt-1">
-                de {statsQuery.data.totalSolicitacoesAcesso} total
-              </p>
-            </div>
-            <div class="p-4 bg-warning/20 rounded-full">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Símbolos Cadastrados -->
-      <div class="card bg-gradient-to-br from-green-500/10 to-green-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
-        <div class="card-body">
-          <div class="flex items-center justify-between">
-            <div>
-              <p class="text-sm text-base-content/70 font-semibold">Símbolos Cadastrados</p>
-              <h2 class="text-4xl font-bold text-success mt-2">
-                {formatNumber(statsQuery.data.totalSimbolos)}
-              </h2>
-              <p class="text-xs text-base-content/60 mt-1">
-                {statsQuery.data.cargoComissionado} CC / {statsQuery.data.funcaoGratificada} FG
-              </p>
-            </div>
-            <div class="p-4 bg-success/20 rounded-full">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Atividade 24h -->
-      {#if activityQuery.data}
-        <div class="card bg-gradient-to-br from-purple-500/10 to-purple-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
-          <div class="card-body">
-            <div class="flex items-center justify-between">
-              <div>
-                <p class="text-sm text-base-content/70 font-semibold">Atividade (24h)</p>
-                <h2 class="text-4xl font-bold text-secondary mt-2">
-                  {formatNumber(activityQuery.data.funcionariosCadastrados24h + activityQuery.data.solicitacoesAcesso24h)}
-                </h2>
-                <p class="text-xs text-base-content/60 mt-1">
-                  {activityQuery.data.funcionariosCadastrados24h} cadastros
-                </p>
-              </div>
-              <div class="p-4 bg-secondary/20 rounded-full">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      {/if}
-    </div>
-
-    <!-- Monitoramento em Tempo Real -->
-    {#if statusSistemaQuery.data && atividadeBDQuery.data && distribuicaoQuery.data}
-      {@const status = statusSistemaQuery.data}
-      {@const atividade = atividadeBDQuery.data}
-      {@const distribuicao = distribuicaoQuery.data}
-      
-      <div class="mb-6">
-        <div class="flex items-center gap-3 mb-4">
-          <div class="p-2 bg-error/10 rounded-lg animate-pulse">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-            </svg>
-          </div>
-          <div>
-            <h2 class="text-2xl font-bold text-base-content">Monitoramento em Tempo Real</h2>
-            <p class="text-sm text-base-content/60">
-              Atualizado a cada segundo • {new Date(status.ultimaAtualizacao).toLocaleTimeString('pt-BR')}
-            </p>
-          </div>
-          <div class="ml-auto badge badge-error badge-lg gap-2">
-            <span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-error opacity-75"></span>
-            <span class="relative inline-flex rounded-full h-3 w-3 bg-error"></span>
-            LIVE
-          </div>
-        </div>
-
-        <!-- Cards de Status do Sistema -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-          <!-- Usuários Online -->
-          <div class="card bg-gradient-to-br from-primary/10 to-primary/5 border-2 border-primary/20 shadow-lg">
-            <div class="card-body p-4">
-              <div class="flex items-center justify-between">
-                <div>
-                  <p class="text-xs text-base-content/70 font-semibold uppercase">Usuários Online</p>
-                  <h3 class="text-3xl font-bold text-primary mt-1">{status.usuariosOnline}</h3>
-                  <p class="text-xs text-base-content/60 mt-1">sessões ativas</p>
-                </div>
-                <div class="p-3 bg-primary/20 rounded-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Total de Registros -->
-          <div class="card bg-gradient-to-br from-success/10 to-success/5 border-2 border-success/20 shadow-lg">
-            <div class="card-body p-4">
-              <div class="flex items-center justify-between">
-                <div>
-                  <p class="text-xs text-base-content/70 font-semibold uppercase">Total Registros</p>
-                  <h3 class="text-3xl font-bold text-success mt-1">{status.totalRegistros.toLocaleString('pt-BR')}</h3>
-                  <p class="text-xs text-base-content/60 mt-1">no banco de dados</p>
-                </div>
-                <div class="p-3 bg-success/20 rounded-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Tempo Médio de Resposta -->
-          <div class="card bg-gradient-to-br from-info/10 to-info/5 border-2 border-info/20 shadow-lg">
-            <div class="card-body p-4">
-              <div class="flex items-center justify-between">
-                <div>
-                  <p class="text-xs text-base-content/70 font-semibold uppercase">Tempo Resposta</p>
-                  <h3 class="text-3xl font-bold text-info mt-1">{status.tempoMedioResposta}ms</h3>
-                  <p class="text-xs text-base-content/60 mt-1">média atual</p>
-                </div>
-                <div class="p-3 bg-info/20 rounded-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Uso de Sistema -->
-          <div class="card bg-gradient-to-br from-warning/10 to-warning/5 border-2 border-warning/20 shadow-lg">
-            <div class="card-body p-4">
-              <div>
-                <p class="text-xs text-base-content/70 font-semibold uppercase mb-2">Uso do Sistema</p>
-                <div class="space-y-2">
-                  <div>
-                    <div class="flex justify-between text-xs mb-1">
-                      <span class="text-base-content/70">CPU</span>
-                      <span class="font-bold text-warning">{status.cpuUsada}%</span>
-                    </div>
-                    <progress class="progress progress-warning w-full" value={status.cpuUsada} max="100"></progress>
-                  </div>
-                  <div>
-                    <div class="flex justify-between text-xs mb-1">
-                      <span class="text-base-content/70">Memória</span>
-                      <span class="font-bold text-warning">{status.memoriaUsada}%</span>
-                    </div>
-                    <progress class="progress progress-warning w-full" value={status.memoriaUsada} max="100"></progress>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Gráfico de Atividade do Banco de Dados em Tempo Real -->
-        <div class="card bg-base-100 shadow-xl mb-6">
-          <div class="card-body">
-            <div class="flex items-center justify-between mb-4">
-              <div>
-                <h3 class="text-xl font-bold text-base-content">Atividade do Banco de Dados</h3>
-                <p class="text-sm text-base-content/60">Entradas e saídas em tempo real (último minuto)</p>
-              </div>
-              <div class="badge badge-success gap-2">
-                <span class="loading loading-spinner loading-xs"></span>
-                Atualizando
-              </div>
-            </div>
-
-            <div class="relative h-64">
-              <!-- Eixo Y -->
-              <div class="absolute left-0 top-0 bottom-8 w-10 flex flex-col justify-between text-right pr-2">
-                {#each [10, 8, 6, 4, 2, 0] as val}
-                  <span class="text-xs text-base-content/60">{val}</span>
-                {/each}
-              </div>
-
-              <!-- Grid e Barras -->
-              <div class="absolute left-12 right-4 top-0 bottom-8">
-                <!-- Grid horizontal -->
-                {#each Array.from({length: 6}) as _, i}
-                  <div class="absolute left-0 right-0 border-t border-base-content/10" style="top: {(i / 5) * 100}%;"></div>
-                {/each}
-
-                <!-- Barras de atividade -->
-                <div class="flex items-end justify-around h-full gap-1">
-                  {#each atividade.historico as ponto, idx}
-                    {@const maxAtividade = Math.max(...atividade.historico.map(p => Math.max(p.entradas, p.saidas)))}
-                    <div class="flex-1 flex items-end gap-0.5 h-full group">
-                      <!-- Entradas (verde) -->
-                      <div 
-                        class="flex-1 bg-gradient-to-t from-success to-success/70 rounded-t transition-all duration-300 hover:scale-110"
-                        style="height: {ponto.entradas / Math.max(maxAtividade, 1) * 100}%; min-height: 2px;"
-                        title="Entradas: {ponto.entradas}"
-                      ></div>
-                      <!-- Saídas (vermelho) -->
-                      <div 
-                        class="flex-1 bg-gradient-to-t from-error to-error/70 rounded-t transition-all duration-300 hover:scale-110"
-                        style="height: {ponto.saidas / Math.max(maxAtividade, 1) * 100}%; min-height: 2px;"
-                        title="Saídas: {ponto.saidas}"
-                      ></div>
-                      
-                      <!-- Tooltip no hover -->
-                      <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-base-300 text-base-content px-2 py-1 rounded text-xs whitespace-nowrap shadow-lg z-10">
-                        <div>↑ {ponto.entradas} entradas</div>
-                        <div>↓ {ponto.saidas} saídas</div>
-                      </div>
-                    </div>
-                  {/each}
-                </div>
-              </div>
-
-              <!-- Linha do eixo X -->
-              <div class="absolute left-12 right-4 bottom-8 border-t-2 border-base-content/30"></div>
-              
-              <!-- Labels do eixo X -->
-              <div class="absolute left-12 right-4 bottom-0 flex justify-between text-xs text-base-content/60">
-                <span>-60s</span>
-                <span>-30s</span>
-                <span>agora</span>
-              </div>
-            </div>
-
-            <!-- Legenda -->
-            <div class="flex justify-center gap-6 mt-4 pt-4 border-t border-base-300">
-              <div class="flex items-center gap-2">
-                <div class="w-4 h-4 bg-gradient-to-t from-success to-success/70 rounded"></div>
-                <span class="text-sm text-base-content/70">Entradas no BD</span>
-              </div>
-              <div class="flex items-center gap-2">
-                <div class="w-4 h-4 bg-gradient-to-t from-error to-error/70 rounded"></div>
-                <span class="text-sm text-base-content/70">Saídas do BD</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Distribuição de Requisições -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h3 class="text-lg font-bold text-base-content mb-4">Tipos de Operações</h3>
-              <div class="space-y-3">
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span>Queries (Leituras)</span>
-                    <span class="font-bold text-primary">{distribuicao.queries}</span>
-                  </div>
-                  <progress class="progress progress-primary w-full" value={distribuicao.queries} max={distribuicao.queries + distribuicao.mutations}></progress>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span>Mutations (Escritas)</span>
-                    <span class="font-bold text-secondary">{distribuicao.mutations}</span>
-                  </div>
-                  <progress class="progress progress-secondary w-full" value={distribuicao.mutations} max={distribuicao.queries + distribuicao.mutations}></progress>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="card bg-base-100 shadow-xl">
-            <div class="card-body">
-              <h3 class="text-lg font-bold text-base-content mb-4">Operações no Banco</h3>
-              <div class="space-y-3">
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span>Leituras</span>
-                    <span class="font-bold text-info">{distribuicao.leituras}</span>
-                  </div>
-                  <progress class="progress progress-info w-full" value={distribuicao.leituras} max={distribuicao.leituras + distribuicao.escritas}></progress>
-                </div>
-                <div>
-                  <div class="flex justify-between text-sm mb-1">
-                    <span>Escritas</span>
-                    <span class="font-bold text-warning">{distribuicao.escritas}</span>
-                  </div>
-                  <progress class="progress progress-warning w-full" value={distribuicao.escritas} max={distribuicao.leituras + distribuicao.escritas}></progress>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    {/if}
-
-
-    <!-- Cards de Status -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-          <h3 class="card-title text-lg">Status do Sistema</h3>
-          <div class="space-y-2 mt-4">
-            <div class="flex justify-between items-center">
-              <span class="text-sm">Banco de Dados</span>
-              <span class="badge badge-success">Online</span>
-            </div>
-            <div class="flex justify-between items-center">
-              <span class="text-sm">API</span>
-              <span class="badge badge-success">Operacional</span>
-            </div>
-            <div class="flex justify-between items-center">
-              <span class="text-sm">Backup</span>
-              <span class="badge badge-success">Atualizado</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-          <h3 class="card-title text-lg">Acesso Rápido</h3>
-          <div class="space-y-2 mt-4">
-            <a href="/recursos-humanos/funcionarios/cadastro" class="btn btn-sm btn-primary w-full">
-              Novo Funcionário
-            </a>
-            <a href="/recursos-humanos/simbolos/cadastro" class="btn btn-sm btn-primary w-full">
-              Novo Símbolo
-            </a>
-            <a href="/ti/painel-administrativo" class="btn btn-sm btn-primary w-full">
-              Painel Admin
-            </a>
-          </div>
-  </div>
-</div>
-
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-          <h3 class="card-title text-lg">Informações</h3>
-          <div class="space-y-2 mt-4 text-sm">
-            <p class="text-base-content/70">
-              <strong>Versão:</strong> 1.0.0
-            </p>
-            <p class="text-base-content/70">
-              <strong>Última Atualização:</strong> {new Date().toLocaleDateString("pt-BR")}
-            </p>
-            <p class="text-base-content/70">
-              <strong>Suporte:</strong> TI SGSE
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  {/if}
-</main>
-
-<style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .card {
-    animation: fadeIn 0.5s ease-out;
-  }
-</style>
+<script lang="ts">
+  import { useQuery } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import { onMount } from "svelte";
+  import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
+  import { UserPlus, Mail } from "lucide-svelte";
+
+  // Queries para dados do dashboard
+  const statsQuery = useQuery(api.dashboard.getStats, {});
+  const activityQuery = useQuery(api.dashboard.getRecentActivity, {});
+  
+  // Queries para monitoramento em tempo real
+  const statusSistemaQuery = useQuery(api.monitoramento.getStatusSistema, {});
+  const atividadeBDQuery = useQuery(api.monitoramento.getAtividadeBancoDados, {});
+  const distribuicaoQuery = useQuery(api.monitoramento.getDistribuicaoRequisicoes, {});
+
+  // Estado para animações
+  let mounted = $state(false);
+  let currentTime = $state(new Date());
+  let showAlert = $state(false);
+  let alertType = $state<"auth_required" | "access_denied" | "invalid_token" | null>(null);
+  let redirectRoute = $state("");
+
+  // Forçar atualização das queries de monitoramento a cada 1 segundo
+  let refreshKey = $state(0);
+  
+  onMount(() => {
+    mounted = true;
+    
+    // Verificar se há mensagem de erro na URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const error = urlParams.get("error");
+    const route = urlParams.get("route") || urlParams.get("redirect") || "";
+    
+    if (error) {
+      alertType = error as any;
+      redirectRoute = route;
+      showAlert = true;
+      
+      // Limpar URL
+      const newUrl = window.location.pathname;
+      window.history.replaceState({}, "", newUrl);
+      
+      // Auto-fechar após 10 segundos
+      setTimeout(() => {
+        showAlert = false;
+      }, 10000);
+    }
+    
+    // Atualizar relógio e forçar refresh das queries a cada segundo
+    const interval = setInterval(() => {
+      currentTime = new Date();
+      refreshKey = (refreshKey + 1) % 1000; // Incrementar para forçar re-render
+    }, 1000);
+    
+    return () => clearInterval(interval);
+  });
+
+  function closeAlert() {
+    showAlert = false;
+  }
+
+  function getAlertMessage(): { title: string; message: string; icon: string } {
+    switch (alertType) {
+      case "auth_required":
+        return {
+          title: "Autenticação Necessária",
+          message: `Para acessar "${redirectRoute}", você precisa fazer login no sistema.`,
+          icon: "🔐"
+        };
+      case "access_denied":
+        return {
+          title: "Acesso Negado",
+          message: `Você não tem permissão para acessar "${redirectRoute}". Entre em contato com a equipe de TI para solicitar acesso.`,
+          icon: "⛔"
+        };
+      case "invalid_token":
+        return {
+          title: "Sessão Expirada",
+          message: "Sua sessão expirou. Por favor, faça login novamente.",
+          icon: "⏰"
+        };
+      default:
+        return {
+          title: "Aviso",
+          message: "Ocorreu um erro. Tente novamente.",
+          icon: "⚠️"
+        };
+    }
+  }
+
+  // Função para formatar números
+  function formatNumber(num: number): string {
+    return new Intl.NumberFormat("pt-BR").format(num);
+  }
+
+  // Função para calcular porcentagem
+  function calcPercentage(value: number, total: number): number {
+    if (total === 0) return 0;
+    return Math.round((value / total) * 100);
+  }
+
+  // Obter saudação baseada na hora
+  function getSaudacao(): string {
+    const hora = currentTime.getHours();
+    if (hora < 12) return "Bom dia";
+    if (hora < 18) return "Boa tarde";
+    return "Boa noite";
+  }
+</script>
+
+<main class="container mx-auto px-4 py-4">
+  <!-- Alerta de Acesso Negado / Autenticação -->
+  {#if showAlert}
+    {@const alertData = getAlertMessage()}
+    <div class="alert {alertType === 'access_denied' ? 'alert-error' : alertType === 'auth_required' ? 'alert-warning' : 'alert-info'} mb-6 shadow-xl animate-pulse">
+      <div class="flex items-start gap-4">
+        <span class="text-4xl">{alertData.icon}</span>
+        <div class="flex-1">
+          <h3 class="font-bold text-lg mb-1">{alertData.title}</h3>
+          <p class="text-sm">{alertData.message}</p>
+          {#if alertType === "access_denied"}
+            <div class="mt-3 flex gap-2">
+              <a href="/solicitar-acesso" class="btn btn-sm btn-primary">
+                <svelte:component this={UserPlus} class="h-4 w-4" strokeWidth={2} />
+                Solicitar Acesso
+              </a>
+              <a href="/ti" class="btn btn-sm btn-ghost">
+                <svelte:component this={Mail} class="h-4 w-4" strokeWidth={2} />
+                Contatar TI
+              </a>
+            </div>
+          {/if}
+        </div>
+        <button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={closeAlert}>✕</button>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Cabeçalho com Boas-vindas -->
+  <div class="bg-gradient-to-r from-primary/20 to-secondary/20 rounded-2xl p-8 mb-6 shadow-lg">
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+      <div>
+        <h1 class="text-4xl font-bold text-primary mb-2">
+          {getSaudacao()}! 👋
+        </h1>
+        <p class="text-xl text-base-content/80">
+          Bem-vindo ao Sistema de Gerenciamento da Secretaria de Esportes
+        </p>
+        <p class="text-sm text-base-content/60 mt-2">
+          {currentTime.toLocaleDateString("pt-BR", {
+            weekday: "long",
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          })}
+          {" - "}
+          {currentTime.toLocaleTimeString("pt-BR")}
+        </p>
+      </div>
+      <div class="flex gap-2">
+        <div class="badge badge-primary badge-lg">Sistema Online</div>
+        <div class="badge badge-success badge-lg">Atualizado</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Cards de Estatísticas Principais -->
+  {#if statsQuery.isLoading}
+    <div class="flex justify-center items-center py-12">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+    </div>
+  {:else if statsQuery.data}
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+      <!-- Total de Funcionários -->
+      <div class="card bg-gradient-to-br from-blue-500/10 to-blue-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
+        <div class="card-body">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm text-base-content/70 font-semibold">Total de Funcionários</p>
+              <h2 class="text-4xl font-bold text-primary mt-2">
+                {formatNumber(statsQuery.data.totalFuncionarios)}
+              </h2>
+              <p class="text-xs text-base-content/60 mt-1">
+                {statsQuery.data.funcionariosAtivos} ativos
+              </p>
+            </div>
+            <div class="radial-progress text-primary" style="--value:{calcPercentage(statsQuery.data.funcionariosAtivos, statsQuery.data.totalFuncionarios)}; --size:4rem;">
+              <span class="text-xs font-bold">{calcPercentage(statsQuery.data.funcionariosAtivos, statsQuery.data.totalFuncionarios)}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Solicitações Pendentes -->
+      <div class="card bg-gradient-to-br from-yellow-500/10 to-yellow-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
+        <div class="card-body">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm text-base-content/70 font-semibold">Solicitações Pendentes</p>
+              <h2 class="text-4xl font-bold text-warning mt-2">
+                {formatNumber(statsQuery.data.solicitacoesPendentes)}
+              </h2>
+              <p class="text-xs text-base-content/60 mt-1">
+                de {statsQuery.data.totalSolicitacoesAcesso} total
+              </p>
+            </div>
+            <div class="p-4 bg-warning/20 rounded-full">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Símbolos Cadastrados -->
+      <div class="card bg-gradient-to-br from-green-500/10 to-green-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
+        <div class="card-body">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm text-base-content/70 font-semibold">Símbolos Cadastrados</p>
+              <h2 class="text-4xl font-bold text-success mt-2">
+                {formatNumber(statsQuery.data.totalSimbolos)}
+              </h2>
+              <p class="text-xs text-base-content/60 mt-1">
+                {statsQuery.data.cargoComissionado} CC / {statsQuery.data.funcaoGratificada} FG
+              </p>
+            </div>
+            <div class="p-4 bg-success/20 rounded-full">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Atividade 24h -->
+      {#if activityQuery.data}
+        <div class="card bg-gradient-to-br from-purple-500/10 to-purple-600/20 shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
+          <div class="card-body">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm text-base-content/70 font-semibold">Atividade (24h)</p>
+                <h2 class="text-4xl font-bold text-secondary mt-2">
+                  {formatNumber(activityQuery.data.funcionariosCadastrados24h + activityQuery.data.solicitacoesAcesso24h)}
+                </h2>
+                <p class="text-xs text-base-content/60 mt-1">
+                  {activityQuery.data.funcionariosCadastrados24h} cadastros
+                </p>
+              </div>
+              <div class="p-4 bg-secondary/20 rounded-full">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Monitoramento em Tempo Real -->
+    {#if statusSistemaQuery.data && atividadeBDQuery.data && distribuicaoQuery.data}
+      {@const status = statusSistemaQuery.data}
+      {@const atividade = atividadeBDQuery.data}
+      {@const distribuicao = distribuicaoQuery.data}
+      
+      <div class="mb-6">
+        <div class="flex items-center gap-3 mb-4">
+          <div class="p-2 bg-error/10 rounded-lg animate-pulse">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+            </svg>
+          </div>
+          <div>
+            <h2 class="text-2xl font-bold text-base-content">Monitoramento em Tempo Real</h2>
+            <p class="text-sm text-base-content/60">
+              Atualizado a cada segundo • {new Date(status.ultimaAtualizacao).toLocaleTimeString('pt-BR')}
+            </p>
+          </div>
+          <div class="ml-auto badge badge-error badge-lg gap-2">
+            <span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-error opacity-75"></span>
+            <span class="relative inline-flex rounded-full h-3 w-3 bg-error"></span>
+            LIVE
+          </div>
+        </div>
+
+        <!-- Cards de Status do Sistema -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+          <!-- Usuários Online -->
+          <div class="card bg-gradient-to-br from-primary/10 to-primary/5 border-2 border-primary/20 shadow-lg">
+            <div class="card-body p-4">
+              <div class="flex items-center justify-between">
+                <div>
+                  <p class="text-xs text-base-content/70 font-semibold uppercase">Usuários Online</p>
+                  <h3 class="text-3xl font-bold text-primary mt-1">{status.usuariosOnline}</h3>
+                  <p class="text-xs text-base-content/60 mt-1">sessões ativas</p>
+                </div>
+                <div class="p-3 bg-primary/20 rounded-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Total de Registros -->
+          <div class="card bg-gradient-to-br from-success/10 to-success/5 border-2 border-success/20 shadow-lg">
+            <div class="card-body p-4">
+              <div class="flex items-center justify-between">
+                <div>
+                  <p class="text-xs text-base-content/70 font-semibold uppercase">Total Registros</p>
+                  <h3 class="text-3xl font-bold text-success mt-1">{status.totalRegistros.toLocaleString('pt-BR')}</h3>
+                  <p class="text-xs text-base-content/60 mt-1">no banco de dados</p>
+                </div>
+                <div class="p-3 bg-success/20 rounded-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Tempo Médio de Resposta -->
+          <div class="card bg-gradient-to-br from-info/10 to-info/5 border-2 border-info/20 shadow-lg">
+            <div class="card-body p-4">
+              <div class="flex items-center justify-between">
+                <div>
+                  <p class="text-xs text-base-content/70 font-semibold uppercase">Tempo Resposta</p>
+                  <h3 class="text-3xl font-bold text-info mt-1">{status.tempoMedioResposta}ms</h3>
+                  <p class="text-xs text-base-content/60 mt-1">média atual</p>
+                </div>
+                <div class="p-3 bg-info/20 rounded-full">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Uso de Sistema -->
+          <div class="card bg-gradient-to-br from-warning/10 to-warning/5 border-2 border-warning/20 shadow-lg">
+            <div class="card-body p-4">
+              <div>
+                <p class="text-xs text-base-content/70 font-semibold uppercase mb-2">Uso do Sistema</p>
+                <div class="space-y-2">
+                  <div>
+                    <div class="flex justify-between text-xs mb-1">
+                      <span class="text-base-content/70">CPU</span>
+                      <span class="font-bold text-warning">{status.cpuUsada}%</span>
+                    </div>
+                    <progress class="progress progress-warning w-full" value={status.cpuUsada} max="100"></progress>
+                  </div>
+                  <div>
+                    <div class="flex justify-between text-xs mb-1">
+                      <span class="text-base-content/70">Memória</span>
+                      <span class="font-bold text-warning">{status.memoriaUsada}%</span>
+                    </div>
+                    <progress class="progress progress-warning w-full" value={status.memoriaUsada} max="100"></progress>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Gráfico de Atividade do Banco de Dados em Tempo Real -->
+        <div class="card bg-base-100 shadow-xl mb-6">
+          <div class="card-body">
+            <div class="flex items-center justify-between mb-4">
+              <div>
+                <h3 class="text-xl font-bold text-base-content">Atividade do Banco de Dados</h3>
+                <p class="text-sm text-base-content/60">Entradas e saídas em tempo real (último minuto)</p>
+              </div>
+              <div class="badge badge-success gap-2">
+                <span class="loading loading-spinner loading-xs"></span>
+                Atualizando
+              </div>
+            </div>
+
+            <div class="relative h-64">
+              <!-- Eixo Y -->
+              <div class="absolute left-0 top-0 bottom-8 w-10 flex flex-col justify-between text-right pr-2">
+                {#each [10, 8, 6, 4, 2, 0] as val}
+                  <span class="text-xs text-base-content/60">{val}</span>
+                {/each}
+              </div>
+
+              <!-- Grid e Barras -->
+              <div class="absolute left-12 right-4 top-0 bottom-8">
+                <!-- Grid horizontal -->
+                {#each Array.from({length: 6}) as _, i}
+                  <div class="absolute left-0 right-0 border-t border-base-content/10" style="top: {(i / 5) * 100}%;"></div>
+                {/each}
+
+                <!-- Barras de atividade -->
+                <div class="flex items-end justify-around h-full gap-1">
+                  {#each atividade.historico as ponto, idx}
+                    {@const maxAtividade = Math.max(...atividade.historico.map(p => Math.max(p.entradas, p.saidas)))}
+                    <div class="flex-1 flex items-end gap-0.5 h-full group">
+                      <!-- Entradas (verde) -->
+                      <div 
+                        class="flex-1 bg-gradient-to-t from-success to-success/70 rounded-t transition-all duration-300 hover:scale-110"
+                        style="height: {ponto.entradas / Math.max(maxAtividade, 1) * 100}%; min-height: 2px;"
+                        title="Entradas: {ponto.entradas}"
+                      ></div>
+                      <!-- Saídas (vermelho) -->
+                      <div 
+                        class="flex-1 bg-gradient-to-t from-error to-error/70 rounded-t transition-all duration-300 hover:scale-110"
+                        style="height: {ponto.saidas / Math.max(maxAtividade, 1) * 100}%; min-height: 2px;"
+                        title="Saídas: {ponto.saidas}"
+                      ></div>
+                      
+                      <!-- Tooltip no hover -->
+                      <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity bg-base-300 text-base-content px-2 py-1 rounded text-xs whitespace-nowrap shadow-lg z-10">
+                        <div>↑ {ponto.entradas} entradas</div>
+                        <div>↓ {ponto.saidas} saídas</div>
+                      </div>
+                    </div>
+                  {/each}
+                </div>
+              </div>
+
+              <!-- Linha do eixo X -->
+              <div class="absolute left-12 right-4 bottom-8 border-t-2 border-base-content/30"></div>
+              
+              <!-- Labels do eixo X -->
+              <div class="absolute left-12 right-4 bottom-0 flex justify-between text-xs text-base-content/60">
+                <span>-60s</span>
+                <span>-30s</span>
+                <span>agora</span>
+              </div>
+            </div>
+
+            <!-- Legenda -->
+            <div class="flex justify-center gap-6 mt-4 pt-4 border-t border-base-300">
+              <div class="flex items-center gap-2">
+                <div class="w-4 h-4 bg-gradient-to-t from-success to-success/70 rounded"></div>
+                <span class="text-sm text-base-content/70">Entradas no BD</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <div class="w-4 h-4 bg-gradient-to-t from-error to-error/70 rounded"></div>
+                <span class="text-sm text-base-content/70">Saídas do BD</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Distribuição de Requisições -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+          <div class="card bg-base-100 shadow-xl">
+            <div class="card-body">
+              <h3 class="text-lg font-bold text-base-content mb-4">Tipos de Operações</h3>
+              <div class="space-y-3">
+                <div>
+                  <div class="flex justify-between text-sm mb-1">
+                    <span>Queries (Leituras)</span>
+                    <span class="font-bold text-primary">{distribuicao.queries}</span>
+                  </div>
+                  <progress class="progress progress-primary w-full" value={distribuicao.queries} max={distribuicao.queries + distribuicao.mutations}></progress>
+                </div>
+                <div>
+                  <div class="flex justify-between text-sm mb-1">
+                    <span>Mutations (Escritas)</span>
+                    <span class="font-bold text-secondary">{distribuicao.mutations}</span>
+                  </div>
+                  <progress class="progress progress-secondary w-full" value={distribuicao.mutations} max={distribuicao.queries + distribuicao.mutations}></progress>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card bg-base-100 shadow-xl">
+            <div class="card-body">
+              <h3 class="text-lg font-bold text-base-content mb-4">Operações no Banco</h3>
+              <div class="space-y-3">
+                <div>
+                  <div class="flex justify-between text-sm mb-1">
+                    <span>Leituras</span>
+                    <span class="font-bold text-info">{distribuicao.leituras}</span>
+                  </div>
+                  <progress class="progress progress-info w-full" value={distribuicao.leituras} max={distribuicao.leituras + distribuicao.escritas}></progress>
+                </div>
+                <div>
+                  <div class="flex justify-between text-sm mb-1">
+                    <span>Escritas</span>
+                    <span class="font-bold text-warning">{distribuicao.escritas}</span>
+                  </div>
+                  <progress class="progress progress-warning w-full" value={distribuicao.escritas} max={distribuicao.leituras + distribuicao.escritas}></progress>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+
+    <!-- Cards de Status -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div class="card bg-base-100 shadow-xl">
+        <div class="card-body">
+          <h3 class="card-title text-lg">Status do Sistema</h3>
+          <div class="space-y-2 mt-4">
+            <div class="flex justify-between items-center">
+              <span class="text-sm">Banco de Dados</span>
+              <span class="badge badge-success">Online</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span class="text-sm">API</span>
+              <span class="badge badge-success">Operacional</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span class="text-sm">Backup</span>
+              <span class="badge badge-success">Atualizado</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card bg-base-100 shadow-xl">
+        <div class="card-body">
+          <h3 class="card-title text-lg">Acesso Rápido</h3>
+          <div class="space-y-2 mt-4">
+            <a href="/recursos-humanos/funcionarios/cadastro" class="btn btn-sm btn-primary w-full">
+              Novo Funcionário
+            </a>
+            <a href="/recursos-humanos/simbolos/cadastro" class="btn btn-sm btn-primary w-full">
+              Novo Símbolo
+            </a>
+            <a href="/ti/painel-administrativo" class="btn btn-sm btn-primary w-full">
+              Painel Admin
+            </a>
+          </div>
+  </div>
+</div>
+
+      <div class="card bg-base-100 shadow-xl">
+        <div class="card-body">
+          <h3 class="card-title text-lg">Informações</h3>
+          <div class="space-y-2 mt-4 text-sm">
+            <p class="text-base-content/70">
+              <strong>Versão:</strong> 1.0.0
+            </p>
+            <p class="text-base-content/70">
+              <strong>Última Atualização:</strong> {new Date().toLocaleDateString("pt-BR")}
+            </p>
+            <p class="text-base-content/70">
+              <strong>Suporte:</strong> TI SGSE
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+</main>
+
+<style>
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .card {
+    animation: fadeIn 0.5s ease-out;
+  }
+</style>
diff --git a/apps/web/src/routes/(dashboard)/compras/+page.svelte b/apps/web/src/routes/(dashboard)/compras/+page.svelte
index d2964d2..619c5c0 100644
--- a/apps/web/src/routes/(dashboard)/compras/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/compras/+page.svelte
@@ -1,48 +1,43 @@
-<script lang="ts">
-</script>
-
-<main class="container mx-auto px-4 py-4">
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
-      <li>Compras</li>
-    </ul>
-  </div>
-
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-cyan-500/20 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Compras</h1>
-        <p class="text-base-content/70">Gestão de compras e aquisições</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="mb-6">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
-          </svg>
-        </div>
-        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
-        <p class="text-base-content/70 max-w-md mb-6">
-          O módulo de Compras está sendo desenvolvido e em breve estará disponível com funcionalidades completas para gestão de compras e aquisições.
-        </p>
-        <div class="badge badge-warning badge-lg gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          Em Desenvolvimento
-        </div>
-      </div>
-    </div>
-  </div>
-</main>
-
+<script lang="ts">
+  import { ShoppingCart, ShoppingBag, Plus } from "lucide-svelte";
+</script>
+
+<main class="container mx-auto px-4 py-4">
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
+      <li>Compras</li>
+    </ul>
+  </div>
+
+  <div class="mb-6">
+    <div class="flex items-center gap-4 mb-2">
+      <div class="p-3 bg-cyan-500/20 rounded-xl">
+        <ShoppingCart class="h-8 w-8 text-cyan-600" strokeWidth={2} />
+      </div>
+      <div>
+        <h1 class="text-3xl font-bold text-primary">Compras</h1>
+        <p class="text-base-content/70">Gestão de compras e aquisições</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+      <div class="flex flex-col items-center justify-center py-12 text-center">
+        <div class="mb-6">
+          <ShoppingBag class="h-24 w-24 text-base-content/20" strokeWidth={1.5} />
+        </div>
+        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
+        <p class="text-base-content/70 max-w-md mb-6">
+          O módulo de Compras está sendo desenvolvido e em breve estará disponível com funcionalidades completas para gestão de compras e aquisições.
+        </p>
+        <div class="badge badge-warning badge-lg gap-2">
+          <Plus class="h-4 w-4" strokeWidth={2} />
+          Em Desenvolvimento
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
diff --git a/apps/web/src/routes/(dashboard)/comunicacao/+page.svelte b/apps/web/src/routes/(dashboard)/comunicacao/+page.svelte
index 31165c4..9caada5 100644
--- a/apps/web/src/routes/(dashboard)/comunicacao/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/comunicacao/+page.svelte
@@ -1,48 +1,43 @@
-<script lang="ts">
-</script>
-
-<main class="container mx-auto px-4 py-4">
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
-      <li>Comunicação</li>
-    </ul>
-  </div>
-
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-pink-500/20 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Comunicação</h1>
-        <p class="text-base-content/70">Gestão de comunicação institucional</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="mb-6">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-          </svg>
-        </div>
-        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
-        <p class="text-base-content/70 max-w-md mb-6">
-          O módulo de Comunicação está sendo desenvolvido e em breve estará disponível com funcionalidades completas de gestão de comunicação institucional.
-        </p>
-        <div class="badge badge-warning badge-lg gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          Em Desenvolvimento
-        </div>
-      </div>
-    </div>
-  </div>
-</main>
-
+<script lang="ts">
+  import { Megaphone, Edit, Plus } from "lucide-svelte";
+</script>
+
+<main class="container mx-auto px-4 py-4">
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
+      <li>Comunicação</li>
+    </ul>
+  </div>
+
+  <div class="mb-6">
+    <div class="flex items-center gap-4 mb-2">
+      <div class="p-3 bg-pink-500/20 rounded-xl">
+        <Megaphone class="h-8 w-8 text-pink-600" strokeWidth={2} />
+      </div>
+      <div>
+        <h1 class="text-3xl font-bold text-primary">Comunicação</h1>
+        <p class="text-base-content/70">Gestão de comunicação institucional</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+      <div class="flex flex-col items-center justify-center py-12 text-center">
+        <div class="mb-6">
+          <Edit class="h-24 w-24 text-base-content/20" strokeWidth={1.5} />
+        </div>
+        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
+        <p class="text-base-content/70 max-w-md mb-6">
+          O módulo de Comunicação está sendo desenvolvido e em breve estará disponível com funcionalidades completas de gestão de comunicação institucional.
+        </p>
+        <div class="badge badge-warning badge-lg gap-2">
+          <Plus class="h-4 w-4" strokeWidth={2} />
+          Em Desenvolvimento
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
diff --git a/apps/web/src/routes/(dashboard)/controladoria/+page.svelte b/apps/web/src/routes/(dashboard)/controladoria/+page.svelte
index f74e3be..440da96 100644
--- a/apps/web/src/routes/(dashboard)/controladoria/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/controladoria/+page.svelte
@@ -1,99 +1,88 @@
-<script lang="ts">
-</script>
-
-<main class="container mx-auto px-4 py-4">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
-      <li>Controladoria</li>
-    </ul>
-  </div>
-
-  <!-- Cabeçalho -->
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-purple-500/20 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Controladoria</h1>
-        <p class="text-base-content/70">Controle e auditoria interna da secretaria</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Card de Aviso -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="mb-6">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
-          </svg>
-        </div>
-        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
-        <p class="text-base-content/70 max-w-md mb-6">
-          O módulo de Controladoria está sendo desenvolvido e em breve estará disponível com funcionalidades completas de controle e auditoria.
-        </p>
-        <div class="badge badge-warning badge-lg gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          Em Desenvolvimento
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Funcionalidades Previstas -->
-  <div class="mt-6">
-    <h3 class="text-xl font-bold mb-4">Funcionalidades Previstas</h3>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
-        <div class="card-body">
-          <div class="flex items-center gap-3 mb-2">
-            <div class="p-2 bg-primary/10 rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-            </div>
-            <h4 class="font-semibold">Auditoria Interna</h4>
-          </div>
-          <p class="text-sm text-base-content/70">Controle e verificação de processos internos</p>
-        </div>
-      </div>
-
-      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
-        <div class="card-body">
-          <div class="flex items-center gap-3 mb-2">
-            <div class="p-2 bg-primary/10 rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-            </div>
-            <h4 class="font-semibold">Compliance</h4>
-          </div>
-          <p class="text-sm text-base-content/70">Conformidade com normas e regulamentos</p>
-        </div>
-      </div>
-
-      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
-        <div class="card-body">
-          <div class="flex items-center gap-3 mb-2">
-            <div class="p-2 bg-primary/10 rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
-              </svg>
-            </div>
-            <h4 class="font-semibold">Indicadores de Gestão</h4>
-          </div>
-          <p class="text-sm text-base-content/70">Monitoramento de KPIs e métricas</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</main>
-
+<script lang="ts">
+  import { BarChart3, ClipboardCheck, Plus, CheckCircle2, Clock, TrendingUp } from "lucide-svelte";
+</script>
+
+<main class="container mx-auto px-4 py-4">
+  <!-- Breadcrumb -->
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
+      <li>Controladoria</li>
+    </ul>
+  </div>
+
+  <!-- Cabeçalho -->
+  <div class="mb-6">
+    <div class="flex items-center gap-4 mb-2">
+      <div class="p-3 bg-purple-500/20 rounded-xl">
+        <BarChart3 class="h-8 w-8 text-purple-600" strokeWidth={2} />
+      </div>
+      <div>
+        <h1 class="text-3xl font-bold text-primary">Controladoria</h1>
+        <p class="text-base-content/70">Controle e auditoria interna da secretaria</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Card de Aviso -->
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+      <div class="flex flex-col items-center justify-center py-12 text-center">
+        <div class="mb-6">
+          <ClipboardCheck class="h-24 w-24 text-base-content/20" strokeWidth={1.5} />
+        </div>
+        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
+        <p class="text-base-content/70 max-w-md mb-6">
+          O módulo de Controladoria está sendo desenvolvido e em breve estará disponível com funcionalidades completas de controle e auditoria.
+        </p>
+        <div class="badge badge-warning badge-lg gap-2">
+          <Plus class="h-4 w-4" strokeWidth={2} />
+          Em Desenvolvimento
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Funcionalidades Previstas -->
+  <div class="mt-6">
+    <h3 class="text-xl font-bold mb-4">Funcionalidades Previstas</h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
+        <div class="card-body">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 bg-primary/10 rounded-lg">
+              <CheckCircle2 class="h-6 w-6 text-primary" strokeWidth={2} />
+            </div>
+            <h4 class="font-semibold">Auditoria Interna</h4>
+          </div>
+          <p class="text-sm text-base-content/70">Controle e verificação de processos internos</p>
+        </div>
+      </div>
+
+      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
+        <div class="card-body">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 bg-primary/10 rounded-lg">
+              <Clock class="h-6 w-6 text-primary" strokeWidth={2} />
+            </div>
+            <h4 class="font-semibold">Compliance</h4>
+          </div>
+          <p class="text-sm text-base-content/70">Conformidade com normas e regulamentos</p>
+        </div>
+      </div>
+
+      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
+        <div class="card-body">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 bg-primary/10 rounded-lg">
+              <TrendingUp class="h-6 w-6 text-primary" strokeWidth={2} />
+            </div>
+            <h4 class="font-semibold">Indicadores de Gestão</h4>
+          </div>
+          <p class="text-sm text-base-content/70">Monitoramento de KPIs e métricas</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
diff --git a/apps/web/src/routes/(dashboard)/financeiro/+page.svelte b/apps/web/src/routes/(dashboard)/financeiro/+page.svelte
index 6852168..daf2763 100644
--- a/apps/web/src/routes/(dashboard)/financeiro/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/financeiro/+page.svelte
@@ -1,99 +1,88 @@
-<script lang="ts">
-</script>
-
-<main class="container mx-auto px-4 py-4">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
-      <li>Financeiro</li>
-    </ul>
-  </div>
-
-  <!-- Cabeçalho -->
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-green-500/20 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Financeiro</h1>
-        <p class="text-base-content/70">Gestão financeira e orçamentária da secretaria</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Card de Aviso -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="mb-6">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-          </svg>
-        </div>
-        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
-        <p class="text-base-content/70 max-w-md mb-6">
-          O módulo Financeiro está sendo desenvolvido e em breve estará disponível com funcionalidades completas de gestão financeira e orçamentária.
-        </p>
-        <div class="badge badge-warning badge-lg gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          Em Desenvolvimento
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Funcionalidades Previstas -->
-  <div class="mt-6">
-    <h3 class="text-xl font-bold mb-4">Funcionalidades Previstas</h3>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
-        <div class="card-body">
-          <div class="flex items-center gap-3 mb-2">
-            <div class="p-2 bg-primary/10 rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-              </svg>
-            </div>
-            <h4 class="font-semibold">Controle Orçamentário</h4>
-          </div>
-          <p class="text-sm text-base-content/70">Gestão e acompanhamento do orçamento anual</p>
-        </div>
-      </div>
-
-      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
-        <div class="card-body">
-          <div class="flex items-center gap-3 mb-2">
-            <div class="p-2 bg-primary/10 rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
-              </svg>
-            </div>
-            <h4 class="font-semibold">Fluxo de Caixa</h4>
-          </div>
-          <p class="text-sm text-base-content/70">Controle de entradas e saídas financeiras</p>
-        </div>
-      </div>
-
-      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
-        <div class="card-body">
-          <div class="flex items-center gap-3 mb-2">
-            <div class="p-2 bg-primary/10 rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-            </div>
-            <h4 class="font-semibold">Relatórios Financeiros</h4>
-          </div>
-          <p class="text-sm text-base-content/70">Geração de relatórios e demonstrativos</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</main>
-
+<script lang="ts">
+  import { DollarSign, Building2, Plus, Calculator, TrendingUp, FileText } from "lucide-svelte";
+</script>
+
+<main class="container mx-auto px-4 py-4">
+  <!-- Breadcrumb -->
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
+      <li>Financeiro</li>
+    </ul>
+  </div>
+
+  <!-- Cabeçalho -->
+  <div class="mb-6">
+    <div class="flex items-center gap-4 mb-2">
+      <div class="p-3 bg-green-500/20 rounded-xl">
+        <DollarSign class="h-8 w-8 text-green-600" strokeWidth={2} />
+      </div>
+      <div>
+        <h1 class="text-3xl font-bold text-primary">Financeiro</h1>
+        <p class="text-base-content/70">Gestão financeira e orçamentária da secretaria</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Card de Aviso -->
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+      <div class="flex flex-col items-center justify-center py-12 text-center">
+        <div class="mb-6">
+          <Building2 class="h-24 w-24 text-base-content/20" strokeWidth={1.5} />
+        </div>
+        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
+        <p class="text-base-content/70 max-w-md mb-6">
+          O módulo Financeiro está sendo desenvolvido e em breve estará disponível com funcionalidades completas de gestão financeira e orçamentária.
+        </p>
+        <div class="badge badge-warning badge-lg gap-2">
+          <Plus class="h-4 w-4" strokeWidth={2} />
+          Em Desenvolvimento
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Funcionalidades Previstas -->
+  <div class="mt-6">
+    <h3 class="text-xl font-bold mb-4">Funcionalidades Previstas</h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
+        <div class="card-body">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 bg-primary/10 rounded-lg">
+              <Calculator class="h-6 w-6 text-primary" strokeWidth={2} />
+            </div>
+            <h4 class="font-semibold">Controle Orçamentário</h4>
+          </div>
+          <p class="text-sm text-base-content/70">Gestão e acompanhamento do orçamento anual</p>
+        </div>
+      </div>
+
+      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
+        <div class="card-body">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 bg-primary/10 rounded-lg">
+              <TrendingUp class="h-6 w-6 text-primary" strokeWidth={2} />
+            </div>
+            <h4 class="font-semibold">Fluxo de Caixa</h4>
+          </div>
+          <p class="text-sm text-base-content/70">Controle de entradas e saídas financeiras</p>
+        </div>
+      </div>
+
+      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
+        <div class="card-body">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 bg-primary/10 rounded-lg">
+              <FileText class="h-6 w-6 text-primary" strokeWidth={2} />
+            </div>
+            <h4 class="font-semibold">Relatórios Financeiros</h4>
+          </div>
+          <p class="text-sm text-base-content/70">Geração de relatórios e demonstrativos</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
diff --git a/apps/web/src/routes/(dashboard)/juridico/+page.svelte b/apps/web/src/routes/(dashboard)/juridico/+page.svelte
index 486f80d..b82f26f 100644
--- a/apps/web/src/routes/(dashboard)/juridico/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/juridico/+page.svelte
@@ -1,48 +1,43 @@
-<script lang="ts">
-</script>
-
-<main class="container mx-auto px-4 py-4">
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
-      <li>Jurídico</li>
-    </ul>
-  </div>
-
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-red-500/20 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Jurídico</h1>
-        <p class="text-base-content/70">Assessoria jurídica e gestão de processos</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="mb-6">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-          </svg>
-        </div>
-        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
-        <p class="text-base-content/70 max-w-md mb-6">
-          O módulo Jurídico está sendo desenvolvido e em breve estará disponível com funcionalidades completas de assessoria jurídica e gestão de processos.
-        </p>
-        <div class="badge badge-warning badge-lg gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          Em Desenvolvimento
-        </div>
-      </div>
-    </div>
-  </div>
-</main>
-
+<script lang="ts">
+  import { Scale, BookOpen, Plus } from "lucide-svelte";
+</script>
+
+<main class="container mx-auto px-4 py-4">
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
+      <li>Jurídico</li>
+    </ul>
+  </div>
+
+  <div class="mb-6">
+    <div class="flex items-center gap-4 mb-2">
+      <div class="p-3 bg-red-500/20 rounded-xl">
+        <Scale class="h-8 w-8 text-red-600" strokeWidth={2} />
+      </div>
+      <div>
+        <h1 class="text-3xl font-bold text-primary">Jurídico</h1>
+        <p class="text-base-content/70">Assessoria jurídica e gestão de processos</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+      <div class="flex flex-col items-center justify-center py-12 text-center">
+        <div class="mb-6">
+          <BookOpen class="h-24 w-24 text-base-content/20" strokeWidth={1.5} />
+        </div>
+        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
+        <p class="text-base-content/70 max-w-md mb-6">
+          O módulo Jurídico está sendo desenvolvido e em breve estará disponível com funcionalidades completas de assessoria jurídica e gestão de processos.
+        </p>
+        <div class="badge badge-warning badge-lg gap-2">
+          <Plus class="h-4 w-4" strokeWidth={2} />
+          Em Desenvolvimento
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
diff --git a/apps/web/src/routes/(dashboard)/licitacoes/+page.svelte b/apps/web/src/routes/(dashboard)/licitacoes/+page.svelte
index c4255aa..6075af1 100644
--- a/apps/web/src/routes/(dashboard)/licitacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/licitacoes/+page.svelte
@@ -1,99 +1,88 @@
-<script lang="ts">
-</script>
-
-<main class="container mx-auto px-4 py-4">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
-      <li>Licitações</li>
-    </ul>
-  </div>
-
-  <!-- Cabeçalho -->
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-orange-500/20 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Licitações</h1>
-        <p class="text-base-content/70">Gestão de processos licitatórios</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Card de Aviso -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="mb-6">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
-        </div>
-        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
-        <p class="text-base-content/70 max-w-md mb-6">
-          O módulo de Licitações está sendo desenvolvido e em breve estará disponível com funcionalidades completas para gestão de processos licitatórios.
-        </p>
-        <div class="badge badge-warning badge-lg gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          Em Desenvolvimento
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Funcionalidades Previstas -->
-  <div class="mt-6">
-    <h3 class="text-xl font-bold mb-4">Funcionalidades Previstas</h3>
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
-        <div class="card-body">
-          <div class="flex items-center gap-3 mb-2">
-            <div class="p-2 bg-primary/10 rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-              </svg>
-            </div>
-            <h4 class="font-semibold">Processos Licitatórios</h4>
-          </div>
-          <p class="text-sm text-base-content/70">Cadastro e acompanhamento de licitações</p>
-        </div>
-      </div>
-
-      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
-        <div class="card-body">
-          <div class="flex items-center gap-3 mb-2">
-            <div class="p-2 bg-primary/10 rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-              </svg>
-            </div>
-            <h4 class="font-semibold">Fornecedores</h4>
-          </div>
-          <p class="text-sm text-base-content/70">Cadastro e gestão de fornecedores</p>
-        </div>
-      </div>
-
-      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
-        <div class="card-body">
-          <div class="flex items-center gap-3 mb-2">
-            <div class="p-2 bg-primary/10 rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-              </svg>
-            </div>
-            <h4 class="font-semibold">Documentação</h4>
-          </div>
-          <p class="text-sm text-base-content/70">Gestão de documentos e editais</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</main>
-
+<script lang="ts">
+  import { FileText, ClipboardCopy, Plus, Users, FileDoc } from "lucide-svelte";
+</script>
+
+<main class="container mx-auto px-4 py-4">
+  <!-- Breadcrumb -->
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
+      <li>Licitações</li>
+    </ul>
+  </div>
+
+  <!-- Cabeçalho -->
+  <div class="mb-6">
+    <div class="flex items-center gap-4 mb-2">
+      <div class="p-3 bg-orange-500/20 rounded-xl">
+        <FileText class="h-8 w-8 text-orange-600" strokeWidth={2} />
+      </div>
+      <div>
+        <h1 class="text-3xl font-bold text-primary">Licitações</h1>
+        <p class="text-base-content/70">Gestão de processos licitatórios</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Card de Aviso -->
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+      <div class="flex flex-col items-center justify-center py-12 text-center">
+        <div class="mb-6">
+          <FileDoc class="h-24 w-24 text-base-content/20" strokeWidth={1.5} />
+        </div>
+        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
+        <p class="text-base-content/70 max-w-md mb-6">
+          O módulo de Licitações está sendo desenvolvido e em breve estará disponível com funcionalidades completas para gestão de processos licitatórios.
+        </p>
+        <div class="badge badge-warning badge-lg gap-2">
+          <Plus class="h-4 w-4" strokeWidth={2} />
+          Em Desenvolvimento
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Funcionalidades Previstas -->
+  <div class="mt-6">
+    <h3 class="text-xl font-bold mb-4">Funcionalidades Previstas</h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
+        <div class="card-body">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 bg-primary/10 rounded-lg">
+              <ClipboardCopy class="h-6 w-6 text-primary" strokeWidth={2} />
+            </div>
+            <h4 class="font-semibold">Processos Licitatórios</h4>
+          </div>
+          <p class="text-sm text-base-content/70">Cadastro e acompanhamento de licitações</p>
+        </div>
+      </div>
+
+      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
+        <div class="card-body">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 bg-primary/10 rounded-lg">
+              <Users class="h-6 w-6 text-primary" strokeWidth={2} />
+            </div>
+            <h4 class="font-semibold">Fornecedores</h4>
+          </div>
+          <p class="text-sm text-base-content/70">Cadastro e gestão de fornecedores</p>
+        </div>
+      </div>
+
+      <div class="card bg-base-100 shadow-md hover:shadow-lg transition-shadow">
+        <div class="card-body">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="p-2 bg-primary/10 rounded-lg">
+              <FileDoc class="h-6 w-6 text-primary" strokeWidth={2} />
+            </div>
+            <h4 class="font-semibold">Documentação</h4>
+          </div>
+          <p class="text-sm text-base-content/70">Gestão de documentos e editais</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
diff --git a/apps/web/src/routes/(dashboard)/programas-esportivos/+page.svelte b/apps/web/src/routes/(dashboard)/programas-esportivos/+page.svelte
index 356f023..47809cc 100644
--- a/apps/web/src/routes/(dashboard)/programas-esportivos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/programas-esportivos/+page.svelte
@@ -1,48 +1,43 @@
-<script lang="ts">
-</script>
-
-<main class="container mx-auto px-4 py-4">
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
-      <li>Programas Esportivos</li>
-    </ul>
-  </div>
-
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-yellow-500/20 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Programas Esportivos</h1>
-        <p class="text-base-content/70">Gestão de programas e projetos esportivos</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="mb-6">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-base-content/20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
-          </svg>
-        </div>
-        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
-        <p class="text-base-content/70 max-w-md mb-6">
-          O módulo de Programas Esportivos está sendo desenvolvido e em breve estará disponível com funcionalidades completas para gestão de programas e projetos esportivos.
-        </p>
-        <div class="badge badge-warning badge-lg gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          Em Desenvolvimento
-        </div>
-      </div>
-    </div>
-  </div>
-</main>
-
+<script lang="ts">
+  import { Trophy, Award, Plus } from "lucide-svelte";
+</script>
+
+<main class="container mx-auto px-4 py-4">
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
+      <li>Programas Esportivos</li>
+    </ul>
+  </div>
+
+  <div class="mb-6">
+    <div class="flex items-center gap-4 mb-2">
+      <div class="p-3 bg-yellow-500/20 rounded-xl">
+        <Trophy class="h-8 w-8 text-yellow-600" strokeWidth={2} />
+      </div>
+      <div>
+        <h1 class="text-3xl font-bold text-primary">Programas Esportivos</h1>
+        <p class="text-base-content/70">Gestão de programas e projetos esportivos</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="card bg-base-100 shadow-xl">
+    <div class="card-body">
+      <div class="flex flex-col items-center justify-center py-12 text-center">
+        <div class="mb-6">
+          <Award class="h-24 w-24 text-base-content/20" strokeWidth={1.5} />
+        </div>
+        <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
+        <p class="text-base-content/70 max-w-md mb-6">
+          O módulo de Programas Esportivos está sendo desenvolvido e em breve estará disponível com funcionalidades completas para gestão de programas e projetos esportivos.
+        </p>
+        <div class="badge badge-warning badge-lg gap-2">
+          <Plus class="h-4 w-4" strokeWidth={2} />
+          Em Desenvolvimento
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
+
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte
index 90cf160..f3e9bec 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte
@@ -1,281 +1,253 @@
-<script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-
-  // Buscar estatísticas para exibir nos cards
-  const statsQuery = useQuery(api.dashboard.getStats, {});
-
-  const menuItems = [
-    {
-      categoria: "Gestão de Funcionários",
-      descricao: "Gerencie o cadastro e informações dos funcionários",
-      icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-      </svg>`,
-      gradient: "from-blue-500/10 to-blue-600/20",
-      accentColor: "text-blue-600",
-      bgIcon: "bg-blue-500/20",
-      opcoes: [
-        {
-          nome: "Cadastrar Funcionário",
-          descricao: "Adicionar novo funcionário ao sistema",
-          href: "/recursos-humanos/funcionarios/cadastro",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
-          </svg>`,
-        },
-        {
-          nome: "Listar Funcionários",
-          descricao: "Visualizar e editar cadastros",
-          href: "/recursos-humanos/funcionarios",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
-          </svg>`,
-        },
-        {
-          nome: "Excluir Cadastro",
-          descricao: "Remover funcionário do sistema",
-          href: "/recursos-humanos/funcionarios/excluir",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-          </svg>`,
-        },
-        {
-          nome: "Relatórios",
-          descricao: "Visualizar estatísticas e gráficos",
-          href: "/recursos-humanos/funcionarios/relatorios",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-          </svg>`,
-        },
-      ],
-    },
-    {
-      categoria: "Gestão de Férias e Licenças",
-      descricao: "Controle de férias, atestados e licenças",
-      icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-      </svg>`,
-      gradient: "from-purple-500/10 to-purple-600/20",
-      accentColor: "text-purple-600",
-      bgIcon: "bg-purple-500/20",
-      opcoes: [
-        {
-          nome: "Gestão de Férias",
-          descricao: "Controlar períodos de férias",
-          href: "/recursos-humanos/ferias",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-          </svg>`,
-        },
-        {
-          nome: "Atestados & Licenças",
-          descricao: "Registrar atestados e licenças",
-          href: "/recursos-humanos/atestados-licencas",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>`,
-        },
-      ],
-    },
-    {
-      categoria: "Gestão de Símbolos",
-      descricao: "Gerencie cargos comissionados e funções gratificadas",
-      icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-      </svg>`,
-      gradient: "from-green-500/10 to-green-600/20",
-      accentColor: "text-green-600",
-      bgIcon: "bg-green-500/20",
-      opcoes: [
-        {
-          nome: "Cadastrar Símbolo",
-          descricao: "Adicionar novo cargo ou função",
-          href: "/recursos-humanos/simbolos/cadastro",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>`,
-        },
-        {
-          nome: "Listar Símbolos",
-          descricao: "Visualizar e editar símbolos",
-          href: "/recursos-humanos/simbolos",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
-          </svg>`,
-        },
-      ],
-    },
-  ];
-</script>
-
-<main class="container mx-auto px-4 py-4">
-  <!-- Cabeçalho -->
-  <div class="mb-8">
-    <h1 class="text-4xl font-bold text-primary mb-2">Recursos Humanos</h1>
-    <p class="text-lg text-base-content/70">
-      Gerencie funcionários, símbolos e visualize relatórios do departamento
-    </p>
-  </div>
-
-  <!-- Estatísticas Rápidas -->
-  {#if statsQuery.data}
-    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-      <div class="stats shadow-lg bg-gradient-to-br from-primary/10 to-primary/20">
-        <div class="stat">
-          <div class="stat-figure text-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-            </svg>
-          </div>
-          <div class="stat-title">Total</div>
-          <div class="stat-value text-primary">{statsQuery.data.totalFuncionarios}</div>
-          <div class="stat-desc">Funcionários cadastrados</div>
-        </div>
-      </div>
-
-      <div class="stats shadow-lg bg-gradient-to-br from-success/10 to-success/20">
-        <div class="stat">
-          <div class="stat-figure text-success">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <div class="stat-title">Ativos</div>
-          <div class="stat-value text-success">{statsQuery.data.funcionariosAtivos}</div>
-          <div class="stat-desc">Funcionários ativos</div>
-        </div>
-      </div>
-
-      <div class="stats shadow-lg bg-gradient-to-br from-secondary/10 to-secondary/20">
-        <div class="stat">
-          <div class="stat-figure text-secondary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-            </svg>
-          </div>
-          <div class="stat-title">Símbolos</div>
-          <div class="stat-value text-secondary">{statsQuery.data.totalSimbolos}</div>
-          <div class="stat-desc">Cargos e funções</div>
-        </div>
-      </div>
-
-      <div class="stats shadow-lg bg-gradient-to-br from-accent/10 to-accent/20">
-        <div class="stat">
-          <div class="stat-figure text-accent">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-            </svg>
-          </div>
-          <div class="stat-title">CC / FG</div>
-          <div class="stat-value text-accent">{statsQuery.data.cargoComissionado} / {statsQuery.data.funcaoGratificada}</div>
-          <div class="stat-desc">Distribuição</div>
-        </div>
-      </div>
-    </div>
-  {/if}
-
-  <!-- Menu de Opções -->
-  <div class="space-y-8">
-    {#each menuItems as categoria}
-      <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300">
-        <div class="card-body">
-          <!-- Cabeçalho da Categoria -->
-          <div class="flex items-start gap-6 mb-6">
-            <div class="p-4 {categoria.bgIcon} rounded-2xl">
-              <div class="{categoria.accentColor}">
-                {@html categoria.icon}
-              </div>
-            </div>
-            <div class="flex-1">
-              <h2 class="card-title text-2xl mb-2 {categoria.accentColor}">
-                {categoria.categoria}
-              </h2>
-              <p class="text-base-content/70">{categoria.descricao}</p>
-            </div>
-          </div>
-
-          <!-- Grid de Opções -->
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {#each categoria.opcoes as opcao}
-              <a
-                href={opcao.href}
-                class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-gradient-to-br {categoria.gradient} p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
-              >
-                <div class="flex flex-col h-full">
-                  <div class="flex items-start justify-between mb-4">
-                    <div class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300">
-                      <div class="{categoria.accentColor} group-hover:text-white">
-                        {@html opcao.icon}
-                      </div>
-                    </div>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                    </svg>
-                  </div>
-                  <h3 class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300">
-                    {opcao.nome}
-                  </h3>
-                  <p class="text-sm text-base-content/70 flex-1">
-                    {opcao.descricao}
-                  </p>
-                </div>
-              </a>
-            {/each}
-          </div>
-        </div>
-      </div>
-    {/each}
-  </div>
-
-  <!-- Card de Ajuda -->
-  <div class="alert alert-info shadow-lg mt-8">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      class="stroke-current shrink-0 w-6 h-6"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-      ></path>
-    </svg>
-    <div>
-      <h3 class="font-bold">Precisa de ajuda?</h3>
-      <div class="text-sm">
-        Entre em contato com o suporte técnico ou consulte a documentação do sistema para mais informações sobre as funcionalidades de Recursos Humanos.
-      </div>
-    </div>
-  </div>
-</main>
-
-<style>
-  @keyframes fadeInUp {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .card {
-    animation: fadeInUp 0.5s ease-out;
-  }
-
-  .stats {
-    animation: fadeInUp 0.6s ease-out;
-  }
-</style>
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { useQuery } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import { Users, UserPlus, ClipboardList, Trash2, BarChart3, Calendar, FileText, BadgeCheck, Plus, List, ChevronRight, CheckCircle2, Info, ArrowRight } from "lucide-svelte";
+  import type { Component } from "svelte";
+
+  // Buscar estatísticas para exibir nos cards
+  const statsQuery = useQuery(api.dashboard.getStats, {});
+
+  interface MenuOpcao {
+    nome: string;
+    descricao: string;
+    href: string;
+    Icon: Component;
+  }
+
+  interface MenuCategoria {
+    categoria: string;
+    descricao: string;
+    Icon: Component;
+    gradient: string;
+    accentColor: string;
+    bgIcon: string;
+    opcoes: MenuOpcao[];
+  }
+
+  const menuItems: MenuCategoria[] = [
+    {
+      categoria: "Gestão de Funcionários",
+      descricao: "Gerencie o cadastro e informações dos funcionários",
+      Icon: Users,
+      gradient: "from-blue-500/10 to-blue-600/20",
+      accentColor: "text-blue-600",
+      bgIcon: "bg-blue-500/20",
+      opcoes: [
+        {
+          nome: "Cadastrar Funcionário",
+          descricao: "Adicionar novo funcionário ao sistema",
+          href: "/recursos-humanos/funcionarios/cadastro",
+          Icon: UserPlus,
+        },
+        {
+          nome: "Listar Funcionários",
+          descricao: "Visualizar e editar cadastros",
+          href: "/recursos-humanos/funcionarios",
+          Icon: ClipboardList,
+        },
+        {
+          nome: "Excluir Cadastro",
+          descricao: "Remover funcionário do sistema",
+          href: "/recursos-humanos/funcionarios/excluir",
+          Icon: Trash2,
+        },
+        {
+          nome: "Relatórios",
+          descricao: "Visualizar estatísticas e gráficos",
+          href: "/recursos-humanos/funcionarios/relatorios",
+          Icon: BarChart3,
+        },
+      ],
+    },
+    {
+      categoria: "Gestão de Férias e Licenças",
+      descricao: "Controle de férias, atestados e licenças",
+      Icon: Calendar,
+      gradient: "from-purple-500/10 to-purple-600/20",
+      accentColor: "text-purple-600",
+      bgIcon: "bg-purple-500/20",
+      opcoes: [
+        {
+          nome: "Gestão de Férias",
+          descricao: "Controlar períodos de férias",
+          href: "/recursos-humanos/ferias",
+          Icon: Calendar,
+        },
+        {
+          nome: "Atestados & Licenças",
+          descricao: "Registrar atestados e licenças",
+          href: "/recursos-humanos/atestados-licencas",
+          Icon: FileText,
+        },
+      ],
+    },
+    {
+      categoria: "Gestão de Símbolos",
+      descricao: "Gerencie cargos comissionados e funções gratificadas",
+      Icon: BadgeCheck,
+      gradient: "from-green-500/10 to-green-600/20",
+      accentColor: "text-green-600",
+      bgIcon: "bg-green-500/20",
+      opcoes: [
+        {
+          nome: "Cadastrar Símbolo",
+          descricao: "Adicionar novo cargo ou função",
+          href: "/recursos-humanos/simbolos/cadastro",
+          Icon: Plus,
+        },
+        {
+          nome: "Listar Símbolos",
+          descricao: "Visualizar e editar símbolos",
+          href: "/recursos-humanos/simbolos",
+          Icon: List,
+        },
+      ],
+    },
+  ];
+</script>
+
+<main class="container mx-auto px-4 py-4">
+  <!-- Cabeçalho -->
+  <div class="mb-8">
+    <h1 class="text-4xl font-bold text-primary mb-2">Recursos Humanos</h1>
+    <p class="text-lg text-base-content/70">
+      Gerencie funcionários, símbolos e visualize relatórios do departamento
+    </p>
+  </div>
+
+  <!-- Estatísticas Rápidas -->
+  {#if statsQuery.data}
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+      <div class="stats shadow-lg bg-gradient-to-br from-primary/10 to-primary/20">
+        <div class="stat">
+          <div class="stat-figure text-primary">
+            <Users class="h-8 w-8" strokeWidth={2} />
+          </div>
+          <div class="stat-title">Total</div>
+          <div class="stat-value text-primary">{statsQuery.data.totalFuncionarios}</div>
+          <div class="stat-desc">Funcionários cadastrados</div>
+        </div>
+      </div>
+
+      <div class="stats shadow-lg bg-gradient-to-br from-success/10 to-success/20">
+        <div class="stat">
+          <div class="stat-figure text-success">
+            <CheckCircle2 class="h-8 w-8" strokeWidth={2} />
+          </div>
+          <div class="stat-title">Ativos</div>
+          <div class="stat-value text-success">{statsQuery.data.funcionariosAtivos}</div>
+          <div class="stat-desc">Funcionários ativos</div>
+        </div>
+      </div>
+
+      <div class="stats shadow-lg bg-gradient-to-br from-secondary/10 to-secondary/20">
+        <div class="stat">
+          <div class="stat-figure text-secondary">
+            <BadgeCheck class="h-8 w-8" strokeWidth={2} />
+          </div>
+          <div class="stat-title">Símbolos</div>
+          <div class="stat-value text-secondary">{statsQuery.data.totalSimbolos}</div>
+          <div class="stat-desc">Cargos e funções</div>
+        </div>
+      </div>
+
+      <div class="stats shadow-lg bg-gradient-to-br from-accent/10 to-accent/20">
+        <div class="stat">
+          <div class="stat-figure text-accent">
+            <BarChart3 class="h-8 w-8" strokeWidth={2} />
+          </div>
+          <div class="stat-title">CC / FG</div>
+          <div class="stat-value text-accent">{statsQuery.data.cargoComissionado} / {statsQuery.data.funcaoGratificada}</div>
+          <div class="stat-desc">Distribuição</div>
+        </div>
+      </div>
+    </div>
+  {/if}
+
+  <!-- Menu de Opções -->
+  <div class="space-y-8">
+    {#each menuItems as categoria}
+      <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300">
+        <div class="card-body">
+          <!-- Cabeçalho da Categoria -->
+          <div class="flex items-start gap-6 mb-6">
+            <div class="p-4 {categoria.bgIcon} rounded-2xl">
+              <svelte:component this={categoria.Icon} class="h-12 w-12 {categoria.accentColor}" strokeWidth={2} />
+            </div>
+            <div class="flex-1">
+              <h2 class="card-title text-2xl mb-2 {categoria.accentColor}">
+                {categoria.categoria}
+              </h2>
+              <p class="text-base-content/70">{categoria.descricao}</p>
+            </div>
+          </div>
+
+          <!-- Grid de Opções -->
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {#each categoria.opcoes as opcao}
+              <a
+                href={opcao.href}
+                class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-gradient-to-br {categoria.gradient} p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
+              >
+                <div class="flex flex-col h-full">
+                  <div class="flex items-start justify-between mb-4">
+                    <div class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300">
+                      <svelte:component 
+                        this={opcao.Icon} 
+                        class="h-5 w-5 {categoria.accentColor} group-hover:text-white transition-colors duration-300" 
+                        strokeWidth={2} 
+                      />
+                    </div>
+                    <ChevronRight
+                      class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
+                      strokeWidth={2}
+                    />
+                  </div>
+                  <h3 class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300">
+                    {opcao.nome}
+                  </h3>
+                  <p class="text-sm text-base-content/70 flex-1">
+                    {opcao.descricao}
+                  </p>
+                </div>
+              </a>
+            {/each}
+          </div>
+        </div>
+      </div>
+    {/each}
+  </div>
+
+  <!-- Card de Ajuda -->
+  <div class="alert alert-info shadow-lg mt-8">
+    <Info class="stroke-current shrink-0 w-6 h-6" strokeWidth={2} />
+    <div>
+      <h3 class="font-bold">Precisa de ajuda?</h3>
+      <div class="text-sm">
+        Entre em contato com o suporte técnico ou consulte a documentação do sistema para mais informações sobre as funcionalidades de Recursos Humanos.
+      </div>
+    </div>
+  </div>
+</main>
+
+<style>
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .card {
+    animation: fadeInUp 0.5s ease-out;
+  }
+
+  .stats {
+    animation: fadeInUp 0.6s ease-out;
+  }
+</style>
diff --git a/apps/web/src/routes/(dashboard)/ti/painel-administrativo/+page.svelte b/apps/web/src/routes/(dashboard)/ti/painel-administrativo/+page.svelte
index 0349c24..d005651 100644
--- a/apps/web/src/routes/(dashboard)/ti/painel-administrativo/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/painel-administrativo/+page.svelte
@@ -2,6 +2,7 @@
   import { useQuery, useConvexClient } from "convex-svelte";
   import { api } from "@sgse-app/backend/convex/_generated/api";
   import StatsCard from "$lib/components/ti/StatsCard.svelte";
+  import { BarChart3, Users, CheckCircle2, Ban, Clock, Plus, Layers, FileText, Info } from "lucide-svelte";
 
   const client = useConvexClient();
   const usuariosQuery = useQuery(api.usuarios.listar, {});
@@ -45,9 +46,7 @@
   <div class="flex items-center justify-between mb-8">
     <div class="flex items-center gap-4">
       <div class="p-3 bg-primary/10 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-        </svg>
+        <BarChart3 class="h-8 w-8 text-primary" strokeWidth={2} />
       </div>
       <div>
         <h1 class="text-3xl font-bold text-base-content">Dashboard Administrativo TI</h1>
@@ -62,7 +61,7 @@
       <StatsCard 
         title="Total de Usuários" 
         value={stats.total} 
-        icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />'
+        Icon={Users}
         color="primary"
       />
       
@@ -70,7 +69,7 @@
         title="Usuários Ativos" 
         value={stats.ativos} 
         description="{stats.total > 0 ? ((stats.ativos / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
-        icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />'
+        Icon={CheckCircle2}
         color="success"
       />
       
@@ -78,7 +77,7 @@
         title="Usuários Bloqueados" 
         value={stats.bloqueados} 
         description="Requerem atenção"
-        icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />'
+        Icon={Ban}
         color="error"
       />
       
@@ -86,7 +85,7 @@
         title="Usuários Inativos" 
         value={stats.inativos} 
         description="Desativados"
-        icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />'
+        Icon={Clock}
         color="warning"
       />
     </div>
@@ -102,23 +101,17 @@
       <h2 class="card-title text-2xl mb-4">Ações Rápidas</h2>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
         <a href="/ti/usuarios" class="btn btn-primary">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-          </svg>
+          <Plus class="h-5 w-5" strokeWidth={2} />
           Criar Usuário
         </a>
         
         <a href="/ti/perfis" class="btn btn-secondary">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-          </svg>
+          <Layers class="h-5 w-5" strokeWidth={2} />
           Gerenciar Perfis
         </a>
         
         <a href="/ti/auditoria" class="btn btn-accent">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
+          <FileText class="h-5 w-5" strokeWidth={2} />
           Ver Logs
         </a>
       </div>
@@ -127,9 +120,7 @@
 
   <!-- Informação Sistema -->
   <div class="alert alert-info">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-    </svg>
+    <Info class="stroke-current shrink-0 w-6 h-6" strokeWidth={2} />
     <span>Sistema de Gestão da Secretaria de Esportes - Versão 2.0 com controle avançado de acesso</span>
   </div>
 </div>
diff --git a/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte b/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
index e61b8e5..0da0cea 100644
--- a/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
@@ -6,6 +6,7 @@
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
   import { format } from "date-fns";
   import { ptBR } from "date-fns/locale";
+  import { Users, Shield, AlertTriangle, Info, Building2 } from "lucide-svelte";
 
   type Role = {
     _id: Id<"roles">;
@@ -174,35 +175,35 @@
         <StatsCard 
           title="Total de Perfis" 
           value={stats.total} 
-          icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />'
+          Icon={Users}
           color="primary"
         />
         <StatsCard 
           title="Nível Máximo" 
           value={stats.nivelMaximo}
           description="Acesso total"
-          icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />'
+          Icon={Shield}
           color="error"
         />
         <StatsCard 
           title="Nível Alto" 
           value={stats.nivelAlto}
           description="Acesso elevado"
-          icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />'
+          Icon={AlertTriangle}
           color="warning"
         />
         <StatsCard 
           title="Nível Médio" 
           value={stats.nivelMedio}
           description="Acesso padrão"
-          icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />'
+          Icon={Info}
           color="info"
         />
         <StatsCard 
           title="Com Setor" 
           value={stats.comSetor}
           description="{stats.total > 0 ? ((stats.comSetor / stats.total) * 100).toFixed(0) + '% do total' : '0%'}"
-          icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />'
+          Icon={Building2}
           color="secondary"
         />
       </div>
diff --git a/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte b/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
index 1034330..43dfb7f 100644
--- a/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
@@ -6,6 +6,7 @@
   import StatsCard from "$lib/components/ti/StatsCard.svelte";
   import { format } from "date-fns";
   import { ptBR } from "date-fns/locale";
+  import { FileText, Clock, CheckCircle2, XCircle } from "lucide-svelte";
 
   type StatusSolicitacao = "pendente" | "aprovado" | "rejeitado";
 
@@ -294,7 +295,7 @@
         <StatsCard 
           title="Total de Solicitações" 
           value={stats.total} 
-          icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />'
+          Icon={FileText}
           color="primary"
         />
         
@@ -302,7 +303,7 @@
           title="Pendentes" 
           value={stats.pendentes} 
           description="{stats.total > 0 ? ((stats.pendentes / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
-          icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />'
+          Icon={Clock}
           color="warning"
         />
         
@@ -310,7 +311,7 @@
           title="Aprovadas" 
           value={stats.aprovadas} 
           description="{stats.total > 0 ? ((stats.aprovadas / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
-          icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />'
+          Icon={CheckCircle2}
           color="success"
         />
         
@@ -318,7 +319,7 @@
           title="Rejeitadas" 
           value={stats.rejeitadas} 
           description="{stats.total > 0 ? ((stats.rejeitadas / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
-          icon='<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />'
+          Icon={XCircle}
           color="error"
         />
       </div>
-- 
2.49.1


From 616604373526793a37af4356e569410e11590aea Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Wed, 5 Nov 2025 14:05:52 -0300
Subject: [PATCH 4/6] feat: enhance ErrorModal and chat components with new
 features and improvements

- Refactored ErrorModal to utilize a dialog element for better accessibility and user experience, including a close button with an icon.
- Updated chat components to improve participant display and message read status, enhancing user engagement and clarity.
- Introduced loading indicators for user and conversation data in SalaReuniaoManager to improve responsiveness during data fetching.
- Enhanced message handling in MessageList to indicate whether messages have been read, providing users with better feedback on message status.
- Improved overall structure and styling across various components for consistency and maintainability.
---
 apps/web/src/lib/components/ErrorModal.svelte |  73 +++++++---
 .../WizardSolicitacaoAusencia.svelte          |   1 -
 .../src/lib/components/chat/ChatWindow.svelte |  37 ++---
 .../lib/components/chat/MessageList.svelte    |  92 ++++++++++++
 .../components/chat/SalaReuniaoManager.svelte | 133 +++++++++++++-----
 .../chat/ScheduleMessageModal.svelte          |   1 +
 .../routes/(dashboard)/perfil/+page.svelte    |  37 +++--
 packages/backend/convex/chat.ts               | 123 +++++++++++++---
 packages/backend/convex/schema.ts             |   1 +
 9 files changed, 394 insertions(+), 104 deletions(-)

diff --git a/apps/web/src/lib/components/ErrorModal.svelte b/apps/web/src/lib/components/ErrorModal.svelte
index 410886c..ba035d8 100644
--- a/apps/web/src/lib/components/ErrorModal.svelte
+++ b/apps/web/src/lib/components/ErrorModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AlertCircle } from "lucide-svelte";
+  import { AlertCircle, X } from "lucide-svelte";
   
   interface Props {
     open: boolean;
@@ -16,28 +16,67 @@
     details,
     onClose,
   }: Props = $props();
+
+  let modalRef: HTMLDialogElement;
+
+  function handleClose() {
+    open = false;
+    onClose();
+  }
+
+  $effect(() => {
+    if (open && modalRef) {
+      modalRef.showModal();
+    } else if (!open && modalRef) {
+      modalRef.close();
+    }
+  });
 </script>
 
 {#if open}
-  <div class="modal modal-open">
-    <div class="modal-box">
-      <h3 class="font-bold text-lg text-error mb-4 flex items-center gap-2">
-        <AlertCircle class="h-6 w-6" strokeWidth={2} />
-        {title}
-      </h3>
-      <p class="py-4 text-base-content">{message}</p>
-      {#if details}
-        <div class="bg-base-200 rounded-lg p-3 mb-4">
-          <p class="text-sm text-base-content/70 whitespace-pre-line">{details}</p>
-        </div>
-      {/if}
-      <div class="modal-action">
-        <button class="btn btn-primary" onclick={() => { open = false; onClose(); }}>
+  <dialog 
+    bind:this={modalRef} 
+    class="modal" 
+    onclick={(e) => e.target === e.currentTarget && handleClose()}
+  >
+    <div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
+      <!-- Header -->
+      <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
+        <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2 text-error">
+          <AlertCircle class="w-5 h-5" strokeWidth={2} />
+          {title}
+        </h2>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm btn-circle"
+          onclick={handleClose}
+          aria-label="Fechar"
+        >
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="px-6 py-6">
+        <p class="text-base-content mb-4">{message}</p>
+        {#if details}
+          <div class="bg-base-200 rounded-lg p-4 mb-4">
+            <p class="text-sm text-base-content/70 whitespace-pre-line">{details}</p>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Footer -->
+      <div class="modal-action px-6 pb-6">
+        <button class="btn btn-primary" onclick={handleClose}>
           Fechar
         </button>
       </div>
     </div>
-    <div class="modal-backdrop" onclick={() => { open = false; onClose(); }}></div>
-  </div>
+
+    <form method="dialog" class="modal-backdrop">
+      <button type="button" onclick={handleClose}>fechar</button>
+    </form>
+  </dialog>
 {/if}
 
diff --git a/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte b/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
index 518a403..319c97f 100644
--- a/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
+++ b/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
@@ -158,7 +158,6 @@
 <div class="wizard-ausencia">
   <!-- Header -->
   <div class="mb-6">
-    <h2 class="text-3xl font-bold text-primary mb-2">Nova Solicitação de Ausência</h2>
     <p class="text-base-content/70">Solicite uma ausência para assuntos particulares</p>
   </div>
 
diff --git a/apps/web/src/lib/components/chat/ChatWindow.svelte b/apps/web/src/lib/components/chat/ChatWindow.svelte
index 39fe45a..63115d9 100644
--- a/apps/web/src/lib/components/chat/ChatWindow.svelte
+++ b/apps/web/src/lib/components/chat/ChatWindow.svelte
@@ -168,22 +168,27 @@
             {conversa()?.participantesInfo?.length || 0} {conversa()?.participantesInfo?.length === 1 ? "participante" : "participantes"}
           </p>
           {#if conversa()?.participantesInfo && conversa()?.participantesInfo.length > 0}
-            <div class="flex -space-x-2">
-              {#each conversa()?.participantesInfo.slice(0, 5) as participante (participante._id)}
-                <div class="relative w-5 h-5 rounded-full border-2 border-base-200 overflow-hidden bg-base-200" title={participante.nome}>
-                  {#if participante.fotoPerfilUrl}
-                    <img src={participante.fotoPerfilUrl} alt={participante.nome} class="w-full h-full object-cover" />
-                  {:else if participante.avatar}
-                    <img src={getAvatarUrl(participante.avatar)} alt={participante.nome} class="w-full h-full object-cover" />
-                  {:else}
-                    <img src={getAvatarUrl(participante.nome)} alt={participante.nome} class="w-full h-full object-cover" />
-                  {/if}
-                </div>
-              {/each}
-              {#if conversa()?.participantesInfo.length > 5}
-                <div class="w-5 h-5 rounded-full border-2 border-base-200 bg-base-300 flex items-center justify-center text-[8px] font-semibold text-base-content/70" title={`+${conversa()?.participantesInfo.length - 5} mais`}>
-                  +{conversa()?.participantesInfo.length - 5}
-                </div>
+            <div class="flex items-center gap-2">
+              <div class="flex -space-x-2">
+                {#each conversa()?.participantesInfo.slice(0, 5) as participante (participante._id)}
+                  <div class="relative w-5 h-5 rounded-full border-2 border-base-200 overflow-hidden bg-base-200" title={participante.nome}>
+                    {#if participante.fotoPerfilUrl}
+                      <img src={participante.fotoPerfilUrl} alt={participante.nome} class="w-full h-full object-cover" />
+                    {:else if participante.avatar}
+                      <img src={getAvatarUrl(participante.avatar)} alt={participante.nome} class="w-full h-full object-cover" />
+                    {:else}
+                      <img src={getAvatarUrl(participante.nome)} alt={participante.nome} class="w-full h-full object-cover" />
+                    {/if}
+                  </div>
+                {/each}
+                {#if conversa()?.participantesInfo.length > 5}
+                  <div class="w-5 h-5 rounded-full border-2 border-base-200 bg-base-300 flex items-center justify-center text-[8px] font-semibold text-base-content/70" title={`+${conversa()?.participantesInfo.length - 5} mais`}>
+                    +{conversa()?.participantesInfo.length - 5}
+                  </div>
+                {/if}
+              </div>
+              {#if conversa()?.tipo === "sala_reuniao" && isAdmin?.data}
+                <span class="text-[10px] text-primary font-semibold ml-1 whitespace-nowrap" title="Você é administrador desta sala">• Admin</span>
               {/if}
             </div>
           {/if}
diff --git a/apps/web/src/lib/components/chat/MessageList.svelte b/apps/web/src/lib/components/chat/MessageList.svelte
index 44b056b..84e7d8c 100644
--- a/apps/web/src/lib/components/chat/MessageList.svelte
+++ b/apps/web/src/lib/components/chat/MessageList.svelte
@@ -17,6 +17,7 @@
   const mensagens = useQuery(api.chat.obterMensagens, { conversaId, limit: 50 });
   const digitando = useQuery(api.chat.obterDigitando, { conversaId });
   const isAdmin = useQuery(api.chat.verificarSeEhAdmin, { conversaId });
+  const conversas = useQuery(api.chat.listarConversas, {});
 
   let messagesContainer: HTMLDivElement;
   let shouldScrollToBottom = true;
@@ -236,6 +237,7 @@
     editadaEm?: number;
     deletada?: boolean;
     agendadaPara?: number;
+    minutosPara?: number;
     respostaPara?: Id<"mensagens">;
     mensagemOriginal?: {
       _id: Id<"mensagens">;
@@ -260,6 +262,7 @@
       imagem?: string;
       site?: string;
     } | null;
+    lidaPor?: Id<"usuarios">[]; // IDs dos usuários que leram a mensagem
   }
 
   function agruparMensagensPorDia(msgs: Mensagem[]): Record<string, Mensagem[]> {
@@ -369,6 +372,48 @@
     });
     window.dispatchEvent(event);
   }
+
+  // Obter informações da conversa atual
+  const conversaAtual = $derived(() => {
+    if (!conversas?.data) return null;
+    return (conversas.data as any[]).find((c) => c._id === conversaId) || null;
+  });
+
+  // Função para determinar se uma mensagem foi lida
+  function mensagemFoiLida(mensagem: Mensagem): boolean {
+    if (!mensagem.lidaPor || mensagem.lidaPor.length === 0) return false;
+    if (!conversaAtual() || !usuarioAtualId) return false;
+
+    const conversa = conversaAtual();
+    if (!conversa) return false;
+
+    // Converter lidaPor para strings para comparação
+    const lidaPorStr = mensagem.lidaPor.map((id) => String(id));
+
+    // Para conversas individuais: verificar se o outro participante leu
+    if (conversa.tipo === "individual") {
+      const outroParticipante = conversa.participantes?.find(
+        (p: any) => String(p) !== usuarioAtualId
+      );
+      if (outroParticipante) {
+        return lidaPorStr.includes(String(outroParticipante));
+      }
+    }
+
+    // Para grupos/salas: verificar se pelo menos um outro participante leu
+    if (conversa.tipo === "grupo" || conversa.tipo === "sala_reuniao") {
+      const outrosParticipantes = conversa.participantes?.filter(
+        (p: any) => String(p) !== usuarioAtualId && String(p) !== String(mensagem.remetenteId)
+      ) || [];
+      if (outrosParticipantes.length === 0) return false;
+      // Verificar se pelo menos um outro participante leu
+      return outrosParticipantes.some((p: any) =>
+        lidaPorStr.includes(String(p))
+      );
+    }
+
+    return false;
+  }
 </script>
 
 <div
@@ -584,6 +629,53 @@
             <p class="text-xs text-base-content/50">
               {formatarDataMensagem(mensagem.enviadaEm)}
             </p>
+            {#if isMinha && !mensagem.deletada && !mensagem.agendadaPara}
+              <!-- Indicadores de status de envio e leitura -->
+              <div class="flex items-center gap-0.5 ml-1">
+                {#if mensagemFoiLida(mensagem)}
+                  <!-- Dois checks azuis para mensagem lida -->
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    class="w-3.5 h-3.5 text-blue-500"
+                    style="margin-left: -2px;"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    class="w-3.5 h-3.5 text-blue-500"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                {:else}
+                  <!-- Um check verde para mensagem enviada -->
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    class="w-3.5 h-3.5 text-green-500"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                {/if}
+              </div>
+            {/if}
             {#if !mensagem.deletada && !mensagem.agendadaPara}
               <div class="flex gap-1">
                 {#if isMinha}
diff --git a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
index 56b776f..b46b875 100644
--- a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
+++ b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
@@ -16,7 +16,7 @@
 
   const client = useConvexClient();
   const conversas = useQuery(api.chat.listarConversas, {});
-  const todosUsuarios = useQuery(api.chat.listarTodosUsuarios, {});
+  const todosUsuariosQuery = useQuery(api.chat.listarTodosUsuarios, {});
 
   let activeTab = $state<"participantes" | "adicionar">("participantes");
   let searchQuery = $state("");
@@ -28,15 +28,52 @@
     return conversas.data.find((c: any) => c._id === conversaId);
   });
 
+  const todosUsuarios = $derived(() => {
+    return todosUsuariosQuery?.data || [];
+  });
+
   const participantes = $derived(() => {
-    if (!conversa() || !todosUsuarios) return [];
-    const participantesIds = conversa()?.participantesInfo || [];
-    return participantesIds
-      .map((p: any) => {
-        const usuario = todosUsuarios.find((u: any) => u._id === p._id);
-        return usuario ? { ...usuario, ...p } : null;
-      })
-      .filter((p: any) => p !== null);
+    try {
+      const conv = conversa();
+      const usuarios = todosUsuarios();
+      if (!conv || !usuarios || usuarios.length === 0) return [];
+      
+      const participantesInfo = conv.participantesInfo || [];
+      if (!Array.isArray(participantesInfo) || participantesInfo.length === 0) return [];
+      
+      return participantesInfo
+        .map((p: any) => {
+          try {
+            // p pode ser um objeto com _id ou apenas um ID
+            const participanteId = p?._id || p;
+            if (!participanteId) return null;
+            
+            const usuario = usuarios.find((u: any) => {
+              try {
+                return String(u?._id) === String(participanteId);
+              } catch {
+                return false;
+              }
+            });
+            if (!usuario) return null;
+            
+            // Combinar dados do usuário com dados do participante (se p for objeto)
+            return {
+              ...usuario,
+              ...(typeof p === 'object' && p !== null && p !== undefined ? p : {}),
+              // Garantir que _id existe e priorizar o do usuario
+              _id: usuario._id
+            };
+          } catch (err) {
+            console.error("Erro ao processar participante:", err, p);
+            return null;
+          }
+        })
+        .filter((p: any) => p !== null && p._id);
+    } catch (err) {
+      console.error("Erro ao calcular participantes:", err);
+      return [];
+    }
   });
 
   const administradoresIds = $derived(() => {
@@ -44,27 +81,31 @@
   });
 
   const usuariosDisponiveis = $derived(() => {
-    if (!todosUsuarios) return [];
+    const usuarios = todosUsuarios();
+    if (!usuarios || usuarios.length === 0) return [];
     const participantesIds = conversa()?.participantes || [];
-    return todosUsuarios.filter((u: any) => !participantesIds.includes(u._id));
+    return usuarios.filter((u: any) => !participantesIds.some((pid: any) => String(pid) === String(u._id)));
   });
 
   const usuariosFiltrados = $derived(() => {
-    if (!searchQuery.trim()) return usuariosDisponiveis();
+    const disponiveis = usuariosDisponiveis();
+    if (!searchQuery.trim()) return disponiveis;
     const query = searchQuery.toLowerCase();
-    return usuariosDisponiveis().filter((u: any) =>
-      u.nome.toLowerCase().includes(query) ||
-      u.email.toLowerCase().includes(query) ||
-      u.matricula.toLowerCase().includes(query)
+    return disponiveis.filter((u: any) =>
+      (u.nome || "").toLowerCase().includes(query) ||
+      (u.email || "").toLowerCase().includes(query) ||
+      (u.matricula || "").toLowerCase().includes(query)
     );
   });
 
   function isParticipanteAdmin(usuarioId: string): boolean {
-    return administradoresIds().includes(usuarioId as any);
+    const admins = administradoresIds();
+    return admins.some((adminId: any) => String(adminId) === String(usuarioId));
   }
 
   function isCriador(usuarioId: string): boolean {
-    return conversa()?.criadoPor === usuarioId;
+    const criadoPor = conversa()?.criadoPor;
+    return criadoPor ? String(criadoPor) === String(usuarioId) : false;
   }
 
   async function removerParticipante(participanteId: string) {
@@ -207,14 +248,27 @@
 
     <!-- Content -->
     <div class="flex-1 overflow-y-auto px-6">
-      {#if activeTab === "participantes"}
+      {#if !conversas?.data}
+        <!-- Loading conversas -->
+        <div class="flex items-center justify-center py-8">
+          <span class="loading loading-spinner loading-lg"></span>
+          <span class="ml-2 text-sm text-base-content/60">Carregando conversa...</span>
+        </div>
+      {:else if !todosUsuariosQuery?.data}
+        <!-- Loading usuários -->
+        <div class="flex items-center justify-center py-8">
+          <span class="loading loading-spinner loading-lg"></span>
+          <span class="ml-2 text-sm text-base-content/60">Carregando usuários...</span>
+        </div>
+      {:else if activeTab === "participantes"}
         <!-- Lista de Participantes -->
         <div class="space-y-2 py-2">
           {#if participantes().length > 0}
-            {#each participantes() as participante (participante._id)}
-              {@const ehAdmin = isParticipanteAdmin(participante._id)}
-              {@const ehCriador = isCriador(participante._id)}
-              {@const isLoading = loading?.includes(participante._id)}
+            {#each participantes() as participante (String(participante._id))}
+              {@const participanteId = String(participante._id)}
+              {@const ehAdmin = isParticipanteAdmin(participanteId)}
+              {@const ehCriador = isCriador(participanteId)}
+              {@const isLoading = loading?.includes(participanteId)}
               <div
                 class="flex items-center gap-3 p-3 rounded-lg border border-base-300 hover:bg-base-200 transition-colors"
               >
@@ -222,19 +276,19 @@
                 <div class="relative flex-shrink-0">
                   <UserAvatar
                     avatar={participante.avatar}
-                    fotoPerfilUrl={participante.fotoPerfilUrl}
-                    nome={participante.nome}
+                    fotoPerfilUrl={participante.fotoPerfilUrl || participante.fotoPerfil}
+                    nome={participante.nome || "Usuário"}
                     size="sm"
                   />
                   <div class="absolute bottom-0 right-0">
-                    <UserStatusBadge status={participante.statusPresenca} size="sm" />
+                    <UserStatusBadge status={participante.statusPresenca || "offline"} size="sm" />
                   </div>
                 </div>
 
                 <!-- Info -->
                 <div class="flex-1 min-w-0">
                   <div class="flex items-center gap-2">
-                    <p class="font-medium text-base-content truncate">{participante.nome}</p>
+                    <p class="font-medium text-base-content truncate">{participante.nome || "Usuário"}</p>
                     {#if ehAdmin}
                       <span class="badge badge-primary badge-sm">Admin</span>
                     {/if}
@@ -243,7 +297,7 @@
                     {/if}
                   </div>
                   <p class="text-sm text-base-content/60 truncate">
-                    {participante.setor || participante.email}
+                    {participante.setor || participante.email || ""}
                   </p>
                 </div>
 
@@ -254,7 +308,7 @@
                       <button
                         type="button"
                         class="btn btn-xs btn-ghost"
-                        onclick={() => rebaixarAdmin(participante._id)}
+                        onclick={() => rebaixarAdmin(participanteId)}
                         disabled={isLoading}
                         title="Rebaixar administrador"
                       >
@@ -268,7 +322,7 @@
                       <button
                         type="button"
                         class="btn btn-xs btn-ghost"
-                        onclick={() => promoverAdmin(participante._id)}
+                        onclick={() => promoverAdmin(participanteId)}
                         disabled={isLoading}
                         title="Promover a administrador"
                       >
@@ -282,7 +336,7 @@
                     <button
                       type="button"
                       class="btn btn-xs btn-error btn-ghost"
-                      onclick={() => removerParticipante(participante._id)}
+                      onclick={() => removerParticipante(participanteId)}
                       disabled={isLoading}
                       title="Remover participante"
                     >
@@ -316,32 +370,33 @@
 
         <div class="space-y-2">
           {#if usuariosFiltrados().length > 0}
-            {#each usuariosFiltrados() as usuario (usuario._id)}
-              {@const isLoading = loading?.includes(usuario._id)}
+            {#each usuariosFiltrados() as usuario (String(usuario._id))}
+              {@const usuarioId = String(usuario._id)}
+              {@const isLoading = loading?.includes(usuarioId)}
               <button
                 type="button"
                 class="w-full text-left px-4 py-3 rounded-lg border border-base-300 hover:bg-base-200 transition-colors flex items-center gap-3"
-                onclick={() => adicionarParticipante(usuario._id)}
+                onclick={() => adicionarParticipante(usuarioId)}
                 disabled={isLoading}
               >
                 <!-- Avatar -->
                 <div class="relative flex-shrink-0">
                   <UserAvatar
                     avatar={usuario.avatar}
-                    fotoPerfilUrl={usuario.fotoPerfilUrl}
-                    nome={usuario.nome}
+                    fotoPerfilUrl={usuario.fotoPerfilUrl || usuario.fotoPerfil}
+                    nome={usuario.nome || "Usuário"}
                     size="sm"
                   />
                   <div class="absolute bottom-0 right-0">
-                    <UserStatusBadge status={usuario.statusPresenca} size="sm" />
+                    <UserStatusBadge status={usuario.statusPresenca || "offline"} size="sm" />
                   </div>
                 </div>
 
                 <!-- Info -->
                 <div class="flex-1 min-w-0">
-                  <p class="font-medium text-base-content truncate">{usuario.nome}</p>
+                  <p class="font-medium text-base-content truncate">{usuario.nome || "Usuário"}</p>
                   <p class="text-sm text-base-content/60 truncate">
-                    {usuario.setor || usuario.email}
+                    {usuario.setor || usuario.email || ""}
                   </p>
                 </div>
 
diff --git a/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte b/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
index 03dbf74..839814c 100644
--- a/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
+++ b/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
@@ -4,6 +4,7 @@
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
   import { format } from "date-fns";
   import { ptBR } from "date-fns/locale";
+  import { Clock, X, Trash2 } from "lucide-svelte";
 
   interface Props {
     conversaId: Id<"conversas">;
diff --git a/apps/web/src/routes/(dashboard)/perfil/+page.svelte b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
index 9d0daec..7b5f532 100644
--- a/apps/web/src/routes/(dashboard)/perfil/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
@@ -10,6 +10,7 @@
   import { generateAvatarGallery, type Avatar } from "$lib/utils/avatars";
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
   import { page } from "$app/stores";
+  import { X, Calendar } from "lucide-svelte";
 
   const client = useConvexClient();
 
@@ -2218,12 +2219,29 @@
 
 <!-- Modal Wizard Solicitação de Ausência -->
 {#if mostrarWizardAusencia && funcionarioIdDisponivel}
-  <dialog class="modal modal-open">
-    <div class="modal-box max-w-4xl max-h-[90vh] overflow-hidden">
-      <h3 class="font-bold text-2xl mb-6 text-center">
-        Nova Solicitação de Ausência
-      </h3>
-      <div class="max-h-[80vh] overflow-y-auto">
+  <dialog 
+    class="modal modal-open" 
+    onclick={(e) => e.target === e.currentTarget && (mostrarWizardAusencia = false)}
+  >
+    <div class="modal-box max-w-4xl max-h-[90vh] flex flex-col p-0" onclick={(e) => e.stopPropagation()}>
+      <!-- Header -->
+      <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
+        <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2">
+          <Calendar class="w-5 h-5 text-primary" />
+          Nova Solicitação de Ausência
+        </h2>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm btn-circle"
+          onclick={() => (mostrarWizardAusencia = false)}
+          aria-label="Fechar"
+        >
+          <X class="w-5 h-5" />
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 overflow-y-auto p-6">
         <WizardSolicitacaoAusencia
           funcionarioId={funcionarioIdDisponivel}
           onSucesso={async () => {
@@ -2242,9 +2260,10 @@
         />
       </div>
     </div>
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="modal-backdrop" onclick={() => (mostrarWizardAusencia = false)}></div>
+
+    <form method="dialog" class="modal-backdrop">
+      <button type="button" onclick={() => (mostrarWizardAusencia = false)}>fechar</button>
+    </form>
   </dialog>
 {/if}
 
diff --git a/packages/backend/convex/chat.ts b/packages/backend/convex/chat.ts
index 127b3bf..2ef4646 100644
--- a/packages/backend/convex/chat.ts
+++ b/packages/backend/convex/chat.ts
@@ -346,6 +346,7 @@ export const enviarMensagem = mutation({
       mencoes: args.mencoes,
       respostaPara: args.respostaPara,
       enviadaEm: Date.now(),
+      lidaPor: [], // Inicializar como array vazio
     });
 
     // Detectar URLs no conteúdo e extrair preview (apenas para mensagens de texto, assíncrono)
@@ -495,14 +496,19 @@ export const agendarMensagem = mutation({
       throw new Error("Você não pertence a esta conversa");
     }
 
+    // Normalizar conteúdo para busca
+    const conteudoBusca = normalizarTextoParaBusca(args.conteudo);
+
     // Criar mensagem agendada
     const mensagemId = await ctx.db.insert("mensagens", {
       conversaId: args.conversaId,
       remetenteId: usuarioAtual._id,
       tipo: "texto",
       conteudo: args.conteudo,
+      conteudoBusca,
       agendadaPara: args.agendadaPara,
-      enviadaEm: args.agendadaPara, // Será usada quando a mensagem for enviada
+      enviadaEm: args.agendadaPara, // Será atualizado quando a mensagem for enviada
+      lidaPor: [], // Inicializar como array vazio
     });
 
     return mensagemId;
@@ -662,6 +668,29 @@ export const marcarComoLida = mutation({
       });
     }
 
+    // Atualizar status de leitura nas mensagens
+    // Buscar todas as mensagens até a mensagem atual (incluindo ela) na conversa
+    const todasMensagens = await ctx.db
+      .query("mensagens")
+      .withIndex("by_conversa", (q) => q.eq("conversaId", args.conversaId))
+      .filter((q) => 
+        q.and(
+          q.lte(q.field("enviadaEm"), mensagem.enviadaEm),
+          q.neq(q.field("remetenteId"), usuarioAtual._id) // Apenas mensagens de outros usuários
+        )
+      )
+      .collect();
+
+    // Atualizar cada mensagem para incluir o usuário atual no array lidaPor (se ainda não estiver)
+    for (const msg of todasMensagens) {
+      const lidaPor = msg.lidaPor || [];
+      if (!lidaPor.includes(usuarioAtual._id)) {
+        await ctx.db.patch(msg._id, {
+          lidaPor: [...lidaPor, usuarioAtual._id],
+        });
+      }
+    }
+
     // Marcar notificações desta conversa como lidas
     const notificacoes = await ctx.db
       .query("notificacoes")
@@ -1455,16 +1484,33 @@ export const enviarNotificacaoReuniao = mutation({
 
     // Criar notificação para todos os participantes
     for (const participanteId of conversa.participantes) {
+      const tituloNotificacao = args.titulo || "Notificação da sala de reunião";
+      const descricaoNotificacao = args.mensagem.substring(0, 100); // Limitar descrição para push
+      
+      // Criar notificação no banco
       await ctx.db.insert("notificacoes", {
         usuarioId: participanteId,
         tipo: "nova_mensagem",
         conversaId: args.conversaId,
         remetenteId: usuarioAtual._id,
-        titulo: args.titulo || "Notificação da sala de reunião",
+        titulo: tituloNotificacao,
         descricao: args.mensagem,
         lida: false,
         criadaEm: Date.now(),
       });
+
+      // Enviar push notification (assíncrono, não bloqueia)
+      ctx.scheduler.runAfter(0, internal.pushNotifications.enviarPushNotification, {
+        usuarioId: participanteId,
+        titulo: tituloNotificacao,
+        corpo: descricaoNotificacao,
+        data: {
+          conversaId: args.conversaId,
+          tipo: "notificacao_reuniao",
+        },
+      }).catch((error) => {
+        console.error(`Erro ao agendar push para usuário ${participanteId}:`, error);
+      });
     }
 
     return { sucesso: true };
@@ -1952,6 +1998,13 @@ export const listarTodosUsuarios = query({
             const funcionario = await ctx.db.get(u.funcionarioId);
             matricula = funcionario?.matricula;
           }
+          
+          // Buscar URL da foto de perfil se existir
+          let fotoPerfilUrl: string | null = null;
+          if (u.fotoPerfil) {
+            fotoPerfilUrl = await ctx.storage.getUrl(u.fotoPerfil);
+          }
+          
           return {
             _id: u._id,
             nome: u.nome,
@@ -1959,6 +2012,7 @@ export const listarTodosUsuarios = query({
             matricula,
             avatar: u.avatar,
             fotoPerfil: u.fotoPerfil,
+            fotoPerfilUrl,
             statusPresenca: u.statusPresenca,
             statusMensagem: u.statusMensagem,
             setor: u.setor,
@@ -2246,22 +2300,23 @@ export const enviarMensagensAgendadas = internalMutation({
     const agora = Date.now();
 
     // Buscar mensagens que deveriam ser enviadas
+    // Como o índice by_agendamento indexa por agendadaPara, podemos usar range query
+    // Buscar mensagens com agendadaPara entre 0 e agora (mensagens agendadas que já devem ser enviadas)
+    // Valores undefined não aparecem no índice, então só buscamos mensagens realmente agendadas
     const mensagensAgendadas = await ctx.db
       .query("mensagens")
-      .withIndex("by_agendamento")
-      .filter((q) =>
-        q.and(
-          q.neq(q.field("agendadaPara"), undefined),
-          q.lte(q.field("agendadaPara"), agora)
-        )
-      )
+      .withIndex("by_agendamento", (q) => q.gte("agendadaPara", 0).lte("agendadaPara", agora))
       .collect();
 
     for (const mensagem of mensagensAgendadas) {
+      // Normalizar conteúdo para busca (se ainda não foi feito)
+      const conteudoBusca = mensagem.conteudoBusca || normalizarTextoParaBusca(mensagem.conteudo);
+      
       // Atualizar mensagem para "enviada"
       await ctx.db.patch(mensagem._id, {
         agendadaPara: undefined,
         enviadaEm: agora,
+        conteudoBusca: conteudoBusca, // Garantir que tem conteúdo de busca
       });
 
       // Atualizar última mensagem da conversa
@@ -2275,19 +2330,43 @@ export const enviarMensagensAgendadas = internalMutation({
 
         // Criar notificações para outros participantes
         const remetente = await ctx.db.get(mensagem.remetenteId);
-        for (const participanteId of conversa.participantes) {
-          if (participanteId !== mensagem.remetenteId) {
-            await ctx.db.insert("notificacoes", {
-              usuarioId: participanteId,
-              tipo: "nova_mensagem",
-              conversaId: mensagem.conversaId,
-              mensagemId: mensagem._id,
-              remetenteId: mensagem.remetenteId,
-              titulo: `Nova mensagem de ${remetente?.nome || "Usuário"}`,
-              descricao: mensagem.conteudo.substring(0, 100),
-              lida: false,
-              criadaEm: agora,
-            });
+        if (remetente) {
+          // Determinar tipo de notificação (se há menções)
+          const tipoNotificacao = mensagem.mencoes && mensagem.mencoes.length > 0 ? "mencao" : "nova_mensagem";
+          const titulo = tipoNotificacao === "mencao"
+            ? `${remetente.nome} mencionou você`
+            : `Nova mensagem de ${remetente.nome}`;
+          const descricao = mensagem.conteudo.substring(0, 100);
+
+          for (const participanteId of conversa.participantes) {
+            if (participanteId !== mensagem.remetenteId) {
+              // Criar notificação no banco
+              await ctx.db.insert("notificacoes", {
+                usuarioId: participanteId,
+                tipo: tipoNotificacao,
+                conversaId: mensagem.conversaId,
+                mensagemId: mensagem._id,
+                remetenteId: mensagem.remetenteId,
+                titulo,
+                descricao,
+                lida: false,
+                criadaEm: agora,
+              });
+
+              // Enviar push notification (assíncrono, não bloqueia)
+              ctx.scheduler.runAfter(0, internal.pushNotifications.enviarPushNotification, {
+                usuarioId: participanteId,
+                titulo,
+                corpo: descricao,
+                data: {
+                  conversaId: mensagem.conversaId,
+                  mensagemId: mensagem._id,
+                  tipo: tipoNotificacao,
+                },
+              }).catch((error) => {
+                console.error(`Erro ao agendar push para usuário ${participanteId}:`, error);
+              });
+            }
           }
         }
       }
diff --git a/packages/backend/convex/schema.ts b/packages/backend/convex/schema.ts
index 7a3fb75..c5b501e 100644
--- a/packages/backend/convex/schema.ts
+++ b/packages/backend/convex/schema.ts
@@ -671,6 +671,7 @@ export default defineSchema({
     enviadaEm: v.number(),
     editadaEm: v.optional(v.number()),
     deletada: v.optional(v.boolean()),
+    lidaPor: v.optional(v.array(v.id("usuarios"))), // IDs dos usuários que leram a mensagem
   })
     .index("by_conversa", ["conversaId", "enviadaEm"])
     .index("by_remetente", ["remetenteId"])
-- 
2.49.1


From 1b02ea7c22aa3287a305d5afb0a1688fcf44b735 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Wed, 5 Nov 2025 15:06:41 -0300
Subject: [PATCH 5/6] feat: enhance notification management with new clearing
 functionalities

- Added functionality to clear all notifications and clear unread notifications for improved user control.
- Updated NotificationBell component to support modal display for notifications, enhancing user experience.
- Refactored notification handling to separate read and unread notifications, providing clearer organization.
- Introduced new UI elements for managing notifications, including buttons for clearing notifications directly from the modal.
- Improved backend mutations to handle notification deletion securely, ensuring users can only delete their own notifications.
---
 .../components/chat/NotificationBell.svelte   | 471 ++++++++++++------
 .../(dashboard)/ti/notificacoes/+page.svelte  |  32 +-
 packages/backend/convex/chat.ts               |  48 ++
 3 files changed, 394 insertions(+), 157 deletions(-)

diff --git a/apps/web/src/lib/components/chat/NotificationBell.svelte b/apps/web/src/lib/components/chat/NotificationBell.svelte
index 6bf2489..76505b6 100644
--- a/apps/web/src/lib/components/chat/NotificationBell.svelte
+++ b/apps/web/src/lib/components/chat/NotificationBell.svelte
@@ -6,27 +6,38 @@
   import { ptBR } from "date-fns/locale";
   import { onMount } from "svelte";
   import { authStore } from "$lib/stores/auth.svelte";
-  import { Bell, Mail, AtSign, Users, Calendar, Clock, BellOff } from "lucide-svelte";
+  import { Bell, Mail, AtSign, Users, Calendar, Clock, BellOff, Trash2, X } from "lucide-svelte";
 
   // Queries e Client
   const client = useConvexClient();
-  const notificacoesQuery = useQuery(api.chat.obterNotificacoes, {
-    apenasPendentes: true,
-  });
+  // Query para contar apenas não lidas (para o badge)
   const countQuery = useQuery(api.chat.contarNotificacoesNaoLidas, {});
+  // Query para obter TODAS as notificações (para o popup)
+  const todasNotificacoesQuery = useQuery(api.chat.obterNotificacoes, {
+    apenasPendentes: false,
+  });
 
-  let dropdownOpen = $state(false);
+  let modalOpen = $state(false);
   let notificacoesFerias = $state<Array<{ _id: string; mensagem: string; tipo: string; _creationTime: number }>>([]);
   let notificacoesAusencias = $state<Array<{ _id: string; mensagem: string; tipo: string; _creationTime: number }>>([]);
+  let limpandoNotificacoes = $state(false);
 
   // Helpers para obter valores das queries
   const count = $derived(
     (typeof countQuery === "number" ? countQuery : countQuery?.data) ?? 0
   );
-  const notificacoes = $derived(
-    (Array.isArray(notificacoesQuery)
-      ? notificacoesQuery
-      : notificacoesQuery?.data) ?? []
+  const todasNotificacoes = $derived(
+    (Array.isArray(todasNotificacoesQuery)
+      ? todasNotificacoesQuery
+      : todasNotificacoesQuery?.data) ?? []
+  );
+  
+  // Separar notificações lidas e não lidas
+  const notificacoesNaoLidas = $derived(
+    todasNotificacoes.filter((n) => !n.lida)
+  );
+  const notificacoesLidas = $derived(
+    todasNotificacoes.filter((n) => n.lida)
   );
 
   // Atualizar contador no store
@@ -122,16 +133,40 @@
         notificacaoId: notif._id,
       });
     }
-    dropdownOpen = false;
     await buscarNotificacoesFerias();
     await buscarNotificacoesAusencias();
   }
 
+  async function handleLimparTodasNotificacoes() {
+    limpandoNotificacoes = true;
+    try {
+      await client.mutation(api.chat.limparTodasNotificacoes, {});
+      await buscarNotificacoesFerias();
+      await buscarNotificacoesAusencias();
+    } catch (error) {
+      console.error("Erro ao limpar notificações:", error);
+    } finally {
+      limpandoNotificacoes = false;
+    }
+  }
+
+  async function handleLimparNotificacoesNaoLidas() {
+    limpandoNotificacoes = true;
+    try {
+      await client.mutation(api.chat.limparNotificacoesNaoLidas, {});
+      await buscarNotificacoesFerias();
+      await buscarNotificacoesAusencias();
+    } catch (error) {
+      console.error("Erro ao limpar notificações não lidas:", error);
+    } finally {
+      limpandoNotificacoes = false;
+    }
+  }
+
   async function handleClickNotificacao(notificacaoId: string) {
     await client.mutation(api.chat.marcarNotificacaoLida, {
       notificacaoId: notificacaoId as any,
     });
-    dropdownOpen = false;
   }
 
   async function handleClickNotificacaoFerias(notificacaoId: string) {
@@ -139,7 +174,6 @@
       notificacaoId: notificacaoId,
     });
     await buscarNotificacoesFerias();
-    dropdownOpen = false;
     // Redirecionar para a página de férias
     window.location.href = "/recursos-humanos/ferias";
   }
@@ -149,37 +183,52 @@
       notificacaoId: notificacaoId,
     });
     await buscarNotificacoesAusencias();
-    dropdownOpen = false;
     // Redirecionar para a página de perfil na aba de ausências
     window.location.href = "/perfil?aba=minhas-ausencias";
   }
 
-  function toggleDropdown() {
-    dropdownOpen = !dropdownOpen;
+  function openModal() {
+    modalOpen = true;
   }
 
-  // Fechar dropdown ao clicar fora
-  onMount(() => {
+  function closeModal() {
+    modalOpen = false;
+  }
+
+  // Fechar popup ao clicar fora ou pressionar Escape
+  $effect(() => {
+    if (!modalOpen) return;
+
     function handleClickOutside(event: MouseEvent) {
       const target = event.target as HTMLElement;
-      if (!target.closest(".notification-bell")) {
-        dropdownOpen = false;
+      if (!target.closest(".notification-popup") && !target.closest(".notification-bell")) {
+        modalOpen = false;
+      }
+    }
+
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        modalOpen = false;
       }
     }
 
     document.addEventListener("click", handleClickOutside);
-    return () => document.removeEventListener("click", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
   });
 </script>
 
-<div class="dropdown dropdown-end notification-bell">
+<div class="notification-bell relative">
   <!-- Botão de Notificação ULTRA MODERNO (igual ao perfil) -->
   <button
     type="button"
     tabindex="0"
     class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden group transition-all duration-300 hover:scale-105"
     style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
-    onclick={toggleDropdown}
+    onclick={openModal}
     aria-label="Notificações"
   >
     <!-- Efeito de brilho no hover -->
@@ -222,155 +271,263 @@
     {/if}
   </button>
 
-  {#if dropdownOpen}
-    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-    <div
-      tabindex="0"
-      class="dropdown-content z-50 mt-3 w-80 max-h-96 overflow-auto rounded-box bg-base-100 p-2 shadow-2xl border border-base-300"
-    >
-      <!-- Header -->
-      <div
-        class="flex items-center justify-between px-4 py-2 border-b border-base-300"
-      >
-        <h3 class="text-lg font-semibold">Notificações</h3>
-        {#if count > 0}
+<!-- Popup Flutuante de Notificações -->
+{#if modalOpen}
+  <div class="notification-popup fixed right-4 top-24 z-[100] w-[calc(100vw-2rem)] max-w-2xl max-h-[calc(100vh-7rem)] flex flex-col bg-base-100 rounded-2xl shadow-2xl border border-base-300 overflow-hidden backdrop-blur-sm" style="animation: slideDown 0.2s ease-out;">
+    <!-- Header -->
+    <div class="flex items-center justify-between px-6 py-4 border-b border-base-300 bg-gradient-to-r from-primary/5 to-primary/10">
+      <h3 class="text-2xl font-bold text-primary">Notificações</h3>
+      <div class="flex items-center gap-2">
+        {#if notificacoesNaoLidas.length > 0}
           <button
             type="button"
-            class="btn btn-ghost btn-xs"
-            onclick={handleMarcarTodasLidas}
+            class="btn btn-sm btn-ghost"
+            onclick={handleLimparNotificacoesNaoLidas}
+            disabled={limpandoNotificacoes}
           >
-            Marcar todas como lidas
+            <Trash2 class="w-4 h-4" />
+            Limpar não lidas
           </button>
         {/if}
+        {#if todasNotificacoes.length > 0}
+          <button
+            type="button"
+            class="btn btn-sm btn-error btn-outline"
+            onclick={handleLimparTodasNotificacoes}
+            disabled={limpandoNotificacoes}
+          >
+            <Trash2 class="w-4 h-4" />
+            Limpar todas
+          </button>
+        {/if}
+        <button
+          type="button"
+          class="btn btn-sm btn-circle btn-ghost"
+          onclick={closeModal}
+        >
+          <X class="w-5 h-5" />
+        </button>
       </div>
+    </div>
 
-      <!-- Lista de notificações -->
-      <div class="py-2">
-        {#if notificacoes.length > 0}
-          {#each notificacoes.slice(0, 10) as notificacao (notificacao._id)}
-            <button
-              type="button"
-              class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors"
-              onclick={() => handleClickNotificacao(notificacao._id)}
-            >
-              <div class="flex items-start gap-3">
-                <!-- Ícone -->
-                <div class="flex-shrink-0 mt-1">
-                  {#if notificacao.tipo === "nova_mensagem"}
-                    <Mail class="w-5 h-5 text-primary" strokeWidth={1.5} />
-                  {:else if notificacao.tipo === "mencao"}
-                    <AtSign class="w-5 h-5 text-warning" strokeWidth={1.5} />
-                  {:else}
-                    <Users class="w-5 h-5 text-info" strokeWidth={1.5} />
-                  {/if}
-                </div>
+    <!-- Lista de notificações -->
+    <div class="flex-1 overflow-y-auto px-2 py-4">
+        {#if todasNotificacoes.length > 0 || notificacoesFerias.length > 0 || notificacoesAusencias.length > 0}
+          <!-- Notificações não lidas -->
+          {#if notificacoesNaoLidas.length > 0}
+            <div class="mb-4">
+              <h4 class="text-sm font-semibold text-primary mb-2 px-2">Não lidas</h4>
+              {#each notificacoesNaoLidas as notificacao (notificacao._id)}
+                <button
+                  type="button"
+                  class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors mb-2 border-l-4 border-primary"
+                  onclick={() => handleClickNotificacao(notificacao._id)}
+                >
+                  <div class="flex items-start gap-3">
+                    <!-- Ícone -->
+                    <div class="flex-shrink-0 mt-1">
+                      {#if notificacao.tipo === "nova_mensagem"}
+                        <Mail class="w-5 h-5 text-primary" strokeWidth={1.5} />
+                      {:else if notificacao.tipo === "mencao"}
+                        <AtSign class="w-5 h-5 text-warning" strokeWidth={1.5} />
+                      {:else}
+                        <Users class="w-5 h-5 text-info" strokeWidth={1.5} />
+                      {/if}
+                    </div>
 
-                <!-- Conteúdo -->
-                <div class="flex-1 min-w-0">
-                  <p class="text-sm font-medium text-base-content">
-                    {notificacao.titulo}
-                  </p>
-                  <p class="text-xs text-base-content/70 truncate">
-                    {notificacao.descricao}
-                  </p>
-                  <p class="text-xs text-base-content/50 mt-1">
-                    {formatarTempo(notificacao.criadaEm)}
-                  </p>
-                </div>
+                    <!-- Conteúdo -->
+                    <div class="flex-1 min-w-0">
+                      {#if notificacao.tipo === "nova_mensagem" && notificacao.remetente}
+                        <p class="text-sm font-semibold text-primary">
+                          {notificacao.remetente.nome}
+                        </p>
+                        <p class="text-xs text-base-content/70 mt-1 line-clamp-2">
+                          {notificacao.descricao}
+                        </p>
+                      {:else if notificacao.tipo === "mencao" && notificacao.remetente}
+                        <p class="text-sm font-semibold text-warning">
+                          {notificacao.remetente.nome} mencionou você
+                        </p>
+                        <p class="text-xs text-base-content/70 mt-1 line-clamp-2">
+                          {notificacao.descricao}
+                        </p>
+                      {:else}
+                        <p class="text-sm font-semibold text-base-content">
+                          {notificacao.titulo}
+                        </p>
+                        <p class="text-xs text-base-content/70 mt-1 line-clamp-2">
+                          {notificacao.descricao}
+                        </p>
+                      {/if}
+                      <p class="text-xs text-base-content/50 mt-1">
+                        {formatarTempo(notificacao.criadaEm)}
+                      </p>
+                    </div>
 
-                <!-- Indicador de não lida -->
-                {#if !notificacao.lida}
-                  <div class="flex-shrink-0">
-                    <div class="w-2 h-2 rounded-full bg-primary"></div>
+                    <!-- Indicador de não lida -->
+                    <div class="flex-shrink-0">
+                      <div class="w-2 h-2 rounded-full bg-primary"></div>
+                    </div>
                   </div>
-                {/if}
-              </div>
-            </button>
-          {/each}
-        {/if}
-
-        <!-- Notificações de Férias -->
-        {#if notificacoesFerias.length > 0}
-          {#if notificacoes.length > 0}
-            <div class="divider my-2 text-xs">Férias</div>
+                </button>
+              {/each}
+            </div>
           {/if}
-          {#each notificacoesFerias.slice(0, 5) as notificacao (notificacao._id)}
-            <button
-              type="button"
-              class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors"
-              onclick={() => handleClickNotificacaoFerias(notificacao._id)}
-            >
-              <div class="flex items-start gap-3">
-                <!-- Ícone -->
-                <div class="flex-shrink-0 mt-1">
-                  <Calendar class="w-5 h-5 text-purple-600" strokeWidth={2} />
-                </div>
 
-                <!-- Conteúdo -->
-                <div class="flex-1 min-w-0">
-                  <p class="text-sm font-medium text-base-content">
-                    {notificacao.mensagem}
-                  </p>
-                  <p class="text-xs text-base-content/50 mt-1">
-                    {formatarTempo(notificacao._creationTime)}
-                  </p>
-                </div>
+          <!-- Notificações lidas -->
+          {#if notificacoesLidas.length > 0}
+            <div class="mb-4">
+              <h4 class="text-sm font-semibold text-base-content/60 mb-2 px-2">Lidas</h4>
+              {#each notificacoesLidas as notificacao (notificacao._id)}
+                <button
+                  type="button"
+                  class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors mb-2 opacity-75"
+                  onclick={() => handleClickNotificacao(notificacao._id)}
+                >
+                  <div class="flex items-start gap-3">
+                    <!-- Ícone -->
+                    <div class="flex-shrink-0 mt-1">
+                      {#if notificacao.tipo === "nova_mensagem"}
+                        <Mail class="w-5 h-5 text-primary/60" strokeWidth={1.5} />
+                      {:else if notificacao.tipo === "mencao"}
+                        <AtSign class="w-5 h-5 text-warning/60" strokeWidth={1.5} />
+                      {:else}
+                        <Users class="w-5 h-5 text-info/60" strokeWidth={1.5} />
+                      {/if}
+                    </div>
 
-                <!-- Badge -->
-                <div class="flex-shrink-0">
-                  <div class="badge badge-primary badge-xs"></div>
-                </div>
-              </div>
-            </button>
-          {/each}
-        {/if}
-
-        <!-- Notificações de Ausências -->
-        {#if notificacoesAusencias.length > 0}
-          {#if notificacoes.length > 0 || notificacoesFerias.length > 0}
-            <div class="divider my-2 text-xs">Ausências</div>
+                    <!-- Conteúdo -->
+                    <div class="flex-1 min-w-0">
+                      {#if notificacao.tipo === "nova_mensagem" && notificacao.remetente}
+                        <p class="text-sm font-medium text-primary/70">
+                          {notificacao.remetente.nome}
+                        </p>
+                        <p class="text-xs text-base-content/60 mt-1 line-clamp-2">
+                          {notificacao.descricao}
+                        </p>
+                      {:else if notificacao.tipo === "mencao" && notificacao.remetente}
+                        <p class="text-sm font-medium text-warning/70">
+                          {notificacao.remetente.nome} mencionou você
+                        </p>
+                        <p class="text-xs text-base-content/60 mt-1 line-clamp-2">
+                          {notificacao.descricao}
+                        </p>
+                      {:else}
+                        <p class="text-sm font-medium text-base-content/70">
+                          {notificacao.titulo}
+                        </p>
+                        <p class="text-xs text-base-content/60 mt-1 line-clamp-2">
+                          {notificacao.descricao}
+                        </p>
+                      {/if}
+                      <p class="text-xs text-base-content/50 mt-1">
+                        {formatarTempo(notificacao.criadaEm)}
+                      </p>
+                    </div>
+                  </div>
+                </button>
+              {/each}
+            </div>
           {/if}
-          {#each notificacoesAusencias.slice(0, 5) as notificacao (notificacao._id)}
-            <button
-              type="button"
-              class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors"
-              onclick={() => handleClickNotificacaoAusencias(notificacao._id)}
-            >
-              <div class="flex items-start gap-3">
-                <!-- Ícone -->
-                <div class="flex-shrink-0 mt-1">
-                  <Clock class="w-5 h-5 text-orange-600" strokeWidth={2} />
-                </div>
 
-                <!-- Conteúdo -->
-                <div class="flex-1 min-w-0">
-                  <p class="text-sm font-medium text-base-content">
-                    {notificacao.mensagem}
-                  </p>
-                  <p class="text-xs text-base-content/50 mt-1">
-                    {formatarTempo(notificacao._creationTime)}
-                  </p>
-                </div>
+          <!-- Notificações de Férias -->
+          {#if notificacoesFerias.length > 0}
+            <div class="mb-4">
+              <h4 class="text-sm font-semibold text-purple-600 mb-2 px-2">Férias</h4>
+              {#each notificacoesFerias as notificacao (notificacao._id)}
+                <button
+                  type="button"
+                  class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors mb-2 border-l-4 border-purple-600"
+                  onclick={() => handleClickNotificacaoFerias(notificacao._id)}
+                >
+                  <div class="flex items-start gap-3">
+                    <!-- Ícone -->
+                    <div class="flex-shrink-0 mt-1">
+                      <Calendar class="w-5 h-5 text-purple-600" strokeWidth={2} />
+                    </div>
 
-                <!-- Badge -->
-                <div class="flex-shrink-0">
-                  <div class="badge badge-warning badge-xs"></div>
-                </div>
-              </div>
-            </button>
-          {/each}
-        {/if}
+                    <!-- Conteúdo -->
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium text-base-content">
+                        {notificacao.mensagem}
+                      </p>
+                      <p class="text-xs text-base-content/50 mt-1">
+                        {formatarTempo(notificacao._creationTime)}
+                      </p>
+                    </div>
 
-        <!-- Sem notificações -->
-        {#if notificacoes.length === 0 && notificacoesFerias.length === 0 && notificacoesAusencias.length === 0}
-          <div class="px-4 py-8 text-center text-base-content/50">
-            <BellOff class="w-12 h-12 mx-auto mb-2 opacity-50" strokeWidth={1.5} />
-            <p class="text-sm">Nenhuma notificação</p>
+                    <!-- Badge -->
+                    <div class="flex-shrink-0">
+                      <div class="badge badge-primary badge-xs"></div>
+                    </div>
+                  </div>
+                </button>
+              {/each}
+            </div>
+          {/if}
+
+          <!-- Notificações de Ausências -->
+          {#if notificacoesAusencias.length > 0}
+            <div class="mb-4">
+              <h4 class="text-sm font-semibold text-orange-600 mb-2 px-2">Ausências</h4>
+              {#each notificacoesAusencias as notificacao (notificacao._id)}
+                <button
+                  type="button"
+                  class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors mb-2 border-l-4 border-orange-600"
+                  onclick={() => handleClickNotificacaoAusencias(notificacao._id)}
+                >
+                  <div class="flex items-start gap-3">
+                    <!-- Ícone -->
+                    <div class="flex-shrink-0 mt-1">
+                      <Clock class="w-5 h-5 text-orange-600" strokeWidth={2} />
+                    </div>
+
+                    <!-- Conteúdo -->
+                    <div class="flex-1 min-w-0">
+                      <p class="text-sm font-medium text-base-content">
+                        {notificacao.mensagem}
+                      </p>
+                      <p class="text-xs text-base-content/50 mt-1">
+                        {formatarTempo(notificacao._creationTime)}
+                      </p>
+                    </div>
+
+                    <!-- Badge -->
+                    <div class="flex-shrink-0">
+                      <div class="badge badge-warning badge-xs"></div>
+                    </div>
+                  </div>
+                </button>
+              {/each}
+            </div>
+          {/if}
+        {:else}
+          <!-- Sem notificações -->
+          <div class="px-4 py-12 text-center text-base-content/50">
+            <BellOff class="w-16 h-16 mx-auto mb-4 opacity-50" strokeWidth={1.5} />
+            <p class="text-base font-medium">Nenhuma notificação</p>
+            <p class="text-sm mt-1">Você está em dia!</p>
           </div>
         {/if}
       </div>
-    </div>
-  {/if}
+
+    <!-- Footer com estatísticas -->
+    {#if todasNotificacoes.length > 0 || notificacoesFerias.length > 0 || notificacoesAusencias.length > 0}
+      <div class="px-6 py-4 border-t border-base-300 bg-base-200/50">
+        <div class="flex items-center justify-between text-xs text-base-content/60">
+          <span>
+            Total: {todasNotificacoes.length + notificacoesFerias.length + notificacoesAusencias.length} notificações
+          </span>
+          {#if notificacoesNaoLidas.length > 0}
+            <span class="text-primary font-semibold">
+              {notificacoesNaoLidas.length} não lidas
+            </span>
+          {/if}
+        </div>
+      </div>
+    {/if}
+  </div>
+{/if}
 </div>
 
 <style>
@@ -413,4 +570,16 @@
       transform: rotate(0deg);
     }
   }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 </style>
+
diff --git a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
index ff7e182..78a5641 100644
--- a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
@@ -208,6 +208,21 @@
     templates.find((t) => t._id === templateId),
   );
 
+  // Função para renderizar template com variáveis (similar à função do backend)
+  function renderizarTemplate(
+    template: string,
+    variaveis: Record<string, string>,
+  ): string {
+    let resultado = template;
+
+    for (const [chave, valor] of Object.entries(variaveis)) {
+      const placeholder = `{{${chave}}}`;
+      resultado = resultado.replace(new RegExp(placeholder, "g"), valor);
+    }
+
+    return resultado;
+  }
+
   // Função para mostrar mensagens
   function mostrarMensagem(tipo: "success" | "error" | "info", texto: string) {
     mensagem = { tipo, texto };
@@ -733,8 +748,11 @@
             );
 
             if (conversaId) {
-              const mensagem = usarTemplate
-                ? templateSelecionado?.corpo || ""
+              const mensagem = usarTemplate && templateSelecionado
+                ? renderizarTemplate(templateSelecionado.corpo, {
+                    nome: destinatario.nome,
+                    matricula: destinatario.matricula || "",
+                  })
                 : mensagemPersonalizada;
 
               if (agendadaPara) {
@@ -988,10 +1006,12 @@
                 );
 
                 if (conversaId) {
-                  // Para templates, usar corpo direto (o backend já faz substituição via email)
-                  // Para mensagem personalizada, usar diretamente
-                  const mensagem = usarTemplate
-                    ? templateSelecionado?.corpo || ""
+                  // Renderizar template com variáveis do destinatário
+                  const mensagem = usarTemplate && templateSelecionado
+                    ? renderizarTemplate(templateSelecionado.corpo, {
+                        nome: destinatario.nome,
+                        matricula: destinatario.matricula || "",
+                      })
                     : mensagemPersonalizada;
 
                   if (agendadaPara) {
diff --git a/packages/backend/convex/chat.ts b/packages/backend/convex/chat.ts
index 2ef4646..b2f024d 100644
--- a/packages/backend/convex/chat.ts
+++ b/packages/backend/convex/chat.ts
@@ -855,6 +855,54 @@ export const marcarTodasNotificacoesLidas = mutation({
   },
 });
 
+/**
+ * Deleta todas as notificações do usuário
+ * SEGURANÇA: Usuário só pode deletar suas próprias notificações
+ */
+export const limparTodasNotificacoes = mutation({
+  args: {},
+  handler: async (ctx) => {
+    const usuarioAtual = await getUsuarioAutenticado(ctx);
+    if (!usuarioAtual) throw new Error("Não autenticado");
+
+    const notificacoes = await ctx.db
+      .query("notificacoes")
+      .withIndex("by_usuario", (q) => q.eq("usuarioId", usuarioAtual._id))
+      .collect();
+
+    for (const notificacao of notificacoes) {
+      await ctx.db.delete(notificacao._id);
+    }
+
+    return { excluidas: notificacoes.length };
+  },
+});
+
+/**
+ * Deleta apenas as notificações não lidas do usuário
+ * SEGURANÇA: Usuário só pode deletar suas próprias notificações
+ */
+export const limparNotificacoesNaoLidas = mutation({
+  args: {},
+  handler: async (ctx) => {
+    const usuarioAtual = await getUsuarioAutenticado(ctx);
+    if (!usuarioAtual) throw new Error("Não autenticado");
+
+    const notificacoes = await ctx.db
+      .query("notificacoes")
+      .withIndex("by_usuario_lida", (q) =>
+        q.eq("usuarioId", usuarioAtual._id).eq("lida", false)
+      )
+      .collect();
+
+    for (const notificacao of notificacoes) {
+      await ctx.db.delete(notificacao._id);
+    }
+
+    return { excluidas: notificacoes.length };
+  },
+});
+
 /**
  * Deleta uma mensagem (soft delete)
  */
-- 
2.49.1


From 05244b9207c2b3d6098c3614e7ad04ce1befa038 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Wed, 5 Nov 2025 15:16:20 -0300
Subject: [PATCH 6/6] feat: enhance ChatWidget with improved drag-and-resize
 functionality

- Introduced drag threshold and movement detection to prevent unintended clicks during dragging.
- Added reactive window dimensions to ensure proper positioning and resizing of the chat widget.
- Refactored mouse event handlers for better separation of concerns and improved user experience.
- Enhanced position adjustment logic to maintain visibility within the viewport during dragging and resizing.
---
 .../src/lib/components/chat/ChatWidget.svelte | 178 +++++++++++++++---
 1 file changed, 150 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/lib/components/chat/ChatWidget.svelte b/apps/web/src/lib/components/chat/ChatWidget.svelte
index 01854d9..02ead38 100644
--- a/apps/web/src/lib/components/chat/ChatWidget.svelte
+++ b/apps/web/src/lib/components/chat/ChatWidget.svelte
@@ -44,6 +44,8 @@
   let isDragging = $state(false);
   let dragStart = $state({ x: 0, y: 0 });
   let isAnimating = $state(false);
+  let dragThreshold = $state(5); // Distância mínima em pixels para considerar arrastar
+  let hasMoved = $state(false); // Flag para verificar se houve movimento durante o arrastar
 
   // Tamanho da janela (redimensionável)
   const MIN_WIDTH = 300;
@@ -76,6 +78,38 @@
   let previousSize = $state({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
   let previousPosition = $state({ x: 0, y: 0 });
 
+  // Dimensões da janela (reativo)
+  let windowDimensions = $state({ width: 0, height: 0 });
+  
+  // Atualizar dimensões da janela
+  function updateWindowDimensions() {
+    if (typeof window !== 'undefined') {
+      windowDimensions = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+    }
+  }
+
+  // Inicializar e atualizar dimensões da janela
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    
+    updateWindowDimensions();
+    
+    const handleResize = () => {
+      updateWindowDimensions();
+      // Ajustar posição quando a janela redimensionar
+      ajustarPosicao();
+    };
+    
+    window.addEventListener('resize', handleResize);
+    
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+
   // Salvar tamanho no localStorage
   function saveSize() {
     if (typeof window !== 'undefined') {
@@ -119,15 +153,19 @@
       newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, resizeStart.width + deltaX));
     }
     if (resizeDirection.includes('w')) {
-      newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, resizeStart.width - deltaX));
-      newX = position.x + (resizeStart.width - newWidth);
+      const calculatedWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, resizeStart.width - deltaX));
+      const widthDelta = resizeStart.width - calculatedWidth;
+      newWidth = calculatedWidth;
+      newX = position.x + widthDelta;
     }
     if (resizeDirection.includes('s')) {
       newHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, resizeStart.height + deltaY));
     }
     if (resizeDirection.includes('n')) {
-      newHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, resizeStart.height - deltaY));
-      newY = position.y + (resizeStart.height - newHeight);
+      const calculatedHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, resizeStart.height - deltaY));
+      const heightDelta = resizeStart.height - calculatedHeight;
+      newHeight = calculatedHeight;
+      newY = position.y + heightDelta;
     }
 
     windowSize = { width: newWidth, height: newHeight };
@@ -337,9 +375,12 @@
       previousPosition = { ...position };
       
       // Maximizar completamente: usar toda a largura e altura da tela
+      const winWidth = windowDimensions.width || (typeof window !== 'undefined' ? window.innerWidth : DEFAULT_WIDTH);
+      const winHeight = windowDimensions.height || (typeof window !== 'undefined' ? window.innerHeight : DEFAULT_HEIGHT);
+      
       windowSize = {
-        width: window.innerWidth,
-        height: window.innerHeight
+        width: winWidth,
+        height: winHeight
       };
       position = {
         x: 0,
@@ -355,6 +396,7 @@
   // Funcionalidade de arrastar
   function handleMouseDown(e: MouseEvent) {
     if (e.button !== 0) return; // Apenas botão esquerdo
+    hasMoved = false;
     isDragging = true;
     dragStart = {
       x: e.clientX - position.x,
@@ -364,6 +406,20 @@
     e.preventDefault();
   }
 
+  // Handler específico para o botão flutuante (evita conflito com clique)
+  function handleButtonMouseDown(e: MouseEvent) {
+    if (e.button !== 0) return;
+    // Resetar flag de movimento
+    hasMoved = false;
+    isDragging = true;
+    dragStart = {
+      x: e.clientX - position.x,
+      y: e.clientY - position.y,
+    };
+    document.body.classList.add('dragging');
+    // Não prevenir default para permitir clique funcionar se não houver movimento
+  }
+
   function handleMouseMove(e: MouseEvent) {
     if (isResizing) {
       handleResizeMove(e);
@@ -375,15 +431,26 @@
     const newX = e.clientX - dragStart.x;
     const newY = e.clientY - dragStart.y;
     
+    // Verificar se houve movimento significativo
+    const deltaX = Math.abs(newX - position.x);
+    const deltaY = Math.abs(newY - position.y);
+    if (deltaX > dragThreshold || deltaY > dragThreshold) {
+      hasMoved = true;
+    }
+    
     // Dimensões do widget
     const widgetWidth = isOpen && !isMinimized ? windowSize.width : 72;
     const widgetHeight = isOpen && !isMinimized ? windowSize.height : 72;
     
+    // Usar dimensões reativas da janela
+    const winWidth = windowDimensions.width || (typeof window !== 'undefined' ? window.innerWidth : 0);
+    const winHeight = windowDimensions.height || (typeof window !== 'undefined' ? window.innerHeight : 0);
+    
     // Limites da tela com margem de segurança
     const minX = -(widgetWidth - 100); // Permitir até 100px visíveis
-    const maxX = window.innerWidth - 100; // Manter 100px dentro da tela
+    const maxX = Math.max(0, winWidth - 100); // Manter 100px dentro da tela
     const minY = -(widgetHeight - 100);
-    const maxY = window.innerHeight - 100;
+    const maxY = Math.max(0, winHeight - 100);
     
     position = {
       x: Math.max(minX, Math.min(newX, maxX)),
@@ -391,14 +458,26 @@
     };
   }
 
-  function handleMouseUp() {
+  function handleMouseUp(e?: MouseEvent) {
+    const hadMoved = hasMoved;
+    
     if (isDragging) {
       isDragging = false;
+      hasMoved = false;
       document.body.classList.remove('dragging');
+      
+      // Se estava arrastando e houve movimento, prevenir clique
+      if (hadMoved && e) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      
       // Garantir que está dentro dos limites ao soltar
       ajustarPosicao();
     }
     handleResizeEnd();
+    
+    return !hadMoved; // Retorna true se não houve movimento (permite clique)
   }
 
   function ajustarPosicao() {
@@ -408,22 +487,32 @@
     const widgetWidth = isOpen && !isMinimized ? windowSize.width : 72;
     const widgetHeight = isOpen && !isMinimized ? windowSize.height : 72;
     
+    // Usar dimensões reativas da janela
+    const winWidth = windowDimensions.width || (typeof window !== 'undefined' ? window.innerWidth : 0);
+    const winHeight = windowDimensions.height || (typeof window !== 'undefined' ? window.innerHeight : 0);
+    
     // Verificar se está fora dos limites
     let newX = position.x;
     let newY = position.y;
     
-    // Ajustar X
-    if (newX < -(widgetWidth - 100)) {
-      newX = -(widgetWidth - 100);
-    } else if (newX > window.innerWidth - 100) {
-      newX = window.innerWidth - 100;
+    // Ajustar X - garantir que pelo menos 100px fiquem visíveis
+    const minX = -(widgetWidth - 100);
+    const maxX = Math.max(0, winWidth - 100);
+    
+    if (newX < minX) {
+      newX = minX;
+    } else if (newX > maxX) {
+      newX = maxX;
     }
     
-    // Ajustar Y
-    if (newY < -(widgetHeight - 100)) {
-      newY = -(widgetHeight - 100);
-    } else if (newY > window.innerHeight - 100) {
-      newY = window.innerHeight - 100;
+    // Ajustar Y - garantir que pelo menos 100px fiquem visíveis
+    const minY = -(widgetHeight - 100);
+    const maxY = Math.max(0, winHeight - 100);
+    
+    if (newY < minY) {
+      newY = minY;
+    } else if (newY > maxY) {
+      newY = maxY;
     }
     
     position = { x: newX, y: newY };
@@ -433,15 +522,26 @@
     }, 300);
   }
 
-  // Event listeners globais
-  if (typeof window !== 'undefined') {
+  // Event listeners globais com cleanup adequado
+  $effect(() => {
+    if (typeof window === 'undefined') return;
+    
     window.addEventListener('mousemove', handleMouseMove);
     window.addEventListener('mouseup', handleMouseUp);
-  }
+    
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  });
 </script>
 
 <!-- Botão flutuante MODERNO E ARRASTÁVEL -->
 {#if !isOpen || isMinimized}
+  {@const winWidth = windowDimensions.width || (typeof window !== 'undefined' ? window.innerWidth : 0)}
+  {@const winHeight = windowDimensions.height || (typeof window !== 'undefined' ? window.innerHeight : 0)}
+  {@const bottomPos = position.y === 0 ? '1.5rem' : `${Math.max(0, winHeight - position.y - 72)}px`}
+  {@const rightPos = position.x === 0 ? '1.5rem' : `${Math.max(0, winWidth - position.x - 72)}px`}
   <button
     type="button"
     class="fixed group relative border-0 backdrop-blur-xl"
@@ -449,8 +549,8 @@
       z-index: 99999 !important; 
       width: 4.5rem; 
       height: 4.5rem; 
-      bottom: {position.y === 0 ? '1.5rem' : `${window.innerHeight - position.y - 72}px`};
-      right: {position.x === 0 ? '1.5rem' : `${window.innerWidth - position.x - 72}px`};
+      bottom: {bottomPos};
+      right: {rightPos};
       position: fixed !important;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
       box-shadow: 
@@ -462,8 +562,26 @@
       transform: {isDragging ? 'scale(1.05)' : 'scale(1)'};
       transition: {isAnimating ? 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'transform 0.2s, box-shadow 0.3s'};
     "
-    onclick={handleToggle}
-    onmousedown={handleMouseDown}
+    onmousedown={handleButtonMouseDown}
+    onmouseup={(e) => {
+      const hadMovedBefore = hasMoved;
+      handleMouseUp(e);
+      // Se houve movimento, prevenir o clique
+      if (hadMovedBefore) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }}
+    onclick={(e) => {
+      // Só executar toggle se não houve movimento
+      if (!hasMoved) {
+        handleToggle();
+      } else {
+        // Prevenir clique se houve movimento
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }}
     aria-label="Abrir chat"
   >
     <!-- Anel de brilho rotativo -->
@@ -521,12 +639,16 @@
 
 <!-- Janela do Chat ULTRA MODERNA E ARRASTÁVEL -->
 {#if isOpen && !isMinimized}
+  {@const winWidth = windowDimensions.width || (typeof window !== 'undefined' ? window.innerWidth : 0)}
+  {@const winHeight = windowDimensions.height || (typeof window !== 'undefined' ? window.innerHeight : 0)}
+  {@const bottomPos = position.y === 0 ? '1.5rem' : `${Math.max(0, winHeight - position.y - windowSize.height)}px`}
+  {@const rightPos = position.x === 0 ? '1.5rem' : `${Math.max(0, winWidth - position.x - windowSize.width)}px`}
   <div
     class="fixed flex flex-col overflow-hidden backdrop-blur-2xl"
     style="
       z-index: 99999 !important;
-      bottom: {position.y === 0 ? '1.5rem' : `${window.innerHeight - position.y - windowSize.height}px`};
-      right: {position.x === 0 ? '1.5rem' : `${window.innerWidth - position.x - windowSize.width}px`};
+      bottom: {bottomPos};
+      right: {rightPos};
       width: {windowSize.width}px;
       height: {windowSize.height}px;
       max-width: calc(100vw - 3rem);
-- 
2.49.1