diff --git a/apps/web/src/lib/components/chat/NotificationBell.svelte b/apps/web/src/lib/components/chat/NotificationBell.svelte
index ec3a437..047f7da 100644
--- a/apps/web/src/lib/components/chat/NotificationBell.svelte
+++ b/apps/web/src/lib/components/chat/NotificationBell.svelte
@@ -1,501 +1,501 @@
-<script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { notificacoesCount } from "$lib/stores/chatStore";
-  import { formatDistanceToNow } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import { onMount } from "svelte";
-  import { authStore } from "$lib/stores/auth.svelte";
-
-  // Queries e Client
-  const client = useConvexClient();
-  const notificacoesQuery = useQuery(api.chat.obterNotificacoes, {
-    apenasPendentes: true,
-  });
-  const countQuery = useQuery(api.chat.contarNotificacoesNaoLidas, {});
-
-  let dropdownOpen = $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 }>>([]);
-
-  // 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) ?? []
-  );
-
-  // Atualizar contador no store
-  $effect(() => {
-    const totalNotificacoes = count + (notificacoesFerias?.length || 0) + (notificacoesAusencias?.length || 0);
-    notificacoesCount.set(totalNotificacoes);
-  });
-
-  // Buscar notificações de férias
-  async function buscarNotificacoesFerias() {
-    try {
-      const usuarioStore = authStore;
-
-      if (usuarioStore.usuario?._id) {
-        const notifsFerias = await client.query(
-          api.ferias.obterNotificacoesNaoLidas,
-          {
-            usuarioId: usuarioStore.usuario._id,
-          }
-        );
-        notificacoesFerias = notifsFerias || [];
-      }
-    } catch (e) {
-      console.error("Erro ao buscar notificações de férias:", e);
-    }
-  }
-
-  // Buscar notificações de ausências
-  async function buscarNotificacoesAusencias() {
-    try {
-      const usuarioStore = authStore;
-
-      if (usuarioStore.usuario?._id) {
-        try {
-          const notifsAusencias = await client.query(
-            api.ausencias.obterNotificacoesNaoLidas,
-            {
-              usuarioId: usuarioStore.usuario._id,
-            }
-          );
-          notificacoesAusencias = notifsAusencias || [];
-        } catch (queryError: unknown) {
-          // Silenciar erro se a função não estiver disponível ainda (Convex não sincronizado)
-          const errorMessage = queryError instanceof Error ? queryError.message : String(queryError);
-          if (!errorMessage.includes("Could not find public function")) {
-            console.error("Erro ao buscar notificações de ausências:", queryError);
-          }
-          notificacoesAusencias = [];
-        }
-      }
-    } catch (e) {
-      // Erro geral - silenciar se for sobre função não encontrada
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      if (!errorMessage.includes("Could not find public function")) {
-        console.error("Erro ao buscar notificações de ausências:", e);
-      }
-    }
-  }
-
-  // Atualizar notificações periodicamente
-  $effect(() => {
-    buscarNotificacoesFerias();
-    buscarNotificacoesAusencias();
-    const interval = setInterval(() => {
-      buscarNotificacoesFerias();
-      buscarNotificacoesAusencias();
-    }, 30000); // A cada 30s
-    return () => clearInterval(interval);
-  });
-
-  function formatarTempo(timestamp: number): string {
-    try {
-      return formatDistanceToNow(new Date(timestamp), {
-        addSuffix: true,
-        locale: ptBR,
-      });
-    } catch {
-      return "agora";
-    }
-  }
-
-  async function handleMarcarTodasLidas() {
-    await client.mutation(api.chat.marcarTodasNotificacoesLidas, {});
-    // Marcar todas as notificações de férias como lidas
-    for (const notif of notificacoesFerias) {
-      await client.mutation(api.ferias.marcarComoLida, {
-        notificacaoId: notif._id,
-      });
-    }
-    // Marcar todas as notificações de ausências como lidas
-    for (const notif of notificacoesAusencias) {
-      await client.mutation(api.ausencias.marcarComoLida, {
-        notificacaoId: notif._id,
-      });
-    }
-    dropdownOpen = false;
-    await buscarNotificacoesFerias();
-    await buscarNotificacoesAusencias();
-  }
-
-  async function handleClickNotificacao(notificacaoId: string) {
-    await client.mutation(api.chat.marcarNotificacaoLida, {
-      notificacaoId: notificacaoId as any,
-    });
-    dropdownOpen = false;
-  }
-
-  async function handleClickNotificacaoFerias(notificacaoId: string) {
-    await client.mutation(api.ferias.marcarComoLida, {
-      notificacaoId: notificacaoId,
-    });
-    await buscarNotificacoesFerias();
-    dropdownOpen = false;
-    // Redirecionar para a página de férias
-    window.location.href = "/recursos-humanos/ferias";
-  }
-
-  async function handleClickNotificacaoAusencias(notificacaoId: string) {
-    await client.mutation(api.ausencias.marcarComoLida, {
-      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;
-  }
-
-  // Fechar dropdown ao clicar fora
-  onMount(() => {
-    function handleClickOutside(event: MouseEvent) {
-      const target = event.target as HTMLElement;
-      if (!target.closest(".notification-bell")) {
-        dropdownOpen = false;
-      }
-    }
-
-    document.addEventListener("click", handleClickOutside);
-    return () => document.removeEventListener("click", handleClickOutside);
-  });
-</script>
-
-<div class="dropdown dropdown-end notification-bell">
-  <!-- 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}
-    aria-label="Notificações"
-  >
-    <!-- Efeito de brilho no hover -->
-    <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>
-
-    <!-- Anel de pulso sutil -->
-    <div
-      class="absolute inset-0 rounded-2xl"
-      style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
-    ></div>
-
-    <!-- Glow effect quando tem notificações -->
-    {#if count && count > 0}
-      <div
-        class="absolute inset-0 rounded-2xl bg-error/30 blur-lg animate-pulse"
-      ></div>
-    {/if}
-
-    <!-- Ícone do sino PREENCHIDO moderno -->
-    <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 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>
-
-    <!-- Badge premium MODERNO com gradiente -->
-    {#if count + (notificacoesFerias?.length || 0) > 0}
-      {@const totalCount = count + (notificacoesFerias?.length || 0)}
-      <span
-        class="absolute -top-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full text-white text-[10px] font-black shadow-xl ring-2 ring-white z-20"
-        style="background: linear-gradient(135deg, #ff416c, #ff4b2b); box-shadow: 0 8px 24px -4px rgba(255, 65, 108, 0.6), 0 4px 12px -2px rgba(255, 75, 43, 0.4); animation: badge-bounce 2s ease-in-out infinite;"
-      >
-        {totalCount > 9 ? "9+" : totalCount}
-      </span>
-    {/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}
-          <button
-            type="button"
-            class="btn btn-ghost btn-xs"
-            onclick={handleMarcarTodasLidas}
-          >
-            Marcar todas como lidas
-          </button>
-        {/if}
-      </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"}
-                    <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>
-                  {: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>
-                  {: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>
-                  {/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>
-
-                <!-- Indicador de não lida -->
-                {#if !notificacao.lida}
-                  <div class="flex-shrink-0">
-                    <div class="w-2 h-2 rounded-full bg-primary"></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>
-          {/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">
-                  <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>
-                </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-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>
-          {/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">
-                  <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>
-                </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}
-        {/if}
-
-        <!-- 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>
-            <p class="text-sm">Nenhuma notificação</p>
-          </div>
-        {/if}
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  @keyframes badge-bounce {
-    0%,
-    100% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.1);
-    }
-  }
-
-  @keyframes pulse-ring-subtle {
-    0%,
-    100% {
-      opacity: 0.1;
-      transform: scale(1);
-    }
-    50% {
-      opacity: 0.3;
-      transform: scale(1.05);
-    }
-  }
-
-  @keyframes bell-ring {
-    0%,
-    100% {
-      transform: rotate(0deg);
-    }
-    10%,
-    30% {
-      transform: rotate(-10deg);
-    }
-    20%,
-    40% {
-      transform: rotate(10deg);
-    }
-    50% {
-      transform: rotate(0deg);
-    }
-  }
-</style>
+<script lang="ts">
+  import { useQuery, useConvexClient } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import { notificacoesCount } from "$lib/stores/chatStore";
+  import { formatDistanceToNow } from "date-fns";
+  import { ptBR } from "date-fns/locale";
+  import { onMount } from "svelte";
+  import { authStore } from "$lib/stores/auth.svelte";
+
+  // Queries e Client
+  const client = useConvexClient();
+  const notificacoesQuery = useQuery(api.chat.obterNotificacoes, {
+    apenasPendentes: true,
+  });
+  const countQuery = useQuery(api.chat.contarNotificacoesNaoLidas, {});
+
+  let dropdownOpen = $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 }>>([]);
+
+  // 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) ?? []
+  );
+
+  // Atualizar contador no store
+  $effect(() => {
+    const totalNotificacoes = count + (notificacoesFerias?.length || 0) + (notificacoesAusencias?.length || 0);
+    notificacoesCount.set(totalNotificacoes);
+  });
+
+  // Buscar notificações de férias
+  async function buscarNotificacoesFerias() {
+    try {
+      const usuarioStore = authStore;
+
+      if (usuarioStore.usuario?._id) {
+        const notifsFerias = await client.query(
+          api.ferias.obterNotificacoesNaoLidas,
+          {
+            usuarioId: usuarioStore.usuario._id,
+          }
+        );
+        notificacoesFerias = notifsFerias || [];
+      }
+    } catch (e) {
+      console.error("Erro ao buscar notificações de férias:", e);
+    }
+  }
+
+  // Buscar notificações de ausências
+  async function buscarNotificacoesAusencias() {
+    try {
+      const usuarioStore = authStore;
+
+      if (usuarioStore.usuario?._id) {
+        try {
+          const notifsAusencias = await client.query(
+            api.ausencias.obterNotificacoesNaoLidas,
+            {
+              usuarioId: usuarioStore.usuario._id,
+            }
+          );
+          notificacoesAusencias = notifsAusencias || [];
+        } catch (queryError: unknown) {
+          // Silenciar erro se a função não estiver disponível ainda (Convex não sincronizado)
+          const errorMessage = queryError instanceof Error ? queryError.message : String(queryError);
+          if (!errorMessage.includes("Could not find public function")) {
+            console.error("Erro ao buscar notificações de ausências:", queryError);
+          }
+          notificacoesAusencias = [];
+        }
+      }
+    } catch (e) {
+      // Erro geral - silenciar se for sobre função não encontrada
+      const errorMessage = e instanceof Error ? e.message : String(e);
+      if (!errorMessage.includes("Could not find public function")) {
+        console.error("Erro ao buscar notificações de ausências:", e);
+      }
+    }
+  }
+
+  // Atualizar notificações periodicamente
+  $effect(() => {
+    buscarNotificacoesFerias();
+    buscarNotificacoesAusencias();
+    const interval = setInterval(() => {
+      buscarNotificacoesFerias();
+      buscarNotificacoesAusencias();
+    }, 30000); // A cada 30s
+    return () => clearInterval(interval);
+  });
+
+  function formatarTempo(timestamp: number): string {
+    try {
+      return formatDistanceToNow(new Date(timestamp), {
+        addSuffix: true,
+        locale: ptBR,
+      });
+    } catch {
+      return "agora";
+    }
+  }
+
+  async function handleMarcarTodasLidas() {
+    await client.mutation(api.chat.marcarTodasNotificacoesLidas, {});
+    // Marcar todas as notificações de férias como lidas
+    for (const notif of notificacoesFerias) {
+      await client.mutation(api.ferias.marcarComoLida, {
+        notificacaoId: notif._id,
+      });
+    }
+    // Marcar todas as notificações de ausências como lidas
+    for (const notif of notificacoesAusencias) {
+      await client.mutation(api.ausencias.marcarComoLida, {
+        notificacaoId: notif._id,
+      });
+    }
+    dropdownOpen = false;
+    await buscarNotificacoesFerias();
+    await buscarNotificacoesAusencias();
+  }
+
+  async function handleClickNotificacao(notificacaoId: string) {
+    await client.mutation(api.chat.marcarNotificacaoLida, {
+      notificacaoId: notificacaoId as any,
+    });
+    dropdownOpen = false;
+  }
+
+  async function handleClickNotificacaoFerias(notificacaoId: string) {
+    await client.mutation(api.ferias.marcarComoLida, {
+      notificacaoId: notificacaoId,
+    });
+    await buscarNotificacoesFerias();
+    dropdownOpen = false;
+    // Redirecionar para a página de férias
+    window.location.href = "/recursos-humanos/ferias";
+  }
+
+  async function handleClickNotificacaoAusencias(notificacaoId: string) {
+    await client.mutation(api.ausencias.marcarComoLida, {
+      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;
+  }
+
+  // Fechar dropdown ao clicar fora
+  onMount(() => {
+    function handleClickOutside(event: MouseEvent) {
+      const target = event.target as HTMLElement;
+      if (!target.closest(".notification-bell")) {
+        dropdownOpen = false;
+      }
+    }
+
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  });
+</script>
+
+<div class="dropdown dropdown-end notification-bell">
+  <!-- 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}
+    aria-label="Notificações"
+  >
+    <!-- Efeito de brilho no hover -->
+    <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>
+
+    <!-- Anel de pulso sutil -->
+    <div
+      class="absolute inset-0 rounded-2xl"
+      style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
+    ></div>
+
+    <!-- Glow effect quando tem notificações -->
+    {#if count && count > 0}
+      <div
+        class="absolute inset-0 rounded-2xl bg-error/30 blur-lg animate-pulse"
+      ></div>
+    {/if}
+
+    <!-- Ícone do sino PREENCHIDO moderno -->
+    <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 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>
+
+    <!-- Badge premium MODERNO com gradiente -->
+    {#if count + (notificacoesFerias?.length || 0) > 0}
+      {@const totalCount = count + (notificacoesFerias?.length || 0)}
+      <span
+        class="absolute -top-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full text-white text-[10px] font-black shadow-xl ring-2 ring-white z-20"
+        style="background: linear-gradient(135deg, #ff416c, #ff4b2b); box-shadow: 0 8px 24px -4px rgba(255, 65, 108, 0.6), 0 4px 12px -2px rgba(255, 75, 43, 0.4); animation: badge-bounce 2s ease-in-out infinite;"
+      >
+        {totalCount > 9 ? "9+" : totalCount}
+      </span>
+    {/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}
+          <button
+            type="button"
+            class="btn btn-ghost btn-xs"
+            onclick={handleMarcarTodasLidas}
+          >
+            Marcar todas como lidas
+          </button>
+        {/if}
+      </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"}
+                    <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>
+                  {: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>
+                  {: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>
+                  {/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>
+
+                <!-- Indicador de não lida -->
+                {#if !notificacao.lida}
+                  <div class="flex-shrink-0">
+                    <div class="w-2 h-2 rounded-full bg-primary"></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>
+          {/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">
+                  <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>
+                </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-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>
+          {/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">
+                  <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>
+                </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}
+        {/if}
+
+        <!-- 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>
+            <p class="text-sm">Nenhuma notificação</p>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  @keyframes badge-bounce {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+  }
+
+  @keyframes pulse-ring-subtle {
+    0%,
+    100% {
+      opacity: 0.1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.3;
+      transform: scale(1.05);
+    }
+  }
+
+  @keyframes bell-ring {
+    0%,
+    100% {
+      transform: rotate(0deg);
+    }
+    10%,
+    30% {
+      transform: rotate(-10deg);
+    }
+    20%,
+    40% {
+      transform: rotate(10deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+  }
+</style>
diff --git a/apps/web/src/routes/(dashboard)/gestao-pessoas/+page.svelte b/apps/web/src/routes/(dashboard)/gestao-pessoas/+page.svelte
index 1325a4e..b2e8149 100644
--- a/apps/web/src/routes/(dashboard)/gestao-pessoas/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/gestao-pessoas/+page.svelte
@@ -1,218 +1,141 @@
-<script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { goto } from "$app/navigation";
-
-  const client = useConvexClient();
-
-  // Buscar todas as solicitações de ausências
-  const ausenciasQuery = useQuery(api.ausencias.listarTodas, {});
-
-  const ausencias = $derived(ausenciasQuery?.data || []);
-
-  // Estatísticas
-  const stats = $derived({
-    total: ausencias.length,
-    pendentes: ausencias.filter((a) => a.status === "aguardando_aprovacao").length,
-    aprovadas: ausencias.filter((a) => a.status === "aprovado").length,
-    reprovadas: ausencias.filter((a) => a.status === "reprovado").length,
-  });
-
-  // Solicitações pendentes (últimas 5)
-  const pendentes = $derived(
-    ausencias
-      .filter((a) => a.status === "aguardando_aprovacao")
-      .slice(0, 5)
-  );
-
-  function calcularDias(dataInicio: string, dataFim: string): number {
-    const inicio = new Date(dataInicio);
-    const fim = new Date(dataFim);
-    const diff = fim.getTime() - inicio.getTime();
-    return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-  }
-
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-    };
-    return badges[status] || "badge-neutral";
-  }
-
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-    };
-    return textos[status] || status;
-  }
-</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>Secretaria de Gestão de Pessoas</li>
-    </ul>
-  </div>
-
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-teal-500/20 rounded-xl">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8 text-teal-600"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <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"
-          />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">
-          Secretaria de Gestão de Pessoas
-        </h1>
-        <p class="text-base-content/70">Gestão estratégica de pessoas</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Card: Gestão de Ausências -->
-  <div class="card bg-base-100 shadow-xl mb-6 border-t-4 border-orange-500">
-    <div class="card-body">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="card-title text-2xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-7 w-7 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>
-          Gestão de Ausências
-        </h2>
-        <button
-          type="button"
-          class="btn btn-sm btn-outline btn-primary"
-          onclick={() => goto("/recursos-humanos/ausencias")}
-        >
-          Ver Todas
-        </button>
-      </div>
-
-      <!-- Estatísticas -->
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-        <div class="stat bg-base-200 rounded-lg">
-          <div class="stat-title">Total</div>
-          <div class="stat-value text-orange-600">{stats.total}</div>
-          <div class="stat-desc">Solicitações</div>
-        </div>
-        <div class="stat bg-warning/10 rounded-lg">
-          <div class="stat-title">Pendentes</div>
-          <div class="stat-value text-warning">{stats.pendentes}</div>
-          <div class="stat-desc">Aguardando</div>
-        </div>
-        <div class="stat bg-success/10 rounded-lg">
-          <div class="stat-title">Aprovadas</div>
-          <div class="stat-value text-success">{stats.aprovadas}</div>
-          <div class="stat-desc">Deferidas</div>
-        </div>
-        <div class="stat bg-error/10 rounded-lg">
-          <div class="stat-title">Reprovadas</div>
-          <div class="stat-value text-error">{stats.reprovadas}</div>
-          <div class="stat-desc">Indeferidas</div>
-        </div>
-      </div>
-
-      <!-- Lista de Pendentes -->
-      <div>
-        <h3 class="font-bold text-lg mb-3">
-          Solicitações Pendentes de Aprovação
-        </h3>
-        {#if pendentes.length === 0}
-          <div class="alert alert-success">
-            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-              ></path>
-            </svg>
-            <span>Nenhuma solicitação pendente no momento.</span>
-          </div>
-        {:else}
-          <div class="overflow-x-auto">
-            <table class="table table-zebra">
-              <thead>
-                <tr>
-                  <th>Funcionário</th>
-                  <th>Período</th>
-                  <th>Dias</th>
-                  <th>Status</th>
-                  <th>Solicitado em</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each pendentes as ausencia}
-                  <tr>
-                    <td class="font-semibold">
-                      {ausencia.funcionario?.nome || "N/A"}
-                    </td>
-                    <td>
-                      {new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
-                      {new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
-                    </td>
-                    <td class="font-bold">
-                      {calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
-                    </td>
-                    <td>
-                      <div class={`badge ${getStatusBadge(ausencia.status)}`}>
-                        {getStatusTexto(ausencia.status)}
-                      </div>
-                    </td>
-                    <td class="text-xs">
-                      {new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          </div>
-          {#if stats.pendentes > 5}
-            <div class="mt-4 text-center">
-              <button
-                type="button"
-                class="btn btn-sm btn-outline"
-                onclick={() => goto("/recursos-humanos/ausencias")}
-              >
-                Ver todas as {stats.pendentes} pendentes
-              </button>
-            </div>
-          {/if}
-        {/if}
-      </div>
-    </div>
-  </div>
-</main>
+<script lang="ts">
+  const menuItems = [
+    {
+      categoria: "Gestão de Ausências",
+      descricao: "Gerencie solicitações de ausências e aprovações",
+      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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>`,
+      gradient: "from-orange-500/10 to-orange-600/20",
+      accentColor: "text-orange-600",
+      bgIcon: "bg-orange-500/20",
+      opcoes: [
+        {
+          nome: "Gestão de Ausências",
+          descricao: "Visualizar e gerenciar solicitações de ausências",
+          href: "/gestao-pessoas/gestao-ausencias",
+          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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>`,
+        },
+      ],
+    },
+  ];
+</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>Secretaria de Gestão de Pessoas</li>
+    </ul>
+  </div>
+
+  <!-- Cabeçalho -->
+  <div class="mb-8">
+    <h1 class="text-4xl font-bold text-primary mb-2">Secretaria de Gestão de Pessoas</h1>
+    <p class="text-lg text-base-content/70">
+      Gerencie processos estratégicos de gestão de pessoas
+    </p>
+  </div>
+
+  <!-- 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 da Secretaria de Gestão de Pessoas.
+      </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;
+  }
+</style>
diff --git a/apps/web/src/routes/(dashboard)/gestao-pessoas/gestao-ausencias/+page.svelte b/apps/web/src/routes/(dashboard)/gestao-pessoas/gestao-ausencias/+page.svelte
new file mode 100644
index 0000000..fdef14e
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/gestao-pessoas/gestao-ausencias/+page.svelte
@@ -0,0 +1,419 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { useQuery, useConvexClient } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import { authStore } from "$lib/stores/auth.svelte";
+  import AprovarAusencias from "$lib/components/AprovarAusencias.svelte";
+  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+
+  const client = useConvexClient();
+
+  // Buscar TODAS as solicitações de ausências
+  const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
+
+  let filtroStatus = $state<string>("todos");
+  let solicitacaoSelecionada = $state<Id<"solicitacoesAusencias"> | null>(null);
+
+  const ausencias = $derived(todasAusenciasQuery?.data || []);
+
+  // Filtrar solicitações
+  const ausenciasFiltradas = $derived(
+    ausencias.filter((a) => {
+      // Filtro de status
+      if (filtroStatus !== "todos" && a.status !== filtroStatus) return false;
+      return true;
+    })
+  );
+
+  // Estatísticas gerais
+  const stats = $derived({
+    total: ausencias.length,
+    aguardando: ausencias.filter((a) => a.status === "aguardando_aprovacao").length,
+    aprovadas: ausencias.filter((a) => a.status === "aprovado").length,
+    reprovadas: ausencias.filter((a) => a.status === "reprovado").length,
+  });
+
+  function getStatusBadge(status: string) {
+    const badges: Record<string, string> = {
+      aguardando_aprovacao: "badge-warning",
+      aprovado: "badge-success",
+      reprovado: "badge-error",
+    };
+    return badges[status] || "badge-neutral";
+  }
+
+  function getStatusTexto(status: string) {
+    const textos: Record<string, string> = {
+      aguardando_aprovacao: "Aguardando",
+      aprovado: "Aprovado",
+      reprovado: "Reprovado",
+    };
+    return textos[status] || status;
+  }
+
+  function calcularDias(dataInicio: string, dataFim: string): number {
+    const inicio = new Date(dataInicio);
+    const fim = new Date(dataFim);
+    const diff = fim.getTime() - inicio.getTime();
+    return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+  }
+
+  async function selecionarSolicitacao(solicitacaoId: Id<"solicitacoesAusencias">) {
+    solicitacaoSelecionada = solicitacaoId;
+  }
+
+  async function recarregar() {
+    solicitacaoSelecionada = null;
+  }
+</script>
+
+<main class="container mx-auto px-4 py-6 max-w-7xl">
+  <!-- Breadcrumb -->
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li>
+        <a href="/gestao-pessoas" class="text-primary hover:underline"
+          >Secretaria de Gestão de Pessoas</a
+        >
+      </li>
+      <li>Gestão de Ausências</li>
+    </ul>
+  </div>
+
+  <!-- Header -->
+  <div class="mb-6">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </div>
+        <div>
+          <h1 class="text-3xl font-bold text-primary">Gestão de Ausências</h1>
+          <p class="text-base-content/70">
+            Visão geral de todas as solicitações de ausências
+          </p>
+        </div>
+      </div>
+      <button
+        class="btn btn-ghost gap-2"
+        onclick={() => goto("/gestao-pessoas")}
+      >
+        <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="M10 19l-7-7m0 0l7-7m-7 7h18"
+          />
+        </svg>
+        Voltar
+      </button>
+    </div>
+  </div>
+
+  <!-- Estatísticas -->
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
+      <div class="stat-figure text-orange-500">
+        <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 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 class="stat-title">Total</div>
+      <div class="stat-value text-orange-500">{stats.total}</div>
+      <div class="stat-desc">Solicitações</div>
+    </div>
+
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-warning/30">
+      <div class="stat-figure text-warning">
+        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div class="stat-title">Pendentes</div>
+      <div class="stat-value text-warning">{stats.aguardando}</div>
+      <div class="stat-desc">Aguardando</div>
+    </div>
+
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-success/30">
+      <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">Aprovadas</div>
+      <div class="stat-value text-success">{stats.aprovadas}</div>
+      <div class="stat-desc">Deferidas</div>
+    </div>
+
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-error/30">
+      <div class="stat-figure text-error">
+        <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div class="stat-title">Reprovadas</div>
+      <div class="stat-value text-error">{stats.reprovadas}</div>
+      <div class="stat-desc">Indeferidas</div>
+    </div>
+  </div>
+
+  <!-- Filtros -->
+  <div class="card bg-base-100 shadow-lg mb-6">
+    <div class="card-body">
+      <h2 class="card-title text-lg mb-4">Filtros</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="form-control">
+          <label class="label" for="filtro-status">
+            <span class="label-text">Status</span>
+          </label>
+          <select
+            id="filtro-status"
+            class="select select-bordered"
+            bind:value={filtroStatus}
+          >
+            <option value="todos">Todos</option>
+            <option value="aguardando_aprovacao">Aguardando Aprovação</option>
+            <option value="aprovado">Aprovado</option>
+            <option value="reprovado">Reprovado</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Lista de Solicitações -->
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body">
+      <h2 class="card-title text-lg mb-4">
+        Todas as Solicitações ({ausenciasFiltradas.length})
+      </h2>
+
+      {#if ausenciasFiltradas.length === 0}
+        <div class="alert">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="stroke-info 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>
+          <span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
+        </div>
+      {:else}
+        <div class="overflow-x-auto">
+          <table class="table table-zebra">
+            <thead>
+              <tr>
+                <th>Funcionário</th>
+                <th>Time</th>
+                <th>Período</th>
+                <th>Dias</th>
+                <th>Motivo</th>
+                <th>Status</th>
+                <th>Solicitado em</th>
+                <th>Ações</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each ausenciasFiltradas as ausencia}
+                <tr>
+                  <td class="font-semibold">
+                    {ausencia.funcionario?.nome || "N/A"}
+                  </td>
+                  <td>
+                    {#if ausencia.time}
+                      <div
+                        class="badge badge-sm font-semibold"
+                        style="background-color: {ausencia.time.cor}20; border-color: {ausencia.time.cor}; color: {ausencia.time.cor}"
+                      >
+                        {ausencia.time.nome}
+                      </div>
+                    {:else}
+                      <span class="text-base-content/50">Sem time</span>
+                    {/if}
+                  </td>
+                  <td>
+                    {new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
+                    {new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
+                  </td>
+                  <td class="font-bold">
+                    {calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
+                  </td>
+                  <td class="max-w-xs truncate" title={ausencia.motivo}>
+                    {ausencia.motivo}
+                  </td>
+                  <td>
+                    <div class={`badge ${getStatusBadge(ausencia.status)}`}>
+                      {getStatusTexto(ausencia.status)}
+                    </div>
+                  </td>
+                  <td class="text-xs">
+                    {new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
+                  </td>
+                  <td>
+                    {#if ausencia.status === "aguardando_aprovacao"}
+                      <button
+                        type="button"
+                        class="btn btn-primary btn-sm gap-2"
+                        onclick={() => selecionarSolicitacao(ausencia._id)}
+                      >
+                        <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>
+                        Ver Detalhes
+                      </button>
+                    {:else}
+                      <button
+                        type="button"
+                        class="btn btn-ghost btn-sm gap-2"
+                        onclick={() => selecionarSolicitacao(ausencia._id)}
+                      >
+                        <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>
+                        Ver Detalhes
+                      </button>
+                    {/if}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
+    </div>
+  </div>
+</main>
+
+<!-- Modal de Aprovação -->
+{#if solicitacaoSelecionada && authStore.usuario}
+  {#await client.query(api.ausencias.obterDetalhes, {
+    solicitacaoId: solicitacaoSelecionada,
+  }) then detalhes}
+    {#if detalhes}
+      <dialog class="modal modal-open">
+        <div class="modal-box max-w-4xl">
+          <AprovarAusencias
+            solicitacao={detalhes}
+            gestorId={authStore.usuario._id}
+            onSucesso={recarregar}
+            onCancelar={() => (solicitacaoSelecionada = null)}
+          />
+        </div>
+        <form method="dialog" class="modal-backdrop">
+          <button
+            type="button"
+            onclick={() => (solicitacaoSelecionada = null)}
+            aria-label="Fechar modal"
+            >Fechar</button
+          >
+        </form>
+      </dialog>
+    {/if}
+  {/await}
+{/if}
+
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte
index 8341aae..109148d 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte
@@ -417,3 +417,4 @@
   {/await}
 {/if}
 
+
diff --git a/apps/web/src/routes/(dashboard)/secretaria-executiva/+page.svelte b/apps/web/src/routes/(dashboard)/secretaria-executiva/+page.svelte
index e92c758..d079d7d 100644
--- a/apps/web/src/routes/(dashboard)/secretaria-executiva/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/secretaria-executiva/+page.svelte
@@ -1,214 +1,141 @@
-<script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { goto } from "$app/navigation";
-
-  const client = useConvexClient();
-
-  // Buscar todas as solicitações de ausências
-  const ausenciasQuery = useQuery(api.ausencias.listarTodas, {});
-
-  const ausencias = $derived(ausenciasQuery?.data || []);
-
-  // Estatísticas
-  const stats = $derived({
-    total: ausencias.length,
-    pendentes: ausencias.filter((a) => a.status === "aguardando_aprovacao").length,
-    aprovadas: ausencias.filter((a) => a.status === "aprovado").length,
-    reprovadas: ausencias.filter((a) => a.status === "reprovado").length,
-  });
-
-  // Solicitações pendentes (últimas 5)
-  const pendentes = $derived(
-    ausencias
-      .filter((a) => a.status === "aguardando_aprovacao")
-      .slice(0, 5)
-  );
-
-  function calcularDias(dataInicio: string, dataFim: string): number {
-    const inicio = new Date(dataInicio);
-    const fim = new Date(dataFim);
-    const diff = fim.getTime() - inicio.getTime();
-    return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-  }
-
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-    };
-    return badges[status] || "badge-neutral";
-  }
-
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-    };
-    return textos[status] || status;
-  }
-</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>Secretaria Executiva</li>
-    </ul>
-  </div>
-
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-indigo-500/20 rounded-xl">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8 text-indigo-600"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-          />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Secretaria Executiva</h1>
-        <p class="text-base-content/70">Gestão executiva e administrativa</p>
-      </div>
-    </div>
-  </div>
-
-  <!-- Card: Gestão de Ausências -->
-  <div class="card bg-base-100 shadow-xl mb-6 border-t-4 border-orange-500">
-    <div class="card-body">
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="card-title text-2xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-7 w-7 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>
-          Gestão de Ausências
-        </h2>
-        <button
-          type="button"
-          class="btn btn-sm btn-outline btn-primary"
-          onclick={() => goto("/recursos-humanos/ausencias")}
-        >
-          Ver Todas
-        </button>
-      </div>
-
-      <!-- Estatísticas -->
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-        <div class="stat bg-base-200 rounded-lg">
-          <div class="stat-title">Total</div>
-          <div class="stat-value text-orange-600">{stats.total}</div>
-          <div class="stat-desc">Solicitações</div>
-        </div>
-        <div class="stat bg-warning/10 rounded-lg">
-          <div class="stat-title">Pendentes</div>
-          <div class="stat-value text-warning">{stats.pendentes}</div>
-          <div class="stat-desc">Aguardando</div>
-        </div>
-        <div class="stat bg-success/10 rounded-lg">
-          <div class="stat-title">Aprovadas</div>
-          <div class="stat-value text-success">{stats.aprovadas}</div>
-          <div class="stat-desc">Deferidas</div>
-        </div>
-        <div class="stat bg-error/10 rounded-lg">
-          <div class="stat-title">Reprovadas</div>
-          <div class="stat-value text-error">{stats.reprovadas}</div>
-          <div class="stat-desc">Indeferidas</div>
-        </div>
-      </div>
-
-      <!-- Lista de Pendentes -->
-      <div>
-        <h3 class="font-bold text-lg mb-3">Solicitações Pendentes de Aprovação</h3>
-        {#if pendentes.length === 0}
-          <div class="alert alert-success">
-            <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-              ></path>
-            </svg>
-            <span>Nenhuma solicitação pendente no momento.</span>
-          </div>
-        {:else}
-          <div class="overflow-x-auto">
-            <table class="table table-zebra">
-              <thead>
-                <tr>
-                  <th>Funcionário</th>
-                  <th>Período</th>
-                  <th>Dias</th>
-                  <th>Status</th>
-                  <th>Solicitado em</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each pendentes as ausencia}
-                  <tr>
-                    <td class="font-semibold">
-                      {ausencia.funcionario?.nome || "N/A"}
-                    </td>
-                    <td>
-                      {new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
-                      {new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
-                    </td>
-                    <td class="font-bold">
-                      {calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
-                    </td>
-                    <td>
-                      <div class={`badge ${getStatusBadge(ausencia.status)}`}>
-                        {getStatusTexto(ausencia.status)}
-                      </div>
-                    </td>
-                    <td class="text-xs">
-                      {new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          </div>
-          {#if stats.pendentes > 5}
-            <div class="mt-4 text-center">
-              <button
-                type="button"
-                class="btn btn-sm btn-outline"
-                onclick={() => goto("/recursos-humanos/ausencias")}
-              >
-                Ver todas as {stats.pendentes} pendentes
-              </button>
-            </div>
-          {/if}
-        {/if}
-      </div>
-    </div>
-  </div>
-</main>
+<script lang="ts">
+  const menuItems = [
+    {
+      categoria: "Gestão de Ausências",
+      descricao: "Gerencie solicitações de ausências e aprovações",
+      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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>`,
+      gradient: "from-orange-500/10 to-orange-600/20",
+      accentColor: "text-orange-600",
+      bgIcon: "bg-orange-500/20",
+      opcoes: [
+        {
+          nome: "Gestão de Ausências",
+          descricao: "Visualizar e gerenciar solicitações de ausências",
+          href: "/secretaria-executiva/gestao-ausencias",
+          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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>`,
+        },
+      ],
+    },
+  ];
+</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>Secretaria Executiva</li>
+    </ul>
+  </div>
+
+  <!-- Cabeçalho -->
+  <div class="mb-8">
+    <h1 class="text-4xl font-bold text-primary mb-2">Secretaria Executiva</h1>
+    <p class="text-lg text-base-content/70">
+      Gerencie processos executivos e administrativos
+    </p>
+  </div>
+
+  <!-- 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 da Secretaria Executiva.
+      </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;
+  }
+</style>
diff --git a/apps/web/src/routes/(dashboard)/secretaria-executiva/gestao-ausencias/+page.svelte b/apps/web/src/routes/(dashboard)/secretaria-executiva/gestao-ausencias/+page.svelte
new file mode 100644
index 0000000..c259570
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/secretaria-executiva/gestao-ausencias/+page.svelte
@@ -0,0 +1,419 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { useQuery, useConvexClient } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import { authStore } from "$lib/stores/auth.svelte";
+  import AprovarAusencias from "$lib/components/AprovarAusencias.svelte";
+  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+
+  const client = useConvexClient();
+
+  // Buscar TODAS as solicitações de ausências
+  const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
+
+  let filtroStatus = $state<string>("todos");
+  let solicitacaoSelecionada = $state<Id<"solicitacoesAusencias"> | null>(null);
+
+  const ausencias = $derived(todasAusenciasQuery?.data || []);
+
+  // Filtrar solicitações
+  const ausenciasFiltradas = $derived(
+    ausencias.filter((a) => {
+      // Filtro de status
+      if (filtroStatus !== "todos" && a.status !== filtroStatus) return false;
+      return true;
+    })
+  );
+
+  // Estatísticas gerais
+  const stats = $derived({
+    total: ausencias.length,
+    aguardando: ausencias.filter((a) => a.status === "aguardando_aprovacao").length,
+    aprovadas: ausencias.filter((a) => a.status === "aprovado").length,
+    reprovadas: ausencias.filter((a) => a.status === "reprovado").length,
+  });
+
+  function getStatusBadge(status: string) {
+    const badges: Record<string, string> = {
+      aguardando_aprovacao: "badge-warning",
+      aprovado: "badge-success",
+      reprovado: "badge-error",
+    };
+    return badges[status] || "badge-neutral";
+  }
+
+  function getStatusTexto(status: string) {
+    const textos: Record<string, string> = {
+      aguardando_aprovacao: "Aguardando",
+      aprovado: "Aprovado",
+      reprovado: "Reprovado",
+    };
+    return textos[status] || status;
+  }
+
+  function calcularDias(dataInicio: string, dataFim: string): number {
+    const inicio = new Date(dataInicio);
+    const fim = new Date(dataFim);
+    const diff = fim.getTime() - inicio.getTime();
+    return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+  }
+
+  async function selecionarSolicitacao(solicitacaoId: Id<"solicitacoesAusencias">) {
+    solicitacaoSelecionada = solicitacaoId;
+  }
+
+  async function recarregar() {
+    solicitacaoSelecionada = null;
+  }
+</script>
+
+<main class="container mx-auto px-4 py-6 max-w-7xl">
+  <!-- Breadcrumb -->
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li>
+        <a href="/secretaria-executiva" class="text-primary hover:underline"
+          >Secretaria Executiva</a
+        >
+      </li>
+      <li>Gestão de Ausências</li>
+    </ul>
+  </div>
+
+  <!-- Header -->
+  <div class="mb-6">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </div>
+        <div>
+          <h1 class="text-3xl font-bold text-primary">Gestão de Ausências</h1>
+          <p class="text-base-content/70">
+            Visão geral de todas as solicitações de ausências
+          </p>
+        </div>
+      </div>
+      <button
+        class="btn btn-ghost gap-2"
+        onclick={() => goto("/secretaria-executiva")}
+      >
+        <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="M10 19l-7-7m0 0l7-7m-7 7h18"
+          />
+        </svg>
+        Voltar
+      </button>
+    </div>
+  </div>
+
+  <!-- Estatísticas -->
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
+      <div class="stat-figure text-orange-500">
+        <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 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 class="stat-title">Total</div>
+      <div class="stat-value text-orange-500">{stats.total}</div>
+      <div class="stat-desc">Solicitações</div>
+    </div>
+
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-warning/30">
+      <div class="stat-figure text-warning">
+        <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div class="stat-title">Pendentes</div>
+      <div class="stat-value text-warning">{stats.aguardando}</div>
+      <div class="stat-desc">Aguardando</div>
+    </div>
+
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-success/30">
+      <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">Aprovadas</div>
+      <div class="stat-value text-success">{stats.aprovadas}</div>
+      <div class="stat-desc">Deferidas</div>
+    </div>
+
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-error/30">
+      <div class="stat-figure text-error">
+        <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div class="stat-title">Reprovadas</div>
+      <div class="stat-value text-error">{stats.reprovadas}</div>
+      <div class="stat-desc">Indeferidas</div>
+    </div>
+  </div>
+
+  <!-- Filtros -->
+  <div class="card bg-base-100 shadow-lg mb-6">
+    <div class="card-body">
+      <h2 class="card-title text-lg mb-4">Filtros</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="form-control">
+          <label class="label" for="filtro-status">
+            <span class="label-text">Status</span>
+          </label>
+          <select
+            id="filtro-status"
+            class="select select-bordered"
+            bind:value={filtroStatus}
+          >
+            <option value="todos">Todos</option>
+            <option value="aguardando_aprovacao">Aguardando Aprovação</option>
+            <option value="aprovado">Aprovado</option>
+            <option value="reprovado">Reprovado</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Lista de Solicitações -->
+  <div class="card bg-base-100 shadow-lg">
+    <div class="card-body">
+      <h2 class="card-title text-lg mb-4">
+        Todas as Solicitações ({ausenciasFiltradas.length})
+      </h2>
+
+      {#if ausenciasFiltradas.length === 0}
+        <div class="alert">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="stroke-info 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>
+          <span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
+        </div>
+      {:else}
+        <div class="overflow-x-auto">
+          <table class="table table-zebra">
+            <thead>
+              <tr>
+                <th>Funcionário</th>
+                <th>Time</th>
+                <th>Período</th>
+                <th>Dias</th>
+                <th>Motivo</th>
+                <th>Status</th>
+                <th>Solicitado em</th>
+                <th>Ações</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each ausenciasFiltradas as ausencia}
+                <tr>
+                  <td class="font-semibold">
+                    {ausencia.funcionario?.nome || "N/A"}
+                  </td>
+                  <td>
+                    {#if ausencia.time}
+                      <div
+                        class="badge badge-sm font-semibold"
+                        style="background-color: {ausencia.time.cor}20; border-color: {ausencia.time.cor}; color: {ausencia.time.cor}"
+                      >
+                        {ausencia.time.nome}
+                      </div>
+                    {:else}
+                      <span class="text-base-content/50">Sem time</span>
+                    {/if}
+                  </td>
+                  <td>
+                    {new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
+                    {new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
+                  </td>
+                  <td class="font-bold">
+                    {calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
+                  </td>
+                  <td class="max-w-xs truncate" title={ausencia.motivo}>
+                    {ausencia.motivo}
+                  </td>
+                  <td>
+                    <div class={`badge ${getStatusBadge(ausencia.status)}`}>
+                      {getStatusTexto(ausencia.status)}
+                    </div>
+                  </td>
+                  <td class="text-xs">
+                    {new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
+                  </td>
+                  <td>
+                    {#if ausencia.status === "aguardando_aprovacao"}
+                      <button
+                        type="button"
+                        class="btn btn-primary btn-sm gap-2"
+                        onclick={() => selecionarSolicitacao(ausencia._id)}
+                      >
+                        <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>
+                        Ver Detalhes
+                      </button>
+                    {:else}
+                      <button
+                        type="button"
+                        class="btn btn-ghost btn-sm gap-2"
+                        onclick={() => selecionarSolicitacao(ausencia._id)}
+                      >
+                        <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>
+                        Ver Detalhes
+                      </button>
+                    {/if}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
+    </div>
+  </div>
+</main>
+
+<!-- Modal de Aprovação -->
+{#if solicitacaoSelecionada && authStore.usuario}
+  {#await client.query(api.ausencias.obterDetalhes, {
+    solicitacaoId: solicitacaoSelecionada,
+  }) then detalhes}
+    {#if detalhes}
+      <dialog class="modal modal-open">
+        <div class="modal-box max-w-4xl">
+          <AprovarAusencias
+            solicitacao={detalhes}
+            gestorId={authStore.usuario._id}
+            onSucesso={recarregar}
+            onCancelar={() => (solicitacaoSelecionada = null)}
+          />
+        </div>
+        <form method="dialog" class="modal-backdrop">
+          <button
+            type="button"
+            onclick={() => (solicitacaoSelecionada = null)}
+            aria-label="Fechar modal"
+            >Fechar</button
+          >
+        </form>
+      </dialog>
+    {/if}
+  {/await}
+{/if}
+