From 11eef4aa2ac2d1b972169d41f0b4be1d66514c50 Mon Sep 17 00:00:00 2001
From: killer-cf <costa.kilder@live.com>
Date: Wed, 12 Nov 2025 16:36:29 -0300
Subject: [PATCH] refactor: improve Svelte components and enhance user
 experience

- Updated various Svelte components to improve code readability and maintainability.
- Standardized button classes across components for a consistent user interface.
- Enhanced error handling and user feedback in modals and forms.
- Cleaned up unnecessary imports and optimized component structure for better performance.
---
 .../lib/components/AprovarAusencias.svelte    |  758 ++-
 .../src/lib/components/AprovarFerias.svelte   |  836 ++--
 apps/web/src/lib/components/ErrorModal.svelte |  131 +-
 .../lib/components/FuncionarioSelect.svelte   |  332 +-
 apps/web/src/lib/components/PrintModal.svelte |  948 ++--
 .../src/lib/components/SolicitarFerias.svelte |    2 +-
 .../WizardSolicitacaoAusencia.svelte          |  895 ++--
 .../src/lib/components/chat/ChatWindow.svelte |  956 ++--
 .../chat/NewConversationModal.svelte          |  816 ++--
 .../components/chat/SalaReuniaoManager.svelte |    7 +-
 .../chat/ScheduleMessageModal.svelte          |  493 +-
 .../lib/components/ti/AlertConfigModal.svelte |  917 ++--
 .../(dashboard)/alterar-senha/+page.svelte    |  947 ++--
 .../(dashboard)/esqueci-senha/+page.svelte    |  585 ++-
 .../gestao-ausencias/+page.svelte             |  772 ++-
 .../routes/(dashboard)/perfil/+page.svelte    |    6 +-
 .../atestados-licencas/+page.svelte           | 3092 ++++++------
 .../recursos-humanos/ausencias/+page.svelte   |  777 ++-
 .../recursos-humanos/ferias/+page.svelte      |    2 +-
 .../funcionarios/+page.svelte                 |  506 +-
 .../[funcionarioId]/documentos/+page.svelte   |  587 ++-
 .../[funcionarioId]/editar/+page.svelte       |    2 +-
 .../funcionarios/cadastro/+page.svelte        |    6 +-
 .../funcionarios/excluir/+page.svelte         |  774 +--
 .../recursos-humanos/simbolos/+page.svelte    |  759 +--
 .../simbolos/[simboloId]/editar/+page.svelte  |  798 ++--
 .../simbolos/cadastro/+page.svelte            |  958 ++--
 .../gestao-ausencias/+page.svelte             |  776 ++-
 .../(dashboard)/solicitar-acesso/+page.svelte |  697 ++-
 .../ti/monitoramento-emails/+page.svelte      |  945 ++--
 .../(dashboard)/ti/monitoramento/+page.svelte |    2 +-
 .../(dashboard)/ti/notificacoes/+page.svelte  | 4229 ++++++++---------
 .../ti/painel-permissoes/+page.svelte         |   12 +-
 .../routes/(dashboard)/ti/perfis/+page.svelte | 1546 +++---
 .../ti/personalizar-permissoes/+page.svelte   |  197 +-
 .../ti/solicitacoes-acesso/+page.svelte       | 1440 +++---
 .../routes/(dashboard)/ti/times/+page.svelte  |    8 +-
 .../(dashboard)/ti/usuarios/+page.svelte      | 2653 +++++------
 .../ti/usuarios/criar/+page.svelte            | 1048 ++--
 39 files changed, 15729 insertions(+), 15486 deletions(-)

diff --git a/apps/web/src/lib/components/AprovarAusencias.svelte b/apps/web/src/lib/components/AprovarAusencias.svelte
index 49b6072..7dc5b55 100644
--- a/apps/web/src/lib/components/AprovarAusencias.svelte
+++ b/apps/web/src/lib/components/AprovarAusencias.svelte
@@ -1,426 +1,414 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
-  import ErrorModal from "./ErrorModal.svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+	import ErrorModal from './ErrorModal.svelte';
 
-  type SolicitacaoAusencia = Doc<"solicitacoesAusencias"> & {
-    funcionario?: Doc<"funcionarios"> | null;
-    gestor?: Doc<"usuarios"> | null;
-    time?: Doc<"times"> | null;
-  };
+	type SolicitacaoAusencia = Doc<'solicitacoesAusencias'> & {
+		funcionario?: Doc<'funcionarios'> | null;
+		gestor?: Doc<'usuarios'> | null;
+		time?: Doc<'times'> | null;
+	};
 
-  interface Props {
-    solicitacao: SolicitacaoAusencia;
-    gestorId: Id<"usuarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
+	interface Props {
+		solicitacao: SolicitacaoAusencia;
+		gestorId: Id<'usuarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
 
-  let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
+	let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let motivoReprovacao = $state("");
-  let processando = $state(false);
-  let erro = $state("");
-  let mostrarModalErro = $state(false);
-  let mensagemErroModal = $state("");
+	let motivoReprovacao = $state('');
+	let processando = $state(false);
+	let erro = $state('');
+	let mostrarModalErro = $state(false);
+	let mensagemErroModal = $state('');
 
-  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 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;
+	}
 
-  const totalDias = $derived(
-    calcularDias(solicitacao.dataInicio, solicitacao.dataFim),
-  );
+	const totalDias = $derived(calcularDias(solicitacao.dataInicio, solicitacao.dataFim));
 
-  async function aprovar() {
-    try {
-      processando = true;
-      erro = "";
-      mostrarModalErro = false;
+	async function aprovar() {
+		try {
+			processando = true;
+			erro = '';
+			mostrarModalErro = false;
 
-      await client.mutation(api.ausencias.aprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-      });
+			await client.mutation(api.ausencias.aprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId
+			});
 
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      const mensagemErro = e instanceof Error ? e.message : String(e);
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			const mensagemErro = e instanceof Error ? e.message : String(e);
 
-      // Verificar se é erro de permissão
-      if (
-        mensagemErro.includes("permissão") ||
-        mensagemErro.includes("permission") ||
-        mensagemErro.includes("Você não tem permissão")
-      ) {
-        mensagemErroModal =
-          "Você não tem permissão para aprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.";
-        mostrarModalErro = true;
-      } else {
-        erro = mensagemErro;
-      }
-    } finally {
-      processando = false;
-    }
-  }
+			// Verificar se é erro de permissão
+			if (
+				mensagemErro.includes('permissão') ||
+				mensagemErro.includes('permission') ||
+				mensagemErro.includes('Você não tem permissão')
+			) {
+				mensagemErroModal =
+					'Você não tem permissão para aprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.';
+				mostrarModalErro = true;
+			} else {
+				erro = mensagemErro;
+			}
+		} finally {
+			processando = false;
+		}
+	}
 
-  async function reprovar() {
-    if (!motivoReprovacao.trim()) {
-      erro = "Informe o motivo da reprovação";
-      return;
-    }
+	async function reprovar() {
+		if (!motivoReprovacao.trim()) {
+			erro = 'Informe o motivo da reprovação';
+			return;
+		}
 
-    try {
-      processando = true;
-      erro = "";
-      mostrarModalErro = false;
+		try {
+			processando = true;
+			erro = '';
+			mostrarModalErro = false;
 
-      await client.mutation(api.ausencias.reprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-        motivoReprovacao: motivoReprovacao.trim(),
-      });
+			await client.mutation(api.ausencias.reprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId,
+				motivoReprovacao: motivoReprovacao.trim()
+			});
 
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      const mensagemErro = e instanceof Error ? e.message : String(e);
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			const mensagemErro = e instanceof Error ? e.message : String(e);
 
-      // Verificar se é erro de permissão
-      if (
-        mensagemErro.includes("permissão") ||
-        mensagemErro.includes("permission") ||
-        mensagemErro.includes("Você não tem permissão")
-      ) {
-        mensagemErroModal =
-          "Você não tem permissão para reprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.";
-        mostrarModalErro = true;
-      } else {
-        erro = mensagemErro;
-      }
-    } finally {
-      processando = false;
-    }
-  }
+			// Verificar se é erro de permissão
+			if (
+				mensagemErro.includes('permissão') ||
+				mensagemErro.includes('permission') ||
+				mensagemErro.includes('Você não tem permissão')
+			) {
+				mensagemErroModal =
+					'Você não tem permissão para reprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.';
+				mostrarModalErro = true;
+			} else {
+				erro = mensagemErro;
+			}
+		} finally {
+			processando = false;
+		}
+	}
 
-  function fecharModalErro() {
-    mostrarModalErro = false;
-    mensagemErroModal = "";
-  }
+	function fecharModalErro() {
+		mostrarModalErro = false;
+		mensagemErroModal = '';
+	}
 
-  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 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 Aprovação",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-    };
-    return textos[status] || status;
-  }
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando Aprovação',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado'
+		};
+		return textos[status] || status;
+	}
 </script>
 
 <div class="aprovar-ausencia">
-  <!-- Header -->
-  <div class="mb-6">
-    <h2 class="text-3xl font-bold text-primary mb-2">
-      Aprovar/Reprovar Ausência
-    </h2>
-    <p class="text-base-content/70">Analise a solicitação e tome uma decisão</p>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<h2 class="text-primary mb-2 text-3xl font-bold">Aprovar/Reprovar Ausência</h2>
+		<p class="text-base-content/70">Analise a solicitação e tome uma decisão</p>
+	</div>
 
-  <!-- Card Principal -->
-  <div class="card bg-base-100 shadow-2xl border-t-4 border-orange-500">
-    <div class="card-body">
-      <!-- Informações do Funcionário -->
-      <div class="mb-6">
-        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-            />
-          </svg>
-          Funcionário
-        </h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <p class="text-sm text-base-content/70">Nome</p>
-            <p class="font-bold text-lg">
-              {solicitacao.funcionario?.nome || "N/A"}
-            </p>
-          </div>
-          {#if solicitacao.time}
-            <div>
-              <p class="text-sm text-base-content/70">Time</p>
-              <div
-                class="badge badge-lg font-semibold"
-                style="background-color: {solicitacao.time
-                  .cor}20; border-color: {solicitacao.time
-                  .cor}; color: {solicitacao.time.cor}"
-              >
-                {solicitacao.time.nome}
-              </div>
-            </div>
-          {/if}
-        </div>
-      </div>
+	<!-- Card Principal -->
+	<div class="card bg-base-100 border-t-4 border-orange-500 shadow-2xl">
+		<div class="card-body">
+			<!-- Informações do Funcionário -->
+			<div class="mb-6">
+				<h3 class="mb-4 flex items-center gap-2 text-xl font-bold">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+						/>
+					</svg>
+					Funcionário
+				</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+					<div>
+						<p class="text-base-content/70 text-sm">Nome</p>
+						<p class="text-lg font-bold">
+							{solicitacao.funcionario?.nome || 'N/A'}
+						</p>
+					</div>
+					{#if solicitacao.time}
+						<div>
+							<p class="text-base-content/70 text-sm">Time</p>
+							<div
+								class="badge badge-lg font-semibold"
+								style="background-color: {solicitacao.time.cor}20; border-color: {solicitacao.time
+									.cor}; color: {solicitacao.time.cor}"
+							>
+								{solicitacao.time.nome}
+							</div>
+						</div>
+					{/if}
+				</div>
+			</div>
 
-      <div class="divider"></div>
+			<div class="divider"></div>
 
-      <!-- Período da Ausência -->
-      <div class="mb-6">
-        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="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>
-          Período da Ausência
-        </h3>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div
-            class="stat bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30"
-          >
-            <div class="stat-title">Data Início</div>
-            <div
-              class="stat-value text-orange-600 dark:text-orange-400 text-2xl"
-            >
-              {new Date(solicitacao.dataInicio).toLocaleDateString("pt-BR")}
-            </div>
-          </div>
-          <div
-            class="stat bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30"
-          >
-            <div class="stat-title">Data Fim</div>
-            <div
-              class="stat-value text-orange-600 dark:text-orange-400 text-2xl"
-            >
-              {new Date(solicitacao.dataFim).toLocaleDateString("pt-BR")}
-            </div>
-          </div>
-          <div
-            class="stat bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30"
-          >
-            <div class="stat-title">Total de Dias</div>
-            <div
-              class="stat-value text-orange-600 dark:text-orange-400 text-3xl"
-            >
-              {totalDias}
-            </div>
-            <div class="stat-desc">dias corridos</div>
-          </div>
-        </div>
-      </div>
+			<!-- Período da Ausência -->
+			<div class="mb-6">
+				<h3 class="mb-4 flex items-center gap-2 text-xl font-bold">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-6 w-6"
+						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>
+					Período da Ausência
+				</h3>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+					<div
+						class="stat rounded-xl border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+					>
+						<div class="stat-title">Data Início</div>
+						<div class="stat-value text-2xl text-orange-600 dark:text-orange-400">
+							{new Date(solicitacao.dataInicio).toLocaleDateString('pt-BR')}
+						</div>
+					</div>
+					<div
+						class="stat rounded-xl border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+					>
+						<div class="stat-title">Data Fim</div>
+						<div class="stat-value text-2xl text-orange-600 dark:text-orange-400">
+							{new Date(solicitacao.dataFim).toLocaleDateString('pt-BR')}
+						</div>
+					</div>
+					<div
+						class="stat rounded-xl border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+					>
+						<div class="stat-title">Total de Dias</div>
+						<div class="stat-value text-3xl text-orange-600 dark:text-orange-400">
+							{totalDias}
+						</div>
+						<div class="stat-desc">dias corridos</div>
+					</div>
+				</div>
+			</div>
 
-      <div class="divider"></div>
+			<div class="divider"></div>
 
-      <!-- Motivo -->
-      <div class="mb-6">
-        <h3 class="text-xl font-bold mb-4 flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-6 w-6 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            />
-          </svg>
-          Motivo da Ausência
-        </h3>
-        <div class="card bg-base-200">
-          <div class="card-body">
-            <p class="whitespace-pre-wrap">{solicitacao.motivo}</p>
-          </div>
-        </div>
-      </div>
+			<!-- Motivo -->
+			<div class="mb-6">
+				<h3 class="mb-4 flex items-center gap-2 text-xl font-bold">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-6 w-6"
+						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>
+					Motivo da Ausência
+				</h3>
+				<div class="card bg-base-200">
+					<div class="card-body">
+						<p class="whitespace-pre-wrap">{solicitacao.motivo}</p>
+					</div>
+				</div>
+			</div>
 
-      <!-- Status Atual -->
-      <div class="mb-6">
-        <div class="flex items-center gap-2">
-          <span class="text-sm font-semibold">Status:</span>
-          <div class={`badge badge-lg ${getStatusBadge(solicitacao.status)}`}>
-            {getStatusTexto(solicitacao.status)}
-          </div>
-        </div>
-      </div>
+			<!-- Status Atual -->
+			<div class="mb-6">
+				<div class="flex items-center gap-2">
+					<span class="text-sm font-semibold">Status:</span>
+					<div class={`badge badge-lg ${getStatusBadge(solicitacao.status)}`}>
+						{getStatusTexto(solicitacao.status)}
+					</div>
+				</div>
+			</div>
 
-      <!-- Erro -->
-      {#if erro}
-        <div class="alert alert-error mb-4">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <span>{erro}</span>
-        </div>
-      {/if}
+			<!-- Erro -->
+			{#if erro}
+				<div class="alert alert-error mb-4">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6 shrink-0 stroke-current"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<span>{erro}</span>
+				</div>
+			{/if}
 
-      <!-- Ações -->
-      {#if solicitacao.status === "aguardando_aprovacao"}
-        <div class="card-actions justify-end gap-4 mt-6">
-          <button
-            type="button"
-            class="btn btn-error btn-lg gap-2"
-            onclick={reprovar}
-            disabled={processando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner"></span>
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            {/if}
-            Reprovar
-          </button>
-          <button
-            type="button"
-            class="btn btn-success btn-lg gap-2"
-            onclick={aprovar}
-            disabled={processando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner"></span>
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-            {/if}
-            Aprovar
-          </button>
-        </div>
+			<!-- Ações -->
+			{#if solicitacao.status === 'aguardando_aprovacao'}
+				<div class="card-actions mt-6 justify-end gap-4">
+					<button
+						type="button"
+						class="btn btn-error btn-lg gap-2"
+						onclick={reprovar}
+						disabled={processando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner"></span>
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+						{/if}
+						Reprovar
+					</button>
+					<button
+						type="button"
+						class="btn btn-success btn-lg gap-2"
+						onclick={aprovar}
+						disabled={processando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner"></span>
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+						{/if}
+						Aprovar
+					</button>
+				</div>
 
-        <!-- Modal de Reprovação -->
-        {#if motivoReprovacao !== undefined}
-          <div class="mt-4">
-            <div class="form-control">
-              <label class="label" for="motivo-reprovacao">
-                <span class="label-text font-bold">Motivo da Reprovação</span>
-              </label>
-              <textarea
-                id="motivo-reprovacao"
-                class="textarea textarea-bordered h-24"
-                placeholder="Informe o motivo da reprovação..."
-                bind:value={motivoReprovacao}
-              ></textarea>
-            </div>
-          </div>
-        {/if}
-      {:else}
-        <div class="alert alert-info">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            class="stroke-current shrink-0 w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-          <span>Esta solicitação já foi processada.</span>
-        </div>
-      {/if}
+				<!-- Modal de Reprovação -->
+				{#if motivoReprovacao !== undefined}
+					<div class="mt-4">
+						<div class="form-control">
+							<label class="label" for="motivo-reprovacao">
+								<span class="label-text font-bold">Motivo da Reprovação</span>
+							</label>
+							<textarea
+								id="motivo-reprovacao"
+								class="textarea textarea-bordered h-24"
+								placeholder="Informe o motivo da reprovação..."
+								bind:value={motivoReprovacao}
+							></textarea>
+						</div>
+					</div>
+				{/if}
+			{:else}
+				<div class="alert alert-info">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						class="h-6 w-6 shrink-0 stroke-current"
+					>
+						<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>Esta solicitação já foi processada.</span>
+				</div>
+			{/if}
 
-      <!-- Botão Cancelar -->
-      <div class="mt-4 text-center">
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={() => {
-            if (onCancelar) onCancelar();
-          }}
-          disabled={processando}
-        >
-          Fechar
-        </button>
-      </div>
-    </div>
-  </div>
+			<!-- Botão Cancelar -->
+			<div class="mt-4 text-center">
+				<button
+					type="button"
+					class="btn"
+					onclick={() => {
+						if (onCancelar) onCancelar();
+					}}
+					disabled={processando}
+				>
+					Fechar
+				</button>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Modal de Erro -->
 <ErrorModal
-  open={mostrarModalErro}
-  title="Erro de Permissão"
-  message={mensagemErroModal ||
-    "Você não tem permissão para realizar esta ação."}
-  onClose={fecharModalErro}
+	open={mostrarModalErro}
+	title="Erro de Permissão"
+	message={mensagemErroModal || 'Você não tem permissão para realizar esta ação.'}
+	onClose={fecharModalErro}
 />
 
 <style>
-  .aprovar-ausencia {
-    max-width: 900px;
-    margin: 0 auto;
-  }
+	.aprovar-ausencia {
+		max-width: 900px;
+		margin: 0 auto;
+	}
 </style>
diff --git a/apps/web/src/lib/components/AprovarFerias.svelte b/apps/web/src/lib/components/AprovarFerias.svelte
index f15afe9..7dc924e 100644
--- a/apps/web/src/lib/components/AprovarFerias.svelte
+++ b/apps/web/src/lib/components/AprovarFerias.svelte
@@ -1,384 +1,462 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
-  
-  interface Periodo {
-    dataInicio: string;
-    dataFim: string;
-    diasCorridos: number;
-  }
-  
-  type SolicitacaoFerias = Doc<"solicitacoesFerias"> & {
-    funcionario?: Doc<"funcionarios"> | null;
-    gestor?: Doc<"usuarios"> | null;
-  };
-  
-  interface Props {
-    solicitacao: SolicitacaoFerias;
-    gestorId: Id<"usuarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
-  
-  let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
-  
-  const client = useConvexClient();
-  
-  let modoAjuste = $state(false);
-  let periodos = $state<Periodo[]>([]);
-  let motivoReprovacao = $state("");
-  let processando = $state(false);
-  let erro = $state("");
-  
-  $effect(() => {
-    if (modoAjuste && periodos.length === 0) {
-      periodos = solicitacao.periodos.map((p) => ({...p}));
-    }
-  });
-  
-  function calcularDias(periodo: Periodo) {
-    if (!periodo.dataInicio || !periodo.dataFim) {
-      periodo.diasCorridos = 0;
-      return;
-    }
-    
-    const inicio = new Date(periodo.dataInicio);
-    const fim = new Date(periodo.dataFim);
-    
-    if (fim < inicio) {
-      erro = "Data final não pode ser anterior à data inicial";
-      periodo.diasCorridos = 0;
-      return;
-    }
-    
-    const diff = fim.getTime() - inicio.getTime();
-    const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-    periodo.diasCorridos = dias;
-    erro = "";
-  }
-  
-  async function aprovar() {
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.aprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      erro = e instanceof Error ? e.message : String(e);
-    } finally {
-      processando = false;
-    }
-  }
-  
-  async function reprovar() {
-    if (!motivoReprovacao.trim()) {
-      erro = "Informe o motivo da reprovação";
-      return;
-    }
-    
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.reprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-        motivoReprovacao,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      erro = e instanceof Error ? e.message : String(e);
-    } finally {
-      processando = false;
-    }
-  }
-  
-  async function ajustarEAprovar() {
-    try {
-      processando = true;
-      erro = "";
-      
-      await client.mutation(api.ferias.ajustarEAprovar, {
-        solicitacaoId: solicitacao._id,
-        gestorId: gestorId,
-        novosPeriodos: periodos,
-      });
-      
-      if (onSucesso) onSucesso();
-    } catch (e) {
-      erro = e instanceof Error ? e.message : String(e);
-    } finally {
-      processando = false;
-    }
-  }
-  
-  function getStatusBadge(status: string) {
-    const badges: Record<string, string> = {
-      aguardando_aprovacao: "badge-warning",
-      aprovado: "badge-success",
-      reprovado: "badge-error",
-      data_ajustada_aprovada: "badge-info",
-    };
-    return badges[status] || "badge-neutral";
-  }
-  
-  function getStatusTexto(status: string) {
-    const textos: Record<string, string> = {
-      aguardando_aprovacao: "Aguardando Aprovação",
-      aprovado: "Aprovado",
-      reprovado: "Reprovado",
-      data_ajustada_aprovada: "Data Ajustada e Aprovada",
-    };
-    return textos[status] || status;
-  }
-  
-  function formatarData(data: number) {
-    return new Date(data).toLocaleString("pt-BR");
-  }
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+
+	interface Periodo {
+		dataInicio: string;
+		dataFim: string;
+		diasCorridos: number;
+	}
+
+	type SolicitacaoFerias = Doc<'solicitacoesFerias'> & {
+		funcionario?: Doc<'funcionarios'> | null;
+		gestor?: Doc<'usuarios'> | null;
+	};
+
+	interface Props {
+		solicitacao: SolicitacaoFerias;
+		gestorId: Id<'usuarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
+
+	let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
+
+	const client = useConvexClient();
+
+	let modoAjuste = $state(false);
+	let periodos = $state<Periodo[]>([]);
+	let motivoReprovacao = $state('');
+	let processando = $state(false);
+	let erro = $state('');
+
+	$effect(() => {
+		if (modoAjuste && periodos.length === 0) {
+			periodos = solicitacao.periodos.map((p) => ({ ...p }));
+		}
+	});
+
+	function calcularDias(periodo: Periodo) {
+		if (!periodo.dataInicio || !periodo.dataFim) {
+			periodo.diasCorridos = 0;
+			return;
+		}
+
+		const inicio = new Date(periodo.dataInicio);
+		const fim = new Date(periodo.dataFim);
+
+		if (fim < inicio) {
+			erro = 'Data final não pode ser anterior à data inicial';
+			periodo.diasCorridos = 0;
+			return;
+		}
+
+		const diff = fim.getTime() - inicio.getTime();
+		const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
+		periodo.diasCorridos = dias;
+		erro = '';
+	}
+
+	async function aprovar() {
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.aprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function reprovar() {
+		if (!motivoReprovacao.trim()) {
+			erro = 'Informe o motivo da reprovação';
+			return;
+		}
+
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.reprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId,
+				motivoReprovacao
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function ajustarEAprovar() {
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.ajustarEAprovar, {
+				solicitacaoId: solicitacao._id,
+				gestorId: gestorId,
+				novosPeriodos: periodos
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error',
+			data_ajustada_aprovada: 'badge-info'
+		};
+		return badges[status] || 'badge-neutral';
+	}
+
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando Aprovação',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado',
+			data_ajustada_aprovada: 'Data Ajustada e Aprovada'
+		};
+		return textos[status] || status;
+	}
+
+	function formatarData(data: number) {
+		return new Date(data).toLocaleString('pt-BR');
+	}
 </script>
 
 <div class="card bg-base-100 shadow-xl">
-  <div class="card-body">
-    <div class="flex items-start justify-between mb-4">
-      <div>
-        <h2 class="card-title text-2xl">
-          {solicitacao.funcionario?.nome || "Funcionário"}
-        </h2>
-        <p class="text-sm text-base-content/70 mt-1">
-          Ano de Referência: {solicitacao.anoReferencia}
-        </p>
-      </div>
-      <div class={`badge ${getStatusBadge(solicitacao.status)} badge-lg`}>
-        {getStatusTexto(solicitacao.status)}
-      </div>
-    </div>
-    
-    <!-- Períodos Solicitados -->
-    <div class="mt-4">
-      <h3 class="font-semibold text-lg mb-3">Períodos Solicitados</h3>
-      <div class="space-y-2">
-        {#each solicitacao.periodos as periodo, index}
-          <div class="flex items-center gap-4 p-3 bg-base-200 rounded-lg">
-            <div class="badge badge-primary">{index + 1}</div>
-            <div class="flex-1 grid grid-cols-3 gap-2 text-sm">
-              <div>
-                <span class="text-base-content/70">Início:</span>
-                <span class="font-semibold ml-1">{new Date(periodo.dataInicio).toLocaleDateString("pt-BR")}</span>
-              </div>
-              <div>
-                <span class="text-base-content/70">Fim:</span>
-                <span class="font-semibold ml-1">{new Date(periodo.dataFim).toLocaleDateString("pt-BR")}</span>
-              </div>
-              <div>
-                <span class="text-base-content/70">Dias:</span>
-                <span class="font-bold ml-1 text-primary">{periodo.diasCorridos}</span>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    </div>
-    
-    <!-- Observações -->
-    {#if solicitacao.observacao}
-      <div class="mt-4">
-        <h3 class="font-semibold mb-2">Observações</h3>
-        <div class="p-3 bg-base-200 rounded-lg text-sm">
-          {solicitacao.observacao}
-        </div>
-      </div>
-    {/if}
-    
-    <!-- Histórico -->
-    {#if solicitacao.historicoAlteracoes && solicitacao.historicoAlteracoes.length > 0}
-      <div class="mt-4">
-        <h3 class="font-semibold mb-2">Histórico</h3>
-        <div class="space-y-1">
-          {#each solicitacao.historicoAlteracoes as hist}
-            <div class="text-xs text-base-content/70 flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <span>{formatarData(hist.data)}</span>
-              <span>-</span>
-              <span>{hist.acao}</span>
-            </div>
-          {/each}
-        </div>
-      </div>
-    {/if}
-    
-    <!-- Ações (apenas para status aguardando_aprovacao) -->
-    {#if solicitacao.status === "aguardando_aprovacao"}
-      <div class="divider mt-6"></div>
-      
-      {#if !modoAjuste}
-        <!-- Modo Normal -->
-        <div class="space-y-4">
-          <div class="flex flex-wrap gap-2">
-            <button
-              type="button"
-              class="btn btn-success gap-2"
-              onclick={aprovar}
-              disabled={processando}
-            >
-              <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="M5 13l4 4L19 7" />
-              </svg>
-              Aprovar
-            </button>
-            
-            <button
-              type="button"
-              class="btn btn-info gap-2"
-              onclick={() => modoAjuste = true}
-              disabled={processando}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-              </svg>
-              Ajustar Datas e Aprovar
-            </button>
-          </div>
-          
-          <!-- Reprovar -->
-          <div class="card bg-base-200">
-            <div class="card-body p-4">
-              <h4 class="font-semibold text-sm mb-2">Reprovar Solicitação</h4>
-              <textarea
-                class="textarea textarea-bordered textarea-sm mb-2"
-                placeholder="Motivo da reprovação..."
-                bind:value={motivoReprovacao}
-                rows="2"
-              ></textarea>
-              <button
-                type="button"
-                class="btn btn-error btn-sm gap-2"
-                onclick={reprovar}
-                disabled={processando || !motivoReprovacao.trim()}
-              >
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-                Reprovar
-              </button>
-            </div>
-          </div>
-        </div>
-      {:else}
-        <!-- Modo Ajuste -->
-        <div class="space-y-4">
-          <h4 class="font-semibold">Ajustar Períodos</h4>
-          {#each periodos as periodo, index}
-            <div class="card bg-base-200">
-              <div class="card-body p-4">
-                <h5 class="font-medium mb-2">Período {index + 1}</h5>
-                <div class="grid grid-cols-3 gap-3">
-                  <div class="form-control">
-                    <label class="label" for={`ajuste-inicio-${index}`}>
-                      <span class="label-text text-xs">Início</span>
-                    </label>
-                    <input
-                      id={`ajuste-inicio-${index}`}
-                      type="date"
-                      class="input input-bordered input-sm"
-                      bind:value={periodo.dataInicio}
-                      onchange={() => calcularDias(periodo)}
-                    />
-                  </div>
-                  <div class="form-control">
-                    <label class="label" for={`ajuste-fim-${index}`}>
-                      <span class="label-text text-xs">Fim</span>
-                    </label>
-                    <input
-                      id={`ajuste-fim-${index}`}
-                      type="date"
-                      class="input input-bordered input-sm"
-                      bind:value={periodo.dataFim}
-                      onchange={() => calcularDias(periodo)}
-                    />
-                  </div>
-                  <div class="form-control">
-                    <label class="label" for={`ajuste-dias-${index}`}>
-                      <span class="label-text text-xs">Dias</span>
-                    </label>
-                    <div id={`ajuste-dias-${index}`} class="flex items-center h-9 px-3 bg-base-300 rounded-lg" role="textbox" aria-readonly="true">
-                      <span class="font-bold">{periodo.diasCorridos}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          {/each}
-          
-          <div class="flex gap-2">
-            <button
-              type="button"
-              class="btn btn-ghost btn-sm"
-              onclick={() => modoAjuste = false}
-              disabled={processando}
-            >
-              Cancelar Ajuste
-            </button>
-            <button
-              type="button"
-              class="btn btn-primary btn-sm gap-2"
-              onclick={ajustarEAprovar}
-              disabled={processando}
-            >
-              <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="M5 13l4 4L19 7" />
-              </svg>
-              Confirmar e Aprovar
-            </button>
-          </div>
-        </div>
-      {/if}
-    {/if}
-    
-    <!-- Motivo Reprovação (se reprovado) -->
-    {#if solicitacao.status === "reprovado" && solicitacao.motivoReprovacao}
-      <div class="alert alert-error mt-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <div>
-          <div class="font-bold">Motivo da Reprovação:</div>
-          <div class="text-sm">{solicitacao.motivoReprovacao}</div>
-        </div>
-      </div>
-    {/if}
-    
-    <!-- Erro -->
-    {#if erro}
-      <div class="alert alert-error mt-4">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <span>{erro}</span>
-      </div>
-    {/if}
-    
-    <!-- Botão Fechar -->
-    {#if onCancelar}
-      <div class="card-actions justify-end mt-4">
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={onCancelar}
-          disabled={processando}
-        >
-          Fechar
-        </button>
-      </div>
-    {/if}
-  </div>
-</div>
+	<div class="card-body">
+		<div class="mb-4 flex items-start justify-between">
+			<div>
+				<h2 class="card-title text-2xl">
+					{solicitacao.funcionario?.nome || 'Funcionário'}
+				</h2>
+				<p class="text-base-content/70 mt-1 text-sm">
+					Ano de Referência: {solicitacao.anoReferencia}
+				</p>
+			</div>
+			<div class={`badge ${getStatusBadge(solicitacao.status)} badge-lg`}>
+				{getStatusTexto(solicitacao.status)}
+			</div>
+		</div>
 
+		<!-- Períodos Solicitados -->
+		<div class="mt-4">
+			<h3 class="mb-3 text-lg font-semibold">Períodos Solicitados</h3>
+			<div class="space-y-2">
+				{#each solicitacao.periodos as periodo, index}
+					<div class="bg-base-200 flex items-center gap-4 rounded-lg p-3">
+						<div class="badge badge-primary">{index + 1}</div>
+						<div class="grid flex-1 grid-cols-3 gap-2 text-sm">
+							<div>
+								<span class="text-base-content/70">Início:</span>
+								<span class="ml-1 font-semibold"
+									>{new Date(periodo.dataInicio).toLocaleDateString('pt-BR')}</span
+								>
+							</div>
+							<div>
+								<span class="text-base-content/70">Fim:</span>
+								<span class="ml-1 font-semibold"
+									>{new Date(periodo.dataFim).toLocaleDateString('pt-BR')}</span
+								>
+							</div>
+							<div>
+								<span class="text-base-content/70">Dias:</span>
+								<span class="text-primary ml-1 font-bold">{periodo.diasCorridos}</span>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Observações -->
+		{#if solicitacao.observacao}
+			<div class="mt-4">
+				<h3 class="mb-2 font-semibold">Observações</h3>
+				<div class="bg-base-200 rounded-lg p-3 text-sm">
+					{solicitacao.observacao}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Histórico -->
+		{#if solicitacao.historicoAlteracoes && solicitacao.historicoAlteracoes.length > 0}
+			<div class="mt-4">
+				<h3 class="mb-2 font-semibold">Histórico</h3>
+				<div class="space-y-1">
+					{#each solicitacao.historicoAlteracoes as hist}
+						<div class="text-base-content/70 flex items-center gap-2 text-xs">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-3 w-3"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<span>{formatarData(hist.data)}</span>
+							<span>-</span>
+							<span>{hist.acao}</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Ações (apenas para status aguardando_aprovacao) -->
+		{#if solicitacao.status === 'aguardando_aprovacao'}
+			<div class="divider mt-6"></div>
+
+			{#if !modoAjuste}
+				<!-- Modo Normal -->
+				<div class="space-y-4">
+					<div class="flex flex-wrap gap-2">
+						<button
+							type="button"
+							class="btn btn-success gap-2"
+							onclick={aprovar}
+							disabled={processando}
+						>
+							<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="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Aprovar
+						</button>
+
+						<button
+							type="button"
+							class="btn btn-info gap-2"
+							onclick={() => (modoAjuste = true)}
+							disabled={processando}
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+								/>
+							</svg>
+							Ajustar Datas e Aprovar
+						</button>
+					</div>
+
+					<!-- Reprovar -->
+					<div class="card bg-base-200">
+						<div class="card-body p-4">
+							<h4 class="mb-2 text-sm font-semibold">Reprovar Solicitação</h4>
+							<textarea
+								class="textarea textarea-bordered textarea-sm mb-2"
+								placeholder="Motivo da reprovação..."
+								bind:value={motivoReprovacao}
+								rows="2"
+							></textarea>
+							<button
+								type="button"
+								class="btn btn-error btn-sm gap-2"
+								onclick={reprovar}
+								disabled={processando || !motivoReprovacao.trim()}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Reprovar
+							</button>
+						</div>
+					</div>
+				</div>
+			{:else}
+				<!-- Modo Ajuste -->
+				<div class="space-y-4">
+					<h4 class="font-semibold">Ajustar Períodos</h4>
+					{#each periodos as periodo, index}
+						<div class="card bg-base-200">
+							<div class="card-body p-4">
+								<h5 class="mb-2 font-medium">Período {index + 1}</h5>
+								<div class="grid grid-cols-3 gap-3">
+									<div class="form-control">
+										<label class="label" for={`ajuste-inicio-${index}`}>
+											<span class="label-text text-xs">Início</span>
+										</label>
+										<input
+											id={`ajuste-inicio-${index}`}
+											type="date"
+											class="input input-bordered input-sm"
+											bind:value={periodo.dataInicio}
+											onchange={() => calcularDias(periodo)}
+										/>
+									</div>
+									<div class="form-control">
+										<label class="label" for={`ajuste-fim-${index}`}>
+											<span class="label-text text-xs">Fim</span>
+										</label>
+										<input
+											id={`ajuste-fim-${index}`}
+											type="date"
+											class="input input-bordered input-sm"
+											bind:value={periodo.dataFim}
+											onchange={() => calcularDias(periodo)}
+										/>
+									</div>
+									<div class="form-control">
+										<label class="label" for={`ajuste-dias-${index}`}>
+											<span class="label-text text-xs">Dias</span>
+										</label>
+										<div
+											id={`ajuste-dias-${index}`}
+											class="bg-base-300 flex h-9 items-center rounded-lg px-3"
+											role="textbox"
+											aria-readonly="true"
+										>
+											<span class="font-bold">{periodo.diasCorridos}</span>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					{/each}
+
+					<div class="flex gap-2">
+						<button
+							type="button"
+							class="btn btn-sm"
+							onclick={() => (modoAjuste = false)}
+							disabled={processando}
+						>
+							Cancelar Ajuste
+						</button>
+						<button
+							type="button"
+							class="btn btn-primary btn-sm gap-2"
+							onclick={ajustarEAprovar}
+							disabled={processando}
+						>
+							<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="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Confirmar e Aprovar
+						</button>
+					</div>
+				</div>
+			{/if}
+		{/if}
+
+		<!-- Motivo Reprovação (se reprovado) -->
+		{#if solicitacao.status === 'reprovado' && solicitacao.motivoReprovacao}
+			<div class="alert alert-error mt-4">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<div>
+					<div class="font-bold">Motivo da Reprovação:</div>
+					<div class="text-sm">{solicitacao.motivoReprovacao}</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Erro -->
+		{#if erro}
+			<div class="alert alert-error mt-4">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<span>{erro}</span>
+			</div>
+		{/if}
+
+		<!-- Botão Fechar -->
+		{#if onCancelar}
+			<div class="card-actions mt-4 justify-end">
+				<button type="button" class="btn" onclick={onCancelar} disabled={processando}>
+					Fechar
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/apps/web/src/lib/components/ErrorModal.svelte b/apps/web/src/lib/components/ErrorModal.svelte
index ba035d8..5ccc653 100644
--- a/apps/web/src/lib/components/ErrorModal.svelte
+++ b/apps/web/src/lib/components/ErrorModal.svelte
@@ -1,82 +1,73 @@
 <script lang="ts">
-  import { AlertCircle, X } from "lucide-svelte";
-  
-  interface Props {
-    open: boolean;
-    title?: string;
-    message: string;
-    details?: string;
-    onClose: () => void;
-  }
+	import { AlertCircle, X } from 'lucide-svelte';
 
-  let {
-    open = $bindable(false),
-    title = "Erro",
-    message,
-    details,
-    onClose,
-  }: Props = $props();
+	interface Props {
+		open: boolean;
+		title?: string;
+		message: string;
+		details?: string;
+		onClose: () => void;
+	}
 
-  let modalRef: HTMLDialogElement;
+	let { open = $bindable(false), title = 'Erro', message, details, onClose }: Props = $props();
 
-  function handleClose() {
-    open = false;
-    onClose();
-  }
+	let modalRef: HTMLDialogElement;
 
-  $effect(() => {
-    if (open && modalRef) {
-      modalRef.showModal();
-    } else if (!open && modalRef) {
-      modalRef.close();
-    }
-  });
+	function handleClose() {
+		open = false;
+		onClose();
+	}
+
+	$effect(() => {
+		if (open && modalRef) {
+			modalRef.showModal();
+		} else if (!open && modalRef) {
+			modalRef.close();
+		}
+	});
 </script>
 
 {#if open}
-  <dialog 
-    bind:this={modalRef} 
-    class="modal" 
-    onclick={(e) => e.target === e.currentTarget && handleClose()}
-  >
-    <div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
-      <!-- Header -->
-      <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
-        <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2 text-error">
-          <AlertCircle class="w-5 h-5" strokeWidth={2} />
-          {title}
-        </h2>
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm btn-circle"
-          onclick={handleClose}
-          aria-label="Fechar"
-        >
-          <X class="w-5 h-5" />
-        </button>
-      </div>
+	<dialog
+		bind:this={modalRef}
+		class="modal"
+		onclick={(e) => e.target === e.currentTarget && handleClose()}
+	>
+		<div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
+			<!-- Header -->
+			<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+				<h2 id="modal-title" class="text-error flex items-center gap-2 text-xl font-bold">
+					<AlertCircle class="h-5 w-5" strokeWidth={2} />
+					{title}
+				</h2>
+				<button
+					type="button"
+					class="btn btn-sm btn-circle"
+					onclick={handleClose}
+					aria-label="Fechar"
+				>
+					<X class="h-5 w-5" />
+				</button>
+			</div>
 
-      <!-- Content -->
-      <div class="px-6 py-6">
-        <p class="text-base-content mb-4">{message}</p>
-        {#if details}
-          <div class="bg-base-200 rounded-lg p-4 mb-4">
-            <p class="text-sm text-base-content/70 whitespace-pre-line">{details}</p>
-          </div>
-        {/if}
-      </div>
+			<!-- Content -->
+			<div class="px-6 py-6">
+				<p class="text-base-content mb-4">{message}</p>
+				{#if details}
+					<div class="bg-base-200 mb-4 rounded-lg p-4">
+						<p class="text-base-content/70 text-sm whitespace-pre-line">{details}</p>
+					</div>
+				{/if}
+			</div>
 
-      <!-- Footer -->
-      <div class="modal-action px-6 pb-6">
-        <button class="btn btn-primary" onclick={handleClose}>
-          Fechar
-        </button>
-      </div>
-    </div>
+			<!-- Footer -->
+			<div class="modal-action px-6 pb-6">
+				<button class="btn btn-primary" onclick={handleClose}> Fechar </button>
+			</div>
+		</div>
 
-    <form method="dialog" class="modal-backdrop">
-      <button type="button" onclick={handleClose}>fechar</button>
-    </form>
-  </dialog>
+		<form method="dialog" class="modal-backdrop">
+			<button type="button" onclick={handleClose}>fechar</button>
+		</form>
+	</dialog>
 {/if}
-
diff --git a/apps/web/src/lib/components/FuncionarioSelect.svelte b/apps/web/src/lib/components/FuncionarioSelect.svelte
index 544dcd4..7355f18 100644
--- a/apps/web/src/lib/components/FuncionarioSelect.svelte
+++ b/apps/web/src/lib/components/FuncionarioSelect.svelte
@@ -1,189 +1,187 @@
 <script lang="ts">
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  interface Props {
-    value?: string; // Id do funcionário selecionado
-    placeholder?: string;
-    disabled?: boolean;
-    required?: boolean;
-  }
+	interface Props {
+		value?: string; // Id do funcionário selecionado
+		placeholder?: string;
+		disabled?: boolean;
+		required?: boolean;
+	}
 
-  let {
-    value = $bindable(),
-    placeholder = "Selecione um funcionário",
-    disabled = false,
-    required = false,
-  }: Props = $props();
+	let {
+		value = $bindable(),
+		placeholder = 'Selecione um funcionário',
+		disabled = false,
+		required = false
+	}: Props = $props();
 
-  let busca = $state("");
-  let mostrarDropdown = $state(false);
+	let busca = $state('');
+	let mostrarDropdown = $state(false);
 
-  // Buscar funcionários
-  const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+	// Buscar funcionários
+	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
 
-  const funcionarios = $derived(
-    funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []
-  );
+	const funcionarios = $derived(funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []);
 
-  // Filtrar funcionários baseado na busca
-  const funcionariosFiltrados = $derived.by(() => {
-    if (!busca.trim()) return funcionarios;
+	// Filtrar funcionários baseado na busca
+	const funcionariosFiltrados = $derived.by(() => {
+		if (!busca.trim()) return funcionarios;
 
-    const termo = busca.toLowerCase().trim();
-    return funcionarios.filter((f) => {
-      const nomeMatch = f.nome?.toLowerCase().includes(termo);
-      const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
-      const cpfMatch = f.cpf?.replace(/\D/g, "").includes(termo.replace(/\D/g, ""));
-      return nomeMatch || matriculaMatch || cpfMatch;
-    });
-  });
+		const termo = busca.toLowerCase().trim();
+		return funcionarios.filter((f) => {
+			const nomeMatch = f.nome?.toLowerCase().includes(termo);
+			const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
+			const cpfMatch = f.cpf?.replace(/\D/g, '').includes(termo.replace(/\D/g, ''));
+			return nomeMatch || matriculaMatch || cpfMatch;
+		});
+	});
 
-  // Funcionário selecionado
-  const funcionarioSelecionado = $derived.by(() => {
-    if (!value) return null;
-    return funcionarios.find((f) => f._id === value);
-  });
+	// Funcionário selecionado
+	const funcionarioSelecionado = $derived.by(() => {
+		if (!value) return null;
+		return funcionarios.find((f) => f._id === value);
+	});
 
-  function selecionarFuncionario(funcionarioId: string) {
-    value = funcionarioId;
-    const funcionario = funcionarios.find((f) => f._id === funcionarioId);
-    busca = funcionario?.nome || "";
-    mostrarDropdown = false;
-  }
+	function selecionarFuncionario(funcionarioId: string) {
+		value = funcionarioId;
+		const funcionario = funcionarios.find((f) => f._id === funcionarioId);
+		busca = funcionario?.nome || '';
+		mostrarDropdown = false;
+	}
 
-  function limpar() {
-    value = undefined;
-    busca = "";
-    mostrarDropdown = false;
-  }
+	function limpar() {
+		value = undefined;
+		busca = '';
+		mostrarDropdown = false;
+	}
 
-  // Atualizar busca quando funcionário selecionado mudar externamente
-  $effect(() => {
-    if (value && !busca) {
-      const funcionario = funcionarios.find((f) => f._id === value);
-      busca = funcionario?.nome || "";
-    }
-  });
+	// Atualizar busca quando funcionário selecionado mudar externamente
+	$effect(() => {
+		if (value && !busca) {
+			const funcionario = funcionarios.find((f) => f._id === value);
+			busca = funcionario?.nome || '';
+		}
+	});
 
-  function handleFocus() {
-    if (!disabled) {
-      mostrarDropdown = true;
-    }
-  }
+	function handleFocus() {
+		if (!disabled) {
+			mostrarDropdown = true;
+		}
+	}
 
-  function handleBlur() {
-    // Delay para permitir click no dropdown
-    setTimeout(() => {
-      mostrarDropdown = false;
-    }, 200);
-  }
+	function handleBlur() {
+		// Delay para permitir click no dropdown
+		setTimeout(() => {
+			mostrarDropdown = false;
+		}, 200);
+	}
 </script>
 
-<div class="form-control w-full relative">
-  <label class="label">
-    <span class="label-text font-medium">
-      Funcionário
-      {#if required}
-        <span class="text-error">*</span>
-      {/if}
-    </span>
-  </label>
+<div class="form-control relative w-full">
+	<label class="label">
+		<span class="label-text font-medium">
+			Funcionário
+			{#if required}
+				<span class="text-error">*</span>
+			{/if}
+		</span>
+	</label>
 
-  <div class="relative">
-    <input
-      type="text"
-      bind:value={busca}
-      {placeholder}
-      {disabled}
-      onfocus={handleFocus}
-      onblur={handleBlur}
-      class="input input-bordered w-full pr-10"
-      autocomplete="off"
-    />
+	<div class="relative">
+		<input
+			type="text"
+			bind:value={busca}
+			{placeholder}
+			{disabled}
+			onfocus={handleFocus}
+			onblur={handleBlur}
+			class="input input-bordered w-full pr-10"
+			autocomplete="off"
+		/>
 
-    {#if value}
-      <button
-        type="button"
-        onclick={limpar}
-        class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle"
-        disabled={disabled}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      </button>
-    {:else}
-      <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5 text-base-content/40"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-          />
-        </svg>
-      </div>
-    {/if}
+		{#if value}
+			<button
+				type="button"
+				onclick={limpar}
+				class="btn btn-xs btn-circle absolute top-1/2 right-2 -translate-y-1/2"
+				{disabled}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-4 w-4"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		{:else}
+			<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-base-content/40 h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+			</div>
+		{/if}
 
-    {#if mostrarDropdown && funcionariosFiltrados.length > 0}
-      <div
-        class="absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg max-h-60 overflow-auto"
-      >
-        {#each funcionariosFiltrados as funcionario}
-          <button
-            type="button"
-            onclick={() => selecionarFuncionario(funcionario._id)}
-            class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors border-b border-base-200 last:border-b-0"
-          >
-            <div class="font-medium">{funcionario.nome}</div>
-            <div class="text-sm text-base-content/60">
-              {#if funcionario.matricula}
-                Matrícula: {funcionario.matricula}
-              {/if}
-              {#if funcionario.descricaoCargo}
-                {funcionario.matricula ? " • " : ""}
-                {funcionario.descricaoCargo}
-              {/if}
-            </div>
-          </button>
-        {/each}
-      </div>
-    {/if}
+		{#if mostrarDropdown && funcionariosFiltrados.length > 0}
+			<div
+				class="bg-base-100 border-base-300 absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border shadow-lg"
+			>
+				{#each funcionariosFiltrados as funcionario}
+					<button
+						type="button"
+						onclick={() => selecionarFuncionario(funcionario._id)}
+						class="hover:bg-base-200 border-base-200 w-full border-b px-4 py-3 text-left transition-colors last:border-b-0"
+					>
+						<div class="font-medium">{funcionario.nome}</div>
+						<div class="text-base-content/60 text-sm">
+							{#if funcionario.matricula}
+								Matrícula: {funcionario.matricula}
+							{/if}
+							{#if funcionario.descricaoCargo}
+								{funcionario.matricula ? ' • ' : ''}
+								{funcionario.descricaoCargo}
+							{/if}
+						</div>
+					</button>
+				{/each}
+			</div>
+		{/if}
 
-    {#if mostrarDropdown && busca && funcionariosFiltrados.length === 0}
-      <div
-        class="absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg p-4 text-center text-base-content/60"
-      >
-        Nenhum funcionário encontrado
-      </div>
-    {/if}
-  </div>
+		{#if mostrarDropdown && busca && funcionariosFiltrados.length === 0}
+			<div
+				class="bg-base-100 border-base-300 text-base-content/60 absolute z-50 mt-1 w-full rounded-lg border p-4 text-center shadow-lg"
+			>
+				Nenhum funcionário encontrado
+			</div>
+		{/if}
+	</div>
 
-  {#if funcionarioSelecionado}
-    <div class="text-xs text-base-content/60 mt-1">
-      Selecionado: {funcionarioSelecionado.nome}
-      {#if funcionarioSelecionado.matricula}
-        - {funcionarioSelecionado.matricula}
-      {/if}
-    </div>
-  {/if}
+	{#if funcionarioSelecionado}
+		<div class="text-base-content/60 mt-1 text-xs">
+			Selecionado: {funcionarioSelecionado.nome}
+			{#if funcionarioSelecionado.matricula}
+				- {funcionarioSelecionado.matricula}
+			{/if}
+		</div>
+	{/if}
 </div>
diff --git a/apps/web/src/lib/components/PrintModal.svelte b/apps/web/src/lib/components/PrintModal.svelte
index 0811111..26ade77 100644
--- a/apps/web/src/lib/components/PrintModal.svelte
+++ b/apps/web/src/lib/components/PrintModal.svelte
@@ -1,510 +1,584 @@
 <script lang="ts">
-  import jsPDF from 'jspdf';
-  import autoTable from 'jspdf-autotable';
-  import { maskCPF, maskCEP, maskPhone } from "$lib/utils/masks";
-  import { 
-    SEXO_OPTIONS, ESTADO_CIVIL_OPTIONS, GRAU_INSTRUCAO_OPTIONS,
-    GRUPO_SANGUINEO_OPTIONS, FATOR_RH_OPTIONS, APOSENTADO_OPTIONS
-  } from "$lib/utils/constants";
-  import logoGovPE from "$lib/assets/logo_governo_PE.png";
-  import { CheckCircle2, X, Printer } from "lucide-svelte";
+	import jsPDF from 'jspdf';
+	import autoTable from 'jspdf-autotable';
+	import { maskCPF, maskCEP, maskPhone } from '$lib/utils/masks';
+	import {
+		SEXO_OPTIONS,
+		ESTADO_CIVIL_OPTIONS,
+		GRAU_INSTRUCAO_OPTIONS,
+		GRUPO_SANGUINEO_OPTIONS,
+		FATOR_RH_OPTIONS,
+		APOSENTADO_OPTIONS
+	} from '$lib/utils/constants';
+	import logoGovPE from '$lib/assets/logo_governo_PE.png';
+	import { CheckCircle2, X, Printer } from 'lucide-svelte';
 
-  interface Props {
-    funcionario: any;
-    onClose: () => void;
-  }
+	interface Props {
+		funcionario: any;
+		onClose: () => void;
+	}
 
-  let { funcionario, onClose }: Props = $props();
+	let { funcionario, onClose }: Props = $props();
 
-  let modalRef: HTMLDialogElement;
-  let generating = $state(false);
+	let modalRef: HTMLDialogElement;
+	let generating = $state(false);
 
-  // Seções selecionáveis
-  let sections = $state({
-    dadosPessoais: true,
-    filiacao: true,
-    naturalidade: true,
-    documentos: true,
-    formacao: true,
-    saude: true,
-    endereco: true,
-    contato: true,
-    cargo: true,
-    financeiro: true,
-    bancario: true,
-  });
+	// Seções selecionáveis
+	let sections = $state({
+		dadosPessoais: true,
+		filiacao: true,
+		naturalidade: true,
+		documentos: true,
+		formacao: true,
+		saude: true,
+		endereco: true,
+		contato: true,
+		cargo: true,
+		financeiro: true,
+		bancario: true
+	});
 
-  const REGIME_LABELS: Record<string, string> = {
-    clt: "CLT",
-    estatutario_municipal: "Estatutário Municipal",
-    estatutario_pe: "Estatutário PE",
-    estatutario_federal: "Estatutário Federal",
-  };
+	const REGIME_LABELS: Record<string, string> = {
+		clt: 'CLT',
+		estatutario_municipal: 'Estatutário Municipal',
+		estatutario_pe: 'Estatutário PE',
+		estatutario_federal: 'Estatutário Federal'
+	};
 
-  function getLabelFromOptions(value: string | undefined, options: Array<{value: string, label: string}>): string {
-    if (!value) return "-";
-    return options.find(opt => opt.value === value)?.label || value;
-  }
+	function getLabelFromOptions(
+		value: string | undefined,
+		options: Array<{ value: string; label: string }>
+	): string {
+		if (!value) return '-';
+		return options.find((opt) => opt.value === value)?.label || value;
+	}
 
-  function getRegimeLabel(value?: string) {
-    if (!value) return "-";
-    return REGIME_LABELS[value] ?? value;
-  }
+	function getRegimeLabel(value?: string) {
+		if (!value) return '-';
+		return REGIME_LABELS[value] ?? value;
+	}
 
-  function selectAll() {
-    Object.keys(sections).forEach(key => {
-      sections[key as keyof typeof sections] = true;
-    });
-  }
+	function selectAll() {
+		Object.keys(sections).forEach((key) => {
+			sections[key as keyof typeof sections] = true;
+		});
+	}
 
-  function deselectAll() {
-    Object.keys(sections).forEach(key => {
-      sections[key as keyof typeof sections] = false;
-    });
-  }
+	function deselectAll() {
+		Object.keys(sections).forEach((key) => {
+			sections[key as keyof typeof sections] = false;
+		});
+	}
 
-  async function gerarPDF() {
-    try {
-      generating = true;
+	async function gerarPDF() {
+		try {
+			generating = true;
 
-      const doc = new jsPDF();
+			const doc = new jsPDF();
 
-      // Logo no canto superior esquerdo (proporcional)
-      let yPosition = 20;
-      try {
-        const logoImg = new Image();
-        logoImg.src = logoGovPE;
-        await new Promise<void>((resolve, reject) => {
-          logoImg.onload = () => resolve();
-          logoImg.onerror = () => reject();
-          setTimeout(() => reject(), 3000); // timeout após 3s
-        });
-        
-        // Logo proporcional: largura 25mm, altura ajustada automaticamente
-        const logoWidth = 25;
-        const aspectRatio = logoImg.height / logoImg.width;
-        const logoHeight = logoWidth * aspectRatio;
-        
-        doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
-        
-        // Ajustar posição inicial do texto para ficar ao lado da logo
-        yPosition = Math.max(20, 10 + logoHeight / 2);
-      } catch (err) {
-        console.warn('Não foi possível carregar a logo:', err);
-      }
+			// Logo no canto superior esquerdo (proporcional)
+			let yPosition = 20;
+			try {
+				const logoImg = new Image();
+				logoImg.src = logoGovPE;
+				await new Promise<void>((resolve, reject) => {
+					logoImg.onload = () => resolve();
+					logoImg.onerror = () => reject();
+					setTimeout(() => reject(), 3000); // timeout após 3s
+				});
 
-      // Cabeçalho (alinhado com a logo)
-      doc.setFontSize(16);
-      doc.setFont('helvetica', 'bold');
-      doc.text('Secretaria de Esportes', 50, yPosition);
-      doc.setFontSize(12);
-      doc.setFont('helvetica', 'normal');
-      doc.text('Governo de Pernambuco', 50, yPosition + 7);
-      
-      yPosition = Math.max(45, yPosition + 25);
-      
-      // Título da ficha
-      doc.setFontSize(18);
-      doc.setFont('helvetica', 'bold');
-      doc.text('FICHA CADASTRAL DE FUNCIONÁRIO', 105, yPosition, { align: 'center' });
-      
-      yPosition += 8;
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.text(`Gerado em: ${new Date().toLocaleString('pt-BR')}`, 105, yPosition, { align: 'center' });
-      
-      yPosition += 12;
+				// Logo proporcional: largura 25mm, altura ajustada automaticamente
+				const logoWidth = 25;
+				const aspectRatio = logoImg.height / logoImg.width;
+				const logoHeight = logoWidth * aspectRatio;
 
-      // Dados Pessoais
-      if (sections.dadosPessoais) {
-        const dadosPessoais: any[] = [
-          ['Nome', funcionario.nome],
-          ['Matrícula', funcionario.matricula],
-          ['CPF', maskCPF(funcionario.cpf)],
-          ['RG', funcionario.rg],
-          ['Data Nascimento', funcionario.nascimento],
-        ];
+				doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
 
-        if (funcionario.rgOrgaoExpedidor) dadosPessoais.push(['Órgão Expedidor RG', funcionario.rgOrgaoExpedidor]);
-        if (funcionario.rgDataEmissao) dadosPessoais.push(['Data Emissão RG', funcionario.rgDataEmissao]);
-        if (funcionario.sexo) dadosPessoais.push(['Sexo', getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)]);
-        if (funcionario.estadoCivil) dadosPessoais.push(['Estado Civil', getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)]);
-        if (funcionario.nacionalidade) dadosPessoais.push(['Nacionalidade', funcionario.nacionalidade]);
+				// Ajustar posição inicial do texto para ficar ao lado da logo
+				yPosition = Math.max(20, 10 + logoHeight / 2);
+			} catch (err) {
+				console.warn('Não foi possível carregar a logo:', err);
+			}
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['DADOS PESSOAIS', '']],
-          body: dadosPessoais,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+			// Cabeçalho (alinhado com a logo)
+			doc.setFontSize(16);
+			doc.setFont('helvetica', 'bold');
+			doc.text('Secretaria de Esportes', 50, yPosition);
+			doc.setFontSize(12);
+			doc.setFont('helvetica', 'normal');
+			doc.text('Governo de Pernambuco', 50, yPosition + 7);
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+			yPosition = Math.max(45, yPosition + 25);
 
-      // Filiação
-      if (sections.filiacao && (funcionario.nomePai || funcionario.nomeMae)) {
-        const filiacao: any[] = [];
-        if (funcionario.nomePai) filiacao.push(['Nome do Pai', funcionario.nomePai]);
-        if (funcionario.nomeMae) filiacao.push(['Nome da Mãe', funcionario.nomeMae]);
+			// Título da ficha
+			doc.setFontSize(18);
+			doc.setFont('helvetica', 'bold');
+			doc.text('FICHA CADASTRAL DE FUNCIONÁRIO', 105, yPosition, { align: 'center' });
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['FILIAÇÃO', '']],
-          body: filiacao,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+			yPosition += 8;
+			doc.setFontSize(10);
+			doc.setFont('helvetica', 'normal');
+			doc.text(`Gerado em: ${new Date().toLocaleString('pt-BR')}`, 105, yPosition, {
+				align: 'center'
+			});
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+			yPosition += 12;
 
-      // Naturalidade
-      if (sections.naturalidade && (funcionario.naturalidade || funcionario.naturalidadeUF)) {
-        const naturalidade: any[] = [];
-        if (funcionario.naturalidade) naturalidade.push(['Cidade', funcionario.naturalidade]);
-        if (funcionario.naturalidadeUF) naturalidade.push(['UF', funcionario.naturalidadeUF]);
+			// Dados Pessoais
+			if (sections.dadosPessoais) {
+				const dadosPessoais: any[] = [
+					['Nome', funcionario.nome],
+					['Matrícula', funcionario.matricula],
+					['CPF', maskCPF(funcionario.cpf)],
+					['RG', funcionario.rg],
+					['Data Nascimento', funcionario.nascimento]
+				];
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['NATURALIDADE', '']],
-          body: naturalidade,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+				if (funcionario.rgOrgaoExpedidor)
+					dadosPessoais.push(['Órgão Expedidor RG', funcionario.rgOrgaoExpedidor]);
+				if (funcionario.rgDataEmissao)
+					dadosPessoais.push(['Data Emissão RG', funcionario.rgDataEmissao]);
+				if (funcionario.sexo)
+					dadosPessoais.push(['Sexo', getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)]);
+				if (funcionario.estadoCivil)
+					dadosPessoais.push([
+						'Estado Civil',
+						getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)
+					]);
+				if (funcionario.nacionalidade)
+					dadosPessoais.push(['Nacionalidade', funcionario.nacionalidade]);
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['DADOS PESSOAIS', '']],
+					body: dadosPessoais,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-      // Documentos
-      if (sections.documentos) {
-        const documentosData: any[] = [];
-        
-        if (funcionario.carteiraProfissionalNumero) {
-          documentosData.push(['Cart. Profissional', `Nº ${funcionario.carteiraProfissionalNumero}${funcionario.carteiraProfissionalSerie ? ' - Série: ' + funcionario.carteiraProfissionalSerie : ''}`]);
-        }
-        if (funcionario.carteiraProfissionalDataEmissao) {
-          documentosData.push(['Emissão Cart. Profissional', funcionario.carteiraProfissionalDataEmissao]);
-        }
-        if (funcionario.reservistaNumero) {
-          documentosData.push(['Reservista', `Nº ${funcionario.reservistaNumero}${funcionario.reservistaSerie ? ' - Série: ' + funcionario.reservistaSerie : ''}`]);
-        }
-        if (funcionario.tituloEleitorNumero) {
-          let titulo = `Nº ${funcionario.tituloEleitorNumero}`;
-          if (funcionario.tituloEleitorZona) titulo += ` - Zona: ${funcionario.tituloEleitorZona}`;
-          if (funcionario.tituloEleitorSecao) titulo += ` - Seção: ${funcionario.tituloEleitorSecao}`;
-          documentosData.push(['Título Eleitor', titulo]);
-        }
-        if (funcionario.pisNumero) documentosData.push(['PIS/PASEP', funcionario.pisNumero]);
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        if (documentosData.length > 0) {
-          autoTable(doc, {
-            startY: yPosition,
-            head: [['DOCUMENTOS', '']],
-            body: documentosData,
-            theme: 'grid',
-            headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-            styles: { fontSize: 9 },
-          });
+			// Filiação
+			if (sections.filiacao && (funcionario.nomePai || funcionario.nomeMae)) {
+				const filiacao: any[] = [];
+				if (funcionario.nomePai) filiacao.push(['Nome do Pai', funcionario.nomePai]);
+				if (funcionario.nomeMae) filiacao.push(['Nome da Mãe', funcionario.nomeMae]);
 
-          yPosition = (doc as any).lastAutoTable.finalY + 10;
-        }
-      }
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['FILIAÇÃO', '']],
+					body: filiacao,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-      // Formação
-      if (sections.formacao && (funcionario.grauInstrucao || funcionario.formacao)) {
-        const formacaoData: any[] = [];
-        if (funcionario.grauInstrucao) formacaoData.push(['Grau Instrução', getLabelFromOptions(funcionario.grauInstrucao, GRAU_INSTRUCAO_OPTIONS)]);
-        if (funcionario.formacao) formacaoData.push(['Formação', funcionario.formacao]);
-        if (funcionario.formacaoRegistro) formacaoData.push(['Registro Nº', funcionario.formacaoRegistro]);
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['FORMAÇÃO', '']],
-          body: formacaoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+			// Naturalidade
+			if (sections.naturalidade && (funcionario.naturalidade || funcionario.naturalidadeUF)) {
+				const naturalidade: any[] = [];
+				if (funcionario.naturalidade) naturalidade.push(['Cidade', funcionario.naturalidade]);
+				if (funcionario.naturalidadeUF) naturalidade.push(['UF', funcionario.naturalidadeUF]);
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['NATURALIDADE', '']],
+					body: naturalidade,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-      // Saúde
-      if (sections.saude && (funcionario.grupoSanguineo || funcionario.fatorRH)) {
-        const saudeData: any[] = [];
-        if (funcionario.grupoSanguineo) saudeData.push(['Grupo Sanguíneo', funcionario.grupoSanguineo]);
-        if (funcionario.fatorRH) saudeData.push(['Fator RH', getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)]);
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['SAÚDE', '']],
-          body: saudeData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+			// Documentos
+			if (sections.documentos) {
+				const documentosData: any[] = [];
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+				if (funcionario.carteiraProfissionalNumero) {
+					documentosData.push([
+						'Cart. Profissional',
+						`Nº ${funcionario.carteiraProfissionalNumero}${funcionario.carteiraProfissionalSerie ? ' - Série: ' + funcionario.carteiraProfissionalSerie : ''}`
+					]);
+				}
+				if (funcionario.carteiraProfissionalDataEmissao) {
+					documentosData.push([
+						'Emissão Cart. Profissional',
+						funcionario.carteiraProfissionalDataEmissao
+					]);
+				}
+				if (funcionario.reservistaNumero) {
+					documentosData.push([
+						'Reservista',
+						`Nº ${funcionario.reservistaNumero}${funcionario.reservistaSerie ? ' - Série: ' + funcionario.reservistaSerie : ''}`
+					]);
+				}
+				if (funcionario.tituloEleitorNumero) {
+					let titulo = `Nº ${funcionario.tituloEleitorNumero}`;
+					if (funcionario.tituloEleitorZona) titulo += ` - Zona: ${funcionario.tituloEleitorZona}`;
+					if (funcionario.tituloEleitorSecao)
+						titulo += ` - Seção: ${funcionario.tituloEleitorSecao}`;
+					documentosData.push(['Título Eleitor', titulo]);
+				}
+				if (funcionario.pisNumero) documentosData.push(['PIS/PASEP', funcionario.pisNumero]);
 
-      // Endereço
-      if (sections.endereco) {
-        const enderecoData: any[] = [
-          ['Endereço', funcionario.endereco],
-          ['Cidade', funcionario.cidade],
-          ['UF', funcionario.uf],
-          ['CEP', maskCEP(funcionario.cep)],
-        ];
+				if (documentosData.length > 0) {
+					autoTable(doc, {
+						startY: yPosition,
+						head: [['DOCUMENTOS', '']],
+						body: documentosData,
+						theme: 'grid',
+						headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+						styles: { fontSize: 9 }
+					});
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['ENDEREÇO', '']],
-          body: enderecoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+					yPosition = (doc as any).lastAutoTable.finalY + 10;
+				}
+			}
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+			// Formação
+			if (sections.formacao && (funcionario.grauInstrucao || funcionario.formacao)) {
+				const formacaoData: any[] = [];
+				if (funcionario.grauInstrucao)
+					formacaoData.push([
+						'Grau Instrução',
+						getLabelFromOptions(funcionario.grauInstrucao, GRAU_INSTRUCAO_OPTIONS)
+					]);
+				if (funcionario.formacao) formacaoData.push(['Formação', funcionario.formacao]);
+				if (funcionario.formacaoRegistro)
+					formacaoData.push(['Registro Nº', funcionario.formacaoRegistro]);
 
-      // Contato
-      if (sections.contato) {
-        const contatoData: any[] = [
-          ['E-mail', funcionario.email],
-          ['Telefone', maskPhone(funcionario.telefone)],
-        ];
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['FORMAÇÃO', '']],
+					body: formacaoData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['CONTATO', '']],
-          body: contatoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+			// Saúde
+			if (sections.saude && (funcionario.grupoSanguineo || funcionario.fatorRH)) {
+				const saudeData: any[] = [];
+				if (funcionario.grupoSanguineo)
+					saudeData.push(['Grupo Sanguíneo', funcionario.grupoSanguineo]);
+				if (funcionario.fatorRH)
+					saudeData.push(['Fator RH', getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)]);
 
-      // Nova página para cargo
-      if (yPosition > 200) {
-        doc.addPage();
-        yPosition = 20;
-      }
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['SAÚDE', '']],
+					body: saudeData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-      // Cargo e Vínculo
-      if (sections.cargo) {
-        const cargoData: any[] = [
-          ['Tipo', funcionario.simboloTipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'],
-        ];
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        const simboloInfo = funcionario.simbolo ?? funcionario.simboloDetalhes ?? funcionario.simboloDados;
-        if (simboloInfo) {
-          cargoData.push(['Símbolo', simboloInfo.nome]);
-          if (simboloInfo.descricao) cargoData.push(['Descrição do Símbolo', simboloInfo.descricao]);
-        }
-        if (funcionario.descricaoCargo) cargoData.push(['Descrição', funcionario.descricaoCargo]);
-        if (funcionario.regimeTrabalho) cargoData.push(['Regime do Funcionário', getRegimeLabel(funcionario.regimeTrabalho)]);
-        if (funcionario.admissaoData) cargoData.push(['Data Admissão', funcionario.admissaoData]);
-        if (funcionario.nomeacaoPortaria) cargoData.push(['Portaria', funcionario.nomeacaoPortaria]);
-        if (funcionario.nomeacaoData) cargoData.push(['Data Nomeação', funcionario.nomeacaoData]);
-        if (funcionario.nomeacaoDOE) cargoData.push(['DOE', funcionario.nomeacaoDOE]);
-        cargoData.push(['Pertence Órgão Público', funcionario.pertenceOrgaoPublico ? 'Sim' : 'Não']);
-        if (funcionario.pertenceOrgaoPublico && funcionario.orgaoOrigem) cargoData.push(['Órgão Origem', funcionario.orgaoOrigem]);
-        if (funcionario.aposentado && funcionario.aposentado !== 'nao') {
-          cargoData.push(['Aposentado', getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)]);
-        }
+			// Endereço
+			if (sections.endereco) {
+				const enderecoData: any[] = [
+					['Endereço', funcionario.endereco],
+					['Cidade', funcionario.cidade],
+					['UF', funcionario.uf],
+					['CEP', maskCEP(funcionario.cep)]
+				];
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['CARGO E VÍNCULO', '']],
-          body: cargoData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['ENDEREÇO', '']],
+					body: enderecoData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-      // Dados Financeiros
-      if (sections.financeiro && funcionario.simbolo) {
-        const simbolo = funcionario.simbolo;
-        const financeiroData: any[] = [
-          ['Símbolo', simbolo.nome],
-          ['Tipo', simbolo.tipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'],
-          ['Remuneração Total', `R$ ${simbolo.valor}`],
-        ];
+			// Contato
+			if (sections.contato) {
+				const contatoData: any[] = [
+					['E-mail', funcionario.email],
+					['Telefone', maskPhone(funcionario.telefone)]
+				];
 
-        if (funcionario.simboloTipo === 'cargo_comissionado') {
-          if (simbolo.vencValor) {
-            financeiroData.push(['Vencimento', `R$ ${simbolo.vencValor}`]);
-          }
-          if (simbolo.repValor) {
-            financeiroData.push(['Representação', `R$ ${simbolo.repValor}`]);
-          }
-        }
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['CONTATO', '']],
+					body: contatoData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['DADOS FINANCEIROS', '']],
-          body: financeiroData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+			// Nova página para cargo
+			if (yPosition > 200) {
+				doc.addPage();
+				yPosition = 20;
+			}
 
-      // Dados Bancários
-      if (sections.bancario && funcionario.contaBradescoNumero) {
-        const bancarioData: any[] = [
-          ['Conta', `${funcionario.contaBradescoNumero}${funcionario.contaBradescoDV ? '-' + funcionario.contaBradescoDV : ''}`],
-        ];
-        if (funcionario.contaBradescoAgencia) bancarioData.push(['Agência', funcionario.contaBradescoAgencia]);
+			// Cargo e Vínculo
+			if (sections.cargo) {
+				const cargoData: any[] = [
+					[
+						'Tipo',
+						funcionario.simboloTipo === 'cargo_comissionado'
+							? 'Cargo Comissionado'
+							: 'Função Gratificada'
+					]
+				];
 
-        autoTable(doc, {
-          startY: yPosition,
-          head: [['DADOS BANCÁRIOS - BRADESCO', '']],
-          body: bancarioData,
-          theme: 'grid',
-          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-          styles: { fontSize: 9 },
-        });
+				const simboloInfo =
+					funcionario.simbolo ?? funcionario.simboloDetalhes ?? funcionario.simboloDados;
+				if (simboloInfo) {
+					cargoData.push(['Símbolo', simboloInfo.nome]);
+					if (simboloInfo.descricao)
+						cargoData.push(['Descrição do Símbolo', simboloInfo.descricao]);
+				}
+				if (funcionario.descricaoCargo) cargoData.push(['Descrição', funcionario.descricaoCargo]);
+				if (funcionario.regimeTrabalho)
+					cargoData.push(['Regime do Funcionário', getRegimeLabel(funcionario.regimeTrabalho)]);
+				if (funcionario.admissaoData) cargoData.push(['Data Admissão', funcionario.admissaoData]);
+				if (funcionario.nomeacaoPortaria)
+					cargoData.push(['Portaria', funcionario.nomeacaoPortaria]);
+				if (funcionario.nomeacaoData) cargoData.push(['Data Nomeação', funcionario.nomeacaoData]);
+				if (funcionario.nomeacaoDOE) cargoData.push(['DOE', funcionario.nomeacaoDOE]);
+				cargoData.push([
+					'Pertence Órgão Público',
+					funcionario.pertenceOrgaoPublico ? 'Sim' : 'Não'
+				]);
+				if (funcionario.pertenceOrgaoPublico && funcionario.orgaoOrigem)
+					cargoData.push(['Órgão Origem', funcionario.orgaoOrigem]);
+				if (funcionario.aposentado && funcionario.aposentado !== 'nao') {
+					cargoData.push([
+						'Aposentado',
+						getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)
+					]);
+				}
 
-        yPosition = (doc as any).lastAutoTable.finalY + 10;
-      }
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['CARGO E VÍNCULO', '']],
+					body: cargoData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
 
-      // Adicionar rodapé em todas as páginas
-      const pageCount = (doc as any).internal.getNumberOfPages();
-      for (let i = 1; i <= pageCount; i++) {
-        doc.setPage(i);
-        doc.setFontSize(9);
-        doc.setFont('helvetica', 'normal');
-        doc.setTextColor(128, 128, 128);
-        doc.text('SGSE - Sistema de Gerenciamento da Secretaria de Esportes', 105, 285, { align: 'center' });
-        doc.text(`Página ${i} de ${pageCount}`, 195, 285, { align: 'right' });
-      }
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
 
-      // Salvar PDF
-      doc.save(`Ficha_${funcionario.nome.replace(/ /g, '_')}_${new Date().getTime()}.pdf`);
+			// Dados Financeiros
+			if (sections.financeiro && funcionario.simbolo) {
+				const simbolo = funcionario.simbolo;
+				const financeiroData: any[] = [
+					['Símbolo', simbolo.nome],
+					[
+						'Tipo',
+						simbolo.tipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'
+					],
+					['Remuneração Total', `R$ ${simbolo.valor}`]
+				];
 
-      onClose();
-    } catch (error) {
-      console.error('Erro ao gerar PDF:', error);
-      alert('Erro ao gerar PDF. Verifique o console para mais detalhes.');
-    } finally {
-      generating = false;
-    }
-  }
+				if (funcionario.simboloTipo === 'cargo_comissionado') {
+					if (simbolo.vencValor) {
+						financeiroData.push(['Vencimento', `R$ ${simbolo.vencValor}`]);
+					}
+					if (simbolo.repValor) {
+						financeiroData.push(['Representação', `R$ ${simbolo.repValor}`]);
+					}
+				}
 
-  $effect(() => {
-    if (modalRef) {
-      modalRef.showModal();
-    }
-  });
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['DADOS FINANCEIROS', '']],
+					body: financeiroData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
+
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
+
+			// Dados Bancários
+			if (sections.bancario && funcionario.contaBradescoNumero) {
+				const bancarioData: any[] = [
+					[
+						'Conta',
+						`${funcionario.contaBradescoNumero}${funcionario.contaBradescoDV ? '-' + funcionario.contaBradescoDV : ''}`
+					]
+				];
+				if (funcionario.contaBradescoAgencia)
+					bancarioData.push(['Agência', funcionario.contaBradescoAgencia]);
+
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['DADOS BANCÁRIOS - BRADESCO', '']],
+					body: bancarioData,
+					theme: 'grid',
+					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+					styles: { fontSize: 9 }
+				});
+
+				yPosition = (doc as any).lastAutoTable.finalY + 10;
+			}
+
+			// Adicionar rodapé em todas as páginas
+			const pageCount = (doc as any).internal.getNumberOfPages();
+			for (let i = 1; i <= pageCount; i++) {
+				doc.setPage(i);
+				doc.setFontSize(9);
+				doc.setFont('helvetica', 'normal');
+				doc.setTextColor(128, 128, 128);
+				doc.text('SGSE - Sistema de Gerenciamento da Secretaria de Esportes', 105, 285, {
+					align: 'center'
+				});
+				doc.text(`Página ${i} de ${pageCount}`, 195, 285, { align: 'right' });
+			}
+
+			// Salvar PDF
+			doc.save(`Ficha_${funcionario.nome.replace(/ /g, '_')}_${new Date().getTime()}.pdf`);
+
+			onClose();
+		} catch (error) {
+			console.error('Erro ao gerar PDF:', error);
+			alert('Erro ao gerar PDF. Verifique o console para mais detalhes.');
+		} finally {
+			generating = false;
+		}
+	}
+
+	$effect(() => {
+		if (modalRef) {
+			modalRef.showModal();
+		}
+	});
 </script>
 
 <dialog bind:this={modalRef} class="modal">
-  <div class="modal-box max-w-4xl">
-    <h3 class="font-bold text-2xl mb-4">Imprimir Ficha Cadastral</h3>
-    <p class="text-sm text-base-content/70 mb-6">Selecione as seções que deseja incluir no PDF</p>
+	<div class="modal-box max-w-4xl">
+		<h3 class="mb-4 text-2xl font-bold">Imprimir Ficha Cadastral</h3>
+		<p class="text-base-content/70 mb-6 text-sm">Selecione as seções que deseja incluir no PDF</p>
 
-    <!-- Botões de seleção -->
-    <div class="flex gap-2 mb-6">
-      <button type="button" class="btn btn-sm btn-outline" onclick={selectAll}>
-        <CheckCircle2 class="h-4 w-4" strokeWidth={2} />
-        Selecionar Todos
-      </button>
-      <button type="button" class="btn btn-sm btn-outline" onclick={deselectAll}>
-        <X class="h-4 w-4" strokeWidth={2} />
-        Desmarcar Todos
-      </button>
-    </div>
+		<!-- Botões de seleção -->
+		<div class="mb-6 flex gap-2">
+			<button type="button" class="btn btn-sm btn-outline" onclick={selectAll}>
+				<CheckCircle2 class="h-4 w-4" strokeWidth={2} />
+				Selecionar Todos
+			</button>
+			<button type="button" class="btn btn-sm btn-outline" onclick={deselectAll}>
+				<X class="h-4 w-4" strokeWidth={2} />
+				Desmarcar Todos
+			</button>
+		</div>
 
-    <!-- Grid de checkboxes -->
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6 max-h-96 overflow-y-auto p-2 border rounded-lg bg-base-200">
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.dadosPessoais} />
-        <span class="label-text">Dados Pessoais</span>
-      </label>
+		<!-- Grid de checkboxes -->
+		<div
+			class="bg-base-200 mb-6 grid max-h-96 grid-cols-2 gap-4 overflow-y-auto rounded-lg border p-2 md:grid-cols-3"
+		>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input
+					type="checkbox"
+					class="checkbox checkbox-primary"
+					bind:checked={sections.dadosPessoais}
+				/>
+				<span class="label-text">Dados Pessoais</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.filiacao} />
-        <span class="label-text">Filiação</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.filiacao} />
+				<span class="label-text">Filiação</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.naturalidade} />
-        <span class="label-text">Naturalidade</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input
+					type="checkbox"
+					class="checkbox checkbox-primary"
+					bind:checked={sections.naturalidade}
+				/>
+				<span class="label-text">Naturalidade</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.documentos} />
-        <span class="label-text">Documentos</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input
+					type="checkbox"
+					class="checkbox checkbox-primary"
+					bind:checked={sections.documentos}
+				/>
+				<span class="label-text">Documentos</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.formacao} />
-        <span class="label-text">Formação</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.formacao} />
+				<span class="label-text">Formação</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.saude} />
-        <span class="label-text">Saúde</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.saude} />
+				<span class="label-text">Saúde</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.endereco} />
-        <span class="label-text">Endereço</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.endereco} />
+				<span class="label-text">Endereço</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.contato} />
-        <span class="label-text">Contato</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.contato} />
+				<span class="label-text">Contato</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.cargo} />
-        <span class="label-text">Cargo e Vínculo</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.cargo} />
+				<span class="label-text">Cargo e Vínculo</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.financeiro} />
-        <span class="label-text">Dados Financeiros</span>
-      </label>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input
+					type="checkbox"
+					class="checkbox checkbox-primary"
+					bind:checked={sections.financeiro}
+				/>
+				<span class="label-text">Dados Financeiros</span>
+			</label>
 
-      <label class="label cursor-pointer justify-start gap-3">
-        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.bancario} />
-        <span class="label-text">Dados Bancários</span>
-      </label>
-    </div>
+			<label class="label cursor-pointer justify-start gap-3">
+				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.bancario} />
+				<span class="label-text">Dados Bancários</span>
+			</label>
+		</div>
 
-    <!-- Ações -->
-    <div class="modal-action">
-      <button type="button" class="btn btn-ghost" onclick={onClose} disabled={generating}>
-        Cancelar
-      </button>
-      <button type="button" class="btn btn-primary gap-2" onclick={gerarPDF} disabled={generating}>
-        {#if generating}
-          <span class="loading loading-spinner loading-sm"></span>
-          Gerando PDF...
-        {:else}
-          <Printer class="h-5 w-5" strokeWidth={2} />
-          Gerar PDF
-        {/if}
-      </button>
-    </div>
-  </div>
+		<!-- Ações -->
+		<div class="modal-action">
+			<button type="button" class="btn" onclick={onClose} disabled={generating}> Cancelar </button>
+			<button type="button" class="btn btn-primary gap-2" onclick={gerarPDF} disabled={generating}>
+				{#if generating}
+					<span class="loading loading-spinner loading-sm"></span>
+					Gerando PDF...
+				{:else}
+					<Printer class="h-5 w-5" strokeWidth={2} />
+					Gerar PDF
+				{/if}
+			</button>
+		</div>
+	</div>
 
-  <form method="dialog" class="modal-backdrop">
-    <button type="button" onclick={onClose}>fechar</button>
-  </form>
+	<form method="dialog" class="modal-backdrop">
+		<button type="button" onclick={onClose}>fechar</button>
+	</form>
 </dialog>
-
diff --git a/apps/web/src/lib/components/SolicitarFerias.svelte b/apps/web/src/lib/components/SolicitarFerias.svelte
index 7658086..4da0ddb 100644
--- a/apps/web/src/lib/components/SolicitarFerias.svelte
+++ b/apps/web/src/lib/components/SolicitarFerias.svelte
@@ -317,7 +317,7 @@
 		<!-- Ações -->
 		<div class="card-actions mt-6 justify-end">
 			{#if onCancelar}
-				<button type="button" class="btn btn-ghost" onclick={onCancelar} disabled={processando}>
+				<button type="button" class="btn" onclick={onCancelar} disabled={processando}>
 					Cancelar
 				</button>
 			{/if}
diff --git a/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte b/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
index 5ce13b6..67a8b81 100644
--- a/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
+++ b/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
@@ -1,503 +1,486 @@
 <script lang="ts">
-  import { useConvexClient, useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import CalendarioAusencias from "./CalendarioAusencias.svelte";
-  import ErrorModal from "../ErrorModal.svelte";
-  import { toast } from "svelte-sonner";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import CalendarioAusencias from './CalendarioAusencias.svelte';
+	import ErrorModal from '../ErrorModal.svelte';
+	import { toast } from 'svelte-sonner';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  interface Props {
-    funcionarioId: Id<"funcionarios">;
-    onSucesso?: () => void;
-    onCancelar?: () => void;
-  }
+	interface Props {
+		funcionarioId: Id<'funcionarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
 
-  let { funcionarioId, onSucesso, onCancelar }: Props = $props();
+	let { funcionarioId, onSucesso, onCancelar }: Props = $props();
 
-  // Cliente Convex
-  const client = useConvexClient();
+	// Cliente Convex
+	const client = useConvexClient();
 
-  // Estado do wizard
-  let passoAtual = $state(1);
-  const totalPassos = 2;
+	// Estado do wizard
+	let passoAtual = $state(1);
+	const totalPassos = 2;
 
-  // Dados da solicitação
-  let dataInicio = $state<string>("");
-  let dataFim = $state<string>("");
-  let motivo = $state("");
-  let processando = $state(false);
+	// Dados da solicitação
+	let dataInicio = $state<string>('');
+	let dataFim = $state<string>('');
+	let motivo = $state('');
+	let processando = $state(false);
 
-  // Estados para modal de erro
-  let mostrarModalErro = $state(false);
-  let mensagemErroModal = $state("");
-  let detalhesErroModal = $state("");
+	// Estados para modal de erro
+	let mostrarModalErro = $state(false);
+	let mensagemErroModal = $state('');
+	let detalhesErroModal = $state('');
 
-  // Buscar ausências existentes para exibir no calendário
-  const ausenciasExistentesQuery = useQuery(
-    api.ausencias.listarMinhasSolicitacoes,
-    {
-      funcionarioId,
-    },
-  );
+	// Buscar ausências existentes para exibir no calendário
+	const ausenciasExistentesQuery = useQuery(api.ausencias.listarMinhasSolicitacoes, {
+		funcionarioId
+	});
 
-  // Filtrar apenas ausências aprovadas ou aguardando aprovação (que bloqueiam novas solicitações)
-  const ausenciasExistentes = $derived(
-    (ausenciasExistentesQuery?.data || [])
-      .filter(
-        (a) => a.status === "aprovado" || a.status === "aguardando_aprovacao",
-      )
-      .map((a) => ({
-        dataInicio: a.dataInicio,
-        dataFim: a.dataFim,
-        status: a.status as "aguardando_aprovacao" | "aprovado",
-      })),
-  );
+	// Filtrar apenas ausências aprovadas ou aguardando aprovação (que bloqueiam novas solicitações)
+	const ausenciasExistentes = $derived(
+		(ausenciasExistentesQuery?.data || [])
+			.filter((a) => a.status === 'aprovado' || a.status === 'aguardando_aprovacao')
+			.map((a) => ({
+				dataInicio: a.dataInicio,
+				dataFim: a.dataFim,
+				status: a.status as 'aguardando_aprovacao' | 'aprovado'
+			}))
+	);
 
-  // Calcular dias selecionados
-  function calcularDias(inicio: string, fim: string): number {
-    if (!inicio || !fim) return 0;
-    const dInicio = new Date(inicio);
-    const dFim = new Date(fim);
-    const diffTime = Math.abs(dFim.getTime() - dInicio.getTime());
-    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
-  }
+	// Calcular dias selecionados
+	function calcularDias(inicio: string, fim: string): number {
+		if (!inicio || !fim) return 0;
+		const dInicio = new Date(inicio);
+		const dFim = new Date(fim);
+		const diffTime = Math.abs(dFim.getTime() - dInicio.getTime());
+		return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  const totalDias = $derived(calcularDias(dataInicio, dataFim));
+	const totalDias = $derived(calcularDias(dataInicio, dataFim));
 
-  // Funções de navegação
-  function proximoPasso() {
-    if (passoAtual === 1) {
-      if (!dataInicio || !dataFim) {
-        toast.error("Selecione o período de ausência no calendário");
-        return;
-      }
+	// Funções de navegação
+	function proximoPasso() {
+		if (passoAtual === 1) {
+			if (!dataInicio || !dataFim) {
+				toast.error('Selecione o período de ausência no calendário');
+				return;
+			}
 
-      const hoje = new Date();
-      hoje.setHours(0, 0, 0, 0);
-      const inicio = new Date(dataInicio);
+			const hoje = new Date();
+			hoje.setHours(0, 0, 0, 0);
+			const inicio = new Date(dataInicio);
 
-      if (inicio < hoje) {
-        toast.error("A data de início não pode ser no passado");
-        return;
-      }
+			if (inicio < hoje) {
+				toast.error('A data de início não pode ser no passado');
+				return;
+			}
 
-      if (new Date(dataFim) < new Date(dataInicio)) {
-        toast.error("A data de fim deve ser maior ou igual à data de início");
-        return;
-      }
-    }
+			if (new Date(dataFim) < new Date(dataInicio)) {
+				toast.error('A data de fim deve ser maior ou igual à data de início');
+				return;
+			}
+		}
 
-    if (passoAtual < totalPassos) {
-      passoAtual++;
-    }
-  }
+		if (passoAtual < totalPassos) {
+			passoAtual++;
+		}
+	}
 
-  function passoAnterior() {
-    if (passoAtual > 1) {
-      passoAtual--;
-    }
-  }
+	function passoAnterior() {
+		if (passoAtual > 1) {
+			passoAtual--;
+		}
+	}
 
-  async function enviarSolicitacao() {
-    if (!dataInicio || !dataFim) {
-      toast.error("Selecione o período de ausência");
-      return;
-    }
+	async function enviarSolicitacao() {
+		if (!dataInicio || !dataFim) {
+			toast.error('Selecione o período de ausência');
+			return;
+		}
 
-    if (!motivo.trim() || motivo.trim().length < 10) {
-      toast.error("O motivo deve ter no mínimo 10 caracteres");
-      return;
-    }
+		if (!motivo.trim() || motivo.trim().length < 10) {
+			toast.error('O motivo deve ter no mínimo 10 caracteres');
+			return;
+		}
 
-    try {
-      processando = true;
-      mostrarModalErro = false;
-      mensagemErroModal = "";
+		try {
+			processando = true;
+			mostrarModalErro = false;
+			mensagemErroModal = '';
 
-      await client.mutation(api.ausencias.criarSolicitacao, {
-        funcionarioId,
-        dataInicio,
-        dataFim,
-        motivo: motivo.trim(),
-      });
+			await client.mutation(api.ausencias.criarSolicitacao, {
+				funcionarioId,
+				dataInicio,
+				dataFim,
+				motivo: motivo.trim()
+			});
 
-      toast.success("Solicitação de ausência criada com sucesso!");
+			toast.success('Solicitação de ausência criada com sucesso!');
 
-      if (onSucesso) {
-        onSucesso();
-      }
-    } catch (error) {
-      console.error("Erro ao criar solicitação:", error);
-      const mensagemErro =
-        error instanceof Error ? error.message : String(error);
+			if (onSucesso) {
+				onSucesso();
+			}
+		} catch (error) {
+			console.error('Erro ao criar solicitação:', error);
+			const mensagemErro = error instanceof Error ? error.message : String(error);
 
-      // Verificar se é erro de sobreposição de período
-      if (
-        mensagemErro.includes("Já existe uma solicitação") ||
-        mensagemErro.includes("já existe") ||
-        mensagemErro.includes("solicitação aprovada ou pendente")
-      ) {
-        mensagemErroModal = "Não é possível criar esta solicitação.";
-        detalhesErroModal = `Já existe uma solicitação aprovada ou pendente para o período selecionado:\n\nPeríodo selecionado: ${new Date(dataInicio).toLocaleDateString("pt-BR")} até ${new Date(dataFim).toLocaleDateString("pt-BR")}\n\nPor favor, escolha um período diferente ou aguarde a resposta da solicitação existente.`;
-        mostrarModalErro = true;
-      } else {
-        // Outros erros continuam usando toast
-        toast.error(mensagemErro);
-      }
-    } finally {
-      processando = false;
-    }
-  }
+			// Verificar se é erro de sobreposição de período
+			if (
+				mensagemErro.includes('Já existe uma solicitação') ||
+				mensagemErro.includes('já existe') ||
+				mensagemErro.includes('solicitação aprovada ou pendente')
+			) {
+				mensagemErroModal = 'Não é possível criar esta solicitação.';
+				detalhesErroModal = `Já existe uma solicitação aprovada ou pendente para o período selecionado:\n\nPeríodo selecionado: ${new Date(dataInicio).toLocaleDateString('pt-BR')} até ${new Date(dataFim).toLocaleDateString('pt-BR')}\n\nPor favor, escolha um período diferente ou aguarde a resposta da solicitação existente.`;
+				mostrarModalErro = true;
+			} else {
+				// Outros erros continuam usando toast
+				toast.error(mensagemErro);
+			}
+		} finally {
+			processando = false;
+		}
+	}
 
-  function fecharModalErro() {
-    mostrarModalErro = false;
-    mensagemErroModal = "";
-    detalhesErroModal = "";
-  }
+	function fecharModalErro() {
+		mostrarModalErro = false;
+		mensagemErroModal = '';
+		detalhesErroModal = '';
+	}
 
-  function handlePeriodoSelecionado(periodo: {
-    dataInicio: string;
-    dataFim: string;
-  }) {
-    dataInicio = periodo.dataInicio;
-    dataFim = periodo.dataFim;
-  }
+	function handlePeriodoSelecionado(periodo: { dataInicio: string; dataFim: string }) {
+		dataInicio = periodo.dataInicio;
+		dataFim = periodo.dataFim;
+	}
 </script>
 
 <div class="wizard-ausencia">
-  <!-- Header -->
-  <div class="mb-6">
-    <p class="text-base-content/70">
-      Solicite uma ausência para assuntos particulares
-    </p>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<p class="text-base-content/70">Solicite uma ausência para assuntos particulares</p>
+	</div>
 
-  <!-- Indicador de progresso -->
-  <div class="steps mb-8">
-    <div class="step {passoAtual >= 1 ? 'step-primary' : ''}">
-      <div class="step-item">
-        <div class="step-marker">
-          {#if passoAtual > 1}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          {:else}
-            {passoAtual}
-          {/if}
-        </div>
-        <div class="step-content">
-          <div class="step-title">Selecionar Período</div>
-          <div class="step-description">Escolha as datas no calendário</div>
-        </div>
-      </div>
-    </div>
-    <div class="step {passoAtual >= 2 ? 'step-primary' : ''}">
-      <div class="step-item">
-        <div class="step-marker">
-          {#if passoAtual > 2}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          {:else}
-            2
-          {/if}
-        </div>
-        <div class="step-content">
-          <div class="step-title">Informar Motivo</div>
-          <div class="step-description">Descreva o motivo da ausência</div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Indicador de progresso -->
+	<div class="steps mb-8">
+		<div class="step {passoAtual >= 1 ? 'step-primary' : ''}">
+			<div class="step-item">
+				<div class="step-marker">
+					{#if passoAtual > 1}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+					{:else}
+						{passoAtual}
+					{/if}
+				</div>
+				<div class="step-content">
+					<div class="step-title">Selecionar Período</div>
+					<div class="step-description">Escolha as datas no calendário</div>
+				</div>
+			</div>
+		</div>
+		<div class="step {passoAtual >= 2 ? 'step-primary' : ''}">
+			<div class="step-item">
+				<div class="step-marker">
+					{#if passoAtual > 2}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+					{:else}
+						2
+					{/if}
+				</div>
+				<div class="step-content">
+					<div class="step-title">Informar Motivo</div>
+					<div class="step-description">Descreva o motivo da ausência</div>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Conteúdo dos passos -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      {#if passoAtual === 1}
-        <!-- Passo 1: Selecionar Período -->
-        <div class="space-y-6">
-          <div>
-            <h3 class="text-2xl font-bold mb-2">Selecione o Período</h3>
-            <p class="text-base-content/70">
-              Clique e arraste no calendário para selecionar o período de
-              ausência
-            </p>
-          </div>
+	<!-- Conteúdo dos passos -->
+	<div class="card bg-base-100 shadow-xl">
+		<div class="card-body">
+			{#if passoAtual === 1}
+				<!-- Passo 1: Selecionar Período -->
+				<div class="space-y-6">
+					<div>
+						<h3 class="mb-2 text-2xl font-bold">Selecione o Período</h3>
+						<p class="text-base-content/70">
+							Clique e arraste no calendário para selecionar o período de ausência
+						</p>
+					</div>
 
-          {#if ausenciasExistentesQuery === undefined}
-            <div class="flex items-center justify-center py-12">
-              <span class="loading loading-spinner loading-lg"></span>
-              <span class="ml-4 text-base-content/70"
-                >Carregando ausências existentes...</span
-              >
-            </div>
-          {:else}
-            <CalendarioAusencias
-              {dataInicio}
-              {dataFim}
-              {ausenciasExistentes}
-              onPeriodoSelecionado={handlePeriodoSelecionado}
-            />
-          {/if}
+					{#if ausenciasExistentesQuery === undefined}
+						<div class="flex items-center justify-center py-12">
+							<span class="loading loading-spinner loading-lg"></span>
+							<span class="text-base-content/70 ml-4">Carregando ausências existentes...</span>
+						</div>
+					{:else}
+						<CalendarioAusencias
+							{dataInicio}
+							{dataFim}
+							{ausenciasExistentes}
+							onPeriodoSelecionado={handlePeriodoSelecionado}
+						/>
+					{/if}
 
-          {#if dataInicio && dataFim}
-            <div class="alert alert-success shadow-lg">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-              <div>
-                <h4 class="font-bold">Período selecionado!</h4>
-                <p>
-                  De {new Date(dataInicio).toLocaleDateString("pt-BR")} até{" "}
-                  {new Date(dataFim).toLocaleDateString("pt-BR")} ({totalDias} dias)
-                </p>
-              </div>
-            </div>
-          {/if}
-        </div>
-      {:else if passoAtual === 2}
-        <!-- Passo 2: Informar Motivo -->
-        <div class="space-y-6">
-          <div>
-            <h3 class="text-2xl font-bold mb-2">Informe o Motivo</h3>
-            <p class="text-base-content/70">
-              Descreva o motivo da sua solicitação de ausência (mínimo 10
-              caracteres)
-            </p>
-          </div>
+					{#if dataInicio && dataFim}
+						<div class="alert alert-success shadow-lg">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6 shrink-0 stroke-current"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<div>
+								<h4 class="font-bold">Período selecionado!</h4>
+								<p>
+									De {new Date(dataInicio).toLocaleDateString('pt-BR')} até{' '}
+									{new Date(dataFim).toLocaleDateString('pt-BR')} ({totalDias} dias)
+								</p>
+							</div>
+						</div>
+					{/if}
+				</div>
+			{:else if passoAtual === 2}
+				<!-- Passo 2: Informar Motivo -->
+				<div class="space-y-6">
+					<div>
+						<h3 class="mb-2 text-2xl font-bold">Informe o Motivo</h3>
+						<p class="text-base-content/70">
+							Descreva o motivo da sua solicitação de ausência (mínimo 10 caracteres)
+						</p>
+					</div>
 
-          <!-- Resumo do período -->
-          {#if dataInicio && dataFim}
-            <div
-              class="card bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 border-2 border-orange-500/30"
-            >
-              <div class="card-body">
-                <h4 class="card-title text-orange-700 dark:text-orange-400">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    />
-                  </svg>
-                  Resumo do Período
-                </h4>
-                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
-                  <div>
-                    <p class="text-sm text-base-content/70">Data Início</p>
-                    <p class="font-bold">
-                      {new Date(dataInicio).toLocaleDateString("pt-BR")}
-                    </p>
-                  </div>
-                  <div>
-                    <p class="text-sm text-base-content/70">Data Fim</p>
-                    <p class="font-bold">
-                      {new Date(dataFim).toLocaleDateString("pt-BR")}
-                    </p>
-                  </div>
-                  <div>
-                    <p class="text-sm text-base-content/70">Total de Dias</p>
-                    <p
-                      class="font-bold text-xl text-orange-600 dark:text-orange-400"
-                    >
-                      {totalDias} dias
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          {/if}
+					<!-- Resumo do período -->
+					{#if dataInicio && dataFim}
+						<div
+							class="card border-2 border-orange-500/30 bg-linear-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950"
+						>
+							<div class="card-body">
+								<h4 class="card-title text-orange-700 dark:text-orange-400">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-5 w-5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+										/>
+									</svg>
+									Resumo do Período
+								</h4>
+								<div class="mt-2 grid grid-cols-1 gap-4 md:grid-cols-3">
+									<div>
+										<p class="text-base-content/70 text-sm">Data Início</p>
+										<p class="font-bold">
+											{new Date(dataInicio).toLocaleDateString('pt-BR')}
+										</p>
+									</div>
+									<div>
+										<p class="text-base-content/70 text-sm">Data Fim</p>
+										<p class="font-bold">
+											{new Date(dataFim).toLocaleDateString('pt-BR')}
+										</p>
+									</div>
+									<div>
+										<p class="text-base-content/70 text-sm">Total de Dias</p>
+										<p class="text-xl font-bold text-orange-600 dark:text-orange-400">
+											{totalDias} dias
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					{/if}
 
-          <!-- Campo de motivo -->
-          <div class="form-control">
-            <label class="label" for="motivo">
-              <span class="label-text font-bold">Motivo da Ausência</span>
-              <span class="label-text-alt">
-                {motivo.trim().length}/10 caracteres mínimos
-              </span>
-            </label>
-            <textarea
-              id="motivo"
-              class="textarea textarea-bordered h-32 text-lg"
-              placeholder="Descreva o motivo da sua solicitação de ausência..."
-              bind:value={motivo}
-              maxlength={500}
-            ></textarea>
-            <label class="label">
-              <span class="label-text-alt text-base-content/70">
-                Mínimo 10 caracteres. Seja claro e objetivo.
-              </span>
-            </label>
-          </div>
+					<!-- Campo de motivo -->
+					<div class="form-control">
+						<label class="label" for="motivo">
+							<span class="label-text font-bold">Motivo da Ausência</span>
+							<span class="label-text-alt">
+								{motivo.trim().length}/10 caracteres mínimos
+							</span>
+						</label>
+						<textarea
+							id="motivo"
+							class="textarea textarea-bordered h-32 text-lg"
+							placeholder="Descreva o motivo da sua solicitação de ausência..."
+							bind:value={motivo}
+							maxlength={500}
+						></textarea>
+						<label class="label">
+							<span class="label-text-alt text-base-content/70">
+								Mínimo 10 caracteres. Seja claro e objetivo.
+							</span>
+						</label>
+					</div>
 
-          {#if motivo.trim().length > 0 && motivo.trim().length < 10}
-            <div class="alert alert-warning shadow-lg">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                />
-              </svg>
-              <span>O motivo deve ter no mínimo 10 caracteres</span>
-            </div>
-          {/if}
-        </div>
-      {/if}
+					{#if motivo.trim().length > 0 && motivo.trim().length < 10}
+						<div class="alert alert-warning shadow-lg">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-6 w-6 shrink-0 stroke-current"
+								fill="none"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+								/>
+							</svg>
+							<span>O motivo deve ter no mínimo 10 caracteres</span>
+						</div>
+					{/if}
+				</div>
+			{/if}
 
-      <!-- Botões de navegação -->
-      <div class="card-actions justify-between mt-6">
-        <button
-          type="button"
-          class="btn btn-ghost"
-          onclick={passoAnterior}
-          disabled={passoAtual === 1 || processando}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 mr-2"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M15 19l-7-7 7-7"
-            />
-          </svg>
-          Voltar
-        </button>
+			<!-- Botões de navegação -->
+			<div class="card-actions mt-6 justify-between">
+				<button
+					type="button"
+					class="btn"
+					onclick={passoAnterior}
+					disabled={passoAtual === 1 || processando}
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="mr-2 h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M15 19l-7-7 7-7"
+						/>
+					</svg>
+					Voltar
+				</button>
 
-        {#if passoAtual < totalPassos}
-          <button
-            type="button"
-            class="btn btn-primary"
-            onclick={proximoPasso}
-            disabled={processando}
-          >
-            Próximo
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 ml-2"
-              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>
-          </button>
-        {:else}
-          <button
-            type="button"
-            class="btn btn-success"
-            onclick={enviarSolicitacao}
-            disabled={processando || motivo.trim().length < 10}
-          >
-            {#if processando}
-              <span class="loading loading-spinner"></span>
-              Enviando...
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 mr-2"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-              Enviar Solicitação
-            {/if}
-          </button>
-        {/if}
-      </div>
+				{#if passoAtual < totalPassos}
+					<button
+						type="button"
+						class="btn btn-primary"
+						onclick={proximoPasso}
+						disabled={processando}
+					>
+						Próximo
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="ml-2 h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
+					</button>
+				{:else}
+					<button
+						type="button"
+						class="btn btn-success"
+						onclick={enviarSolicitacao}
+						disabled={processando || motivo.trim().length < 10}
+					>
+						{#if processando}
+							<span class="loading loading-spinner"></span>
+							Enviando...
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="mr-2 h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Enviar Solicitação
+						{/if}
+					</button>
+				{/if}
+			</div>
 
-      <!-- Botão cancelar -->
-      <div class="mt-4 text-center">
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm"
-          onclick={() => {
-            if (onCancelar) onCancelar();
-          }}
-          disabled={processando}
-        >
-          Cancelar
-        </button>
-      </div>
-    </div>
-  </div>
+			<!-- Botão cancelar -->
+			<div class="mt-4 text-center">
+				<button
+					type="button"
+					class="btn btn-sm"
+					onclick={() => {
+						if (onCancelar) onCancelar();
+					}}
+					disabled={processando}
+				>
+					Cancelar
+				</button>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Modal de Erro -->
 <ErrorModal
-  open={mostrarModalErro}
-  title="Período Indisponível"
-  message={mensagemErroModal || "Já existe uma solicitação para este período."}
-  details={detalhesErroModal}
-  onClose={fecharModalErro}
+	open={mostrarModalErro}
+	title="Período Indisponível"
+	message={mensagemErroModal || 'Já existe uma solicitação para este período.'}
+	details={detalhesErroModal}
+	onClose={fecharModalErro}
 />
 
 <style>
-  .wizard-ausencia {
-    max-width: 1000px;
-    margin: 0 auto;
-  }
+	.wizard-ausencia {
+		max-width: 1000px;
+		margin: 0 auto;
+	}
 </style>
diff --git a/apps/web/src/lib/components/chat/ChatWindow.svelte b/apps/web/src/lib/components/chat/ChatWindow.svelte
index 9cecb9d..f3eb486 100644
--- a/apps/web/src/lib/components/chat/ChatWindow.svelte
+++ b/apps/web/src/lib/components/chat/ChatWindow.svelte
@@ -1,545 +1,493 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { voltarParaLista } from "$lib/stores/chatStore";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import MessageList from "./MessageList.svelte";
-  import MessageInput from "./MessageInput.svelte";
-  import UserStatusBadge from "./UserStatusBadge.svelte";
-  import UserAvatar from "./UserAvatar.svelte";
-  import ScheduleMessageModal from "./ScheduleMessageModal.svelte";
-  import SalaReuniaoManager from "./SalaReuniaoManager.svelte";
-  import { getAvatarUrl } from "$lib/utils/avatarGenerator";
-  import {
-    Bell,
-    X,
-    ArrowLeft,
-    LogOut,
-    MoreVertical,
-    Users,
-    Clock,
-    XCircle,
-  } from "lucide-svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { voltarParaLista } from '$lib/stores/chatStore';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import MessageList from './MessageList.svelte';
+	import MessageInput from './MessageInput.svelte';
+	import UserStatusBadge from './UserStatusBadge.svelte';
+	import UserAvatar from './UserAvatar.svelte';
+	import ScheduleMessageModal from './ScheduleMessageModal.svelte';
+	import SalaReuniaoManager from './SalaReuniaoManager.svelte';
+	import { getAvatarUrl } from '$lib/utils/avatarGenerator';
+	import { Bell, X, ArrowLeft, LogOut, MoreVertical, Users, Clock, XCircle } from 'lucide-svelte';
 
-  interface Props {
-    conversaId: string;
-  }
+	interface Props {
+		conversaId: string;
+	}
 
-  let { conversaId }: Props = $props();
+	let { conversaId }: Props = $props();
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  // Token é passado automaticamente via interceptadores em +layout.svelte
+	// Token é passado automaticamente via interceptadores em +layout.svelte
 
-  let showScheduleModal = $state(false);
-  let showSalaManager = $state(false);
-  let showAdminMenu = $state(false);
-  let showNotificacaoModal = $state(false);
+	let showScheduleModal = $state(false);
+	let showSalaManager = $state(false);
+	let showAdminMenu = $state(false);
+	let showNotificacaoModal = $state(false);
 
-  const conversas = useQuery(api.chat.listarConversas, {});
-  const isAdmin = useQuery(api.chat.verificarSeEhAdmin, {
-    conversaId: conversaId as Id<"conversas">,
-  });
+	const conversas = useQuery(api.chat.listarConversas, {});
+	const isAdmin = useQuery(api.chat.verificarSeEhAdmin, {
+		conversaId: conversaId as Id<'conversas'>
+	});
 
-  const conversa = $derived(() => {
-    console.log("🔍 [ChatWindow] Buscando conversa ID:", conversaId);
-    console.log("📋 [ChatWindow] Conversas disponíveis:", conversas?.data);
+	const conversa = $derived(() => {
+		console.log('🔍 [ChatWindow] Buscando conversa ID:', conversaId);
+		console.log('📋 [ChatWindow] Conversas disponíveis:', conversas?.data);
 
-    if (!conversas?.data || !Array.isArray(conversas.data)) {
-      console.log(
-        "⚠️ [ChatWindow] conversas.data não é um array ou está vazio",
-      );
-      return null;
-    }
+		if (!conversas?.data || !Array.isArray(conversas.data)) {
+			console.log('⚠️ [ChatWindow] conversas.data não é um array ou está vazio');
+			return null;
+		}
 
-    const encontrada = conversas.data.find(
-      (c: { _id: string }) => c._id === conversaId,
-    );
-    console.log("✅ [ChatWindow] Conversa encontrada:", encontrada);
-    return encontrada;
-  });
+		const encontrada = conversas.data.find((c: { _id: string }) => c._id === conversaId);
+		console.log('✅ [ChatWindow] Conversa encontrada:', encontrada);
+		return encontrada;
+	});
 
-  function getNomeConversa(): string {
-    const c = conversa();
-    if (!c) return "Carregando...";
-    if (c.tipo === "grupo" || c.tipo === "sala_reuniao") {
-      return (
-        c.nome ||
-        (c.tipo === "sala_reuniao" ? "Sala sem nome" : "Grupo sem nome")
-      );
-    }
-    return c.outroUsuario?.nome || "Usuário";
-  }
+	function getNomeConversa(): string {
+		const c = conversa();
+		if (!c) return 'Carregando...';
+		if (c.tipo === 'grupo' || c.tipo === 'sala_reuniao') {
+			return c.nome || (c.tipo === 'sala_reuniao' ? 'Sala sem nome' : 'Grupo sem nome');
+		}
+		return c.outroUsuario?.nome || 'Usuário';
+	}
 
-  function getAvatarConversa(): string {
-    const c = conversa();
-    if (!c) return "💬";
-    if (c.tipo === "grupo") {
-      return c.avatar || "👥";
-    }
-    if (c.outroUsuario?.avatar) {
-      return c.outroUsuario.avatar;
-    }
-    return "👤";
-  }
+	function getAvatarConversa(): string {
+		const c = conversa();
+		if (!c) return '💬';
+		if (c.tipo === 'grupo') {
+			return c.avatar || '👥';
+		}
+		if (c.outroUsuario?.avatar) {
+			return c.outroUsuario.avatar;
+		}
+		return '👤';
+	}
 
-  function getStatusConversa():
-    | "online"
-    | "offline"
-    | "ausente"
-    | "externo"
-    | "em_reuniao"
-    | null {
-    const c = conversa();
-    if (c && c.tipo === "individual" && c.outroUsuario) {
-      return (
-        (c.outroUsuario.statusPresenca as
-          | "online"
-          | "offline"
-          | "ausente"
-          | "externo"
-          | "em_reuniao") || "offline"
-      );
-    }
-    return null;
-  }
+	function getStatusConversa(): 'online' | 'offline' | 'ausente' | 'externo' | 'em_reuniao' | null {
+		const c = conversa();
+		if (c && c.tipo === 'individual' && c.outroUsuario) {
+			return (
+				(c.outroUsuario.statusPresenca as
+					| 'online'
+					| 'offline'
+					| 'ausente'
+					| 'externo'
+					| 'em_reuniao') || 'offline'
+			);
+		}
+		return null;
+	}
 
-  function getStatusMensagem(): string | null {
-    const c = conversa();
-    if (c && c.tipo === "individual" && c.outroUsuario) {
-      return c.outroUsuario.statusMensagem || null;
-    }
-    return null;
-  }
+	function getStatusMensagem(): string | null {
+		const c = conversa();
+		if (c && c.tipo === 'individual' && c.outroUsuario) {
+			return c.outroUsuario.statusMensagem || null;
+		}
+		return null;
+	}
 
-  async function handleSairGrupoOuSala() {
-    const c = conversa();
-    if (!c || (c.tipo !== "grupo" && c.tipo !== "sala_reuniao")) return;
+	async function handleSairGrupoOuSala() {
+		const c = conversa();
+		if (!c || (c.tipo !== 'grupo' && c.tipo !== 'sala_reuniao')) return;
 
-    const tipoTexto = c.tipo === "sala_reuniao" ? "sala de reunião" : "grupo";
-    if (
-      !confirm(
-        `Tem certeza que deseja sair da ${tipoTexto} "${c.nome || "Sem nome"}"?`,
-      )
-    ) {
-      return;
-    }
+		const tipoTexto = c.tipo === 'sala_reuniao' ? 'sala de reunião' : 'grupo';
+		if (!confirm(`Tem certeza que deseja sair da ${tipoTexto} "${c.nome || 'Sem nome'}"?`)) {
+			return;
+		}
 
-    try {
-      const resultado = await client.mutation(api.chat.sairGrupoOuSala, {
-        conversaId: conversaId as Id<"conversas">,
-      });
+		try {
+			const resultado = await client.mutation(api.chat.sairGrupoOuSala, {
+				conversaId: conversaId as Id<'conversas'>
+			});
 
-      if (resultado.sucesso) {
-        voltarParaLista();
-      } else {
-        alert(resultado.erro || "Erro ao sair da conversa");
-      }
-    } catch (error) {
-      console.error("Erro ao sair da conversa:", error);
-      const errorMessage =
-        error instanceof Error ? error.message : "Erro ao sair da conversa";
-      alert(errorMessage);
-    }
-  }
+			if (resultado.sucesso) {
+				voltarParaLista();
+			} else {
+				alert(resultado.erro || 'Erro ao sair da conversa');
+			}
+		} catch (error) {
+			console.error('Erro ao sair da conversa:', error);
+			const errorMessage = error instanceof Error ? error.message : 'Erro ao sair da conversa';
+			alert(errorMessage);
+		}
+	}
 </script>
 
-<div class="flex flex-col h-full" onclick={() => (showAdminMenu = false)}>
-  <!-- Header -->
-  <div
-    class="flex items-center gap-3 px-4 py-3 border-b border-base-300 bg-base-200"
-    onclick={(e) => e.stopPropagation()}
-  >
-    <!-- Botão Voltar -->
-    <button
-      type="button"
-      class="btn btn-ghost btn-sm btn-circle hover:bg-primary/20 transition-all duration-200 hover:scale-110"
-      onclick={voltarParaLista}
-      aria-label="Voltar"
-      title="Voltar para lista de conversas"
-    >
-      <ArrowLeft class="w-6 h-6 text-primary" strokeWidth={2.5} />
-    </button>
+<div class="flex h-full flex-col" onclick={() => (showAdminMenu = false)}>
+	<!-- Header -->
+	<div
+		class="border-base-300 bg-base-200 flex items-center gap-3 border-b px-4 py-3"
+		onclick={(e) => e.stopPropagation()}
+	>
+		<!-- Botão Voltar -->
+		<button
+			type="button"
+			class="btn btn-sm btn-circle hover:bg-primary/20 transition-all duration-200 hover:scale-110"
+			onclick={voltarParaLista}
+			aria-label="Voltar"
+			title="Voltar para lista de conversas"
+		>
+			<ArrowLeft class="text-primary h-6 w-6" strokeWidth={2.5} />
+		</button>
 
-    <!-- Avatar e Info -->
-    <div class="relative shrink-0">
-      {#if conversa() && conversa()?.tipo === "individual" && conversa()?.outroUsuario}
-        <UserAvatar
-          avatar={conversa()?.outroUsuario?.avatar}
-          fotoPerfilUrl={conversa()?.outroUsuario?.fotoPerfilUrl}
-          nome={conversa()?.outroUsuario?.nome || "Usuário"}
-          size="md"
-        />
-      {:else}
-        <div
-          class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-xl"
-        >
-          {getAvatarConversa()}
-        </div>
-      {/if}
-      {#if getStatusConversa()}
-        <div class="absolute bottom-0 right-0">
-          <UserStatusBadge status={getStatusConversa()} size="sm" />
-        </div>
-      {/if}
-    </div>
+		<!-- Avatar e Info -->
+		<div class="relative shrink-0">
+			{#if conversa() && conversa()?.tipo === 'individual' && conversa()?.outroUsuario}
+				<UserAvatar
+					avatar={conversa()?.outroUsuario?.avatar}
+					fotoPerfilUrl={conversa()?.outroUsuario?.fotoPerfilUrl}
+					nome={conversa()?.outroUsuario?.nome || 'Usuário'}
+					size="md"
+				/>
+			{:else}
+				<div class="bg-primary/20 flex h-10 w-10 items-center justify-center rounded-full text-xl">
+					{getAvatarConversa()}
+				</div>
+			{/if}
+			{#if getStatusConversa()}
+				<div class="absolute right-0 bottom-0">
+					<UserStatusBadge status={getStatusConversa()} size="sm" />
+				</div>
+			{/if}
+		</div>
 
-    <div class="flex-1 min-w-0">
-      <p class="font-semibold text-base-content truncate">
-        {getNomeConversa()}
-      </p>
-      {#if getStatusMensagem()}
-        <p class="text-xs text-base-content/60 truncate">
-          {getStatusMensagem()}
-        </p>
-      {:else if getStatusConversa()}
-        <p class="text-xs text-base-content/60">
-          {getStatusConversa() === "online"
-            ? "Online"
-            : getStatusConversa() === "ausente"
-              ? "Ausente"
-              : getStatusConversa() === "em_reuniao"
-                ? "Em reunião"
-                : getStatusConversa() === "externo"
-                  ? "Externo"
-                  : "Offline"}
-        </p>
-      {:else if conversa() && (conversa()?.tipo === "grupo" || conversa()?.tipo === "sala_reuniao")}
-        <div class="flex items-center gap-2 mt-1">
-          <p class="text-xs text-base-content/60">
-            {conversa()?.participantesInfo?.length || 0}
-            {conversa()?.participantesInfo?.length === 1
-              ? "participante"
-              : "participantes"}
-          </p>
-          {#if conversa()?.participantesInfo && conversa()?.participantesInfo.length > 0}
-            <div class="flex items-center gap-2">
-              <div class="flex -space-x-2">
-                {#each conversa()?.participantesInfo.slice(0, 5) as participante (participante._id)}
-                  <div
-                    class="relative w-5 h-5 rounded-full border-2 border-base-200 overflow-hidden bg-base-200"
-                    title={participante.nome}
-                  >
-                    {#if participante.fotoPerfilUrl}
-                      <img
-                        src={participante.fotoPerfilUrl}
-                        alt={participante.nome}
-                        class="w-full h-full object-cover"
-                      />
-                    {:else if participante.avatar}
-                      <img
-                        src={getAvatarUrl(participante.avatar)}
-                        alt={participante.nome}
-                        class="w-full h-full object-cover"
-                      />
-                    {:else}
-                      <img
-                        src={getAvatarUrl(participante.nome)}
-                        alt={participante.nome}
-                        class="w-full h-full object-cover"
-                      />
-                    {/if}
-                  </div>
-                {/each}
-                {#if conversa()?.participantesInfo.length > 5}
-                  <div
-                    class="w-5 h-5 rounded-full border-2 border-base-200 bg-base-300 flex items-center justify-center text-[8px] font-semibold text-base-content/70"
-                    title={`+${conversa()?.participantesInfo.length - 5} mais`}
-                  >
-                    +{conversa()?.participantesInfo.length - 5}
-                  </div>
-                {/if}
-              </div>
-              {#if conversa()?.tipo === "sala_reuniao" && isAdmin?.data}
-                <span
-                  class="text-[10px] text-primary font-semibold ml-1 whitespace-nowrap"
-                  title="Você é administrador desta sala">• Admin</span
-                >
-              {/if}
-            </div>
-          {/if}
-        </div>
-      {/if}
-    </div>
+		<div class="min-w-0 flex-1">
+			<p class="text-base-content truncate font-semibold">
+				{getNomeConversa()}
+			</p>
+			{#if getStatusMensagem()}
+				<p class="text-base-content/60 truncate text-xs">
+					{getStatusMensagem()}
+				</p>
+			{:else if getStatusConversa()}
+				<p class="text-base-content/60 text-xs">
+					{getStatusConversa() === 'online'
+						? 'Online'
+						: getStatusConversa() === 'ausente'
+							? 'Ausente'
+							: getStatusConversa() === 'em_reuniao'
+								? 'Em reunião'
+								: getStatusConversa() === 'externo'
+									? 'Externo'
+									: 'Offline'}
+				</p>
+			{:else if conversa() && (conversa()?.tipo === 'grupo' || conversa()?.tipo === 'sala_reuniao')}
+				<div class="mt-1 flex items-center gap-2">
+					<p class="text-base-content/60 text-xs">
+						{conversa()?.participantesInfo?.length || 0}
+						{conversa()?.participantesInfo?.length === 1 ? 'participante' : 'participantes'}
+					</p>
+					{#if conversa()?.participantesInfo && conversa()?.participantesInfo.length > 0}
+						<div class="flex items-center gap-2">
+							<div class="flex -space-x-2">
+								{#each conversa()?.participantesInfo.slice(0, 5) as participante (participante._id)}
+									<div
+										class="border-base-200 bg-base-200 relative h-5 w-5 overflow-hidden rounded-full border-2"
+										title={participante.nome}
+									>
+										{#if participante.fotoPerfilUrl}
+											<img
+												src={participante.fotoPerfilUrl}
+												alt={participante.nome}
+												class="h-full w-full object-cover"
+											/>
+										{:else if participante.avatar}
+											<img
+												src={getAvatarUrl(participante.avatar)}
+												alt={participante.nome}
+												class="h-full w-full object-cover"
+											/>
+										{:else}
+											<img
+												src={getAvatarUrl(participante.nome)}
+												alt={participante.nome}
+												class="h-full w-full object-cover"
+											/>
+										{/if}
+									</div>
+								{/each}
+								{#if conversa()?.participantesInfo.length > 5}
+									<div
+										class="border-base-200 bg-base-300 text-base-content/70 flex h-5 w-5 items-center justify-center rounded-full border-2 text-[8px] font-semibold"
+										title={`+${conversa()?.participantesInfo.length - 5} mais`}
+									>
+										+{conversa()?.participantesInfo.length - 5}
+									</div>
+								{/if}
+							</div>
+							{#if conversa()?.tipo === 'sala_reuniao' && isAdmin?.data}
+								<span
+									class="text-primary ml-1 text-[10px] font-semibold whitespace-nowrap"
+									title="Você é administrador desta sala">• Admin</span
+								>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
 
-    <!-- Botões de ação -->
-    <div class="flex items-center gap-1">
-      <!-- Botão Sair (apenas para grupos e salas de reunião) -->
-      {#if conversa() && (conversa()?.tipo === "grupo" || conversa()?.tipo === "sala_reuniao")}
-        <button
-          type="button"
-          class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
-          style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
-          onclick={(e) => {
-            e.stopPropagation();
-            handleSairGrupoOuSala();
-          }}
-          aria-label="Sair"
-          title="Sair da conversa"
-        >
-          <div
-            class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/10 transition-colors duration-300"
-          ></div>
-          <LogOut
-            class="w-5 h-5 text-red-500 relative z-10 group-hover:scale-110 transition-transform"
-            strokeWidth={2}
-          />
-        </button>
-      {/if}
+		<!-- Botões de ação -->
+		<div class="flex items-center gap-1">
+			<!-- Botão Sair (apenas para grupos e salas de reunião) -->
+			{#if conversa() && (conversa()?.tipo === 'grupo' || conversa()?.tipo === 'sala_reuniao')}
+				<button
+					type="button"
+					class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
+					style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
+					onclick={(e) => {
+						e.stopPropagation();
+						handleSairGrupoOuSala();
+					}}
+					aria-label="Sair"
+					title="Sair da conversa"
+				>
+					<div
+						class="absolute inset-0 bg-red-500/0 transition-colors duration-300 group-hover:bg-red-500/10"
+					></div>
+					<LogOut
+						class="relative z-10 h-5 w-5 text-red-500 transition-transform group-hover:scale-110"
+						strokeWidth={2}
+					/>
+				</button>
+			{/if}
 
-      <!-- Botão Menu Administrativo (apenas para salas de reunião e apenas para admins) -->
-      {#if conversa()?.tipo === "sala_reuniao" && isAdmin?.data}
-        <div class="relative admin-menu-container">
-          <button
-            type="button"
-            class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
-            style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2);"
-            onclick={(e) => {
-              e.stopPropagation();
-              showAdminMenu = !showAdminMenu;
-            }}
-            aria-label="Menu administrativo"
-            title="Recursos administrativos"
-          >
-            <div
-              class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/10 transition-colors duration-300"
-            ></div>
-            <MoreVertical
-              class="w-5 h-5 text-blue-500 relative z-10 group-hover:scale-110 transition-transform"
-              strokeWidth={2}
-            />
-          </button>
-          {#if showAdminMenu}
-            <ul
-              class="absolute right-0 top-full mt-2 bg-base-100 rounded-lg shadow-xl border border-base-300 w-56 z-[100] overflow-hidden"
-              onclick={(e) => e.stopPropagation()}
-            >
-              <li>
-                <button
-                  type="button"
-                  class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors flex items-center gap-2"
-                  onclick={(e) => {
-                    e.stopPropagation();
-                    showSalaManager = true;
-                    showAdminMenu = false;
-                  }}
-                >
-                  <Users class="w-4 h-4" strokeWidth={2} />
-                  Gerenciar Participantes
-                </button>
-              </li>
-              <li>
-                <button
-                  type="button"
-                  class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors flex items-center gap-2"
-                  onclick={(e) => {
-                    e.stopPropagation();
-                    showNotificacaoModal = true;
-                    showAdminMenu = false;
-                  }}
-                >
-                  <Bell class="w-4 h-4" strokeWidth={2} />
-                  Enviar Notificação
-                </button>
-              </li>
-              <li>
-                <button
-                  type="button"
-                  class="w-full text-left px-4 py-3 hover:bg-error/10 transition-colors flex items-center gap-2 text-error"
-                  onclick={(e) => {
-                    e.stopPropagation();
-                    (async () => {
-                      if (
-                        !confirm(
-                          "Tem certeza que deseja encerrar esta reunião? Todos os participantes serão removidos.",
-                        )
-                      )
-                        return;
-                      try {
-                        const resultado = await client.mutation(
-                          api.chat.encerrarReuniao,
-                          {
-                            conversaId: conversaId as Id<"conversas">,
-                          },
-                        );
-                        if (resultado.sucesso) {
-                          alert("Reunião encerrada com sucesso!");
-                          voltarParaLista();
-                        } else {
-                          alert(resultado.erro || "Erro ao encerrar reunião");
-                        }
-                      } catch (error) {
-                        const errorMessage =
-                          error instanceof Error
-                            ? error.message
-                            : "Erro ao encerrar reunião";
-                        alert(errorMessage);
-                      }
-                      showAdminMenu = false;
-                    })();
-                  }}
-                >
-                  <XCircle class="w-4 h-4" strokeWidth={2} />
-                  Encerrar Reunião
-                </button>
-              </li>
-            </ul>
-          {/if}
-        </div>
-      {/if}
+			<!-- Botão Menu Administrativo (apenas para salas de reunião e apenas para admins) -->
+			{#if conversa()?.tipo === 'sala_reuniao' && isAdmin?.data}
+				<div class="admin-menu-container relative">
+					<button
+						type="button"
+						class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
+						style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2);"
+						onclick={(e) => {
+							e.stopPropagation();
+							showAdminMenu = !showAdminMenu;
+						}}
+						aria-label="Menu administrativo"
+						title="Recursos administrativos"
+					>
+						<div
+							class="absolute inset-0 bg-blue-500/0 transition-colors duration-300 group-hover:bg-blue-500/10"
+						></div>
+						<MoreVertical
+							class="relative z-10 h-5 w-5 text-blue-500 transition-transform group-hover:scale-110"
+							strokeWidth={2}
+						/>
+					</button>
+					{#if showAdminMenu}
+						<ul
+							class="bg-base-100 border-base-300 absolute top-full right-0 z-[100] mt-2 w-56 overflow-hidden rounded-lg border shadow-xl"
+							onclick={(e) => e.stopPropagation()}
+						>
+							<li>
+								<button
+									type="button"
+									class="hover:bg-base-200 flex w-full items-center gap-2 px-4 py-3 text-left transition-colors"
+									onclick={(e) => {
+										e.stopPropagation();
+										showSalaManager = true;
+										showAdminMenu = false;
+									}}
+								>
+									<Users class="h-4 w-4" strokeWidth={2} />
+									Gerenciar Participantes
+								</button>
+							</li>
+							<li>
+								<button
+									type="button"
+									class="hover:bg-base-200 flex w-full items-center gap-2 px-4 py-3 text-left transition-colors"
+									onclick={(e) => {
+										e.stopPropagation();
+										showNotificacaoModal = true;
+										showAdminMenu = false;
+									}}
+								>
+									<Bell class="h-4 w-4" strokeWidth={2} />
+									Enviar Notificação
+								</button>
+							</li>
+							<li>
+								<button
+									type="button"
+									class="hover:bg-error/10 text-error flex w-full items-center gap-2 px-4 py-3 text-left transition-colors"
+									onclick={(e) => {
+										e.stopPropagation();
+										(async () => {
+											if (
+												!confirm(
+													'Tem certeza que deseja encerrar esta reunião? Todos os participantes serão removidos.'
+												)
+											)
+												return;
+											try {
+												const resultado = await client.mutation(api.chat.encerrarReuniao, {
+													conversaId: conversaId as Id<'conversas'>
+												});
+												if (resultado.sucesso) {
+													alert('Reunião encerrada com sucesso!');
+													voltarParaLista();
+												} else {
+													alert(resultado.erro || 'Erro ao encerrar reunião');
+												}
+											} catch (error) {
+												const errorMessage =
+													error instanceof Error ? error.message : 'Erro ao encerrar reunião';
+												alert(errorMessage);
+											}
+											showAdminMenu = false;
+										})();
+									}}
+								>
+									<XCircle class="h-4 w-4" strokeWidth={2} />
+									Encerrar Reunião
+								</button>
+							</li>
+						</ul>
+					{/if}
+				</div>
+			{/if}
 
-      <!-- Botão Agendar MODERNO -->
-      <button
-        type="button"
-        class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
-        style="background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2);"
-        onclick={() => (showScheduleModal = true)}
-        aria-label="Agendar mensagem"
-        title="Agendar mensagem"
-      >
-        <div
-          class="absolute inset-0 bg-purple-500/0 group-hover:bg-purple-500/10 transition-colors duration-300"
-        ></div>
-        <Clock
-          class="w-5 h-5 text-purple-500 relative z-10 group-hover:scale-110 transition-transform"
-          strokeWidth={2}
-        />
-      </button>
-    </div>
-  </div>
+			<!-- Botão Agendar MODERNO -->
+			<button
+				type="button"
+				class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
+				style="background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2);"
+				onclick={() => (showScheduleModal = true)}
+				aria-label="Agendar mensagem"
+				title="Agendar mensagem"
+			>
+				<div
+					class="absolute inset-0 bg-purple-500/0 transition-colors duration-300 group-hover:bg-purple-500/10"
+				></div>
+				<Clock
+					class="relative z-10 h-5 w-5 text-purple-500 transition-transform group-hover:scale-110"
+					strokeWidth={2}
+				/>
+			</button>
+		</div>
+	</div>
 
-  <!-- Mensagens -->
-  <div class="flex-1 overflow-hidden min-h-0">
-    <MessageList conversaId={conversaId as Id<"conversas">} />
-  </div>
+	<!-- Mensagens -->
+	<div class="min-h-0 flex-1 overflow-hidden">
+		<MessageList conversaId={conversaId as Id<'conversas'>} />
+	</div>
 
-  <!-- Input -->
-  <div class="border-t border-base-300 shrink-0">
-    <MessageInput conversaId={conversaId as Id<"conversas">} />
-  </div>
+	<!-- Input -->
+	<div class="border-base-300 shrink-0 border-t">
+		<MessageInput conversaId={conversaId as Id<'conversas'>} />
+	</div>
 </div>
 
 <!-- Modal de Agendamento -->
 {#if showScheduleModal}
-  <ScheduleMessageModal
-    conversaId={conversaId as Id<"conversas">}
-    onClose={() => (showScheduleModal = false)}
-  />
+	<ScheduleMessageModal
+		conversaId={conversaId as Id<'conversas'>}
+		onClose={() => (showScheduleModal = false)}
+	/>
 {/if}
 
 <!-- Modal de Gerenciamento de Sala -->
-{#if showSalaManager && conversa()?.tipo === "sala_reuniao"}
-  <SalaReuniaoManager
-    conversaId={conversaId as Id<"conversas">}
-    isAdmin={isAdmin?.data ?? false}
-    onClose={() => (showSalaManager = false)}
-  />
+{#if showSalaManager && conversa()?.tipo === 'sala_reuniao'}
+	<SalaReuniaoManager
+		conversaId={conversaId as Id<'conversas'>}
+		isAdmin={isAdmin?.data ?? false}
+		onClose={() => (showSalaManager = false)}
+	/>
 {/if}
 
 <!-- Modal de Enviar Notificação -->
-{#if showNotificacaoModal && conversa()?.tipo === "sala_reuniao" && isAdmin?.data}
-  <dialog
-    class="modal modal-open"
-    onclick={(e) =>
-      e.target === e.currentTarget && (showNotificacaoModal = false)}
-  >
-    <div class="modal-box max-w-md" onclick={(e) => e.stopPropagation()}>
-      <div
-        class="flex items-center justify-between px-6 py-4 border-b border-base-300"
-      >
-        <h2 class="text-xl font-semibold flex items-center gap-2">
-          <Bell class="w-5 h-5 text-primary" />
-          Enviar Notificação
-        </h2>
-        <button
-          type="button"
-          class="btn btn-ghost btn-sm btn-circle"
-          onclick={() => (showNotificacaoModal = false)}
-        >
-          <X class="w-5 h-5" />
-        </button>
-      </div>
-      <div class="p-6">
-        <form
-          onsubmit={async (e) => {
-            e.preventDefault();
-            const formData = new FormData(e.currentTarget);
-            const titulo = formData.get("titulo") as string;
-            const mensagem = formData.get("mensagem") as string;
+{#if showNotificacaoModal && conversa()?.tipo === 'sala_reuniao' && isAdmin?.data}
+	<dialog
+		class="modal modal-open"
+		onclick={(e) => e.target === e.currentTarget && (showNotificacaoModal = false)}
+	>
+		<div class="modal-box max-w-md" onclick={(e) => e.stopPropagation()}>
+			<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+				<h2 class="flex items-center gap-2 text-xl font-semibold">
+					<Bell class="text-primary h-5 w-5" />
+					Enviar Notificação
+				</h2>
+				<button
+					type="button"
+					class="btn btn-sm btn-circle"
+					onclick={() => (showNotificacaoModal = false)}
+				>
+					<X class="h-5 w-5" />
+				</button>
+			</div>
+			<div class="p-6">
+				<form
+					onsubmit={async (e) => {
+						e.preventDefault();
+						const formData = new FormData(e.currentTarget);
+						const titulo = formData.get('titulo') as string;
+						const mensagem = formData.get('mensagem') as string;
 
-            if (!titulo.trim() || !mensagem.trim()) {
-              alert("Preencha todos os campos");
-              return;
-            }
+						if (!titulo.trim() || !mensagem.trim()) {
+							alert('Preencha todos os campos');
+							return;
+						}
 
-            try {
-              const resultado = await client.mutation(
-                api.chat.enviarNotificacaoReuniao,
-                {
-                  conversaId: conversaId as Id<"conversas">,
-                  titulo: titulo.trim(),
-                  mensagem: mensagem.trim(),
-                },
-              );
+						try {
+							const resultado = await client.mutation(api.chat.enviarNotificacaoReuniao, {
+								conversaId: conversaId as Id<'conversas'>,
+								titulo: titulo.trim(),
+								mensagem: mensagem.trim()
+							});
 
-              if (resultado.sucesso) {
-                alert("Notificação enviada com sucesso!");
-                showNotificacaoModal = false;
-              } else {
-                alert(resultado.erro || "Erro ao enviar notificação");
-              }
-            } catch (error) {
-              const errorMessage =
-                error instanceof Error
-                  ? error.message
-                  : "Erro ao enviar notificação";
-              alert(errorMessage);
-            }
-          }}
-        >
-          <div class="mb-4">
-            <label class="label">
-              <span class="label-text">Título</span>
-            </label>
-            <input
-              type="text"
-              name="titulo"
-              placeholder="Título da notificação"
-              class="input input-bordered w-full"
-              required
-            />
-          </div>
-          <div class="mb-4">
-            <label class="label">
-              <span class="label-text">Mensagem</span>
-            </label>
-            <textarea
-              name="mensagem"
-              placeholder="Mensagem da notificação"
-              class="textarea textarea-bordered w-full"
-              rows="4"
-              required
-            ></textarea>
-          </div>
-          <div class="flex gap-2">
-            <button
-              type="button"
-              class="btn btn-ghost flex-1"
-              onclick={() => (showNotificacaoModal = false)}
-            >
-              Cancelar
-            </button>
-            <button type="submit" class="btn btn-primary flex-1">
-              Enviar
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-    <form method="dialog" class="modal-backdrop">
-      <button type="button" onclick={() => (showNotificacaoModal = false)}
-        >fechar</button
-      >
-    </form>
-  </dialog>
+							if (resultado.sucesso) {
+								alert('Notificação enviada com sucesso!');
+								showNotificacaoModal = false;
+							} else {
+								alert(resultado.erro || 'Erro ao enviar notificação');
+							}
+						} catch (error) {
+							const errorMessage =
+								error instanceof Error ? error.message : 'Erro ao enviar notificação';
+							alert(errorMessage);
+						}
+					}}
+				>
+					<div class="mb-4">
+						<label class="label">
+							<span class="label-text">Título</span>
+						</label>
+						<input
+							type="text"
+							name="titulo"
+							placeholder="Título da notificação"
+							class="input input-bordered w-full"
+							required
+						/>
+					</div>
+					<div class="mb-4">
+						<label class="label">
+							<span class="label-text">Mensagem</span>
+						</label>
+						<textarea
+							name="mensagem"
+							placeholder="Mensagem da notificação"
+							class="textarea textarea-bordered w-full"
+							rows="4"
+							required
+						></textarea>
+					</div>
+					<div class="flex gap-2">
+						<button type="button" class="btn flex-1" onclick={() => (showNotificacaoModal = false)}>
+							Cancelar
+						</button>
+						<button type="submit" class="btn btn-primary flex-1"> Enviar </button>
+					</div>
+				</form>
+			</div>
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button type="button" onclick={() => (showNotificacaoModal = false)}>fechar</button>
+		</form>
+	</dialog>
 {/if}
diff --git a/apps/web/src/lib/components/chat/NewConversationModal.svelte b/apps/web/src/lib/components/chat/NewConversationModal.svelte
index 3489113..3da3013 100644
--- a/apps/web/src/lib/components/chat/NewConversationModal.svelte
+++ b/apps/web/src/lib/components/chat/NewConversationModal.svelte
@@ -1,454 +1,422 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { abrirConversa } from "$lib/stores/chatStore";
-  import UserStatusBadge from "./UserStatusBadge.svelte";
-  import UserAvatar from "./UserAvatar.svelte";
-  import {
-    MessageSquare,
-    User,
-    Users,
-    Video,
-    X,
-    Search,
-    ChevronRight,
-    Plus,
-    UserX,
-  } from "lucide-svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { abrirConversa } from '$lib/stores/chatStore';
+	import UserStatusBadge from './UserStatusBadge.svelte';
+	import UserAvatar from './UserAvatar.svelte';
+	import {
+		MessageSquare,
+		User,
+		Users,
+		Video,
+		X,
+		Search,
+		ChevronRight,
+		Plus,
+		UserX
+	} from 'lucide-svelte';
 
-  interface Props {
-    onClose: () => void;
-  }
+	interface Props {
+		onClose: () => void;
+	}
 
-  let { onClose }: Props = $props();
+	let { onClose }: Props = $props();
 
-  const client = useConvexClient();
-  const usuarios = useQuery(api.usuarios.listarParaChat, {});
-  const meuPerfil = useQuery(api.usuarios.obterPerfil, {});
-  // Usuário atual
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
+	const client = useConvexClient();
+	const usuarios = useQuery(api.usuarios.listarParaChat, {});
+	const meuPerfil = useQuery(api.usuarios.obterPerfil, {});
+	// Usuário atual
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  let activeTab = $state<"individual" | "grupo" | "sala_reuniao">("individual");
-  let searchQuery = $state("");
-  let selectedUsers = $state<string[]>([]);
-  let groupName = $state("");
-  let salaReuniaoName = $state("");
-  let loading = $state(false);
+	let activeTab = $state<'individual' | 'grupo' | 'sala_reuniao'>('individual');
+	let searchQuery = $state('');
+	let selectedUsers = $state<string[]>([]);
+	let groupName = $state('');
+	let salaReuniaoName = $state('');
+	let loading = $state(false);
 
-  const usuariosFiltrados = $derived(() => {
-    if (!usuarios?.data) return [];
+	const usuariosFiltrados = $derived(() => {
+		if (!usuarios?.data) return [];
 
-    // Filtrar o próprio usuário
-    const meuId = currentUser?.data?._id || meuPerfil?.data?._id;
-    let lista = usuarios.data.filter((u: any) => u._id !== meuId);
+		// Filtrar o próprio usuário
+		const meuId = currentUser?.data?._id || meuPerfil?.data?._id;
+		let lista = usuarios.data.filter((u: any) => u._id !== meuId);
 
-    // Aplicar busca
-    if (searchQuery.trim()) {
-      const query = searchQuery.toLowerCase();
-      lista = lista.filter(
-        (u: any) =>
-          u.nome?.toLowerCase().includes(query) ||
-          u.email?.toLowerCase().includes(query) ||
-          u.matricula?.toLowerCase().includes(query),
-      );
-    }
+		// Aplicar busca
+		if (searchQuery.trim()) {
+			const query = searchQuery.toLowerCase();
+			lista = lista.filter(
+				(u: any) =>
+					u.nome?.toLowerCase().includes(query) ||
+					u.email?.toLowerCase().includes(query) ||
+					u.matricula?.toLowerCase().includes(query)
+			);
+		}
 
-    // Ordenar: online primeiro, depois por nome
-    return lista.sort((a: any, b: any) => {
-      const statusOrder = {
-        online: 0,
-        ausente: 1,
-        externo: 2,
-        em_reuniao: 3,
-        offline: 4,
-      };
-      const statusA =
-        statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
-      const statusB =
-        statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
+		// Ordenar: online primeiro, depois por nome
+		return lista.sort((a: any, b: any) => {
+			const statusOrder = {
+				online: 0,
+				ausente: 1,
+				externo: 2,
+				em_reuniao: 3,
+				offline: 4
+			};
+			const statusA = statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
+			const statusB = statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
 
-      if (statusA !== statusB) return statusA - statusB;
-      return (a.nome || "").localeCompare(b.nome || "");
-    });
-  });
+			if (statusA !== statusB) return statusA - statusB;
+			return (a.nome || '').localeCompare(b.nome || '');
+		});
+	});
 
-  function toggleUserSelection(userId: string) {
-    if (selectedUsers.includes(userId)) {
-      selectedUsers = selectedUsers.filter((id) => id !== userId);
-    } else {
-      selectedUsers = [...selectedUsers, userId];
-    }
-  }
+	function toggleUserSelection(userId: string) {
+		if (selectedUsers.includes(userId)) {
+			selectedUsers = selectedUsers.filter((id) => id !== userId);
+		} else {
+			selectedUsers = [...selectedUsers, userId];
+		}
+	}
 
-  async function handleCriarIndividual(userId: string) {
-    try {
-      loading = true;
-      const conversaId = await client.mutation(api.chat.criarConversa, {
-        tipo: "individual",
-        participantes: [userId as any],
-      });
-      abrirConversa(conversaId);
-      onClose();
-    } catch (error) {
-      console.error("Erro ao criar conversa:", error);
-      alert("Erro ao criar conversa");
-    } finally {
-      loading = false;
-    }
-  }
+	async function handleCriarIndividual(userId: string) {
+		try {
+			loading = true;
+			const conversaId = await client.mutation(api.chat.criarConversa, {
+				tipo: 'individual',
+				participantes: [userId as any]
+			});
+			abrirConversa(conversaId);
+			onClose();
+		} catch (error) {
+			console.error('Erro ao criar conversa:', error);
+			alert('Erro ao criar conversa');
+		} finally {
+			loading = false;
+		}
+	}
 
-  async function handleCriarGrupo() {
-    if (selectedUsers.length < 2) {
-      alert("Selecione pelo menos 2 participantes");
-      return;
-    }
+	async function handleCriarGrupo() {
+		if (selectedUsers.length < 2) {
+			alert('Selecione pelo menos 2 participantes');
+			return;
+		}
 
-    if (!groupName.trim()) {
-      alert("Digite um nome para o grupo");
-      return;
-    }
+		if (!groupName.trim()) {
+			alert('Digite um nome para o grupo');
+			return;
+		}
 
-    try {
-      loading = true;
-      const conversaId = await client.mutation(api.chat.criarConversa, {
-        tipo: "grupo",
-        participantes: selectedUsers as any,
-        nome: groupName.trim(),
-      });
-      abrirConversa(conversaId);
-      onClose();
-    } catch (error: any) {
-      console.error("Erro ao criar grupo:", error);
-      const mensagem =
-        error?.message || error?.data || "Erro desconhecido ao criar grupo";
-      alert(`Erro ao criar grupo: ${mensagem}`);
-    } finally {
-      loading = false;
-    }
-  }
+		try {
+			loading = true;
+			const conversaId = await client.mutation(api.chat.criarConversa, {
+				tipo: 'grupo',
+				participantes: selectedUsers as any,
+				nome: groupName.trim()
+			});
+			abrirConversa(conversaId);
+			onClose();
+		} catch (error: any) {
+			console.error('Erro ao criar grupo:', error);
+			const mensagem = error?.message || error?.data || 'Erro desconhecido ao criar grupo';
+			alert(`Erro ao criar grupo: ${mensagem}`);
+		} finally {
+			loading = false;
+		}
+	}
 
-  async function handleCriarSalaReuniao() {
-    if (selectedUsers.length < 1) {
-      alert("Selecione pelo menos 1 participante");
-      return;
-    }
+	async function handleCriarSalaReuniao() {
+		if (selectedUsers.length < 1) {
+			alert('Selecione pelo menos 1 participante');
+			return;
+		}
 
-    if (!salaReuniaoName.trim()) {
-      alert("Digite um nome para a sala de reunião");
-      return;
-    }
+		if (!salaReuniaoName.trim()) {
+			alert('Digite um nome para a sala de reunião');
+			return;
+		}
 
-    try {
-      loading = true;
-      const conversaId = await client.mutation(api.chat.criarSalaReuniao, {
-        nome: salaReuniaoName.trim(),
-        participantes: selectedUsers as any,
-      });
-      abrirConversa(conversaId);
-      onClose();
-    } catch (error: any) {
-      console.error("Erro ao criar sala de reunião:", error);
-      const mensagem =
-        error?.message ||
-        error?.data ||
-        "Erro desconhecido ao criar sala de reunião";
-      alert(`Erro ao criar sala de reunião: ${mensagem}`);
-    } finally {
-      loading = false;
-    }
-  }
+		try {
+			loading = true;
+			const conversaId = await client.mutation(api.chat.criarSalaReuniao, {
+				nome: salaReuniaoName.trim(),
+				participantes: selectedUsers as any
+			});
+			abrirConversa(conversaId);
+			onClose();
+		} catch (error: any) {
+			console.error('Erro ao criar sala de reunião:', error);
+			const mensagem =
+				error?.message || error?.data || 'Erro desconhecido ao criar sala de reunião';
+			alert(`Erro ao criar sala de reunião: ${mensagem}`);
+		} finally {
+			loading = false;
+		}
+	}
 </script>
 
-<dialog
-  class="modal modal-open"
-  onclick={(e) => e.target === e.currentTarget && onClose()}
->
-  <div
-    class="modal-box max-w-2xl max-h-[85vh] flex flex-col p-0"
-    onclick={(e) => e.stopPropagation()}
-  >
-    <!-- Header -->
-    <div
-      class="flex items-center justify-between px-6 py-4 border-b border-base-300"
-    >
-      <h2 class="text-2xl font-bold flex items-center gap-2">
-        <MessageSquare class="w-6 h-6 text-primary" />
-        Nova Conversa
-      </h2>
-      <button
-        type="button"
-        class="btn btn-ghost btn-sm btn-circle"
-        onclick={onClose}
-        aria-label="Fechar"
-      >
-        <X class="w-5 h-5" />
-      </button>
-    </div>
+<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
+	<div
+		class="modal-box flex max-h-[85vh] max-w-2xl flex-col p-0"
+		onclick={(e) => e.stopPropagation()}
+	>
+		<!-- Header -->
+		<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+			<h2 class="flex items-center gap-2 text-2xl font-bold">
+				<MessageSquare class="text-primary h-6 w-6" />
+				Nova Conversa
+			</h2>
+			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
+				<X class="h-5 w-5" />
+			</button>
+		</div>
 
-    <!-- Tabs melhoradas -->
-    <div class="tabs tabs-boxed p-4 bg-base-200/50">
-      <button
-        type="button"
-        class={`tab flex items-center gap-2 transition-all duration-200 ${
-          activeTab === "individual"
-            ? "tab-active bg-primary text-primary-content font-semibold"
-            : "hover:bg-base-300"
-        }`}
-        onclick={() => {
-          activeTab = "individual";
-          selectedUsers = [];
-          searchQuery = "";
-        }}
-      >
-        <User class="w-4 h-4" />
-        Individual
-      </button>
-      <button
-        type="button"
-        class={`tab flex items-center gap-2 transition-all duration-200 ${
-          activeTab === "grupo"
-            ? "tab-active bg-primary text-primary-content font-semibold"
-            : "hover:bg-base-300"
-        }`}
-        onclick={() => {
-          activeTab = "grupo";
-          selectedUsers = [];
-          searchQuery = "";
-        }}
-      >
-        <Users class="w-4 h-4" />
-        Grupo
-      </button>
-      <button
-        type="button"
-        class={`tab flex items-center gap-2 transition-all duration-200 ${
-          activeTab === "sala_reuniao"
-            ? "tab-active bg-primary text-primary-content font-semibold"
-            : "hover:bg-base-300"
-        }`}
-        onclick={() => {
-          activeTab = "sala_reuniao";
-          selectedUsers = [];
-          searchQuery = "";
-        }}
-      >
-        <Video class="w-4 h-4" />
-        Sala de Reunião
-      </button>
-    </div>
+		<!-- Tabs melhoradas -->
+		<div class="tabs tabs-boxed bg-base-200/50 p-4">
+			<button
+				type="button"
+				class={`tab flex items-center gap-2 transition-all duration-200 ${
+					activeTab === 'individual'
+						? 'tab-active bg-primary text-primary-content font-semibold'
+						: 'hover:bg-base-300'
+				}`}
+				onclick={() => {
+					activeTab = 'individual';
+					selectedUsers = [];
+					searchQuery = '';
+				}}
+			>
+				<User class="h-4 w-4" />
+				Individual
+			</button>
+			<button
+				type="button"
+				class={`tab flex items-center gap-2 transition-all duration-200 ${
+					activeTab === 'grupo'
+						? 'tab-active bg-primary text-primary-content font-semibold'
+						: 'hover:bg-base-300'
+				}`}
+				onclick={() => {
+					activeTab = 'grupo';
+					selectedUsers = [];
+					searchQuery = '';
+				}}
+			>
+				<Users class="h-4 w-4" />
+				Grupo
+			</button>
+			<button
+				type="button"
+				class={`tab flex items-center gap-2 transition-all duration-200 ${
+					activeTab === 'sala_reuniao'
+						? 'tab-active bg-primary text-primary-content font-semibold'
+						: 'hover:bg-base-300'
+				}`}
+				onclick={() => {
+					activeTab = 'sala_reuniao';
+					selectedUsers = [];
+					searchQuery = '';
+				}}
+			>
+				<Video class="h-4 w-4" />
+				Sala de Reunião
+			</button>
+		</div>
 
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto px-6 py-4">
-      {#if activeTab === "grupo"}
-        <!-- Criar Grupo -->
-        <div class="mb-4">
-          <label class="label pb-2">
-            <span class="label-text font-semibold">Nome do Grupo</span>
-          </label>
-          <input
-            type="text"
-            placeholder="Digite o nome do grupo..."
-            class="input input-bordered w-full focus:input-primary transition-colors"
-            bind:value={groupName}
-            maxlength="50"
-          />
-        </div>
+		<!-- Content -->
+		<div class="flex-1 overflow-y-auto px-6 py-4">
+			{#if activeTab === 'grupo'}
+				<!-- Criar Grupo -->
+				<div class="mb-4">
+					<label class="label pb-2">
+						<span class="label-text font-semibold">Nome do Grupo</span>
+					</label>
+					<input
+						type="text"
+						placeholder="Digite o nome do grupo..."
+						class="input input-bordered focus:input-primary w-full transition-colors"
+						bind:value={groupName}
+						maxlength="50"
+					/>
+				</div>
 
-        <div class="mb-3">
-          <label class="label pb-2">
-            <span class="label-text font-semibold">
-              Participantes {selectedUsers.length > 0
-                ? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? "s" : ""})`
-                : ""}
-            </span>
-          </label>
-        </div>
-      {:else if activeTab === "sala_reuniao"}
-        <!-- Criar Sala de Reunião -->
-        <div class="mb-4">
-          <label class="label pb-2">
-            <span class="label-text font-semibold">Nome da Sala de Reunião</span
-            >
-            <span class="label-text-alt text-primary font-medium"
-              >👑 Você será o administrador</span
-            >
-          </label>
-          <input
-            type="text"
-            placeholder="Digite o nome da sala de reunião..."
-            class="input input-bordered w-full focus:input-primary transition-colors"
-            bind:value={salaReuniaoName}
-            maxlength="50"
-          />
-        </div>
+				<div class="mb-3">
+					<label class="label pb-2">
+						<span class="label-text font-semibold">
+							Participantes {selectedUsers.length > 0
+								? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})`
+								: ''}
+						</span>
+					</label>
+				</div>
+			{:else if activeTab === 'sala_reuniao'}
+				<!-- Criar Sala de Reunião -->
+				<div class="mb-4">
+					<label class="label pb-2">
+						<span class="label-text font-semibold">Nome da Sala de Reunião</span>
+						<span class="label-text-alt text-primary font-medium">👑 Você será o administrador</span
+						>
+					</label>
+					<input
+						type="text"
+						placeholder="Digite o nome da sala de reunião..."
+						class="input input-bordered focus:input-primary w-full transition-colors"
+						bind:value={salaReuniaoName}
+						maxlength="50"
+					/>
+				</div>
 
-        <div class="mb-3">
-          <label class="label pb-2">
-            <span class="label-text font-semibold">
-              Participantes {selectedUsers.length > 0
-                ? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? "s" : ""})`
-                : ""}
-            </span>
-          </label>
-        </div>
-      {/if}
+				<div class="mb-3">
+					<label class="label pb-2">
+						<span class="label-text font-semibold">
+							Participantes {selectedUsers.length > 0
+								? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})`
+								: ''}
+						</span>
+					</label>
+				</div>
+			{/if}
 
-      <!-- Search melhorado -->
-      <div class="mb-4 relative">
-        <input
-          type="text"
-          placeholder="Buscar usuários por nome, email ou matrícula..."
-          class="input input-bordered w-full pl-10 focus:input-primary transition-colors"
-          bind:value={searchQuery}
-        />
-        <Search
-          class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40"
-        />
-      </div>
+			<!-- Search melhorado -->
+			<div class="relative mb-4">
+				<input
+					type="text"
+					placeholder="Buscar usuários por nome, email ou matrícula..."
+					class="input input-bordered focus:input-primary w-full pl-10 transition-colors"
+					bind:value={searchQuery}
+				/>
+				<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
+			</div>
 
-      <!-- Lista de usuários -->
-      <div class="space-y-2">
-        {#if usuarios?.data && usuariosFiltrados().length > 0}
-          {#each usuariosFiltrados() as usuario (usuario._id)}
-            {@const isSelected = selectedUsers.includes(usuario._id)}
-            <button
-              type="button"
-              class={`w-full text-left px-4 py-3 rounded-xl border-2 transition-all duration-200 flex items-center gap-3 ${
-                isSelected
-                  ? "border-primary bg-primary/10 shadow-md scale-[1.02]"
-                  : "border-base-300 hover:bg-base-200 hover:border-primary/30 hover:shadow-sm"
-              } ${loading ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
-              onclick={() => {
-                if (loading) return;
-                if (activeTab === "individual") {
-                  handleCriarIndividual(usuario._id);
-                } else {
-                  toggleUserSelection(usuario._id);
-                }
-              }}
-              disabled={loading}
-            >
-              <!-- Avatar -->
-              <div class="relative shrink-0">
-                <UserAvatar
-                  avatar={usuario.avatar}
-                  fotoPerfilUrl={usuario.fotoPerfilUrl}
-                  nome={usuario.nome}
-                  size="md"
-                />
-                <div class="absolute -bottom-1 -right-1">
-                  <UserStatusBadge
-                    status={usuario.statusPresenca || "offline"}
-                    size="sm"
-                  />
-                </div>
-              </div>
+			<!-- Lista de usuários -->
+			<div class="space-y-2">
+				{#if usuarios?.data && usuariosFiltrados().length > 0}
+					{#each usuariosFiltrados() as usuario (usuario._id)}
+						{@const isSelected = selectedUsers.includes(usuario._id)}
+						<button
+							type="button"
+							class={`flex w-full items-center gap-3 rounded-xl border-2 px-4 py-3 text-left transition-all duration-200 ${
+								isSelected
+									? 'border-primary bg-primary/10 scale-[1.02] shadow-md'
+									: 'border-base-300 hover:bg-base-200 hover:border-primary/30 hover:shadow-sm'
+							} ${loading ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
+							onclick={() => {
+								if (loading) return;
+								if (activeTab === 'individual') {
+									handleCriarIndividual(usuario._id);
+								} else {
+									toggleUserSelection(usuario._id);
+								}
+							}}
+							disabled={loading}
+						>
+							<!-- Avatar -->
+							<div class="relative shrink-0">
+								<UserAvatar
+									avatar={usuario.avatar}
+									fotoPerfilUrl={usuario.fotoPerfilUrl}
+									nome={usuario.nome}
+									size="md"
+								/>
+								<div class="absolute -right-1 -bottom-1">
+									<UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
+								</div>
+							</div>
 
-              <!-- Info -->
-              <div class="flex-1 min-w-0">
-                <p class="font-semibold text-base-content truncate">
-                  {usuario.nome}
-                </p>
-                <p class="text-sm text-base-content/60 truncate">
-                  {usuario.setor ||
-                    usuario.email ||
-                    usuario.matricula ||
-                    "Sem informações"}
-                </p>
-              </div>
+							<!-- Info -->
+							<div class="min-w-0 flex-1">
+								<p class="text-base-content truncate font-semibold">
+									{usuario.nome}
+								</p>
+								<p class="text-base-content/60 truncate text-sm">
+									{usuario.setor || usuario.email || usuario.matricula || 'Sem informações'}
+								</p>
+							</div>
 
-              <!-- Checkbox melhorado (para grupo e sala de reunião) -->
-              {#if activeTab === "grupo" || activeTab === "sala_reuniao"}
-                <div class="shrink-0">
-                  <input
-                    type="checkbox"
-                    class="checkbox checkbox-primary checkbox-lg"
-                    checked={isSelected}
-                    readonly
-                  />
-                </div>
-              {:else}
-                <!-- Ícone de seta para individual -->
-                <ChevronRight class="w-5 h-5 text-base-content/40" />
-              {/if}
-            </button>
-          {/each}
-        {:else if !usuarios?.data}
-          <div class="flex flex-col items-center justify-center py-12">
-            <span class="loading loading-spinner loading-lg text-primary"
-            ></span>
-            <p class="mt-4 text-base-content/60">Carregando usuários...</p>
-          </div>
-        {:else}
-          <div
-            class="flex flex-col items-center justify-center py-12 text-center"
-          >
-            <UserX class="w-16 h-16 text-base-content/30 mb-4" />
-            <p class="text-base-content/70 font-medium">
-              {searchQuery.trim()
-                ? "Nenhum usuário encontrado"
-                : "Nenhum usuário disponível"}
-            </p>
-            {#if searchQuery.trim()}
-              <p class="text-sm text-base-content/50 mt-2">
-                Tente buscar por nome, email ou matrícula
-              </p>
-            {/if}
-          </div>
-        {/if}
-      </div>
-    </div>
+							<!-- Checkbox melhorado (para grupo e sala de reunião) -->
+							{#if activeTab === 'grupo' || activeTab === 'sala_reuniao'}
+								<div class="shrink-0">
+									<input
+										type="checkbox"
+										class="checkbox checkbox-primary checkbox-lg"
+										checked={isSelected}
+										readonly
+									/>
+								</div>
+							{:else}
+								<!-- Ícone de seta para individual -->
+								<ChevronRight class="text-base-content/40 h-5 w-5" />
+							{/if}
+						</button>
+					{/each}
+				{:else if !usuarios?.data}
+					<div class="flex flex-col items-center justify-center py-12">
+						<span class="loading loading-spinner loading-lg text-primary"></span>
+						<p class="text-base-content/60 mt-4">Carregando usuários...</p>
+					</div>
+				{:else}
+					<div class="flex flex-col items-center justify-center py-12 text-center">
+						<UserX class="text-base-content/30 mb-4 h-16 w-16" />
+						<p class="text-base-content/70 font-medium">
+							{searchQuery.trim() ? 'Nenhum usuário encontrado' : 'Nenhum usuário disponível'}
+						</p>
+						{#if searchQuery.trim()}
+							<p class="text-base-content/50 mt-2 text-sm">
+								Tente buscar por nome, email ou matrícula
+							</p>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		</div>
 
-    <!-- Footer (para grupo e sala de reunião) -->
-    {#if activeTab === "grupo"}
-      <div class="px-6 py-4 border-t border-base-300 bg-base-200/50">
-        <button
-          type="button"
-          class="btn btn-primary btn-block btn-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
-          onclick={handleCriarGrupo}
-          disabled={loading || selectedUsers.length < 2 || !groupName.trim()}
-        >
-          {#if loading}
-            <span class="loading loading-spinner"></span>
-            Criando grupo...
-          {:else}
-            <Plus class="w-5 h-5" />
-            Criar Grupo
-          {/if}
-        </button>
-        {#if selectedUsers.length < 2 && activeTab === "grupo"}
-          <p class="text-xs text-base-content/50 text-center mt-2">
-            Selecione pelo menos 2 participantes
-          </p>
-        {/if}
-      </div>
-    {:else if activeTab === "sala_reuniao"}
-      <div class="px-6 py-4 border-t border-base-300 bg-base-200/50">
-        <button
-          type="button"
-          class="btn btn-primary btn-block btn-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
-          onclick={handleCriarSalaReuniao}
-          disabled={loading ||
-            selectedUsers.length < 1 ||
-            !salaReuniaoName.trim()}
-        >
-          {#if loading}
-            <span class="loading loading-spinner"></span>
-            Criando sala...
-          {:else}
-            <Plus class="w-5 h-5" />
-            Criar Sala de Reunião
-          {/if}
-        </button>
-        {#if selectedUsers.length < 1 && activeTab === "sala_reuniao"}
-          <p class="text-xs text-base-content/50 text-center mt-2">
-            Selecione pelo menos 1 participante
-          </p>
-        {/if}
-      </div>
-    {/if}
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button type="button" onclick={onClose}>fechar</button>
-  </form>
+		<!-- Footer (para grupo e sala de reunião) -->
+		{#if activeTab === 'grupo'}
+			<div class="border-base-300 bg-base-200/50 border-t px-6 py-4">
+				<button
+					type="button"
+					class="btn btn-primary btn-block btn-lg font-semibold shadow-lg transition-all duration-200 hover:shadow-xl"
+					onclick={handleCriarGrupo}
+					disabled={loading || selectedUsers.length < 2 || !groupName.trim()}
+				>
+					{#if loading}
+						<span class="loading loading-spinner"></span>
+						Criando grupo...
+					{:else}
+						<Plus class="h-5 w-5" />
+						Criar Grupo
+					{/if}
+				</button>
+				{#if selectedUsers.length < 2 && activeTab === 'grupo'}
+					<p class="text-base-content/50 mt-2 text-center text-xs">
+						Selecione pelo menos 2 participantes
+					</p>
+				{/if}
+			</div>
+		{:else if activeTab === 'sala_reuniao'}
+			<div class="border-base-300 bg-base-200/50 border-t px-6 py-4">
+				<button
+					type="button"
+					class="btn btn-primary btn-block btn-lg font-semibold shadow-lg transition-all duration-200 hover:shadow-xl"
+					onclick={handleCriarSalaReuniao}
+					disabled={loading || selectedUsers.length < 1 || !salaReuniaoName.trim()}
+				>
+					{#if loading}
+						<span class="loading loading-spinner"></span>
+						Criando sala...
+					{:else}
+						<Plus class="h-5 w-5" />
+						Criar Sala de Reunião
+					{/if}
+				</button>
+				{#if selectedUsers.length < 1 && activeTab === 'sala_reuniao'}
+					<p class="text-base-content/50 mt-2 text-center text-xs">
+						Selecione pelo menos 1 participante
+					</p>
+				{/if}
+			</div>
+		{/if}
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button type="button" onclick={onClose}>fechar</button>
+	</form>
 </dialog>
diff --git a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
index 32eb20e..34a1bc5 100644
--- a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
+++ b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
@@ -212,12 +212,7 @@
 					{conversa()?.nome || 'Sem nome'}
 				</p>
 			</div>
-			<button
-				type="button"
-				class="btn btn-ghost btn-sm btn-circle"
-				onclick={onClose}
-				aria-label="Fechar"
-			>
+			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
 				<X class="h-5 w-5" />
 			</button>
 		</div>
diff --git a/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte b/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
index 0ceddd2..8a9363b 100644
--- a/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
+++ b/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
@@ -1,288 +1,269 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import { Clock, X, Trash2 } from "lucide-svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+	import { Clock, X, Trash2 } from 'lucide-svelte';
 
-  interface Props {
-    conversaId: Id<"conversas">;
-    onClose: () => void;
-  }
+	interface Props {
+		conversaId: Id<'conversas'>;
+		onClose: () => void;
+	}
 
-  let { conversaId, onClose }: Props = $props();
+	let { conversaId, onClose }: Props = $props();
 
-  const client = useConvexClient();
-  const mensagensAgendadas = useQuery(api.chat.obterMensagensAgendadas, {
-    conversaId,
-  });
+	const client = useConvexClient();
+	const mensagensAgendadas = useQuery(api.chat.obterMensagensAgendadas, {
+		conversaId
+	});
 
-  let mensagem = $state("");
-  let data = $state("");
-  let hora = $state("");
-  let loading = $state(false);
+	let mensagem = $state('');
+	let data = $state('');
+	let hora = $state('');
+	let loading = $state(false);
 
-  // Rastrear mudanças nas mensagens agendadas
-  $effect(() => {
-    console.log(
-      "📅 [ScheduleModal] Mensagens agendadas atualizadas:",
-      mensagensAgendadas?.data,
-    );
-  });
+	// Rastrear mudanças nas mensagens agendadas
+	$effect(() => {
+		console.log('📅 [ScheduleModal] Mensagens agendadas atualizadas:', mensagensAgendadas?.data);
+	});
 
-  // Definir data/hora mínima (agora)
-  const now = new Date();
-  const minDate = format(now, "yyyy-MM-dd");
-  const minTime = format(now, "HH:mm");
+	// Definir data/hora mínima (agora)
+	const now = new Date();
+	const minDate = format(now, 'yyyy-MM-dd');
+	const minTime = format(now, 'HH:mm');
 
-  function getPreviewText(): string {
-    if (!data || !hora) return "";
+	function getPreviewText(): string {
+		if (!data || !hora) return '';
 
-    try {
-      const dataHora = new Date(`${data}T${hora}`);
-      return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
-    } catch {
-      return "";
-    }
-  }
+		try {
+			const dataHora = new Date(`${data}T${hora}`);
+			return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
+		} catch {
+			return '';
+		}
+	}
 
-  async function handleAgendar() {
-    if (!mensagem.trim() || !data || !hora) {
-      alert("Preencha todos os campos");
-      return;
-    }
+	async function handleAgendar() {
+		if (!mensagem.trim() || !data || !hora) {
+			alert('Preencha todos os campos');
+			return;
+		}
 
-    try {
-      loading = true;
-      const dataHora = new Date(`${data}T${hora}`);
+		try {
+			loading = true;
+			const dataHora = new Date(`${data}T${hora}`);
 
-      // Validar data futura
-      if (dataHora.getTime() <= Date.now()) {
-        alert("A data e hora devem ser futuras");
-        return;
-      }
+			// Validar data futura
+			if (dataHora.getTime() <= Date.now()) {
+				alert('A data e hora devem ser futuras');
+				return;
+			}
 
-      await client.mutation(api.chat.agendarMensagem, {
-        conversaId,
-        conteudo: mensagem.trim(),
-        agendadaPara: dataHora.getTime(),
-      });
+			await client.mutation(api.chat.agendarMensagem, {
+				conversaId,
+				conteudo: mensagem.trim(),
+				agendadaPara: dataHora.getTime()
+			});
 
-      mensagem = "";
-      data = "";
-      hora = "";
+			mensagem = '';
+			data = '';
+			hora = '';
 
-      // Dar tempo para o Convex processar e recarregar a lista
-      setTimeout(() => {
-        alert("Mensagem agendada com sucesso!");
-      }, 500);
-    } catch (error) {
-      console.error("Erro ao agendar mensagem:", error);
-      alert("Erro ao agendar mensagem");
-    } finally {
-      loading = false;
-    }
-  }
+			// Dar tempo para o Convex processar e recarregar a lista
+			setTimeout(() => {
+				alert('Mensagem agendada com sucesso!');
+			}, 500);
+		} catch (error) {
+			console.error('Erro ao agendar mensagem:', error);
+			alert('Erro ao agendar mensagem');
+		} finally {
+			loading = false;
+		}
+	}
 
-  async function handleCancelar(mensagemId: string) {
-    if (!confirm("Deseja cancelar esta mensagem agendada?")) return;
+	async function handleCancelar(mensagemId: string) {
+		if (!confirm('Deseja cancelar esta mensagem agendada?')) return;
 
-    try {
-      await client.mutation(api.chat.cancelarMensagemAgendada, {
-        mensagemId: mensagemId as any,
-      });
-    } catch (error) {
-      console.error("Erro ao cancelar mensagem:", error);
-      alert("Erro ao cancelar mensagem");
-    }
-  }
+		try {
+			await client.mutation(api.chat.cancelarMensagemAgendada, {
+				mensagemId: mensagemId as any
+			});
+		} catch (error) {
+			console.error('Erro ao cancelar mensagem:', error);
+			alert('Erro ao cancelar mensagem');
+		}
+	}
 
-  function formatarDataHora(timestamp: number): string {
-    try {
-      return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
-        locale: ptBR,
-      });
-    } catch {
-      return "Data inválida";
-    }
-  }
+	function formatarDataHora(timestamp: number): string {
+		try {
+			return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
+				locale: ptBR
+			});
+		} catch {
+			return 'Data inválida';
+		}
+	}
 </script>
 
-<dialog
-  class="modal modal-open"
-  onclick={(e) => e.target === e.currentTarget && onClose()}
->
-  <div
-    class="modal-box max-w-2xl max-h-[90vh] flex flex-col p-0"
-    onclick={(e) => e.stopPropagation()}
-  >
-    <!-- Header -->
-    <div
-      class="flex items-center justify-between px-6 py-4 border-b border-base-300"
-    >
-      <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2">
-        <Clock class="w-5 h-5 text-primary" />
-        Agendar Mensagem
-      </h2>
-      <button
-        type="button"
-        class="btn btn-ghost btn-sm btn-circle"
-        onclick={onClose}
-        aria-label="Fechar"
-      >
-        <X class="w-5 h-5" />
-      </button>
-    </div>
+<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
+	<div
+		class="modal-box flex max-h-[90vh] max-w-2xl flex-col p-0"
+		onclick={(e) => e.stopPropagation()}
+	>
+		<!-- Header -->
+		<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
+			<h2 id="modal-title" class="flex items-center gap-2 text-xl font-bold">
+				<Clock class="text-primary h-5 w-5" />
+				Agendar Mensagem
+			</h2>
+			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
+				<X class="h-5 w-5" />
+			</button>
+		</div>
 
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto p-6 space-y-6">
-      <!-- Formulário de Agendamento -->
-      <div class="card bg-base-200">
-        <div class="card-body">
-          <h3 class="card-title text-lg">Nova Mensagem Agendada</h3>
+		<!-- Content -->
+		<div class="flex-1 space-y-6 overflow-y-auto p-6">
+			<!-- Formulário de Agendamento -->
+			<div class="card bg-base-200">
+				<div class="card-body">
+					<h3 class="card-title text-lg">Nova Mensagem Agendada</h3>
 
-          <div class="form-control">
-            <label class="label" for="mensagem-input">
-              <span class="label-text">Mensagem</span>
-            </label>
-            <textarea
-              id="mensagem-input"
-              class="textarea textarea-bordered h-24"
-              placeholder="Digite a mensagem..."
-              bind:value={mensagem}
-              maxlength="500"
-              aria-describedby="char-count"
-            ></textarea>
-            <div class="label">
-              <span id="char-count" class="label-text-alt"
-                >{mensagem.length}/500</span
-              >
-            </div>
-          </div>
+					<div class="form-control">
+						<label class="label" for="mensagem-input">
+							<span class="label-text">Mensagem</span>
+						</label>
+						<textarea
+							id="mensagem-input"
+							class="textarea textarea-bordered h-24"
+							placeholder="Digite a mensagem..."
+							bind:value={mensagem}
+							maxlength="500"
+							aria-describedby="char-count"
+						></textarea>
+						<div class="label">
+							<span id="char-count" class="label-text-alt">{mensagem.length}/500</span>
+						</div>
+					</div>
 
-          <div class="grid md:grid-cols-2 gap-4">
-            <div class="form-control">
-              <label class="label" for="data-input">
-                <span class="label-text">Data</span>
-              </label>
-              <input
-                id="data-input"
-                type="date"
-                class="input input-bordered"
-                bind:value={data}
-                min={minDate}
-              />
-            </div>
+					<div class="grid gap-4 md:grid-cols-2">
+						<div class="form-control">
+							<label class="label" for="data-input">
+								<span class="label-text">Data</span>
+							</label>
+							<input
+								id="data-input"
+								type="date"
+								class="input input-bordered"
+								bind:value={data}
+								min={minDate}
+							/>
+						</div>
 
-            <div class="form-control">
-              <label class="label" for="hora-input">
-                <span class="label-text">Hora</span>
-              </label>
-              <input
-                id="hora-input"
-                type="time"
-                class="input input-bordered"
-                bind:value={hora}
-                min={data === minDate ? minTime : undefined}
-              />
-            </div>
-          </div>
+						<div class="form-control">
+							<label class="label" for="hora-input">
+								<span class="label-text">Hora</span>
+							</label>
+							<input
+								id="hora-input"
+								type="time"
+								class="input input-bordered"
+								bind:value={hora}
+								min={data === minDate ? minTime : undefined}
+							/>
+						</div>
+					</div>
 
-          {#if getPreviewText()}
-            <div class="alert alert-info">
-              <Clock class="w-6 h-6" />
-              <span>{getPreviewText()}</span>
-            </div>
-          {/if}
+					{#if getPreviewText()}
+						<div class="alert alert-info">
+							<Clock class="h-6 w-6" />
+							<span>{getPreviewText()}</span>
+						</div>
+					{/if}
 
-          <div class="card-actions justify-end">
-            <!-- Botão AGENDAR ultra moderno -->
-            <button
-              type="button"
-              class="relative px-6 py-3 rounded-xl font-bold text-white overflow-hidden transition-all duration-300 group disabled:opacity-50 disabled:cursor-not-allowed"
-              style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
-              onclick={handleAgendar}
-              disabled={loading || !mensagem.trim() || !data || !hora}
-            >
-              <!-- Efeito de brilho no hover -->
-              <div
-                class="absolute inset-0 bg-white/0 group-hover:bg-white/10 transition-colors duration-300"
-              ></div>
+					<div class="card-actions justify-end">
+						<!-- Botão AGENDAR ultra moderno -->
+						<button
+							type="button"
+							class="group relative overflow-hidden rounded-xl px-6 py-3 font-bold text-white transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-50"
+							style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
+							onclick={handleAgendar}
+							disabled={loading || !mensagem.trim() || !data || !hora}
+						>
+							<!-- Efeito de brilho no hover -->
+							<div
+								class="absolute inset-0 bg-white/0 transition-colors duration-300 group-hover:bg-white/10"
+							></div>
 
-              <div class="relative z-10 flex items-center gap-2">
-                {#if loading}
-                  <span class="loading loading-spinner loading-sm"></span>
-                  <span>Agendando...</span>
-                {:else}
-                  <Clock
-                    class="w-5 h-5 group-hover:scale-110 transition-transform"
-                  />
-                  <span class="group-hover:scale-105 transition-transform"
-                    >Agendar</span
-                  >
-                {/if}
-              </div>
-            </button>
-          </div>
-        </div>
-      </div>
+							<div class="relative z-10 flex items-center gap-2">
+								{#if loading}
+									<span class="loading loading-spinner loading-sm"></span>
+									<span>Agendando...</span>
+								{:else}
+									<Clock class="h-5 w-5 transition-transform group-hover:scale-110" />
+									<span class="transition-transform group-hover:scale-105">Agendar</span>
+								{/if}
+							</div>
+						</button>
+					</div>
+				</div>
+			</div>
 
-      <!-- Lista de Mensagens Agendadas -->
-      <div class="card bg-base-200">
-        <div class="card-body">
-          <h3 class="card-title text-lg">Mensagens Agendadas</h3>
+			<!-- Lista de Mensagens Agendadas -->
+			<div class="card bg-base-200">
+				<div class="card-body">
+					<h3 class="card-title text-lg">Mensagens Agendadas</h3>
 
-          {#if mensagensAgendadas?.data && mensagensAgendadas.data.length > 0}
-            <div class="space-y-3">
-              {#each mensagensAgendadas.data as msg (msg._id)}
-                <div class="flex items-start gap-3 p-3 bg-base-100 rounded-lg">
-                  <div class="shrink-0 mt-1">
-                    <Clock class="w-5 h-5 text-primary" />
-                  </div>
+					{#if mensagensAgendadas?.data && mensagensAgendadas.data.length > 0}
+						<div class="space-y-3">
+							{#each mensagensAgendadas.data as msg (msg._id)}
+								<div class="bg-base-100 flex items-start gap-3 rounded-lg p-3">
+									<div class="mt-1 shrink-0">
+										<Clock class="text-primary h-5 w-5" />
+									</div>
 
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-base-content/80">
-                      {formatarDataHora(msg.agendadaPara || 0)}
-                    </p>
-                    <p class="text-sm text-base-content mt-1 line-clamp-2">
-                      {msg.conteudo}
-                    </p>
-                  </div>
+									<div class="min-w-0 flex-1">
+										<p class="text-base-content/80 text-sm font-medium">
+											{formatarDataHora(msg.agendadaPara || 0)}
+										</p>
+										<p class="text-base-content mt-1 line-clamp-2 text-sm">
+											{msg.conteudo}
+										</p>
+									</div>
 
-                  <!-- Botão cancelar moderno -->
-                  <button
-                    type="button"
-                    class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden"
-                    style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
-                    onclick={() => handleCancelar(msg._id)}
-                    aria-label="Cancelar"
-                  >
-                    <div
-                      class="absolute inset-0 bg-error/0 group-hover:bg-error/20 transition-colors duration-300"
-                    ></div>
-                    <Trash2
-                      class="w-5 h-5 text-error relative z-10 group-hover:scale-110 transition-transform"
-                    />
-                  </button>
-                </div>
-              {/each}
-            </div>
-          {:else if !mensagensAgendadas?.data}
-            <div class="flex items-center justify-center py-8">
-              <span class="loading loading-spinner loading-lg"></span>
-            </div>
-          {:else}
-            <div class="text-center py-8 text-base-content/50">
-              <Clock class="w-12 h-12 mx-auto mb-2 opacity-50" />
-              <p class="text-sm">Nenhuma mensagem agendada</p>
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button type="button" onclick={onClose}>fechar</button>
-  </form>
+									<!-- Botão cancelar moderno -->
+									<button
+										type="button"
+										class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
+										style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
+										onclick={() => handleCancelar(msg._id)}
+										aria-label="Cancelar"
+									>
+										<div
+											class="bg-error/0 group-hover:bg-error/20 absolute inset-0 transition-colors duration-300"
+										></div>
+										<Trash2
+											class="text-error relative z-10 h-5 w-5 transition-transform group-hover:scale-110"
+										/>
+									</button>
+								</div>
+							{/each}
+						</div>
+					{:else if !mensagensAgendadas?.data}
+						<div class="flex items-center justify-center py-8">
+							<span class="loading loading-spinner loading-lg"></span>
+						</div>
+					{:else}
+						<div class="text-base-content/50 py-8 text-center">
+							<Clock class="mx-auto mb-2 h-12 w-12 opacity-50" />
+							<p class="text-sm">Nenhuma mensagem agendada</p>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button type="button" onclick={onClose}>fechar</button>
+	</form>
 </dialog>
diff --git a/apps/web/src/lib/components/ti/AlertConfigModal.svelte b/apps/web/src/lib/components/ti/AlertConfigModal.svelte
index 0551e90..5a3a4e8 100644
--- a/apps/web/src/lib/components/ti/AlertConfigModal.svelte
+++ b/apps/web/src/lib/components/ti/AlertConfigModal.svelte
@@ -1,502 +1,479 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  let { onClose }: { onClose: () => void } = $props();
+	let { onClose }: { onClose: () => void } = $props();
 
-  const client = useConvexClient();
-  const alertasQuery = useQuery(api.monitoramento.listarAlertas, {});
-  const alertas = $derived.by(() => {
-    if (!alertasQuery) return [];
-    // O useQuery pode retornar o array diretamente ou em .data
-    if (Array.isArray(alertasQuery)) return alertasQuery;
-    return alertasQuery.data ?? [];
-  });
+	const client = useConvexClient();
+	const alertasQuery = useQuery(api.monitoramento.listarAlertas, {});
+	const alertas = $derived.by(() => {
+		if (!alertasQuery) return [];
+		// O useQuery pode retornar o array diretamente ou em .data
+		if (Array.isArray(alertasQuery)) return alertasQuery;
+		return alertasQuery.data ?? [];
+	});
 
-  // Estado para novo alerta
-  let editingAlertId = $state<Id<"alertConfigurations"> | null>(null);
-  let metricName = $state("cpuUsage");
-  let threshold = $state(80);
-  let operator = $state<">" | "<" | ">=" | "<=" | "==">(">");
-  let enabled = $state(true);
-  let notifyByEmail = $state(false);
-  let notifyByChat = $state(true);
-  let saving = $state(false);
-  let showForm = $state(false);
+	// Estado para novo alerta
+	let editingAlertId = $state<Id<'alertConfigurations'> | null>(null);
+	let metricName = $state('cpuUsage');
+	let threshold = $state(80);
+	let operator = $state<'>' | '<' | '>=' | '<=' | '=='>('>');
+	let enabled = $state(true);
+	let notifyByEmail = $state(false);
+	let notifyByChat = $state(true);
+	let saving = $state(false);
+	let showForm = $state(false);
 
-  const metricOptions = [
-    { value: "cpuUsage", label: "Uso de CPU (%)" },
-    { value: "memoryUsage", label: "Uso de Memória (%)" },
-    { value: "networkLatency", label: "Latência de Rede (ms)" },
-    { value: "storageUsed", label: "Armazenamento Usado (%)" },
-    { value: "usuariosOnline", label: "Usuários Online" },
-    { value: "mensagensPorMinuto", label: "Mensagens por Minuto" },
-    { value: "tempoRespostaMedio", label: "Tempo de Resposta (ms)" },
-    { value: "errosCount", label: "Contagem de Erros" },
-  ];
+	const metricOptions = [
+		{ value: 'cpuUsage', label: 'Uso de CPU (%)' },
+		{ value: 'memoryUsage', label: 'Uso de Memória (%)' },
+		{ value: 'networkLatency', label: 'Latência de Rede (ms)' },
+		{ value: 'storageUsed', label: 'Armazenamento Usado (%)' },
+		{ value: 'usuariosOnline', label: 'Usuários Online' },
+		{ value: 'mensagensPorMinuto', label: 'Mensagens por Minuto' },
+		{ value: 'tempoRespostaMedio', label: 'Tempo de Resposta (ms)' },
+		{ value: 'errosCount', label: 'Contagem de Erros' }
+	];
 
-  const operatorOptions = [
-    { value: ">", label: "Maior que (>)" },
-    { value: ">=", label: "Maior ou igual (≥)" },
-    { value: "<", label: "Menor que (<)" },
-    { value: "<=", label: "Menor ou igual (≤)" },
-    { value: "==", label: "Igual a (=)" },
-  ];
+	const operatorOptions = [
+		{ value: '>', label: 'Maior que (>)' },
+		{ value: '>=', label: 'Maior ou igual (≥)' },
+		{ value: '<', label: 'Menor que (<)' },
+		{ value: '<=', label: 'Menor ou igual (≤)' },
+		{ value: '==', label: 'Igual a (=)' }
+	];
 
-  function resetForm() {
-    editingAlertId = null;
-    metricName = "cpuUsage";
-    threshold = 80;
-    operator = ">";
-    enabled = true;
-    notifyByEmail = false;
-    notifyByChat = true;
-    showForm = false;
-  }
+	function resetForm() {
+		editingAlertId = null;
+		metricName = 'cpuUsage';
+		threshold = 80;
+		operator = '>';
+		enabled = true;
+		notifyByEmail = false;
+		notifyByChat = true;
+		showForm = false;
+	}
 
-  function editAlert(alert: any) {
-    editingAlertId = alert._id;
-    metricName = alert.metricName;
-    threshold = alert.threshold;
-    operator = alert.operator;
-    enabled = alert.enabled;
-    notifyByEmail = alert.notifyByEmail;
-    notifyByChat = alert.notifyByChat;
-    showForm = true;
-  }
+	function editAlert(alert: any) {
+		editingAlertId = alert._id;
+		metricName = alert.metricName;
+		threshold = alert.threshold;
+		operator = alert.operator;
+		enabled = alert.enabled;
+		notifyByEmail = alert.notifyByEmail;
+		notifyByChat = alert.notifyByChat;
+		showForm = true;
+	}
 
-  async function saveAlert() {
-    saving = true;
-    try {
-      await client.mutation(api.monitoramento.configurarAlerta, {
-        alertId: editingAlertId || undefined,
-        metricName,
-        threshold,
-        operator,
-        enabled,
-        notifyByEmail,
-        notifyByChat,
-      });
+	async function saveAlert() {
+		saving = true;
+		try {
+			await client.mutation(api.monitoramento.configurarAlerta, {
+				alertId: editingAlertId || undefined,
+				metricName,
+				threshold,
+				operator,
+				enabled,
+				notifyByEmail,
+				notifyByChat
+			});
 
-      resetForm();
-    } catch (error) {
-      console.error("Erro ao salvar alerta:", error);
-      alert("Erro ao salvar alerta. Tente novamente.");
-    } finally {
-      saving = false;
-    }
-  }
+			resetForm();
+		} catch (error) {
+			console.error('Erro ao salvar alerta:', error);
+			alert('Erro ao salvar alerta. Tente novamente.');
+		} finally {
+			saving = false;
+		}
+	}
 
-  async function deleteAlert(alertId: Id<"alertConfigurations">) {
-    if (!confirm("Tem certeza que deseja deletar este alerta?")) return;
+	async function deleteAlert(alertId: Id<'alertConfigurations'>) {
+		if (!confirm('Tem certeza que deseja deletar este alerta?')) return;
 
-    try {
-      await client.mutation(api.monitoramento.deletarAlerta, { alertId });
-    } catch (error) {
-      console.error("Erro ao deletar alerta:", error);
-      alert("Erro ao deletar alerta. Tente novamente.");
-    }
-  }
+		try {
+			await client.mutation(api.monitoramento.deletarAlerta, { alertId });
+		} catch (error) {
+			console.error('Erro ao deletar alerta:', error);
+			alert('Erro ao deletar alerta. Tente novamente.');
+		}
+	}
 
-  function getMetricLabel(metricName: string): string {
-    return (
-      metricOptions.find((m) => m.value === metricName)?.label || metricName
-    );
-  }
+	function getMetricLabel(metricName: string): string {
+		return metricOptions.find((m) => m.value === metricName)?.label || metricName;
+	}
 
-  function getOperatorLabel(op: string): string {
-    return operatorOptions.find((o) => o.value === op)?.label || op;
-  }
+	function getOperatorLabel(op: string): string {
+		return operatorOptions.find((o) => o.value === op)?.label || op;
+	}
 </script>
 
 <dialog class="modal modal-open">
-  <div class="modal-box max-w-4xl bg-linear-to-br from-base-100 to-base-200">
-    <button
-      type="button"
-      class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-      onclick={onClose}
-    >
-      ✕
-    </button>
+	<div class="modal-box from-base-100 to-base-200 max-w-4xl bg-linear-to-br">
+		<button
+			type="button"
+			class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
+			onclick={onClose}
+		>
+			✕
+		</button>
 
-    <h3 class="font-bold text-3xl text-primary mb-2">
-      ⚙️ Configuração de Alertas
-    </h3>
-    <p class="text-base-content/60 mb-6">
-      Configure alertas personalizados para monitoramento do sistema
-    </p>
+		<h3 class="text-primary mb-2 text-3xl font-bold">⚙️ Configuração de Alertas</h3>
+		<p class="text-base-content/60 mb-6">
+			Configure alertas personalizados para monitoramento do sistema
+		</p>
 
-    <!-- Botão Novo Alerta -->
-    {#if !showForm}
-      <button
-        type="button"
-        class="btn btn-primary mb-6"
-        onclick={() => (showForm = true)}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 4v16m8-8H4"
-          />
-        </svg>
-        Novo Alerta
-      </button>
-    {/if}
+		<!-- Botão Novo Alerta -->
+		{#if !showForm}
+			<button type="button" class="btn btn-primary mb-6" onclick={() => (showForm = true)}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 4v16m8-8H4"
+					/>
+				</svg>
+				Novo Alerta
+			</button>
+		{/if}
 
-    <!-- Formulário de Alerta -->
-    {#if showForm}
-      <div class="card bg-base-100 shadow-xl mb-6 border-2 border-primary/20">
-        <div class="card-body">
-          <h4 class="card-title text-xl">
-            {editingAlertId ? "Editar Alerta" : "Novo Alerta"}
-          </h4>
+		<!-- Formulário de Alerta -->
+		{#if showForm}
+			<div class="card bg-base-100 border-primary/20 mb-6 border-2 shadow-xl">
+				<div class="card-body">
+					<h4 class="card-title text-xl">
+						{editingAlertId ? 'Editar Alerta' : 'Novo Alerta'}
+					</h4>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-            <!-- Métrica -->
-            <div class="form-control">
-              <label class="label" for="metric">
-                <span class="label-text font-semibold">Métrica</span>
-              </label>
-              <select
-                id="metric"
-                class="select select-bordered select-primary"
-                bind:value={metricName}
-              >
-                {#each metricOptions as option}
-                  <option value={option.value}>{option.label}</option>
-                {/each}
-              </select>
-            </div>
+					<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+						<!-- Métrica -->
+						<div class="form-control">
+							<label class="label" for="metric">
+								<span class="label-text font-semibold">Métrica</span>
+							</label>
+							<select
+								id="metric"
+								class="select select-bordered select-primary"
+								bind:value={metricName}
+							>
+								{#each metricOptions as option}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</select>
+						</div>
 
-            <!-- Operador -->
-            <div class="form-control">
-              <label class="label" for="operator">
-                <span class="label-text font-semibold">Condição</span>
-              </label>
-              <select
-                id="operator"
-                class="select select-bordered select-primary"
-                bind:value={operator}
-              >
-                {#each operatorOptions as option}
-                  <option value={option.value}>{option.label}</option>
-                {/each}
-              </select>
-            </div>
+						<!-- Operador -->
+						<div class="form-control">
+							<label class="label" for="operator">
+								<span class="label-text font-semibold">Condição</span>
+							</label>
+							<select
+								id="operator"
+								class="select select-bordered select-primary"
+								bind:value={operator}
+							>
+								{#each operatorOptions as option}
+									<option value={option.value}>{option.label}</option>
+								{/each}
+							</select>
+						</div>
 
-            <!-- Threshold -->
-            <div class="form-control">
-              <label class="label" for="threshold">
-                <span class="label-text font-semibold">Valor Limite</span>
-              </label>
-              <input
-                id="threshold"
-                type="number"
-                class="input input-bordered input-primary"
-                bind:value={threshold}
-                min="0"
-                step="1"
-              />
-            </div>
+						<!-- Threshold -->
+						<div class="form-control">
+							<label class="label" for="threshold">
+								<span class="label-text font-semibold">Valor Limite</span>
+							</label>
+							<input
+								id="threshold"
+								type="number"
+								class="input input-bordered input-primary"
+								bind:value={threshold}
+								min="0"
+								step="1"
+							/>
+						</div>
 
-            <!-- Ativo -->
-            <div class="form-control">
-              <label class="label cursor-pointer justify-start gap-4">
-                <span class="label-text font-semibold">Alerta Ativo</span>
-                <input
-                  type="checkbox"
-                  class="toggle toggle-primary"
-                  bind:checked={enabled}
-                />
-              </label>
-            </div>
-          </div>
+						<!-- Ativo -->
+						<div class="form-control">
+							<label class="label cursor-pointer justify-start gap-4">
+								<span class="label-text font-semibold">Alerta Ativo</span>
+								<input type="checkbox" class="toggle toggle-primary" bind:checked={enabled} />
+							</label>
+						</div>
+					</div>
 
-          <!-- Notificações -->
-          <div class="divider">Método de Notificação</div>
-          <div class="flex gap-6">
-            <label class="label cursor-pointer gap-3">
-              <input
-                type="checkbox"
-                class="checkbox checkbox-primary"
-                bind:checked={notifyByChat}
-              />
-              <span class="label-text">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5 inline mr-2"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
-                  />
-                </svg>
-                Notificar por Chat
-              </span>
-            </label>
+					<!-- Notificações -->
+					<div class="divider">Método de Notificação</div>
+					<div class="flex gap-6">
+						<label class="label cursor-pointer gap-3">
+							<input
+								type="checkbox"
+								class="checkbox checkbox-primary"
+								bind:checked={notifyByChat}
+							/>
+							<span class="label-text">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="mr-2 inline h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
+									/>
+								</svg>
+								Notificar por Chat
+							</span>
+						</label>
 
-            <label class="label cursor-pointer gap-3">
-              <input
-                type="checkbox"
-                class="checkbox checkbox-secondary"
-                bind:checked={notifyByEmail}
-              />
-              <span class="label-text">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5 inline mr-2"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                  />
-                </svg>
-                Notificar por E-mail
-              </span>
-            </label>
-          </div>
+						<label class="label cursor-pointer gap-3">
+							<input
+								type="checkbox"
+								class="checkbox checkbox-secondary"
+								bind:checked={notifyByEmail}
+							/>
+							<span class="label-text">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="mr-2 inline h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+									/>
+								</svg>
+								Notificar por E-mail
+							</span>
+						</label>
+					</div>
 
-          <!-- Preview -->
-          <div class="alert alert-info mt-4">
-            <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>
-              <h4 class="font-bold">Preview do Alerta:</h4>
-              <p class="text-sm">
-                Alertar quando <strong>{getMetricLabel(metricName)}</strong> for
-                <strong>{getOperatorLabel(operator)}</strong> a
-                <strong>{threshold}</strong>
-              </p>
-            </div>
-          </div>
+					<!-- Preview -->
+					<div class="alert alert-info mt-4">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="h-6 w-6 shrink-0 stroke-current"
+						>
+							<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>
+							<h4 class="font-bold">Preview do Alerta:</h4>
+							<p class="text-sm">
+								Alertar quando <strong>{getMetricLabel(metricName)}</strong> for
+								<strong>{getOperatorLabel(operator)}</strong> a
+								<strong>{threshold}</strong>
+							</p>
+						</div>
+					</div>
 
-          <!-- Botões -->
-          <div class="card-actions justify-end mt-4">
-            <button
-              type="button"
-              class="btn btn-ghost"
-              onclick={resetForm}
-              disabled={saving}
-            >
-              Cancelar
-            </button>
-            <button
-              type="button"
-              class="btn btn-primary"
-              onclick={saveAlert}
-              disabled={saving || (!notifyByChat && !notifyByEmail)}
-            >
-              {#if saving}
-                <span class="loading loading-spinner"></span>
-                Salvando...
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M5 13l4 4L19 7"
-                  />
-                </svg>
-                Salvar Alerta
-              {/if}
-            </button>
-          </div>
-        </div>
-      </div>
-    {/if}
+					<!-- Botões -->
+					<div class="card-actions mt-4 justify-end">
+						<button type="button" class="btn" onclick={resetForm} disabled={saving}>
+							Cancelar
+						</button>
+						<button
+							type="button"
+							class="btn btn-primary"
+							onclick={saveAlert}
+							disabled={saving || (!notifyByChat && !notifyByEmail)}
+						>
+							{#if saving}
+								<span class="loading loading-spinner"></span>
+								Salvando...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M5 13l4 4L19 7"
+									/>
+								</svg>
+								Salvar Alerta
+							{/if}
+						</button>
+					</div>
+				</div>
+			</div>
+		{/if}
 
-    <!-- Lista de Alertas -->
-    <div class="divider">Alertas Configurados</div>
+		<!-- Lista de Alertas -->
+		<div class="divider">Alertas Configurados</div>
 
-    {#if alertas.length > 0}
-      <div class="overflow-x-auto">
-        <table class="table table-zebra">
-          <thead>
-            <tr>
-              <th>Métrica</th>
-              <th>Condição</th>
-              <th>Status</th>
-              <th>Notificações</th>
-              <th>Ações</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each alertas as alerta}
-              <tr class={!alerta.enabled ? "opacity-50" : ""}>
-                <td>
-                  <div class="font-semibold">
-                    {getMetricLabel(alerta.metricName)}
-                  </div>
-                </td>
-                <td>
-                  <div class="badge badge-outline">
-                    {getOperatorLabel(alerta.operator)}
-                    {alerta.threshold}
-                  </div>
-                </td>
-                <td>
-                  {#if alerta.enabled}
-                    <div class="badge badge-success gap-2">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-3 w-3"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                        />
-                      </svg>
-                      Ativo
-                    </div>
-                  {:else}
-                    <div class="badge badge-ghost gap-2">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="h-3 w-3"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-                        />
-                      </svg>
-                      Inativo
-                    </div>
-                  {/if}
-                </td>
-                <td>
-                  <div class="flex gap-1">
-                    {#if alerta.notifyByChat}
-                      <div class="badge badge-primary badge-sm">Chat</div>
-                    {/if}
-                    {#if alerta.notifyByEmail}
-                      <div class="badge badge-secondary badge-sm">Email</div>
-                    {/if}
-                  </div>
-                </td>
-                <td>
-                  <div class="flex gap-2">
-                    <button
-                      type="button"
-                      class="btn btn-ghost btn-xs"
-                      onclick={() => editAlert(alerta)}
-                    >
-                      <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                        />
-                      </svg>
-                    </button>
-                    <button
-                      type="button"
-                      class="btn btn-ghost btn-xs text-error"
-                      onclick={() => deleteAlert(alerta._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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {:else}
-      <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
-          >Nenhum alerta configurado. Clique em "Novo Alerta" para criar um.</span
-        >
-      </div>
-    {/if}
+		{#if alertas.length > 0}
+			<div class="overflow-x-auto">
+				<table class="table-zebra table">
+					<thead>
+						<tr>
+							<th>Métrica</th>
+							<th>Condição</th>
+							<th>Status</th>
+							<th>Notificações</th>
+							<th>Ações</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each alertas as alerta}
+							<tr class={!alerta.enabled ? 'opacity-50' : ''}>
+								<td>
+									<div class="font-semibold">
+										{getMetricLabel(alerta.metricName)}
+									</div>
+								</td>
+								<td>
+									<div class="badge badge-outline">
+										{getOperatorLabel(alerta.operator)}
+										{alerta.threshold}
+									</div>
+								</td>
+								<td>
+									{#if alerta.enabled}
+										<div class="badge badge-success gap-2">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-3 w-3"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+												/>
+											</svg>
+											Ativo
+										</div>
+									{:else}
+										<div class="badge badge-ghost gap-2">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-3 w-3"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+												/>
+											</svg>
+											Inativo
+										</div>
+									{/if}
+								</td>
+								<td>
+									<div class="flex gap-1">
+										{#if alerta.notifyByChat}
+											<div class="badge badge-primary badge-sm">Chat</div>
+										{/if}
+										{#if alerta.notifyByEmail}
+											<div class="badge badge-secondary badge-sm">Email</div>
+										{/if}
+									</div>
+								</td>
+								<td>
+									<div class="flex gap-2">
+										<button type="button" class="btn btn-xs" onclick={() => editAlert(alerta)}>
+											<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+												/>
+											</svg>
+										</button>
+										<button
+											type="button"
+											class="btn btn-xs text-error"
+											onclick={() => deleteAlert(alerta._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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+												/>
+											</svg>
+										</button>
+									</div>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{:else}
+			<div class="alert">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					class="stroke-info h-6 w-6 shrink-0"
+				>
+					<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>Nenhum alerta configurado. Clique em "Novo Alerta" para criar um.</span>
+			</div>
+		{/if}
 
-    <div class="modal-action">
-      <button type="button" class="btn btn-lg" onclick={onClose}>Fechar</button>
-    </div>
-  </div>
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-  <form method="dialog" class="modal-backdrop" onclick={onClose}>
-    <button type="button">close</button>
-  </form>
+		<div class="modal-action">
+			<button type="button" class="btn btn-lg" onclick={onClose}>Fechar</button>
+		</div>
+	</div>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<form method="dialog" class="modal-backdrop" onclick={onClose}>
+		<button type="button">close</button>
+	</form>
 </dialog>
diff --git a/apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte b/apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte
index fde48a7..11ca82d 100644
--- a/apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte
@@ -1,512 +1,495 @@
 <script lang="ts">
-  import { useConvexClient, useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { authStore } from "$lib/stores/auth.svelte";
-  import { goto } from "$app/navigation";
-  import { onMount } from "svelte";
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
 
-  const convex = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
+	const convex = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  let senhaAtual = $state("");
-  let novaSenha = $state("");
-  let confirmarSenha = $state("");
-  let carregando = $state(false);
-  let notice = $state<{ type: "success" | "error"; message: string } | null>(
-    null,
-  );
-  let mostrarSenhaAtual = $state(false);
-  let mostrarNovaSenha = $state(false);
-  let mostrarConfirmarSenha = $state(false);
+	let senhaAtual = $state('');
+	let novaSenha = $state('');
+	let confirmarSenha = $state('');
+	let carregando = $state(false);
+	let notice = $state<{ type: 'success' | 'error'; message: string } | null>(null);
+	let mostrarSenhaAtual = $state(false);
+	let mostrarNovaSenha = $state(false);
+	let mostrarConfirmarSenha = $state(false);
 
-  onMount(() => {
-    if (!currentUser?.data) {
-      goto("/");
-    }
-  });
+	onMount(() => {
+		if (!currentUser?.data) {
+			goto('/');
+		}
+	});
 
-  function validarSenha(senha: string): { valido: boolean; erros: string[] } {
-    const erros: string[] = [];
+	function validarSenha(senha: string): { valido: boolean; erros: string[] } {
+		const erros: string[] = [];
 
-    if (senha.length < 8) {
-      erros.push("A senha deve ter no mínimo 8 caracteres");
-    }
-    if (!/[A-Z]/.test(senha)) {
-      erros.push("A senha deve conter pelo menos uma letra maiúscula");
-    }
-    if (!/[a-z]/.test(senha)) {
-      erros.push("A senha deve conter pelo menos uma letra minúscula");
-    }
-    if (!/[0-9]/.test(senha)) {
-      erros.push("A senha deve conter pelo menos um número");
-    }
-    if (!/[!@#$%^&*(),.?":{}|<>]/.test(senha)) {
-      erros.push("A senha deve conter pelo menos um caractere especial");
-    }
+		if (senha.length < 8) {
+			erros.push('A senha deve ter no mínimo 8 caracteres');
+		}
+		if (!/[A-Z]/.test(senha)) {
+			erros.push('A senha deve conter pelo menos uma letra maiúscula');
+		}
+		if (!/[a-z]/.test(senha)) {
+			erros.push('A senha deve conter pelo menos uma letra minúscula');
+		}
+		if (!/[0-9]/.test(senha)) {
+			erros.push('A senha deve conter pelo menos um número');
+		}
+		if (!/[!@#$%^&*(),.?":{}|<>]/.test(senha)) {
+			erros.push('A senha deve conter pelo menos um caractere especial');
+		}
 
-    return {
-      valido: erros.length === 0,
-      erros,
-    };
-  }
+		return {
+			valido: erros.length === 0,
+			erros
+		};
+	}
 
-  async function handleSubmit(e: Event) {
-    e.preventDefault();
-    notice = null;
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		notice = null;
 
-    // Validações
-    if (!senhaAtual || !novaSenha || !confirmarSenha) {
-      notice = {
-        type: "error",
-        message: "Todos os campos são obrigatórios",
-      };
-      return;
-    }
+		// Validações
+		if (!senhaAtual || !novaSenha || !confirmarSenha) {
+			notice = {
+				type: 'error',
+				message: 'Todos os campos são obrigatórios'
+			};
+			return;
+		}
 
-    if (novaSenha !== confirmarSenha) {
-      notice = {
-        type: "error",
-        message: "A nova senha e a confirmação não coincidem",
-      };
-      return;
-    }
+		if (novaSenha !== confirmarSenha) {
+			notice = {
+				type: 'error',
+				message: 'A nova senha e a confirmação não coincidem'
+			};
+			return;
+		}
 
-    if (senhaAtual === novaSenha) {
-      notice = {
-        type: "error",
-        message: "A nova senha deve ser diferente da senha atual",
-      };
-      return;
-    }
+		if (senhaAtual === novaSenha) {
+			notice = {
+				type: 'error',
+				message: 'A nova senha deve ser diferente da senha atual'
+			};
+			return;
+		}
 
-    const validacao = validarSenha(novaSenha);
-    if (!validacao.valido) {
-      notice = {
-        type: "error",
-        message: validacao.erros.join(". "),
-      };
-      return;
-    }
+		const validacao = validarSenha(novaSenha);
+		if (!validacao.valido) {
+			notice = {
+				type: 'error',
+				message: validacao.erros.join('. ')
+			};
+			return;
+		}
 
-    carregando = true;
+		carregando = true;
 
-    try {
-      if (!authStore.token) {
-        throw new Error("Token não encontrado");
-      }
+		try {
+			if (!authStore.token) {
+				throw new Error('Token não encontrado');
+			}
 
-      const resultado = await convex.mutation(api.autenticacao.alterarSenha, {
-        token: authStore.token,
-        senhaAtual: senhaAtual,
-        novaSenha: novaSenha,
-      });
+			const resultado = await convex.mutation(api.autenticacao.alterarSenha, {
+				token: authStore.token,
+				senhaAtual: senhaAtual,
+				novaSenha: novaSenha
+			});
 
-      if (resultado.sucesso) {
-        notice = {
-          type: "success",
-          message: "Senha alterada com sucesso! Redirecionando...",
-        };
+			if (resultado.sucesso) {
+				notice = {
+					type: 'success',
+					message: 'Senha alterada com sucesso! Redirecionando...'
+				};
 
-        // Limpar campos
-        senhaAtual = "";
-        novaSenha = "";
-        confirmarSenha = "";
+				// Limpar campos
+				senhaAtual = '';
+				novaSenha = '';
+				confirmarSenha = '';
 
-        // Redirecionar após 2 segundos
-        setTimeout(() => {
-          goto("/");
-        }, 2000);
-      } else {
-        notice = {
-          type: "error",
-          message: resultado.erro || "Erro ao alterar senha",
-        };
-      }
-    } catch (error: any) {
-      notice = {
-        type: "error",
-        message: error.message || "Erro ao conectar com o servidor",
-      };
-    } finally {
-      carregando = false;
-    }
-  }
+				// Redirecionar após 2 segundos
+				setTimeout(() => {
+					goto('/');
+				}, 2000);
+			} else {
+				notice = {
+					type: 'error',
+					message: resultado.erro || 'Erro ao alterar senha'
+				};
+			}
+		} catch (error: any) {
+			notice = {
+				type: 'error',
+				message: error.message || 'Erro ao conectar com o servidor'
+			};
+		} finally {
+			carregando = false;
+		}
+	}
 
-  function cancelar() {
-    goto("/");
-  }
+	function cancelar() {
+		goto('/');
+	}
 </script>
 
-<main class="container mx-auto px-4 py-8 max-w-2xl">
-  <!-- Header -->
-  <div class="mb-8">
-    <div class="flex items-center gap-3 mb-2">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-10 w-10 text-primary"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-        />
-      </svg>
-      <h1 class="text-4xl font-bold text-primary">Alterar Senha</h1>
-    </div>
-    <p class="text-base-content/70 text-lg">
-      Atualize sua senha de acesso ao sistema
-    </p>
-  </div>
+<main class="container mx-auto max-w-2xl px-4 py-8">
+	<!-- Header -->
+	<div class="mb-8">
+		<div class="mb-2 flex items-center gap-3">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="text-primary h-10 w-10"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+				/>
+			</svg>
+			<h1 class="text-primary text-4xl font-bold">Alterar Senha</h1>
+		</div>
+		<p class="text-base-content/70 text-lg">Atualize sua senha de acesso ao sistema</p>
+	</div>
 
-  <!-- Breadcrumbs -->
-  <div class="text-sm breadcrumbs mb-6">
-    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li>Alterar Senha</li>
-    </ul>
-  </div>
+	<!-- Breadcrumbs -->
+	<div class="breadcrumbs mb-6 text-sm">
+		<ul>
+			<li><a href="/">Dashboard</a></li>
+			<li>Alterar Senha</li>
+		</ul>
+	</div>
 
-  <!-- Alertas -->
-  {#if notice}
-    <div
-      class="alert {notice.type === 'success'
-        ? 'alert-success'
-        : 'alert-error'} mb-6 shadow-lg"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        {#if notice.type === "success"}
-          <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"
-          />
-        {:else}
-          <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"
-          />
-        {/if}
-      </svg>
-      <span>{notice.message}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if notice}
+		<div class="alert {notice.type === 'success' ? 'alert-success' : 'alert-error'} mb-6 shadow-lg">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if notice.type === 'success'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span>{notice.message}</span>
+		</div>
+	{/if}
 
-  <!-- Formulário -->
-  <div class="card bg-base-100 shadow-xl border border-base-300">
-    <div class="card-body">
-      <form onsubmit={handleSubmit} class="space-y-6">
-        <!-- Senha Atual -->
-        <div class="form-control">
-          <label class="label" for="senha-atual">
-            <span class="label-text font-semibold">Senha Atual</span>
-            <span class="label-text-alt text-error">*</span>
-          </label>
-          <div class="relative">
-            <input
-              id="senha-atual"
-              type={mostrarSenhaAtual ? "text" : "password"}
-              placeholder="Digite sua senha atual"
-              class="input input-bordered input-primary w-full pr-12"
-              bind:value={senhaAtual}
-              required
-              disabled={carregando}
-            />
-            <button
-              type="button"
-              class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-circle"
-              onclick={() => (mostrarSenhaAtual = !mostrarSenhaAtual)}
-            >
-              {#if mostrarSenhaAtual}
-                <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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                  />
-                </svg>
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="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>
-              {/if}
-            </button>
-          </div>
-        </div>
+	<!-- Formulário -->
+	<div class="card bg-base-100 border-base-300 border shadow-xl">
+		<div class="card-body">
+			<form onsubmit={handleSubmit} class="space-y-6">
+				<!-- Senha Atual -->
+				<div class="form-control">
+					<label class="label" for="senha-atual">
+						<span class="label-text font-semibold">Senha Atual</span>
+						<span class="label-text-alt text-error">*</span>
+					</label>
+					<div class="relative">
+						<input
+							id="senha-atual"
+							type={mostrarSenhaAtual ? 'text' : 'password'}
+							placeholder="Digite sua senha atual"
+							class="input input-bordered input-primary w-full pr-12"
+							bind:value={senhaAtual}
+							required
+							disabled={carregando}
+						/>
+						<button
+							type="button"
+							class="btn btn-sm btn-circle absolute top-1/2 right-3 -translate-y-1/2"
+							onclick={() => (mostrarSenhaAtual = !mostrarSenhaAtual)}
+						>
+							{#if mostrarSenhaAtual}
+								<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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+									/>
+								</svg>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="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>
+							{/if}
+						</button>
+					</div>
+				</div>
 
-        <!-- Nova Senha -->
-        <div class="form-control">
-          <label class="label" for="nova-senha">
-            <span class="label-text font-semibold">Nova Senha</span>
-            <span class="label-text-alt text-error">*</span>
-          </label>
-          <div class="relative">
-            <input
-              id="nova-senha"
-              type={mostrarNovaSenha ? "text" : "password"}
-              placeholder="Digite sua nova senha"
-              class="input input-bordered input-primary w-full pr-12"
-              bind:value={novaSenha}
-              required
-              disabled={carregando}
-            />
-            <button
-              type="button"
-              class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-circle"
-              onclick={() => (mostrarNovaSenha = !mostrarNovaSenha)}
-            >
-              {#if mostrarNovaSenha}
-                <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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                  />
-                </svg>
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="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>
-              {/if}
-            </button>
-          </div>
-          <div class="label">
-            <span class="label-text-alt text-base-content/60">
-              Mínimo 8 caracteres, com letras maiúsculas, minúsculas, números e
-              caracteres especiais
-            </span>
-          </div>
-        </div>
+				<!-- Nova Senha -->
+				<div class="form-control">
+					<label class="label" for="nova-senha">
+						<span class="label-text font-semibold">Nova Senha</span>
+						<span class="label-text-alt text-error">*</span>
+					</label>
+					<div class="relative">
+						<input
+							id="nova-senha"
+							type={mostrarNovaSenha ? 'text' : 'password'}
+							placeholder="Digite sua nova senha"
+							class="input input-bordered input-primary w-full pr-12"
+							bind:value={novaSenha}
+							required
+							disabled={carregando}
+						/>
+						<button
+							type="button"
+							class="btn btn-sm btn-circle absolute top-1/2 right-3 -translate-y-1/2"
+							onclick={() => (mostrarNovaSenha = !mostrarNovaSenha)}
+						>
+							{#if mostrarNovaSenha}
+								<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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+									/>
+								</svg>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="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>
+							{/if}
+						</button>
+					</div>
+					<div class="label">
+						<span class="label-text-alt text-base-content/60">
+							Mínimo 8 caracteres, com letras maiúsculas, minúsculas, números e caracteres especiais
+						</span>
+					</div>
+				</div>
 
-        <!-- Confirmar Senha -->
-        <div class="form-control">
-          <label class="label" for="confirmar-senha">
-            <span class="label-text font-semibold">Confirmar Nova Senha</span>
-            <span class="label-text-alt text-error">*</span>
-          </label>
-          <div class="relative">
-            <input
-              id="confirmar-senha"
-              type={mostrarConfirmarSenha ? "text" : "password"}
-              placeholder="Digite novamente sua nova senha"
-              class="input input-bordered input-primary w-full pr-12"
-              bind:value={confirmarSenha}
-              required
-              disabled={carregando}
-            />
-            <button
-              type="button"
-              class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-ghost btn-sm btn-circle"
-              onclick={() => (mostrarConfirmarSenha = !mostrarConfirmarSenha)}
-            >
-              {#if mostrarConfirmarSenha}
-                <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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                  />
-                </svg>
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="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>
-              {/if}
-            </button>
-          </div>
-        </div>
+				<!-- Confirmar Senha -->
+				<div class="form-control">
+					<label class="label" for="confirmar-senha">
+						<span class="label-text font-semibold">Confirmar Nova Senha</span>
+						<span class="label-text-alt text-error">*</span>
+					</label>
+					<div class="relative">
+						<input
+							id="confirmar-senha"
+							type={mostrarConfirmarSenha ? 'text' : 'password'}
+							placeholder="Digite novamente sua nova senha"
+							class="input input-bordered input-primary w-full pr-12"
+							bind:value={confirmarSenha}
+							required
+							disabled={carregando}
+						/>
+						<button
+							type="button"
+							class="btn btn-sm btn-circle absolute top-1/2 right-3 -translate-y-1/2"
+							onclick={() => (mostrarConfirmarSenha = !mostrarConfirmarSenha)}
+						>
+							{#if mostrarConfirmarSenha}
+								<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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+									/>
+								</svg>
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="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>
+							{/if}
+						</button>
+					</div>
+				</div>
 
-        <!-- Requisitos de Senha -->
-        <div class="alert alert-info">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <div>
-            <h3 class="font-bold">Requisitos de Senha:</h3>
-            <ul class="text-sm list-disc list-inside mt-2 space-y-1">
-              <li>Mínimo de 8 caracteres</li>
-              <li>Pelo menos uma letra maiúscula (A-Z)</li>
-              <li>Pelo menos uma letra minúscula (a-z)</li>
-              <li>Pelo menos um número (0-9)</li>
-              <li>Pelo menos um caractere especial (!@#$%^&*...)</li>
-            </ul>
-          </div>
-        </div>
+				<!-- Requisitos de Senha -->
+				<div class="alert alert-info">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6 shrink-0 stroke-current"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<div>
+						<h3 class="font-bold">Requisitos de Senha:</h3>
+						<ul class="mt-2 list-inside list-disc space-y-1 text-sm">
+							<li>Mínimo de 8 caracteres</li>
+							<li>Pelo menos uma letra maiúscula (A-Z)</li>
+							<li>Pelo menos uma letra minúscula (a-z)</li>
+							<li>Pelo menos um número (0-9)</li>
+							<li>Pelo menos um caractere especial (!@#$%^&*...)</li>
+						</ul>
+					</div>
+				</div>
 
-        <!-- Botões -->
-        <div class="flex gap-4 justify-end mt-8">
-          <button
-            type="button"
-            class="btn btn-ghost"
-            onclick={cancelar}
-            disabled={carregando}
-          >
-            <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="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-            Cancelar
-          </button>
-          <button type="submit" class="btn btn-primary" disabled={carregando}>
-            {#if carregando}
-              <span class="loading loading-spinner loading-sm"></span>
-              Alterando...
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
-              Alterar Senha
-            {/if}
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
+				<!-- Botões -->
+				<div class="mt-8 flex justify-end gap-4">
+					<button type="button" class="btn" onclick={cancelar} disabled={carregando}>
+						<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="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+						Cancelar
+					</button>
+					<button type="submit" class="btn btn-primary" disabled={carregando}>
+						{#if carregando}
+							<span class="loading loading-spinner loading-sm"></span>
+							Alterando...
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M5 13l4 4L19 7"
+								/>
+							</svg>
+							Alterar Senha
+						{/if}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
 
-  <!-- Dicas de Segurança -->
-  <div class="mt-6 card bg-base-200 shadow-lg">
-    <div class="card-body">
-      <h3 class="card-title text-lg">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 text-warning"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          />
-        </svg>
-        Dicas de Segurança
-      </h3>
-      <ul class="text-sm space-y-2 text-base-content/70">
-        <li>✅ Nunca compartilhe sua senha com ninguém</li>
-        <li>✅ Use uma senha única para cada sistema</li>
-        <li>✅ Altere sua senha regularmente</li>
-        <li>
-          ✅ Não use informações pessoais óbvias (nome, data de nascimento,
-          etc.)
-        </li>
-        <li>✅ Considere usar um gerenciador de senhas</li>
-      </ul>
-    </div>
-  </div>
+	<!-- Dicas de Segurança -->
+	<div class="card bg-base-200 mt-6 shadow-lg">
+		<div class="card-body">
+			<h3 class="card-title text-lg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-warning h-6 w-6"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+					/>
+				</svg>
+				Dicas de Segurança
+			</h3>
+			<ul class="text-base-content/70 space-y-2 text-sm">
+				<li>✅ Nunca compartilhe sua senha com ninguém</li>
+				<li>✅ Use uma senha única para cada sistema</li>
+				<li>✅ Altere sua senha regularmente</li>
+				<li>✅ Não use informações pessoais óbvias (nome, data de nascimento, etc.)</li>
+				<li>✅ Considere usar um gerenciador de senhas</li>
+			</ul>
+		</div>
+	</div>
 </main>
diff --git a/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte b/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
index 2cedee5..9d85216 100644
--- a/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
@@ -1,264 +1,363 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
 
-  const convex = useConvexClient();
+	const convex = useConvexClient();
 
-  let matricula = $state("");
-  let email = $state("");
-  let carregando = $state(false);
-  let notice = $state<{ type: "success" | "error" | "info"; message: string } | null>(null);
-  let solicitacaoEnviada = $state(false);
+	let matricula = $state('');
+	let email = $state('');
+	let carregando = $state(false);
+	let notice = $state<{ type: 'success' | 'error' | 'info'; message: string } | null>(null);
+	let solicitacaoEnviada = $state(false);
 
-  async function handleSubmit(e: Event) {
-    e.preventDefault();
-    notice = null;
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		notice = null;
 
-    if (!matricula || !email) {
-      notice = {
-        type: "error",
-        message: "Por favor, preencha todos os campos",
-      };
-      return;
-    }
+		if (!matricula || !email) {
+			notice = {
+				type: 'error',
+				message: 'Por favor, preencha todos os campos'
+			};
+			return;
+		}
 
-    carregando = true;
+		carregando = true;
 
-    try {
-      // Verificar se o usuário existe
-      const usuarios = await convex.query(api.usuarios.listar, {
-        matricula: matricula,
-      });
+		try {
+			// Verificar se o usuário existe
+			const usuarios = await convex.query(api.usuarios.listar, {
+				matricula: matricula
+			});
 
-      const usuario = usuarios.find(u => u.matricula === matricula && u.email === email);
+			const usuario = usuarios.find((u) => u.matricula === matricula && u.email === email);
 
-      if (!usuario) {
-        notice = {
-          type: "error",
-          message: "Matrícula ou e-mail não encontrados. Verifique os dados e tente novamente.",
-        };
-        carregando = false;
-        return;
-      }
+			if (!usuario) {
+				notice = {
+					type: 'error',
+					message: 'Matrícula ou e-mail não encontrados. Verifique os dados e tente novamente.'
+				};
+				carregando = false;
+				return;
+			}
 
-      // Simular envio de solicitação
-      solicitacaoEnviada = true;
-      notice = {
-        type: "success",
-        message: "Solicitação enviada com sucesso! A equipe de TI entrará em contato em breve.",
-      };
+			// Simular envio de solicitação
+			solicitacaoEnviada = true;
+			notice = {
+				type: 'success',
+				message: 'Solicitação enviada com sucesso! A equipe de TI entrará em contato em breve.'
+			};
 
-      // Limpar campos
-      matricula = "";
-      email = "";
-    } catch (error: any) {
-      notice = {
-        type: "error",
-        message: error.message || "Erro ao processar solicitação",
-      };
-    } finally {
-      carregando = false;
-    }
-  }
+			// Limpar campos
+			matricula = '';
+			email = '';
+		} catch (error: any) {
+			notice = {
+				type: 'error',
+				message: error.message || 'Erro ao processar solicitação'
+			};
+		} finally {
+			carregando = false;
+		}
+	}
 </script>
 
-<main class="container mx-auto px-4 py-8 max-w-2xl">
-  <!-- Header -->
-  <div class="mb-8">
-    <div class="flex items-center gap-3 mb-2">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-      <h1 class="text-4xl font-bold text-primary">Esqueci Minha Senha</h1>
-    </div>
-    <p class="text-base-content/70 text-lg">
-      Solicite a recuperação da sua senha de acesso
-    </p>
-  </div>
+<main class="container mx-auto max-w-2xl px-4 py-8">
+	<!-- Header -->
+	<div class="mb-8">
+		<div class="mb-2 flex items-center gap-3">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="text-primary h-10 w-10"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+			<h1 class="text-primary text-4xl font-bold">Esqueci Minha Senha</h1>
+		</div>
+		<p class="text-base-content/70 text-lg">Solicite a recuperação da sua senha de acesso</p>
+	</div>
 
-  <!-- Breadcrumbs -->
-  <div class="text-sm breadcrumbs mb-6">
-    <ul>
-      <li><a href="/">Dashboard</a></li>
-      <li>Esqueci Minha Senha</li>
-    </ul>
-  </div>
+	<!-- Breadcrumbs -->
+	<div class="breadcrumbs mb-6 text-sm">
+		<ul>
+			<li><a href="/">Dashboard</a></li>
+			<li>Esqueci Minha Senha</li>
+		</ul>
+	</div>
 
-  <!-- Alertas -->
-  {#if notice}
-    <div class="alert {notice.type === 'success' ? 'alert-success' : notice.type === 'error' ? 'alert-error' : 'alert-info'} mb-6 shadow-lg">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        {#if notice.type === "success"}
-          <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"
-          />
-        {:else if notice.type === "error"}
-          <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"
-          />
-        {:else}
-          <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"
-          />
-        {/if}
-      </svg>
-      <span>{notice.message}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if notice}
+		<div
+			class="alert {notice.type === 'success'
+				? 'alert-success'
+				: notice.type === 'error'
+					? 'alert-error'
+					: 'alert-info'} mb-6 shadow-lg"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if notice.type === 'success'}
+					<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"
+					/>
+				{:else if notice.type === 'error'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span>{notice.message}</span>
+		</div>
+	{/if}
 
-  {#if !solicitacaoEnviada}
-    <!-- Formulário -->
-    <div class="card bg-base-100 shadow-xl border border-base-300">
-      <div class="card-body">
-        <div class="alert alert-info mb-6">
-          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-          <div>
-            <h3 class="font-bold">Como funciona?</h3>
-            <p class="text-sm">
-              Informe sua matrícula e e-mail cadastrados. A equipe de TI receberá sua solicitação e entrará em contato para resetar sua senha.
-            </p>
-          </div>
-        </div>
+	{#if !solicitacaoEnviada}
+		<!-- Formulário -->
+		<div class="card bg-base-100 border-base-300 border shadow-xl">
+			<div class="card-body">
+				<div class="alert alert-info mb-6">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6 shrink-0 stroke-current"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<div>
+						<h3 class="font-bold">Como funciona?</h3>
+						<p class="text-sm">
+							Informe sua matrícula e e-mail cadastrados. A equipe de TI receberá sua solicitação e
+							entrará em contato para resetar sua senha.
+						</p>
+					</div>
+				</div>
 
-        <form onsubmit={handleSubmit} class="space-y-6">
-          <!-- Matrícula -->
-          <div class="form-control">
-            <label class="label" for="matricula">
-              <span class="label-text font-semibold">Matrícula</span>
-              <span class="label-text-alt text-error">*</span>
-            </label>
-            <input
-              id="matricula"
-              type="text"
-              placeholder="Digite sua matrícula"
-              class="input input-bordered input-primary w-full"
-              bind:value={matricula}
-              required
-              disabled={carregando}
-            />
-          </div>
+				<form onsubmit={handleSubmit} class="space-y-6">
+					<!-- Matrícula -->
+					<div class="form-control">
+						<label class="label" for="matricula">
+							<span class="label-text font-semibold">Matrícula</span>
+							<span class="label-text-alt text-error">*</span>
+						</label>
+						<input
+							id="matricula"
+							type="text"
+							placeholder="Digite sua matrícula"
+							class="input input-bordered input-primary w-full"
+							bind:value={matricula}
+							required
+							disabled={carregando}
+						/>
+					</div>
 
-          <!-- E-mail -->
-          <div class="form-control">
-            <label class="label" for="email">
-              <span class="label-text font-semibold">E-mail</span>
-              <span class="label-text-alt text-error">*</span>
-            </label>
-            <input
-              id="email"
-              type="email"
-              placeholder="Digite seu e-mail cadastrado"
-              class="input input-bordered input-primary w-full"
-              bind:value={email}
-              required
-              disabled={carregando}
-            />
-            <label class="label">
-              <span class="label-text-alt text-base-content/60">
-                Use o e-mail cadastrado no sistema
-              </span>
-            </label>
-          </div>
+					<!-- E-mail -->
+					<div class="form-control">
+						<label class="label" for="email">
+							<span class="label-text font-semibold">E-mail</span>
+							<span class="label-text-alt text-error">*</span>
+						</label>
+						<input
+							id="email"
+							type="email"
+							placeholder="Digite seu e-mail cadastrado"
+							class="input input-bordered input-primary w-full"
+							bind:value={email}
+							required
+							disabled={carregando}
+						/>
+						<label class="label">
+							<span class="label-text-alt text-base-content/60">
+								Use o e-mail cadastrado no sistema
+							</span>
+						</label>
+					</div>
 
-          <!-- Botões -->
-          <div class="flex gap-4 justify-end mt-8">
-            <a href="/" class="btn btn-ghost" class:btn-disabled={carregando}>
-              <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
-            </a>
-            <button
-              type="submit"
-              class="btn btn-primary"
-              disabled={carregando}
-            >
-              {#if carregando}
-                <span class="loading loading-spinner loading-sm"></span>
-                Enviando...
-              {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                </svg>
-                Enviar Solicitação
-              {/if}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  {:else}
-    <!-- Mensagem de Sucesso -->
-    <div class="card bg-success/10 shadow-xl border border-success/30">
-      <div class="card-body text-center">
-        <div class="flex justify-center mb-4">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-        </div>
-        <h2 class="text-2xl font-bold text-success mb-4">Solicitação Enviada!</h2>
-        <p class="text-base-content/70 mb-6">
-          Sua solicitação de recuperação de senha foi enviada para a equipe de TI.
-          Você receberá um contato em breve com as instruções para resetar sua senha.
-        </p>
-        <div class="flex gap-4 justify-center">
-          <a href="/" class="btn btn-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-            </svg>
-            Voltar ao Dashboard
-          </a>
-          <button type="button" class="btn btn-ghost" onclick={() => solicitacaoEnviada = false}>
-            Enviar Nova Solicitação
-          </button>
-        </div>
-      </div>
-    </div>
-  {/if}
+					<!-- Botões -->
+					<div class="mt-8 flex justify-end gap-4">
+						<a href="/" class="btn" class:btn-disabled={carregando}>
+							<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
+						</a>
+						<button type="submit" class="btn btn-primary" disabled={carregando}>
+							{#if carregando}
+								<span class="loading loading-spinner loading-sm"></span>
+								Enviando...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+									/>
+								</svg>
+								Enviar Solicitação
+							{/if}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	{:else}
+		<!-- Mensagem de Sucesso -->
+		<div class="card bg-success/10 border-success/30 border shadow-xl">
+			<div class="card-body text-center">
+				<div class="mb-4 flex justify-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-success h-24 w-24"
+						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>
+				<h2 class="text-success mb-4 text-2xl font-bold">Solicitação Enviada!</h2>
+				<p class="text-base-content/70 mb-6">
+					Sua solicitação de recuperação de senha foi enviada para a equipe de TI. Você receberá um
+					contato em breve com as instruções para resetar sua senha.
+				</p>
+				<div class="flex justify-center gap-4">
+					<a href="/" class="btn btn-primary">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+							/>
+						</svg>
+						Voltar ao Dashboard
+					</a>
+					<button type="button" class="btn" onclick={() => (solicitacaoEnviada = false)}>
+						Enviar Nova Solicitação
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
 
-  <!-- Card de Contato -->
-  <div class="mt-6 card bg-base-200 shadow-lg">
-    <div class="card-body">
-      <h3 class="card-title text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-info" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        Precisa de Ajuda?
-      </h3>
-      <p class="text-sm text-base-content/70">
-        Se você não conseguir recuperar sua senha ou tiver problemas com o sistema, entre em contato diretamente com a equipe de TI:
-      </p>
-      <div class="mt-4 space-y-2">
-        <div class="flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-          </svg>
-          <span class="text-sm">ti@sgse.pe.gov.br</span>
-        </div>
-        <div class="flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-          </svg>
-          <span class="text-sm">(81) 3183-8000</span>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Card de Contato -->
+	<div class="card bg-base-200 mt-6 shadow-lg">
+		<div class="card-body">
+			<h3 class="card-title text-lg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-info h-6 w-6"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				Precisa de Ajuda?
+			</h3>
+			<p class="text-base-content/70 text-sm">
+				Se você não conseguir recuperar sua senha ou tiver problemas com o sistema, entre em contato
+				diretamente com a equipe de TI:
+			</p>
+			<div class="mt-4 space-y-2">
+				<div class="flex items-center gap-2">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+						/>
+					</svg>
+					<span class="text-sm">ti@sgse.pe.gov.br</span>
+				</div>
+				<div class="flex items-center gap-2">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+						/>
+					</svg>
+					<span class="text-sm">(81) 3183-8000</span>
+				</div>
+			</div>
+		</div>
+	</div>
 </main>
-
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
index 9f54d61..774da20 100644
--- a/apps/web/src/routes/(dashboard)/gestao-pessoas/gestao-ausencias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/gestao-pessoas/gestao-ausencias/+page.svelte
@@ -1,419 +1,407 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import AprovarAusencias from "$lib/components/AprovarAusencias.svelte";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { goto } from '$app/navigation';
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
-const currentUser = useQuery(api.auth.getCurrentUser, {});
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  // Buscar TODAS as solicitações de ausências
-  const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
+	// 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);
+	let filtroStatus = $state<string>('todos');
+	let solicitacaoSelecionada = $state<Id<'solicitacoesAusencias'> | null>(null);
 
-  const ausencias = $derived(todasAusenciasQuery?.data || []);
+	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;
-    })
-  );
+	// 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,
-  });
+	// 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 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 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;
-  }
+	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 selecionarSolicitacao(solicitacaoId: Id<'solicitacoesAusencias'>) {
+		solicitacaoSelecionada = solicitacaoId;
+	}
 
-  async function recarregar() {
-    solicitacaoSelecionada = null;
-  }
+	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>
+<main class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<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>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-orange-500/20 p-3">
+					<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-primary text-3xl font-bold">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 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>
+	<!-- Estatísticas -->
+	<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+		<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+			<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 rounded-box border-warning/30 border shadow-lg">
+			<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 rounded-box border-success/30 border shadow-lg">
+			<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>
+		<div class="stat bg-base-100 rounded-box border-error/30 border shadow-lg">
+			<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>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">Filtros</h2>
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+				<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>
+	<!-- Lista de Solicitações -->
+	<div class="card bg-base-100 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				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>
+			{#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 h-6 w-6 shrink-0"
+					>
+						<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-zebra table">
+						<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-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 && currentUser.data}
-  {#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={currentUser.data._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}
+	{#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={currentUser.data._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)/perfil/+page.svelte b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
index 58831bf..3da2728 100644
--- a/apps/web/src/routes/(dashboard)/perfil/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
@@ -1748,7 +1748,7 @@
 												{:else}
 													<button
 														type="button"
-														class="btn btn-ghost btn-sm gap-2"
+														class="btn btn-sm gap-2"
 														onclick={() => selecionarSolicitacao(solicitacao._id)}
 													>
 														<svg
@@ -1901,7 +1901,7 @@
 												{:else}
 													<button
 														type="button"
-														class="btn btn-ghost btn-sm gap-2"
+														class="btn btn-sm gap-2"
 														onclick={() => (solicitacaoAusenciaAprovar = ausencia._id)}
 													>
 														<svg
@@ -2237,7 +2237,7 @@
 				</h2>
 				<button
 					type="button"
-					class="btn btn-ghost btn-sm btn-circle"
+					class="btn btn-sm btn-circle"
 					onclick={() => (mostrarWizardAusencia = false)}
 					aria-label="Fechar"
 				>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
index a3ff1ad..a346d4b 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
@@ -1,1657 +1,1669 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { toast } from "svelte-sonner";
-  import FuncionarioSelect from "$lib/components/FuncionarioSelect.svelte";
-  import FileUpload from "$lib/components/FileUpload.svelte";
-  import ErrorModal from "$lib/components/ErrorModal.svelte";
-  import CalendarioAfastamentos from "$lib/components/CalendarioAfastamentos.svelte";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { goto } from '$app/navigation';
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { toast } from 'svelte-sonner';
+	import FuncionarioSelect from '$lib/components/FuncionarioSelect.svelte';
+	import FileUpload from '$lib/components/FileUpload.svelte';
+	import ErrorModal from '$lib/components/ErrorModal.svelte';
+	import CalendarioAfastamentos from '$lib/components/CalendarioAfastamentos.svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  // Estado da aba ativa
-  let abaAtiva = $state<"dashboard" | "atestado" | "declaracao" | "maternidade" | "paternidade">("dashboard");
+	// Estado da aba ativa
+	let abaAtiva = $state<'dashboard' | 'atestado' | 'declaracao' | 'maternidade' | 'paternidade'>(
+		'dashboard'
+	);
 
-  // Queries
-  const dadosQuery = useQuery(api.atestadosLicencas.listarTodos, {});
-  const statsQuery = useQuery(api.atestadosLicencas.obterEstatisticas, {});
-  const graficosQuery = useQuery(api.atestadosLicencas.obterDadosGraficos, {
-    periodo: 30,
-  });
-  const eventosQuery = useQuery(api.atestadosLicencas.obterEventosCalendario, {
-    tipoFiltro: "todos",
-  });
+	// Queries
+	const dadosQuery = useQuery(api.atestadosLicencas.listarTodos, {});
+	const statsQuery = useQuery(api.atestadosLicencas.obterEstatisticas, {});
+	const graficosQuery = useQuery(api.atestadosLicencas.obterDadosGraficos, {
+		periodo: 30
+	});
+	const eventosQuery = useQuery(api.atestadosLicencas.obterEventosCalendario, {
+		tipoFiltro: 'todos'
+	});
 
-  // Estados dos formulários
-  // Atestado Médico
-  let atestadoMedico = $state({
-    funcionarioId: "" as string | undefined,
-    dataInicio: "",
-    dataFim: "",
-    cid: "",
-    observacoes: "",
-    documentoId: "" as string | undefined,
-  });
+	// Estados dos formulários
+	// Atestado Médico
+	let atestadoMedico = $state({
+		funcionarioId: '' as string | undefined,
+		dataInicio: '',
+		dataFim: '',
+		cid: '',
+		observacoes: '',
+		documentoId: '' as string | undefined
+	});
 
-  // Declaração
-  let declaracao = $state({
-    funcionarioId: "" as string | undefined,
-    dataInicio: "",
-    dataFim: "",
-    observacoes: "",
-    documentoId: "" as string | undefined,
-  });
+	// Declaração
+	let declaracao = $state({
+		funcionarioId: '' as string | undefined,
+		dataInicio: '',
+		dataFim: '',
+		observacoes: '',
+		documentoId: '' as string | undefined
+	});
 
-  // Licença Maternidade
-  let licencaMaternidade = $state({
-    funcionarioId: "" as string | undefined,
-    dataInicio: "",
-    dataFim: "",
-    observacoes: "",
-    documentoId: "" as string | undefined,
-    ehProrrogacao: false,
-    licencaOriginalId: undefined as string | undefined,
-  });
+	// Licença Maternidade
+	let licencaMaternidade = $state({
+		funcionarioId: '' as string | undefined,
+		dataInicio: '',
+		dataFim: '',
+		observacoes: '',
+		documentoId: '' as string | undefined,
+		ehProrrogacao: false,
+		licencaOriginalId: undefined as string | undefined
+	});
 
-  // Licença Paternidade
-  let licencaPaternidade = $state({
-    funcionarioId: "" as string | undefined,
-    dataInicio: "",
-    dataFim: "",
-    observacoes: "",
-    documentoId: "" as string | undefined,
-  });
+	// Licença Paternidade
+	let licencaPaternidade = $state({
+		funcionarioId: '' as string | undefined,
+		dataInicio: '',
+		dataFim: '',
+		observacoes: '',
+		documentoId: '' as string | undefined
+	});
 
-  // Filtros
-  let filtroTipo = $state<string>("todos");
-  let filtroFuncionario = $state<string>("");
-  let filtroDataInicio = $state<string>("");
-  let filtroDataFim = $state<string>("");
+	// Filtros
+	let filtroTipo = $state<string>('todos');
+	let filtroFuncionario = $state<string>('');
+	let filtroDataInicio = $state<string>('');
+	let filtroDataFim = $state<string>('');
 
-  // Estados de loading
-  let salvandoAtestado = $state(false);
-  let salvandoDeclaracao = $state(false);
-  let salvandoMaternidade = $state(false);
-  let salvandoPaternidade = $state(false);
+	// Estados de loading
+	let salvandoAtestado = $state(false);
+	let salvandoDeclaracao = $state(false);
+	let salvandoMaternidade = $state(false);
+	let salvandoPaternidade = $state(false);
 
-  // Modal de erro
-  let erroModal = $state({
-    aberto: false,
-    titulo: "",
-    mensagem: "",
-    detalhes: "",
-  });
+	// Modal de erro
+	let erroModal = $state({
+		aberto: false,
+		titulo: '',
+		mensagem: '',
+		detalhes: ''
+	});
 
-  // Licenças maternidade para prorrogação (derivar dos dados já carregados)
-  const licencasMaternidade = $derived.by(() => {
-    const dados = dadosQuery?.data;
-    if (!dados) return [];
-    return dados.licencas.filter(
-      (l) => l.tipo === "maternidade" && !l.ehProrrogacao
-    );
-  });
+	// Licenças maternidade para prorrogação (derivar dos dados já carregados)
+	const licencasMaternidade = $derived.by(() => {
+		const dados = dadosQuery?.data;
+		if (!dados) return [];
+		return dados.licencas.filter((l) => l.tipo === 'maternidade' && !l.ehProrrogacao);
+	});
 
-  // Funções auxiliares
-  function formatarData(data: string) {
-    return new Date(data).toLocaleDateString("pt-BR");
-  }
+	// Funções auxiliares
+	function formatarData(data: string) {
+		return new Date(data).toLocaleDateString('pt-BR');
+	}
 
-  function calcularDias(dataInicio: string, dataFim: string): number {
-    const inicio = new Date(dataInicio);
-    const fim = new Date(dataFim);
-    const diffTime = Math.abs(fim.getTime() - inicio.getTime());
-    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
-  }
+	function calcularDias(dataInicio: string, dataFim: string): number {
+		const inicio = new Date(dataInicio);
+		const fim = new Date(dataFim);
+		const diffTime = Math.abs(fim.getTime() - inicio.getTime());
+		return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+	}
 
-  // Upload de documento
-  async function handleDocumentoUpload(
-    file: File
-  ): Promise<string | undefined> {
-    try {
-      const uploadUrl = await client.mutation(api.atestadosLicencas.generateUploadUrl, {});
-      const response = await fetch(uploadUrl, {
-        method: "POST",
-        headers: { "Content-Type": file.type },
-        body: file,
-      });
-      const result = await response.json();
-      return result.storageId;
-    } catch (error) {
-      console.error("Erro no upload:", error);
-      throw error;
-    }
-  }
+	// Upload de documento
+	async function handleDocumentoUpload(file: File): Promise<string | undefined> {
+		try {
+			const uploadUrl = await client.mutation(api.atestadosLicencas.generateUploadUrl, {});
+			const response = await fetch(uploadUrl, {
+				method: 'POST',
+				headers: { 'Content-Type': file.type },
+				body: file
+			});
+			const result = await response.json();
+			return result.storageId;
+		} catch (error) {
+			console.error('Erro no upload:', error);
+			throw error;
+		}
+	}
 
-  // Função para mostrar erro em modal
-  function mostrarErro(titulo: string, mensagem: string, detalhes?: string) {
-    erroModal = {
-      aberto: true,
-      titulo,
-      mensagem,
-      detalhes: detalhes || "",
-    };
-  }
+	// Função para mostrar erro em modal
+	function mostrarErro(titulo: string, mensagem: string, detalhes?: string) {
+		erroModal = {
+			aberto: true,
+			titulo,
+			mensagem,
+			detalhes: detalhes || ''
+		};
+	}
 
-  // Salvar Atestado Médico
-  async function salvarAtestadoMedico() {
-    if (!atestadoMedico.funcionarioId || !atestadoMedico.dataInicio || !atestadoMedico.dataFim || !atestadoMedico.cid) {
-      mostrarErro(
-        "Campos obrigatórios",
-        "Preencha todos os campos obrigatórios antes de salvar.",
-        "Campos obrigatórios: Funcionário, Data Início, Data Fim e CID"
-      );
-      return;
-    }
+	// Salvar Atestado Médico
+	async function salvarAtestadoMedico() {
+		if (
+			!atestadoMedico.funcionarioId ||
+			!atestadoMedico.dataInicio ||
+			!atestadoMedico.dataFim ||
+			!atestadoMedico.cid
+		) {
+			mostrarErro(
+				'Campos obrigatórios',
+				'Preencha todos os campos obrigatórios antes de salvar.',
+				'Campos obrigatórios: Funcionário, Data Início, Data Fim e CID'
+			);
+			return;
+		}
 
-    if (!atestadoMedico.documentoId) {
-      mostrarErro(
-        "Documento obrigatório",
-        "É necessário anexar o documento do atestado médico.",
-        "Por favor, faça o upload do arquivo PDF ou imagem do atestado antes de salvar."
-      );
-      return;
-    }
+		if (!atestadoMedico.documentoId) {
+			mostrarErro(
+				'Documento obrigatório',
+				'É necessário anexar o documento do atestado médico.',
+				'Por favor, faça o upload do arquivo PDF ou imagem do atestado antes de salvar.'
+			);
+			return;
+		}
 
-    try {
-      salvandoAtestado = true;
-      await client.mutation(api.atestadosLicencas.criarAtestadoMedico, {
-        funcionarioId: atestadoMedico.funcionarioId as Id<"funcionarios">,
-        dataInicio: atestadoMedico.dataInicio,
-        dataFim: atestadoMedico.dataFim,
-        cid: atestadoMedico.cid,
-        observacoes: atestadoMedico.observacoes || undefined,
-        documentoId: atestadoMedico.documentoId as Id<"_storage">,
-      });
+		try {
+			salvandoAtestado = true;
+			await client.mutation(api.atestadosLicencas.criarAtestadoMedico, {
+				funcionarioId: atestadoMedico.funcionarioId as Id<'funcionarios'>,
+				dataInicio: atestadoMedico.dataInicio,
+				dataFim: atestadoMedico.dataFim,
+				cid: atestadoMedico.cid,
+				observacoes: atestadoMedico.observacoes || undefined,
+				documentoId: atestadoMedico.documentoId as Id<'_storage'>
+			});
 
-      toast.success("Atestado médico registrado com sucesso!");
-      resetarFormularioAtestado();
-      abaAtiva = "dashboard";
-    } catch (error: any) {
-      const mensagemErro = error?.message || "Erro ao registrar atestado";
-      const detalhesErro = error?.data?.message || error?.toString() || "";
-      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
-    } finally {
-      salvandoAtestado = false;
-    }
-  }
+			toast.success('Atestado médico registrado com sucesso!');
+			resetarFormularioAtestado();
+			abaAtiva = 'dashboard';
+		} catch (error: any) {
+			const mensagemErro = error?.message || 'Erro ao registrar atestado';
+			const detalhesErro = error?.data?.message || error?.toString() || '';
+			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
+		} finally {
+			salvandoAtestado = false;
+		}
+	}
 
-  // Salvar Declaração
-  async function salvarDeclaracao() {
-    if (!declaracao.funcionarioId || !declaracao.dataInicio || !declaracao.dataFim) {
-      mostrarErro(
-        "Campos obrigatórios",
-        "Preencha todos os campos obrigatórios antes de salvar.",
-        "Campos obrigatórios: Funcionário, Data Início e Data Fim"
-      );
-      return;
-    }
+	// Salvar Declaração
+	async function salvarDeclaracao() {
+		if (!declaracao.funcionarioId || !declaracao.dataInicio || !declaracao.dataFim) {
+			mostrarErro(
+				'Campos obrigatórios',
+				'Preencha todos os campos obrigatórios antes de salvar.',
+				'Campos obrigatórios: Funcionário, Data Início e Data Fim'
+			);
+			return;
+		}
 
-    if (!declaracao.documentoId) {
-      mostrarErro(
-        "Documento obrigatório",
-        "É necessário anexar o documento da declaração.",
-        "Por favor, faça o upload do arquivo PDF ou imagem da declaração antes de salvar."
-      );
-      return;
-    }
+		if (!declaracao.documentoId) {
+			mostrarErro(
+				'Documento obrigatório',
+				'É necessário anexar o documento da declaração.',
+				'Por favor, faça o upload do arquivo PDF ou imagem da declaração antes de salvar.'
+			);
+			return;
+		}
 
-    try {
-      salvandoDeclaracao = true;
-      await client.mutation(api.atestadosLicencas.criarDeclaracaoComparecimento, {
-        funcionarioId: declaracao.funcionarioId as Id<"funcionarios">,
-        dataInicio: declaracao.dataInicio,
-        dataFim: declaracao.dataFim,
-        observacoes: declaracao.observacoes || undefined,
-        documentoId: declaracao.documentoId as Id<"_storage">,
-      });
+		try {
+			salvandoDeclaracao = true;
+			await client.mutation(api.atestadosLicencas.criarDeclaracaoComparecimento, {
+				funcionarioId: declaracao.funcionarioId as Id<'funcionarios'>,
+				dataInicio: declaracao.dataInicio,
+				dataFim: declaracao.dataFim,
+				observacoes: declaracao.observacoes || undefined,
+				documentoId: declaracao.documentoId as Id<'_storage'>
+			});
 
-      toast.success("Declaração registrada com sucesso!");
-      resetarFormularioDeclaracao();
-      abaAtiva = "dashboard";
-    } catch (error: any) {
-      const mensagemErro = error?.message || "Erro ao registrar declaração";
-      const detalhesErro = error?.data?.message || error?.toString() || "";
-      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
-    } finally {
-      salvandoDeclaracao = false;
-    }
-  }
+			toast.success('Declaração registrada com sucesso!');
+			resetarFormularioDeclaracao();
+			abaAtiva = 'dashboard';
+		} catch (error: any) {
+			const mensagemErro = error?.message || 'Erro ao registrar declaração';
+			const detalhesErro = error?.data?.message || error?.toString() || '';
+			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
+		} finally {
+			salvandoDeclaracao = false;
+		}
+	}
 
-  // Salvar Licença Maternidade
-  async function salvarLicencaMaternidade() {
-    if (!licencaMaternidade.funcionarioId || !licencaMaternidade.dataInicio || !licencaMaternidade.dataFim) {
-      mostrarErro(
-        "Campos obrigatórios",
-        "Preencha todos os campos obrigatórios antes de salvar.",
-        "Campos obrigatórios: Funcionário, Data Início e Data Fim"
-      );
-      return;
-    }
+	// Salvar Licença Maternidade
+	async function salvarLicencaMaternidade() {
+		if (
+			!licencaMaternidade.funcionarioId ||
+			!licencaMaternidade.dataInicio ||
+			!licencaMaternidade.dataFim
+		) {
+			mostrarErro(
+				'Campos obrigatórios',
+				'Preencha todos os campos obrigatórios antes de salvar.',
+				'Campos obrigatórios: Funcionário, Data Início e Data Fim'
+			);
+			return;
+		}
 
-    if (licencaMaternidade.ehProrrogacao && !licencaMaternidade.licencaOriginalId) {
-      mostrarErro(
-        "Licença original obrigatória",
-        "Para prorrogações, é necessário selecionar a licença original.",
-        "Selecione a licença de maternidade original no campo 'Licença Original'."
-      );
-      return;
-    }
+		if (licencaMaternidade.ehProrrogacao && !licencaMaternidade.licencaOriginalId) {
+			mostrarErro(
+				'Licença original obrigatória',
+				'Para prorrogações, é necessário selecionar a licença original.',
+				"Selecione a licença de maternidade original no campo 'Licença Original'."
+			);
+			return;
+		}
 
-    if (!licencaMaternidade.documentoId) {
-      mostrarErro(
-        "Documento obrigatório",
-        "É necessário anexar o documento da licença de maternidade.",
-        "Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar."
-      );
-      return;
-    }
+		if (!licencaMaternidade.documentoId) {
+			mostrarErro(
+				'Documento obrigatório',
+				'É necessário anexar o documento da licença de maternidade.',
+				'Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar.'
+			);
+			return;
+		}
 
-    try {
-      salvandoMaternidade = true;
-      
-      // Garantir que licencaOriginalId seja undefined quando não é prorrogação
-      const licencaOriginalId = licencaMaternidade.ehProrrogacao && licencaMaternidade.licencaOriginalId
-        ? (licencaMaternidade.licencaOriginalId as Id<"licencas">)
-        : undefined;
-      
-      await client.mutation(api.atestadosLicencas.criarLicencaMaternidade, {
-        funcionarioId: licencaMaternidade.funcionarioId as Id<"funcionarios">,
-        dataInicio: licencaMaternidade.dataInicio,
-        dataFim: licencaMaternidade.dataFim,
-        observacoes: licencaMaternidade.observacoes || undefined,
-        documentoId: licencaMaternidade.documentoId as Id<"_storage">,
-        licencaOriginalId,
-      });
+		try {
+			salvandoMaternidade = true;
 
-      toast.success("Licença maternidade registrada com sucesso!");
-      resetarFormularioMaternidade();
-      abaAtiva = "dashboard";
-    } catch (error: any) {
-      const mensagemErro = error?.message || "Erro ao registrar licença";
-      const detalhesErro = error?.data?.message || error?.toString() || "";
-      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
-    } finally {
-      salvandoMaternidade = false;
-    }
-  }
+			// Garantir que licencaOriginalId seja undefined quando não é prorrogação
+			const licencaOriginalId =
+				licencaMaternidade.ehProrrogacao && licencaMaternidade.licencaOriginalId
+					? (licencaMaternidade.licencaOriginalId as Id<'licencas'>)
+					: undefined;
 
-  // Salvar Licença Paternidade
-  async function salvarLicencaPaternidade() {
-    if (!licencaPaternidade.funcionarioId || !licencaPaternidade.dataInicio || !licencaPaternidade.dataFim) {
-      mostrarErro(
-        "Campos obrigatórios",
-        "Preencha todos os campos obrigatórios antes de salvar.",
-        "Campos obrigatórios: Funcionário, Data Início e Data Fim"
-      );
-      return;
-    }
+			await client.mutation(api.atestadosLicencas.criarLicencaMaternidade, {
+				funcionarioId: licencaMaternidade.funcionarioId as Id<'funcionarios'>,
+				dataInicio: licencaMaternidade.dataInicio,
+				dataFim: licencaMaternidade.dataFim,
+				observacoes: licencaMaternidade.observacoes || undefined,
+				documentoId: licencaMaternidade.documentoId as Id<'_storage'>,
+				licencaOriginalId
+			});
 
-    if (!licencaPaternidade.documentoId) {
-      mostrarErro(
-        "Documento obrigatório",
-        "É necessário anexar o documento da licença de paternidade.",
-        "Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar."
-      );
-      return;
-    }
+			toast.success('Licença maternidade registrada com sucesso!');
+			resetarFormularioMaternidade();
+			abaAtiva = 'dashboard';
+		} catch (error: any) {
+			const mensagemErro = error?.message || 'Erro ao registrar licença';
+			const detalhesErro = error?.data?.message || error?.toString() || '';
+			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
+		} finally {
+			salvandoMaternidade = false;
+		}
+	}
 
-    try {
-      salvandoPaternidade = true;
-      await client.mutation(api.atestadosLicencas.criarLicencaPaternidade, {
-        funcionarioId: licencaPaternidade.funcionarioId as Id<"funcionarios">,
-        dataInicio: licencaPaternidade.dataInicio,
-        dataFim: licencaPaternidade.dataFim,
-        observacoes: licencaPaternidade.observacoes || undefined,
-        documentoId: licencaPaternidade.documentoId as Id<"_storage">,
-      });
+	// Salvar Licença Paternidade
+	async function salvarLicencaPaternidade() {
+		if (
+			!licencaPaternidade.funcionarioId ||
+			!licencaPaternidade.dataInicio ||
+			!licencaPaternidade.dataFim
+		) {
+			mostrarErro(
+				'Campos obrigatórios',
+				'Preencha todos os campos obrigatórios antes de salvar.',
+				'Campos obrigatórios: Funcionário, Data Início e Data Fim'
+			);
+			return;
+		}
 
-      toast.success("Licença paternidade registrada com sucesso!");
-      resetarFormularioPaternidade();
-      abaAtiva = "dashboard";
-    } catch (error: any) {
-      const mensagemErro = error?.message || "Erro ao registrar licença";
-      const detalhesErro = error?.data?.message || error?.toString() || "";
-      mostrarErro("Erro ao registrar", mensagemErro, detalhesErro);
-    } finally {
-      salvandoPaternidade = false;
-    }
-  }
+		if (!licencaPaternidade.documentoId) {
+			mostrarErro(
+				'Documento obrigatório',
+				'É necessário anexar o documento da licença de paternidade.',
+				'Por favor, faça o upload do arquivo PDF ou imagem da licença antes de salvar.'
+			);
+			return;
+		}
 
-  // Resetar formulários
-  function resetarFormularioAtestado() {
-    atestadoMedico = {
-      funcionarioId: undefined,
-      dataInicio: "",
-      dataFim: "",
-      cid: "",
-      observacoes: "",
-      documentoId: undefined,
-    };
-  }
+		try {
+			salvandoPaternidade = true;
+			await client.mutation(api.atestadosLicencas.criarLicencaPaternidade, {
+				funcionarioId: licencaPaternidade.funcionarioId as Id<'funcionarios'>,
+				dataInicio: licencaPaternidade.dataInicio,
+				dataFim: licencaPaternidade.dataFim,
+				observacoes: licencaPaternidade.observacoes || undefined,
+				documentoId: licencaPaternidade.documentoId as Id<'_storage'>
+			});
 
-  function resetarFormularioDeclaracao() {
-    declaracao = {
-      funcionarioId: undefined,
-      dataInicio: "",
-      dataFim: "",
-      observacoes: "",
-      documentoId: undefined,
-    };
-  }
+			toast.success('Licença paternidade registrada com sucesso!');
+			resetarFormularioPaternidade();
+			abaAtiva = 'dashboard';
+		} catch (error: any) {
+			const mensagemErro = error?.message || 'Erro ao registrar licença';
+			const detalhesErro = error?.data?.message || error?.toString() || '';
+			mostrarErro('Erro ao registrar', mensagemErro, detalhesErro);
+		} finally {
+			salvandoPaternidade = false;
+		}
+	}
 
-  function resetarFormularioMaternidade() {
-    licencaMaternidade = {
-      funcionarioId: undefined,
-      dataInicio: "",
-      dataFim: "",
-      observacoes: "",
-      documentoId: undefined,
-      ehProrrogacao: false,
-      licencaOriginalId: undefined,
-    };
-  }
+	// Resetar formulários
+	function resetarFormularioAtestado() {
+		atestadoMedico = {
+			funcionarioId: undefined,
+			dataInicio: '',
+			dataFim: '',
+			cid: '',
+			observacoes: '',
+			documentoId: undefined
+		};
+	}
 
-  function resetarFormularioPaternidade() {
-    licencaPaternidade = {
-      funcionarioId: undefined,
-      dataInicio: "",
-      dataFim: "",
-      observacoes: "",
-      documentoId: undefined,
-    };
-  }
+	function resetarFormularioDeclaracao() {
+		declaracao = {
+			funcionarioId: undefined,
+			dataInicio: '',
+			dataFim: '',
+			observacoes: '',
+			documentoId: undefined
+		};
+	}
 
-  // Limpar licencaOriginalId quando não é prorrogação
-  $effect(() => {
-    if (abaAtiva === "maternidade" && !licencaMaternidade.ehProrrogacao) {
-      licencaMaternidade.licencaOriginalId = undefined;
-    }
-  });
+	function resetarFormularioMaternidade() {
+		licencaMaternidade = {
+			funcionarioId: undefined,
+			dataInicio: '',
+			dataFim: '',
+			observacoes: '',
+			documentoId: undefined,
+			ehProrrogacao: false,
+			licencaOriginalId: undefined
+		};
+	}
 
-  // Calcular data fim automaticamente para licenças
-  $effect(() => {
-    if (abaAtiva === "maternidade" && licencaMaternidade.dataInicio && !licencaMaternidade.ehProrrogacao && !licencaMaternidade.dataFim) {
-      const inicio = new Date(licencaMaternidade.dataInicio);
-      if (!isNaN(inicio.getTime())) {
-        inicio.setDate(inicio.getDate() + 120); // 120 dias
-        licencaMaternidade.dataFim = inicio.toISOString().split("T")[0];
-      }
-    }
-  });
+	function resetarFormularioPaternidade() {
+		licencaPaternidade = {
+			funcionarioId: undefined,
+			dataInicio: '',
+			dataFim: '',
+			observacoes: '',
+			documentoId: undefined
+		};
+	}
 
-  $effect(() => {
-    if (abaAtiva === "paternidade" && licencaPaternidade.dataInicio && !licencaPaternidade.dataFim) {
-      const inicio = new Date(licencaPaternidade.dataInicio);
-      if (!isNaN(inicio.getTime())) {
-        inicio.setDate(inicio.getDate() + 20); // 20 dias
-        licencaPaternidade.dataFim = inicio.toISOString().split("T")[0];
-      }
-    }
-  });
+	// Limpar licencaOriginalId quando não é prorrogação
+	$effect(() => {
+		if (abaAtiva === 'maternidade' && !licencaMaternidade.ehProrrogacao) {
+			licencaMaternidade.licencaOriginalId = undefined;
+		}
+	});
 
-  // Excluir registro
-  async function excluirRegistro(tipo: "atestado" | "licenca", id: string) {
-    if (!confirm(`Tem certeza que deseja excluir este ${tipo}?`)) return;
+	// Calcular data fim automaticamente para licenças
+	$effect(() => {
+		if (
+			abaAtiva === 'maternidade' &&
+			licencaMaternidade.dataInicio &&
+			!licencaMaternidade.ehProrrogacao &&
+			!licencaMaternidade.dataFim
+		) {
+			const inicio = new Date(licencaMaternidade.dataInicio);
+			if (!isNaN(inicio.getTime())) {
+				inicio.setDate(inicio.getDate() + 120); // 120 dias
+				licencaMaternidade.dataFim = inicio.toISOString().split('T')[0];
+			}
+		}
+	});
 
-    try {
-      if (tipo === "atestado") {
-        await client.mutation(api.atestadosLicencas.excluirAtestado, { id: id as Id<"atestados"> });
-      } else {
-        await client.mutation(api.atestadosLicencas.excluirLicenca, { id: id as Id<"licencas"> });
-      }
-      toast.success("Registro excluído com sucesso!");
-    } catch (error: any) {
-      toast.error(error?.message || "Erro ao excluir registro");
-    }
-  }
+	$effect(() => {
+		if (
+			abaAtiva === 'paternidade' &&
+			licencaPaternidade.dataInicio &&
+			!licencaPaternidade.dataFim
+		) {
+			const inicio = new Date(licencaPaternidade.dataInicio);
+			if (!isNaN(inicio.getTime())) {
+				inicio.setDate(inicio.getDate() + 20); // 20 dias
+				licencaPaternidade.dataFim = inicio.toISOString().split('T')[0];
+			}
+		}
+	});
 
-  // Filtrar registros
-  const registrosFiltrados = $derived.by(() => {
-    const dados = dadosQuery?.data;
-    if (!dados) return { atestados: [], licencas: [] };
+	// Excluir registro
+	async function excluirRegistro(tipo: 'atestado' | 'licenca', id: string) {
+		if (!confirm(`Tem certeza que deseja excluir este ${tipo}?`)) return;
 
-    let atestados = dados.atestados;
-    let licencas = dados.licencas;
+		try {
+			if (tipo === 'atestado') {
+				await client.mutation(api.atestadosLicencas.excluirAtestado, { id: id as Id<'atestados'> });
+			} else {
+				await client.mutation(api.atestadosLicencas.excluirLicenca, { id: id as Id<'licencas'> });
+			}
+			toast.success('Registro excluído com sucesso!');
+		} catch (error: any) {
+			toast.error(error?.message || 'Erro ao excluir registro');
+		}
+	}
 
-    // Filtro por tipo
-    if (filtroTipo !== "todos") {
-      if (filtroTipo === "atestado_medico" || filtroTipo === "declaracao_comparecimento") {
-        atestados = atestados.filter((a) => a.tipo === filtroTipo);
-        licencas = [];
-      } else if (filtroTipo === "maternidade" || filtroTipo === "paternidade") {
-        atestados = [];
-        licencas = licencas.filter((l) => l.tipo === filtroTipo);
-      }
-    }
+	// Filtrar registros
+	const registrosFiltrados = $derived.by(() => {
+		const dados = dadosQuery?.data;
+		if (!dados) return { atestados: [], licencas: [] };
 
-    // Filtro por funcionário
-    if (filtroFuncionario) {
-      const termo = filtroFuncionario.toLowerCase();
-      atestados = atestados.filter((a) =>
-        a.funcionario?.nome?.toLowerCase().includes(termo)
-      );
-      licencas = licencas.filter((l) =>
-        l.funcionario?.nome?.toLowerCase().includes(termo)
-      );
-    }
+		let atestados = dados.atestados;
+		let licencas = dados.licencas;
 
-    // Filtro por período
-    if (filtroDataInicio && filtroDataFim) {
-      const inicio = new Date(filtroDataInicio);
-      const fim = new Date(filtroDataFim);
-      atestados = atestados.filter((a) => {
-        const aInicio = new Date(a.dataInicio);
-        const aFim = new Date(a.dataFim);
-        return (
-          (aInicio >= inicio && aInicio <= fim) ||
-          (aFim >= inicio && aFim <= fim) ||
-          (aInicio <= inicio && aFim >= fim)
-        );
-      });
-      licencas = licencas.filter((l) => {
-        const lInicio = new Date(l.dataInicio);
-        const lFim = new Date(l.dataFim);
-        return (
-          (lInicio >= inicio && lInicio <= fim) ||
-          (lFim >= inicio && lFim <= fim) ||
-          (lInicio <= inicio && lFim >= fim)
-        );
-      });
-    }
+		// Filtro por tipo
+		if (filtroTipo !== 'todos') {
+			if (filtroTipo === 'atestado_medico' || filtroTipo === 'declaracao_comparecimento') {
+				atestados = atestados.filter((a) => a.tipo === filtroTipo);
+				licencas = [];
+			} else if (filtroTipo === 'maternidade' || filtroTipo === 'paternidade') {
+				atestados = [];
+				licencas = licencas.filter((l) => l.tipo === filtroTipo);
+			}
+		}
 
-    return { atestados, licencas };
-  });
+		// Filtro por funcionário
+		if (filtroFuncionario) {
+			const termo = filtroFuncionario.toLowerCase();
+			atestados = atestados.filter((a) => a.funcionario?.nome?.toLowerCase().includes(termo));
+			licencas = licencas.filter((l) => l.funcionario?.nome?.toLowerCase().includes(termo));
+		}
 
-  // Limpar filtros
-  function limparFiltros() {
-    filtroTipo = "todos";
-    filtroFuncionario = "";
-    filtroDataInicio = "";
-    filtroDataFim = "";
-  }
+		// Filtro por período
+		if (filtroDataInicio && filtroDataFim) {
+			const inicio = new Date(filtroDataInicio);
+			const fim = new Date(filtroDataFim);
+			atestados = atestados.filter((a) => {
+				const aInicio = new Date(a.dataInicio);
+				const aFim = new Date(a.dataFim);
+				return (
+					(aInicio >= inicio && aInicio <= fim) ||
+					(aFim >= inicio && aFim <= fim) ||
+					(aInicio <= inicio && aFim >= fim)
+				);
+			});
+			licencas = licencas.filter((l) => {
+				const lInicio = new Date(l.dataInicio);
+				const lFim = new Date(l.dataFim);
+				return (
+					(lInicio >= inicio && lInicio <= fim) ||
+					(lFim >= inicio && lFim <= fim) ||
+					(lInicio <= inicio && lFim >= fim)
+				);
+			});
+		}
+
+		return { atestados, licencas };
+	});
+
+	// Limpar filtros
+	function limparFiltros() {
+		filtroTipo = 'todos';
+		filtroFuncionario = '';
+		filtroDataInicio = '';
+		filtroDataFim = '';
+	}
 </script>
 
 <svelte:head>
-  <title>Atestados & Licenças - Recursos Humanos</title>
+	<title>Atestados & Licenças - Recursos Humanos</title>
 </svelte:head>
 
-<main class="container mx-auto px-4 py-6 max-w-7xl">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li>
-        <a href="/recursos-humanos" class="text-primary hover:underline"
-          >Recursos Humanos</a
-        >
-      </li>
-      <li>Atestados & Licenças</li>
-    </ul>
-  </div>
+<main class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a>
+			</li>
+			<li>Atestados & Licenças</li>
+		</ul>
+	</div>
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center justify-between flex-wrap gap-4">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-purple-500/20 rounded-xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 text-purple-600"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-            />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Atestados & Licenças</h1>
-          <p class="text-base-content/70">
-            Registro de atestados médicos e licenças
-          </p>
-        </div>
-      </div>
-      <button
-        class="btn btn-ghost gap-2"
-        onclick={() => goto("/recursos-humanos")}
-      >
-        <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>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="flex flex-wrap items-center justify-between gap-4">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-purple-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-purple-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Atestados & Licenças</h1>
+					<p class="text-base-content/70">Registro de atestados médicos e licenças</p>
+				</div>
+			</div>
+			<button class="btn gap-2" onclick={() => goto('/recursos-humanos')}>
+				<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>
 
-  <!-- Tabs -->
-  <div class="tabs tabs-boxed mb-6 bg-base-100 shadow-lg p-2">
-    <button
-      class="tab {abaAtiva === 'dashboard' ? 'tab-active' : ''}"
-      onclick={() => (abaAtiva = "dashboard")}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5 mr-2"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
-        />
-      </svg>
-      Dashboard
-    </button>
-    <button
-      class="tab {abaAtiva === 'atestado' ? 'tab-active' : ''}"
-      onclick={() => (abaAtiva = "atestado")}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-5 w-5 mr-2"
-        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>
-      Atestado Médico
-    </button>
-    <button
-      class="tab {abaAtiva === 'declaracao' ? 'tab-active' : ''}"
-      onclick={() => (abaAtiva = "declaracao")}
-    >
-      Declaração
-    </button>
-    <button
-      class="tab {abaAtiva === 'maternidade' ? 'tab-active' : ''}"
-      onclick={() => (abaAtiva = "maternidade")}
-    >
-      Licença Maternidade
-    </button>
-    <button
-      class="tab {abaAtiva === 'paternidade' ? 'tab-active' : ''}"
-      onclick={() => (abaAtiva = "paternidade")}
-    >
-      Licença Paternidade
-    </button>
-  </div>
+	<!-- Tabs -->
+	<div class="tabs tabs-boxed bg-base-100 mb-6 p-2 shadow-lg">
+		<button
+			class="tab {abaAtiva === 'dashboard' ? 'tab-active' : ''}"
+			onclick={() => (abaAtiva = 'dashboard')}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="mr-2 h-5 w-5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+				/>
+			</svg>
+			Dashboard
+		</button>
+		<button
+			class="tab {abaAtiva === 'atestado' ? 'tab-active' : ''}"
+			onclick={() => (abaAtiva = 'atestado')}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="mr-2 h-5 w-5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+				/>
+			</svg>
+			Atestado Médico
+		</button>
+		<button
+			class="tab {abaAtiva === 'declaracao' ? 'tab-active' : ''}"
+			onclick={() => (abaAtiva = 'declaracao')}
+		>
+			Declaração
+		</button>
+		<button
+			class="tab {abaAtiva === 'maternidade' ? 'tab-active' : ''}"
+			onclick={() => (abaAtiva = 'maternidade')}
+		>
+			Licença Maternidade
+		</button>
+		<button
+			class="tab {abaAtiva === 'paternidade' ? 'tab-active' : ''}"
+			onclick={() => (abaAtiva = 'paternidade')}
+		>
+			Licença Paternidade
+		</button>
+	</div>
 
-  <!-- Conteúdo das Abas -->
-  {#if abaAtiva === "dashboard"}
-    <!-- Dashboard -->
-    <!-- Estatísticas -->
-    {#if statsQuery?.data}
-      <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-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="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">Atestados Ativos</div>
-          <div class="stat-value text-error">
-            {statsQuery.data.totalAtestadosAtivos}
-          </div>
-        </div>
+	<!-- Conteúdo das Abas -->
+	{#if abaAtiva === 'dashboard'}
+		<!-- Dashboard -->
+		<!-- Estatísticas -->
+		{#if statsQuery?.data}
+			<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+					<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="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">Atestados Ativos</div>
+					<div class="stat-value text-error">
+						{statsQuery.data.totalAtestadosAtivos}
+					</div>
+				</div>
 
-        <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-          <div class="stat-figure text-secondary">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-8 w-8"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="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>
-          <div class="stat-title">Licenças Ativas</div>
-          <div class="stat-value text-secondary">
-            {statsQuery.data.totalLicencasAtivas}
-          </div>
-        </div>
+				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+					<div class="stat-figure text-secondary">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="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>
+					<div class="stat-title">Licenças Ativas</div>
+					<div class="stat-value text-secondary">
+						{statsQuery.data.totalLicencasAtivas}
+					</div>
+				</div>
 
-        <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-          <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-              />
-            </svg>
-          </div>
-          <div class="stat-title">Afastados Hoje</div>
-          <div class="stat-value text-warning">
-            {statsQuery.data.funcionariosAfastadosHoje}
-          </div>
-        </div>
+				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+					<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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+							/>
+						</svg>
+					</div>
+					<div class="stat-title">Afastados Hoje</div>
+					<div class="stat-value text-warning">
+						{statsQuery.data.funcionariosAfastadosHoje}
+					</div>
+				</div>
 
-        <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
-          <div class="stat-figure text-info">
-            <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="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>
-          <div class="stat-title">Dias no Mês</div>
-          <div class="stat-value text-info">
-            {statsQuery.data.totalDiasAfastamentoMes}
-          </div>
-        </div>
-      </div>
-    {/if}
+				<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+					<div class="stat-figure text-info">
+						<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="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>
+					<div class="stat-title">Dias no Mês</div>
+					<div class="stat-value text-info">
+						{statsQuery.data.totalDiasAfastamentoMes}
+					</div>
+				</div>
+			</div>
+		{/if}
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
-      <h2 class="card-title mb-4">Filtros</h2>
-      <div class="grid grid-cols-1 md:grid-cols-5 gap-4 items-end">
-        <div class="form-control">
-          <label class="label cursor-pointer flex flex-col gap-2" for="filtro-tipo">
-            <span class="label-text">Tipo</span>
-            <select id="filtro-tipo" class="select select-bordered" bind:value={filtroTipo}>
-              <option value="todos">Todos</option>
-              <option value="atestado_medico">Atestado Médico</option>
-              <option value="declaracao_comparecimento">Declaração</option>
-              <option value="maternidade">Licença Maternidade</option>
-              <option value="paternidade">Licença Paternidade</option>
-            </select>
-          </label>
-        </div>
+		<!-- Filtros -->
+		<div class="card bg-base-100 mb-6 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Filtros</h2>
+				<div class="grid grid-cols-1 items-end gap-4 md:grid-cols-5">
+					<div class="form-control">
+						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-tipo">
+							<span class="label-text">Tipo</span>
+							<select id="filtro-tipo" class="select select-bordered" bind:value={filtroTipo}>
+								<option value="todos">Todos</option>
+								<option value="atestado_medico">Atestado Médico</option>
+								<option value="declaracao_comparecimento">Declaração</option>
+								<option value="maternidade">Licença Maternidade</option>
+								<option value="paternidade">Licença Paternidade</option>
+							</select>
+						</label>
+					</div>
 
-        <div class="form-control">
-          <label class="label cursor-pointer flex flex-col gap-2" for="filtro-funcionario">
-            <span class="label-text">Funcionário</span>
-            <input id="filtro-funcionario" class="input input-bordered" type="text" bind:value={filtroFuncionario} placeholder="Nome do colaborador" />
-          </label>
-        </div>
+					<div class="form-control">
+						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-funcionario">
+							<span class="label-text">Funcionário</span>
+							<input
+								id="filtro-funcionario"
+								class="input input-bordered"
+								type="text"
+								bind:value={filtroFuncionario}
+								placeholder="Nome do colaborador"
+							/>
+						</label>
+					</div>
 
-        <div class="form-control">
-          <label class="label cursor-pointer flex flex-col gap-2" for="filtro-data-inicio">
-            <span class="label-text">Data Início</span>
-            <input id="filtro-data-inicio" class="input input-bordered" type="date" bind:value={filtroDataInicio} />
-          </label>
-        </div>
+					<div class="form-control">
+						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-data-inicio">
+							<span class="label-text">Data Início</span>
+							<input
+								id="filtro-data-inicio"
+								class="input input-bordered"
+								type="date"
+								bind:value={filtroDataInicio}
+							/>
+						</label>
+					</div>
 
-        <div class="form-control">
-          <label class="label cursor-pointer flex flex-col gap-2" for="filtro-data-fim">
-            <span class="label-text">Data Fim</span>
-            <input id="filtro-data-fim" class="input input-bordered" type="date" bind:value={filtroDataFim} />
-          </label>
-        </div>
+					<div class="form-control">
+						<label class="label flex cursor-pointer flex-col gap-2" for="filtro-data-fim">
+							<span class="label-text">Data Fim</span>
+							<input
+								id="filtro-data-fim"
+								class="input input-bordered"
+								type="date"
+								bind:value={filtroDataFim}
+							/>
+						</label>
+					</div>
 
-        <div class="flex gap-2 justify-end">
-          <button class="btn btn-outline" onclick={limparFiltros}>Limpar</button>
-        </div>
-      </div>
-    </div>
-  </div>
+					<div class="flex justify-end gap-2">
+						<button class="btn btn-outline" onclick={limparFiltros}>Limpar</button>
+					</div>
+				</div>
+			</div>
+		</div>
 
-    <!-- Calendário Interativo -->
-    {#if eventosQuery?.data}
-      <CalendarioAfastamentos eventos={eventosQuery.data} tipoFiltro={filtroTipo} />
-    {/if}
+		<!-- Calendário Interativo -->
+		{#if eventosQuery?.data}
+			<CalendarioAfastamentos eventos={eventosQuery.data} tipoFiltro={filtroTipo} />
+		{/if}
 
-    <!-- Gráficos -->
-    {#if graficosQuery?.data}
-      {@const dados = graficosQuery.data.totalDiasPorTipo}
-      {@const maxDias = Math.max(...dados.map((d) => d.dias), 1)}
-      {@const chartWidth = 800}
-      {@const chartHeight = 350}
-      {@const padding = { top: 20, right: 40, bottom: 80, left: 70 }}
-      {@const barWidth = (chartWidth - padding.left - padding.right) / dados.length - 10}
-      {@const innerHeight = chartHeight - padding.top - padding.bottom}
-      {@const tendencias = graficosQuery.data.tendenciasMensais}
-      {@const tipos = ["atestado_medico", "declaracao_comparecimento", "maternidade", "paternidade", "ferias"]}
-      {@const cores = ["#ef4444", "#f97316", "#ec4899", "#3b82f6", "#10b981"]}
-      {@const nomes = ["Atestado Médico", "Declaração", "Maternidade", "Paternidade", "Férias"]}
-      {@const maxValor = Math.max(
-        ...tendencias.flatMap((t) =>
-          tipos.map((tipo) => t[tipo as keyof typeof t] as number)
-        ),
-        1
-      )}
-      {@const chartWidth2 = 900}
-      {@const chartHeight2 = 400}
-      {@const padding2 = { top: 20, right: 40, bottom: 80, left: 70 }}
-      {@const innerWidth = chartWidth2 - padding2.left - padding2.right}
-      {@const innerHeight2 = chartHeight2 - padding2.top - padding2.bottom}
-      <!-- Gráfico 1: Total de Dias por Tipo (Gráfico de Barras) -->
-      <div class="card bg-base-100 shadow-xl mb-6">
-        <div class="card-body">
-          <h2 class="card-title mb-4">Total de Dias por Tipo</h2>
-          <div class="w-full overflow-x-auto bg-base-200/30 rounded-xl p-4">
+		<!-- Gráficos -->
+		{#if graficosQuery?.data}
+			{@const dados = graficosQuery.data.totalDiasPorTipo}
+			{@const maxDias = Math.max(...dados.map((d) => d.dias), 1)}
+			{@const chartWidth = 800}
+			{@const chartHeight = 350}
+			{@const padding = { top: 20, right: 40, bottom: 80, left: 70 }}
+			{@const barWidth = (chartWidth - padding.left - padding.right) / dados.length - 10}
+			{@const innerHeight = chartHeight - padding.top - padding.bottom}
+			{@const tendencias = graficosQuery.data.tendenciasMensais}
+			{@const tipos = [
+				'atestado_medico',
+				'declaracao_comparecimento',
+				'maternidade',
+				'paternidade',
+				'ferias'
+			]}
+			{@const cores = ['#ef4444', '#f97316', '#ec4899', '#3b82f6', '#10b981']}
+			{@const nomes = ['Atestado Médico', 'Declaração', 'Maternidade', 'Paternidade', 'Férias']}
+			{@const maxValor = Math.max(
+				...tendencias.flatMap((t) => tipos.map((tipo) => t[tipo as keyof typeof t] as number)),
+				1
+			)}
+			{@const chartWidth2 = 900}
+			{@const chartHeight2 = 400}
+			{@const padding2 = { top: 20, right: 40, bottom: 80, left: 70 }}
+			{@const innerWidth = chartWidth2 - padding2.left - padding2.right}
+			{@const innerHeight2 = chartHeight2 - padding2.top - padding2.bottom}
+			<!-- Gráfico 1: Total de Dias por Tipo (Gráfico de Barras) -->
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4">Total de Dias por Tipo</h2>
+					<div class="bg-base-200/30 w-full overflow-x-auto rounded-xl p-4">
+						<svg
+							width={chartWidth}
+							height={chartHeight}
+							class="w-full"
+							viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+						>
+							<!-- Grid lines -->
+							{#each [0, 1, 2, 3, 4, 5] as t}
+								{@const val = Math.round((maxDias / 5) * t)}
+								{@const y = chartHeight - padding.bottom - (val / maxDias) * innerHeight}
+								<line
+									x1={padding.left}
+									y1={y}
+									x2={chartWidth - padding.right}
+									y2={y}
+									stroke="currentColor"
+									stroke-opacity="0.1"
+									stroke-dasharray="4,4"
+								/>
+								<text x={padding.left - 8} y={y + 4} text-anchor="end" class="text-xs opacity-70">
+									{val}
+								</text>
+							{/each}
 
-            <svg width={chartWidth} height={chartHeight} class="w-full" viewBox={`0 0 ${chartWidth} ${chartHeight}`}>
-              <!-- Grid lines -->
-              {#each [0, 1, 2, 3, 4, 5] as t}
-                {@const val = Math.round((maxDias / 5) * t)}
-                {@const y = chartHeight - padding.bottom - (val / maxDias) * innerHeight}
-                <line
-                  x1={padding.left}
-                  y1={y}
-                  x2={chartWidth - padding.right}
-                  y2={y}
-                  stroke="currentColor"
-                  stroke-opacity="0.1"
-                  stroke-dasharray="4,4"
-                />
-                <text
-                  x={padding.left - 8}
-                  y={y + 4}
-                  text-anchor="end"
-                  class="text-xs opacity-70"
-                >
-                  {val}
-                </text>
-              {/each}
+							<!-- Eixos -->
+							<line
+								x1={padding.left}
+								y1={chartHeight - padding.bottom}
+								x2={chartWidth - padding.right}
+								y2={chartHeight - padding.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
+							<line
+								x1={padding.left}
+								y1={padding.top}
+								x2={padding.left}
+								y2={chartHeight - padding.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
 
-              <!-- Eixos -->
-              <line
-                x1={padding.left}
-                y1={chartHeight - padding.bottom}
-                x2={chartWidth - padding.right}
-                y2={chartHeight - padding.bottom}
-                stroke="currentColor"
-                stroke-opacity="0.3"
-                stroke-width="2"
-              />
-              <line
-                x1={padding.left}
-                y1={padding.top}
-                x2={padding.left}
-                y2={chartHeight - padding.bottom}
-                stroke="currentColor"
-                stroke-opacity="0.3"
-                stroke-width="2"
-              />
+							<!-- Barras -->
+							{#each dados as item, i}
+								{@const x = padding.left + i * (barWidth + 10) + 5}
+								{@const height = (item.dias / maxDias) * innerHeight}
+								{@const y = chartHeight - padding.bottom - height}
+								{@const colors = ['#ef4444', '#f97316', '#ec4899', '#3b82f6', '#10b981']}
 
-              <!-- Barras -->
-              {#each dados as item, i}
-                {@const x = padding.left + i * (barWidth + 10) + 5}
-                {@const height = (item.dias / maxDias) * innerHeight}
-                {@const y = chartHeight - padding.bottom - height}
-                {@const colors = ["#ef4444", "#f97316", "#ec4899", "#3b82f6", "#10b981"]}
+								<!-- Gradiente da barra -->
+								<defs>
+									<linearGradient id="gradient-{i}" x1="0%" y1="0%" x2="0%" y2="100%">
+										<stop
+											offset="0%"
+											style="stop-color:{colors[i % colors.length]};stop-opacity:0.9"
+										/>
+										<stop
+											offset="100%"
+											style="stop-color:{colors[i % colors.length]};stop-opacity:0.5"
+										/>
+									</linearGradient>
+								</defs>
 
-                <!-- Gradiente da barra -->
-                <defs>
-                  <linearGradient id="gradient-{i}" x1="0%" y1="0%" x2="0%" y2="100%">
-                    <stop offset="0%" style="stop-color:{colors[i % colors.length]};stop-opacity:0.9" />
-                    <stop offset="100%" style="stop-color:{colors[i % colors.length]};stop-opacity:0.5" />
-                  </linearGradient>
-                </defs>
+								<!-- Barra -->
+								<rect
+									{x}
+									{y}
+									width={barWidth}
+									{height}
+									fill="url(#gradient-{i})"
+									rx="4"
+									class="cursor-pointer transition-opacity hover:opacity-80"
+								/>
 
-                <!-- Barra -->
-                <rect
-                  x={x}
-                  y={y}
-                  width={barWidth}
-                  height={height}
-                  fill="url(#gradient-{i})"
-                  rx="4"
-                  class="hover:opacity-80 transition-opacity cursor-pointer"
-                />
+								<!-- Valor no topo da barra -->
+								{#if item.dias > 0}
+									<text
+										x={x + barWidth / 2}
+										y={y - 8}
+										text-anchor="middle"
+										class="fill-base-content text-xs font-semibold"
+									>
+										{item.dias}
+									</text>
+								{/if}
 
-                <!-- Valor no topo da barra -->
-                {#if item.dias > 0}
-                  <text
-                    x={x + barWidth / 2}
-                    y={y - 8}
-                    text-anchor="middle"
-                    class="text-xs font-semibold fill-base-content"
-                  >
-                    {item.dias}
-                  </text>
-                {/if}
+								<!-- Label do eixo X -->
+								<foreignObject
+									x={x - 30}
+									y={chartHeight - padding.bottom + 15}
+									width="80"
+									height="60"
+								>
+									<div class="flex items-center justify-center text-center">
+										<span
+											class="text-base-content/80 text-xs leading-tight font-medium"
+											style="word-wrap: break-word; hyphens: auto;"
+										>
+											{item.tipo}
+										</span>
+									</div>
+								</foreignObject>
+							{/each}
+						</svg>
+					</div>
+				</div>
+			</div>
 
-                <!-- Label do eixo X -->
-                <foreignObject
-                  x={x - 30}
-                  y={chartHeight - padding.bottom + 15}
-                  width="80"
-                  height="60"
-                >
-                  <div class="flex items-center justify-center text-center">
-                    <span
-                      class="text-xs font-medium text-base-content/80 leading-tight"
-                      style="word-wrap: break-word; hyphens: auto;"
-                    >
-                      {item.tipo}
-                    </span>
-                  </div>
-                </foreignObject>
-              {/each}
-            </svg>
-          </div>
-        </div>
-      </div>
+			<!-- Gráfico 2: Tendências Mensais (Gráfico de Linha em Camadas) -->
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4">Tendências Mensais (Últimos 6 Meses)</h2>
+					<div class="bg-base-200/30 w-full overflow-x-auto rounded-xl p-4">
+						<svg
+							width={chartWidth2}
+							height={chartHeight2}
+							class="w-full"
+							viewBox={`0 0 ${chartWidth2} ${chartHeight2}`}
+						>
+							<!-- Grid lines -->
+							{#each [0, 1, 2, 3, 4, 5] as t}
+								{@const val = Math.round((maxValor / 5) * t)}
+								{@const y = chartHeight2 - padding2.bottom - (val / maxValor) * innerHeight2}
+								<line
+									x1={padding2.left}
+									y1={y}
+									x2={chartWidth2 - padding2.right}
+									y2={y}
+									stroke="currentColor"
+									stroke-opacity="0.1"
+									stroke-dasharray="4,4"
+								/>
+								<text x={padding2.left - 8} y={y + 4} text-anchor="end" class="text-xs opacity-70">
+									{val}
+								</text>
+							{/each}
 
-      <!-- Gráfico 2: Tendências Mensais (Gráfico de Linha em Camadas) -->
-      <div class="card bg-base-100 shadow-xl mb-6">
-        <div class="card-body">
-          <h2 class="card-title mb-4">Tendências Mensais (Últimos 6 Meses)</h2>
-          <div class="w-full overflow-x-auto bg-base-200/30 rounded-xl p-4">
-            <svg width={chartWidth2} height={chartHeight2} class="w-full" viewBox={`0 0 ${chartWidth2} ${chartHeight2}`}>
-              <!-- Grid lines -->
-              {#each [0, 1, 2, 3, 4, 5] as t}
-                {@const val = Math.round((maxValor / 5) * t)}
-                {@const y = chartHeight2 - padding2.bottom - (val / maxValor) * innerHeight2}
-                <line
-                  x1={padding2.left}
-                  y1={y}
-                  x2={chartWidth2 - padding2.right}
-                  y2={y}
-                  stroke="currentColor"
-                  stroke-opacity="0.1"
-                  stroke-dasharray="4,4"
-                />
-                <text
-                  x={padding2.left - 8}
-                  y={y + 4}
-                  text-anchor="end"
-                  class="text-xs opacity-70"
-                >
-                  {val}
-                </text>
-              {/each}
+							<!-- Eixos -->
+							<line
+								x1={padding2.left}
+								y1={chartHeight2 - padding2.bottom}
+								x2={chartWidth2 - padding2.right}
+								y2={chartHeight2 - padding2.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
+							<line
+								x1={padding2.left}
+								y1={padding2.top}
+								x2={padding2.left}
+								y2={chartHeight2 - padding2.bottom}
+								stroke="currentColor"
+								stroke-opacity="0.3"
+								stroke-width="2"
+							/>
 
-              <!-- Eixos -->
-              <line
-                x1={padding2.left}
-                y1={chartHeight2 - padding2.bottom}
-                x2={chartWidth2 - padding2.right}
-                y2={chartHeight2 - padding2.bottom}
-                stroke="currentColor"
-                stroke-opacity="0.3"
-                stroke-width="2"
-              />
-              <line
-                x1={padding2.left}
-                y1={padding2.top}
-                x2={padding2.left}
-                y2={chartHeight2 - padding2.bottom}
-                stroke="currentColor"
-                stroke-opacity="0.3"
-                stroke-width="2"
-              />
+							<!-- Linhas para cada tipo (em camadas) -->
+							{#each tipos as tipo, tipoIdx}
+								{@const cor = cores[tipoIdx]}
 
-              <!-- Linhas para cada tipo (em camadas) -->
-              {#each tipos as tipo, tipoIdx}
-                {@const cor = cores[tipoIdx]}
-                
-                <!-- Área preenchida (camada) -->
-                <defs>
-                  <linearGradient id="gradient-{tipo}" x1="0%" y1="0%" x2="0%" y2="100%">
-                    <stop offset="0%" style="stop-color:{cor};stop-opacity:0.4" />
-                    <stop offset="100%" style="stop-color:{cor};stop-opacity:0.05" />
-                  </linearGradient>
-                </defs>
+								<!-- Área preenchida (camada) -->
+								<defs>
+									<linearGradient id="gradient-{tipo}" x1="0%" y1="0%" x2="0%" y2="100%">
+										<stop offset="0%" style="stop-color:{cor};stop-opacity:0.4" />
+										<stop offset="100%" style="stop-color:{cor};stop-opacity:0.05" />
+									</linearGradient>
+								</defs>
 
-                {@const pontos = tendencias.map((t, i) => {
-                  const x = padding2.left + (i / (tendencias.length - 1 || 1)) * innerWidth;
-                  const valor = t[tipo as keyof typeof t] as number;
-                  const y = chartHeight2 - padding2.bottom - (valor / maxValor) * innerHeight2;
-                  return { x, y, valor };
-                })}
+								{@const pontos = tendencias.map((t, i) => {
+									const x = padding2.left + (i / (tendencias.length - 1 || 1)) * innerWidth;
+									const valor = t[tipo as keyof typeof t] as number;
+									const y = chartHeight2 - padding2.bottom - (valor / maxValor) * innerHeight2;
+									return { x, y, valor };
+								})}
 
-                <!-- Área -->
-                {#if pontos.length > 0}
-                  {@const pathArea = `M ${pontos[0].x} ${chartHeight2 - padding2.bottom} ` + pontos.map(p => `L ${p.x} ${p.y}`).join(' ') + ` L ${pontos[pontos.length - 1].x} ${chartHeight2 - padding2.bottom} Z`}
-                  <path
-                    d={pathArea}
-                    fill="url(#gradient-{tipo})"
-                  />
-                {/if}
+								<!-- Área -->
+								{#if pontos.length > 0}
+									{@const pathArea =
+										`M ${pontos[0].x} ${chartHeight2 - padding2.bottom} ` +
+										pontos.map((p) => `L ${p.x} ${p.y}`).join(' ') +
+										` L ${pontos[pontos.length - 1].x} ${chartHeight2 - padding2.bottom} Z`}
+									<path d={pathArea} fill="url(#gradient-{tipo})" />
+								{/if}
 
-                <!-- Linha -->
-                {#if pontos.length > 1}
-                  <polyline
-                    points={pontos.map((p) => `${p.x},${p.y}`).join(' ')}
-                    fill="none"
-                    stroke={cor}
-                    stroke-width="3"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                {/if}
+								<!-- Linha -->
+								{#if pontos.length > 1}
+									<polyline
+										points={pontos.map((p) => `${p.x},${p.y}`).join(' ')}
+										fill="none"
+										stroke={cor}
+										stroke-width="3"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								{/if}
 
-                <!-- Pontos -->
-                {#each pontos as ponto, pontoIdx}
-                  <circle
-                    cx={ponto.x}
-                    cy={ponto.y}
-                    r="5"
-                    fill={cor}
-                    stroke="white"
-                    stroke-width="2"
-                    class="hover:r-7 transition-all cursor-pointer"
-                  />
-                  <!-- Tooltip no hover -->
-                  <title>{nomes[tipoIdx]}: {ponto.valor} dias em {tendencias[pontoIdx]?.mes || ""}</title>
-                {/each}
-              {/each}
+								<!-- Pontos -->
+								{#each pontos as ponto, pontoIdx}
+									<circle
+										cx={ponto.x}
+										cy={ponto.y}
+										r="5"
+										fill={cor}
+										stroke="white"
+										stroke-width="2"
+										class="hover:r-7 cursor-pointer transition-all"
+									/>
+									<!-- Tooltip no hover -->
+									<title
+										>{nomes[tipoIdx]}: {ponto.valor} dias em {tendencias[pontoIdx]?.mes ||
+											''}</title
+									>
+								{/each}
+							{/each}
 
-              <!-- Labels do eixo X -->
-              {#each tendencias as t, i}
-                {@const x = padding2.left + (i / (tendencias.length - 1 || 1)) * innerWidth}
-                <foreignObject
-                  x={x - 40}
-                  y={chartHeight2 - padding2.bottom + 15}
-                  width="80"
-                  height="60"
-                >
-                  <div class="flex items-center justify-center text-center">
-                    <span class="text-xs font-medium text-base-content/80">
-                      {t.mes}
-                    </span>
-                  </div>
-                </foreignObject>
-              {/each}
-            </svg>
+							<!-- Labels do eixo X -->
+							{#each tendencias as t, i}
+								{@const x = padding2.left + (i / (tendencias.length - 1 || 1)) * innerWidth}
+								<foreignObject
+									x={x - 40}
+									y={chartHeight2 - padding2.bottom + 15}
+									width="80"
+									height="60"
+								>
+									<div class="flex items-center justify-center text-center">
+										<span class="text-base-content/80 text-xs font-medium">
+											{t.mes}
+										</span>
+									</div>
+								</foreignObject>
+							{/each}
+						</svg>
 
-            <!-- Legenda -->
-            <div class="flex flex-wrap justify-center gap-4 mt-4 pt-4 border-t border-base-300">
-              {#each tipos as tipo, idx}
-                <div class="flex items-center gap-2">
-                  <div
-                    class="w-4 h-4 rounded"
-                    style="background-color: {cores[idx]}"
-                  ></div>
-                  <span class="text-sm text-base-content/70">{nomes[idx]}</span>
-                </div>
-              {/each}
-            </div>
-          </div>
-        </div>
-      </div>
+						<!-- Legenda -->
+						<div class="border-base-300 mt-4 flex flex-wrap justify-center gap-4 border-t pt-4">
+							{#each tipos as tipo, idx}
+								<div class="flex items-center gap-2">
+									<div class="h-4 w-4 rounded" style="background-color: {cores[idx]}"></div>
+									<span class="text-base-content/70 text-sm">{nomes[idx]}</span>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			</div>
 
-      <!-- Lista de Funcionários Afastados -->
-      <div class="card bg-base-100 shadow-xl mb-6">
-        <div class="card-body">
-          <h2 class="card-title mb-4">Funcionários Atualmente Afastados</h2>
-          {#if graficosQuery.data.funcionariosAfastados.length > 0}
-            <div class="overflow-x-auto">
-              <table class="table table-zebra">
-                <thead>
-                  <tr>
-                    <th>Funcionário</th>
-                    <th>Tipo</th>
-                    <th>Data Início</th>
-                    <th>Data Fim</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {#each graficosQuery.data.funcionariosAfastados as item}
-                    <tr>
-                      <td>{item.funcionarioNome}</td>
-                      <td>
-                        <span
-                          class="badge {
-                            item.tipo === 'atestado_medico'
-                              ? 'badge-error'
-                              : item.tipo === 'declaracao_comparecimento'
-                              ? 'badge-warning'
-                              : item.tipo === 'maternidade'
-                              ? 'badge-secondary'
-                              : item.tipo === 'paternidade'
-                              ? 'badge-info'
-                              : 'badge-success'
-                          }"
-                        >
-                          {item.tipo === "atestado_medico"
-                            ? "Atestado Médico"
-                            : item.tipo === "declaracao_comparecimento"
-                            ? "Declaração"
-                            : item.tipo === "maternidade"
-                            ? "Licença Maternidade"
-                            : item.tipo === "paternidade"
-                            ? "Licença Paternidade"
-                            : item.tipo}
-                        </span>
-                      </td>
-                      <td>{formatarData(item.dataInicio)}</td>
-                      <td>{formatarData(item.dataFim)}</td>
-                    </tr>
-                  {/each}
-                </tbody>
-              </table>
-            </div>
-          {:else}
-            <div class="text-center py-10 text-base-content/60">
-              Nenhum funcionário afastado no momento
-            </div>
-          {/if}
-        </div>
-      </div>
-    {/if}
+			<!-- Lista de Funcionários Afastados -->
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4">Funcionários Atualmente Afastados</h2>
+					{#if graficosQuery.data.funcionariosAfastados.length > 0}
+						<div class="overflow-x-auto">
+							<table class="table-zebra table">
+								<thead>
+									<tr>
+										<th>Funcionário</th>
+										<th>Tipo</th>
+										<th>Data Início</th>
+										<th>Data Fim</th>
+									</tr>
+								</thead>
+								<tbody>
+									{#each graficosQuery.data.funcionariosAfastados as item}
+										<tr>
+											<td>{item.funcionarioNome}</td>
+											<td>
+												<span
+													class="badge {item.tipo === 'atestado_medico'
+														? 'badge-error'
+														: item.tipo === 'declaracao_comparecimento'
+															? 'badge-warning'
+															: item.tipo === 'maternidade'
+																? 'badge-secondary'
+																: item.tipo === 'paternidade'
+																	? 'badge-info'
+																	: 'badge-success'}"
+												>
+													{item.tipo === 'atestado_medico'
+														? 'Atestado Médico'
+														: item.tipo === 'declaracao_comparecimento'
+															? 'Declaração'
+															: item.tipo === 'maternidade'
+																? 'Licença Maternidade'
+																: item.tipo === 'paternidade'
+																	? 'Licença Paternidade'
+																	: item.tipo}
+												</span>
+											</td>
+											<td>{formatarData(item.dataInicio)}</td>
+											<td>{formatarData(item.dataFim)}</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					{:else}
+						<div class="text-base-content/60 py-10 text-center">
+							Nenhum funcionário afastado no momento
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
 
-    <!-- Tabela de Registros -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Registros</h2>
-        <div class="overflow-x-auto">
-          <table class="table table-zebra">
-            <thead>
-              <tr>
-                <th>Funcionário</th>
-                <th>Tipo</th>
-                <th>Data Início</th>
-                <th>Data Fim</th>
-                <th>Dias</th>
-                <th>Status</th>
-                <th>Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each registrosFiltrados.atestados as atestado}
-                <tr>
-                  <td>{atestado.funcionario?.nome || "-"}</td>
-                  <td>
-                    <span
-                      class="badge {atestado.tipo === 'atestado_medico' ? 'badge-error' : 'badge-warning'}"
-                    >
-                      {atestado.tipo === "atestado_medico"
-                        ? "Atestado Médico"
-                        : "Declaração"}
-                    </span>
-                  </td>
-                  <td class="whitespace-nowrap font-mono text-xs">{formatarData(atestado.dataInicio)}</td>
-                  <td class="whitespace-nowrap font-mono text-xs">{formatarData(atestado.dataFim)}</td>
-                  <td>{atestado.dias}</td>
-                  <td>
-                    <span
-                      class="badge {atestado.status === 'ativo' ? 'badge-success' : 'badge-neutral'}"
-                    >
-                      {atestado.status === "ativo" ? "Ativo" : "Finalizado"}
-                    </span>
-                  </td>
-                  <td>
-                    <div class="flex gap-2">
-                      {#if atestado.documentoId}
-                        <button
-                          class="btn btn-xs btn-ghost"
-                          onclick={async () => {
-                            try {
-                              const url = await client.query(api.atestadosLicencas.obterUrlDocumento, {
-                                storageId: atestado.documentoId as any,
-                              });
-                              if (url) {
-                                window.open(url, "_blank");
-                              } else {
-                                mostrarErro(
-                                  "Erro ao visualizar documento",
-                                  "Não foi possível obter a URL do documento.",
-                                  "O documento pode ter sido removido ou não existe mais."
-                                );
-                              }
-                            } catch (err: any) {
-                              console.error("Erro ao obter URL do documento:", err);
-                              mostrarErro(
-                                "Erro ao visualizar documento",
-                                "Não foi possível abrir o documento.",
-                                err?.message || err?.toString() || "Erro desconhecido"
-                              );
-                            }
-                          }}
-                        >
-                          Ver Doc
-                        </button>
-                      {/if}
-                      <button
-                        class="btn btn-xs btn-error"
-                        onclick={() =>
-                          excluirRegistro("atestado", atestado._id)}
-                      >
-                        Excluir
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              {/each}
-              {#each registrosFiltrados.licencas as licenca}
-                <tr>
-                  <td>{licenca.funcionario?.nome || "-"}</td>
-                  <td>
-                    <span
-                      class="badge {licenca.tipo === 'maternidade' ? 'badge-secondary' : 'badge-info'}"
-                    >
-                      Licença{" "}
-                      {licenca.tipo === "maternidade"
-                        ? "Maternidade"
-                        : "Paternidade"}
-                      {licenca.ehProrrogacao ? " (Prorrogação)" : ""}
-                    </span>
-                  </td>
-                  <td class="whitespace-nowrap font-mono text-xs">{formatarData(licenca.dataInicio)}</td>
-                  <td class="whitespace-nowrap font-mono text-xs">{formatarData(licenca.dataFim)}</td>
-                  <td>{licenca.dias}</td>
-                  <td>
-                    <span
-                      class="badge {licenca.status === 'ativo' ? 'badge-success' : 'badge-neutral'}"
-                    >
-                      {licenca.status === "ativo" ? "Ativo" : "Finalizado"}
-                    </span>
-                  </td>
-                  <td>
-                    <div class="flex gap-2">
-                      {#if licenca.documentoId}
-                        <button
-                          class="btn btn-xs btn-ghost"
-                          onclick={async () => {
-                            try {
-                              const url = await client.query(api.atestadosLicencas.obterUrlDocumento, {
-                                storageId: licenca.documentoId as any,
-                              });
-                              if (url) {
-                                window.open(url, "_blank");
-                              } else {
-                                mostrarErro(
-                                  "Erro ao visualizar documento",
-                                  "Não foi possível obter a URL do documento.",
-                                  "O documento pode ter sido removido ou não existe mais."
-                                );
-                              }
-                            } catch (err: any) {
-                              console.error("Erro ao obter URL do documento:", err);
-                              mostrarErro(
-                                "Erro ao visualizar documento",
-                                "Não foi possível abrir o documento.",
-                                err?.message || err?.toString() || "Erro desconhecido"
-                              );
-                            }
-                          }}
-                        >
-                          Ver Doc
-                        </button>
-                      {/if}
-                      <button
-                        class="btn btn-xs btn-error"
-                        onclick={() =>
-                          excluirRegistro("licenca", licenca._id)}
-                      >
-                        Excluir
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-          {#if registrosFiltrados.atestados.length === 0 && registrosFiltrados.licencas.length === 0}
-            <div class="text-center py-10 text-base-content/60">
-              Nenhum registro encontrado
-            </div>
-          {/if}
-        </div>
-      </div>
-    </div>
-  {:else if abaAtiva === "atestado"}
-    <!-- Formulário Atestado Médico -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Registrar Atestado Médico</h2>
+		<!-- Tabela de Registros -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registros</h2>
+				<div class="overflow-x-auto">
+					<table class="table-zebra table">
+						<thead>
+							<tr>
+								<th>Funcionário</th>
+								<th>Tipo</th>
+								<th>Data Início</th>
+								<th>Data Fim</th>
+								<th>Dias</th>
+								<th>Status</th>
+								<th>Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each registrosFiltrados.atestados as atestado}
+								<tr>
+									<td>{atestado.funcionario?.nome || '-'}</td>
+									<td>
+										<span
+											class="badge {atestado.tipo === 'atestado_medico'
+												? 'badge-error'
+												: 'badge-warning'}"
+										>
+											{atestado.tipo === 'atestado_medico' ? 'Atestado Médico' : 'Declaração'}
+										</span>
+									</td>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(atestado.dataInicio)}</td
+									>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(atestado.dataFim)}</td
+									>
+									<td>{atestado.dias}</td>
+									<td>
+										<span
+											class="badge {atestado.status === 'ativo'
+												? 'badge-success'
+												: 'badge-neutral'}"
+										>
+											{atestado.status === 'ativo' ? 'Ativo' : 'Finalizado'}
+										</span>
+									</td>
+									<td>
+										<div class="flex gap-2">
+											{#if atestado.documentoId}
+												<button
+													class="btn btn-xs btn-ghost"
+													onclick={async () => {
+														try {
+															const url = await client.query(
+																api.atestadosLicencas.obterUrlDocumento,
+																{
+																	storageId: atestado.documentoId as any
+																}
+															);
+															if (url) {
+																window.open(url, '_blank');
+															} else {
+																mostrarErro(
+																	'Erro ao visualizar documento',
+																	'Não foi possível obter a URL do documento.',
+																	'O documento pode ter sido removido ou não existe mais.'
+																);
+															}
+														} catch (err: any) {
+															console.error('Erro ao obter URL do documento:', err);
+															mostrarErro(
+																'Erro ao visualizar documento',
+																'Não foi possível abrir o documento.',
+																err?.message || err?.toString() || 'Erro desconhecido'
+															);
+														}
+													}}
+												>
+													Ver Doc
+												</button>
+											{/if}
+											<button
+												class="btn btn-xs btn-error"
+												onclick={() => excluirRegistro('atestado', atestado._id)}
+											>
+												Excluir
+											</button>
+										</div>
+									</td>
+								</tr>
+							{/each}
+							{#each registrosFiltrados.licencas as licenca}
+								<tr>
+									<td>{licenca.funcionario?.nome || '-'}</td>
+									<td>
+										<span
+											class="badge {licenca.tipo === 'maternidade'
+												? 'badge-secondary'
+												: 'badge-info'}"
+										>
+											Licença{' '}
+											{licenca.tipo === 'maternidade' ? 'Maternidade' : 'Paternidade'}
+											{licenca.ehProrrogacao ? ' (Prorrogação)' : ''}
+										</span>
+									</td>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(licenca.dataInicio)}</td
+									>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(licenca.dataFim)}</td
+									>
+									<td>{licenca.dias}</td>
+									<td>
+										<span
+											class="badge {licenca.status === 'ativo' ? 'badge-success' : 'badge-neutral'}"
+										>
+											{licenca.status === 'ativo' ? 'Ativo' : 'Finalizado'}
+										</span>
+									</td>
+									<td>
+										<div class="flex gap-2">
+											{#if licenca.documentoId}
+												<button
+													class="btn btn-xs btn-ghost"
+													onclick={async () => {
+														try {
+															const url = await client.query(
+																api.atestadosLicencas.obterUrlDocumento,
+																{
+																	storageId: licenca.documentoId as any
+																}
+															);
+															if (url) {
+																window.open(url, '_blank');
+															} else {
+																mostrarErro(
+																	'Erro ao visualizar documento',
+																	'Não foi possível obter a URL do documento.',
+																	'O documento pode ter sido removido ou não existe mais.'
+																);
+															}
+														} catch (err: any) {
+															console.error('Erro ao obter URL do documento:', err);
+															mostrarErro(
+																'Erro ao visualizar documento',
+																'Não foi possível abrir o documento.',
+																err?.message || err?.toString() || 'Erro desconhecido'
+															);
+														}
+													}}
+												>
+													Ver Doc
+												</button>
+											{/if}
+											<button
+												class="btn btn-xs btn-error"
+												onclick={() => excluirRegistro('licenca', licenca._id)}
+											>
+												Excluir
+											</button>
+										</div>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+					{#if registrosFiltrados.atestados.length === 0 && registrosFiltrados.licencas.length === 0}
+						<div class="text-base-content/60 py-10 text-center">Nenhum registro encontrado</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{:else if abaAtiva === 'atestado'}
+		<!-- Formulário Atestado Médico -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registrar Atestado Médico</h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <FuncionarioSelect
-            bind:value={atestadoMedico.funcionarioId}
-            required={true}
-          />
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<FuncionarioSelect bind:value={atestadoMedico.funcionarioId} required={true} />
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={atestadoMedico.dataInicio}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium"
+								>Data Início <span class="text-error">*</span></span
+							>
+						</div>
+						<input
+							type="date"
+							bind:value={atestadoMedico.dataInicio}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={atestadoMedico.dataFim}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
+						</div>
+						<input
+							type="date"
+							bind:value={atestadoMedico.dataFim}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">CID <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="text"
-              bind:value={atestadoMedico.cid}
-              placeholder="Ex: A00.0"
-              class="input input-bordered"
-              maxlength="10"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium">CID <span class="text-error">*</span></span>
+						</div>
+						<input
+							type="text"
+							bind:value={atestadoMedico.cid}
+							placeholder="Ex: A00.0"
+							class="input input-bordered"
+							maxlength="10"
+							required
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <FileUpload
-              label="Anexar Atestado (PDF ou Imagem)"
-              bind:value={atestadoMedico.documentoId}
-              required={true}
-              onUpload={async (file) => {
-                atestadoMedico.documentoId = await handleDocumentoUpload(
-                  file
-                );
-              }}
-              onRemove={async () => {
-                atestadoMedico.documentoId = undefined;
-              }}
-            />
-          </div>
+					<div class="form-control md:col-span-2">
+						<FileUpload
+							label="Anexar Atestado (PDF ou Imagem)"
+							bind:value={atestadoMedico.documentoId}
+							required={true}
+							onUpload={async (file) => {
+								atestadoMedico.documentoId = await handleDocumentoUpload(file);
+							}}
+							onRemove={async () => {
+								atestadoMedico.documentoId = undefined;
+							}}
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <div class="label">
-              <span class="label-text font-medium">Observações</span>
-            </div>
-            <textarea
-              bind:value={atestadoMedico.observacoes}
-              class="textarea textarea-bordered h-24"
-              placeholder="Observações adicionais..."
-            ></textarea>
-          </div>
-        </div>
+					<div class="form-control md:col-span-2">
+						<div class="label">
+							<span class="label-text font-medium">Observações</span>
+						</div>
+						<textarea
+							bind:value={atestadoMedico.observacoes}
+							class="textarea textarea-bordered h-24"
+							placeholder="Observações adicionais..."
+						></textarea>
+					</div>
+				</div>
 
-        <div class="card-actions justify-end mt-6">
-          <button
-            class="btn btn-ghost"
-            onclick={resetarFormularioAtestado}
-          >
-            Cancelar
-          </button>
-          <button
-            class="btn btn-primary"
-            onclick={salvarAtestadoMedico}
-            disabled={salvandoAtestado}
-          >
-            {#if salvandoAtestado}
-              <span class="loading loading-spinner loading-sm"></span>
-              Salvando...
-            {:else}
-              Salvar
-            {/if}
-          </button>
-        </div>
-      </div>
-    </div>
-  {:else if abaAtiva === "declaracao"}
-    <!-- Formulário Declaração -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Registrar Declaração de Comparecimento</h2>
+				<div class="card-actions mt-6 justify-end">
+					<button class="btn" onclick={resetarFormularioAtestado}> Cancelar </button>
+					<button
+						class="btn btn-primary"
+						onclick={salvarAtestadoMedico}
+						disabled={salvandoAtestado}
+					>
+						{#if salvandoAtestado}
+							<span class="loading loading-spinner loading-sm"></span>
+							Salvando...
+						{:else}
+							Salvar
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	{:else if abaAtiva === 'declaracao'}
+		<!-- Formulário Declaração -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registrar Declaração de Comparecimento</h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <FuncionarioSelect
-            bind:value={declaracao.funcionarioId}
-            required={true}
-          />
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<FuncionarioSelect bind:value={declaracao.funcionarioId} required={true} />
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={declaracao.dataInicio}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium"
+								>Data Início <span class="text-error">*</span></span
+							>
+						</div>
+						<input
+							type="date"
+							bind:value={declaracao.dataInicio}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={declaracao.dataFim}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
+						</div>
+						<input
+							type="date"
+							bind:value={declaracao.dataFim}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <FileUpload
-              label="Anexar Documento (PDF ou Imagem)"
-              bind:value={declaracao.documentoId}
-              required={true}
-              onUpload={async (file) => {
-                declaracao.documentoId = await handleDocumentoUpload(file);
-              }}
-              onRemove={async () => {
-                declaracao.documentoId = undefined;
-              }}
-            />
-          </div>
+					<div class="form-control md:col-span-2">
+						<FileUpload
+							label="Anexar Documento (PDF ou Imagem)"
+							bind:value={declaracao.documentoId}
+							required={true}
+							onUpload={async (file) => {
+								declaracao.documentoId = await handleDocumentoUpload(file);
+							}}
+							onRemove={async () => {
+								declaracao.documentoId = undefined;
+							}}
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <div class="label">
-              <span class="label-text font-medium">Observações</span>
-            </div>
-            <textarea
-              bind:value={declaracao.observacoes}
-              class="textarea textarea-bordered h-24"
-              placeholder="Observações adicionais..."
-            ></textarea>
-          </div>
-        </div>
+					<div class="form-control md:col-span-2">
+						<div class="label">
+							<span class="label-text font-medium">Observações</span>
+						</div>
+						<textarea
+							bind:value={declaracao.observacoes}
+							class="textarea textarea-bordered h-24"
+							placeholder="Observações adicionais..."
+						></textarea>
+					</div>
+				</div>
 
-        <div class="card-actions justify-end mt-6">
-          <button
-            class="btn btn-ghost"
-            onclick={resetarFormularioDeclaracao}
-          >
-            Cancelar
-          </button>
-          <button
-            class="btn btn-primary"
-            onclick={salvarDeclaracao}
-            disabled={salvandoDeclaracao}
-          >
-            {#if salvandoDeclaracao}
-              <span class="loading loading-spinner loading-sm"></span>
-              Salvando...
-            {:else}
-              Salvar
-            {/if}
-          </button>
-        </div>
-      </div>
-    </div>
-  {:else if abaAtiva === "maternidade"}
-    <!-- Formulário Licença Maternidade -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Registrar Licença Maternidade</h2>
+				<div class="card-actions mt-6 justify-end">
+					<button class="btn" onclick={resetarFormularioDeclaracao}> Cancelar </button>
+					<button class="btn btn-primary" onclick={salvarDeclaracao} disabled={salvandoDeclaracao}>
+						{#if salvandoDeclaracao}
+							<span class="loading loading-spinner loading-sm"></span>
+							Salvando...
+						{:else}
+							Salvar
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	{:else if abaAtiva === 'maternidade'}
+		<!-- Formulário Licença Maternidade -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registrar Licença Maternidade</h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <FuncionarioSelect
-            bind:value={licencaMaternidade.funcionarioId}
-            required={true}
-          />
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<FuncionarioSelect bind:value={licencaMaternidade.funcionarioId} required={true} />
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={licencaMaternidade.dataInicio}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium"
+								>Data Início <span class="text-error">*</span></span
+							>
+						</div>
+						<input
+							type="date"
+							bind:value={licencaMaternidade.dataInicio}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={licencaMaternidade.dataFim}
-              class="input input-bordered"
-              required
-            />
-            <div class="label">
-              <span class="label-text-alt">Calculado automaticamente (120 dias)</span>
-            </div>
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
+						</div>
+						<input
+							type="date"
+							bind:value={licencaMaternidade.dataFim}
+							class="input input-bordered"
+							required
+						/>
+						<div class="label">
+							<span class="label-text-alt">Calculado automaticamente (120 dias)</span>
+						</div>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <label class="label cursor-pointer">
-              <span class="label-text font-medium">Esta é uma prorrogação?</span>
-              <input
-                type="checkbox"
-                bind:checked={licencaMaternidade.ehProrrogacao}
-                class="checkbox checkbox-primary"
-              />
-            </label>
-          </div>
+					<div class="form-control md:col-span-2">
+						<label class="label cursor-pointer">
+							<span class="label-text font-medium">Esta é uma prorrogação?</span>
+							<input
+								type="checkbox"
+								bind:checked={licencaMaternidade.ehProrrogacao}
+								class="checkbox checkbox-primary"
+							/>
+						</label>
+					</div>
 
-          {#if licencaMaternidade.ehProrrogacao}
-            <div class="form-control md:col-span-2">
-              <div class="label">
-                <span class="label-text font-medium">Licença Original <span class="text-error">*</span></span>
-              </div>
-              <select
-                bind:value={licencaMaternidade.licencaOriginalId}
-                class="select select-bordered"
-                required
-              >
-                <option value="">Selecione a licença original</option>
-                {#each licencasMaternidade as licenca}
-                  <option value={licenca._id}>
-                    {licenca.funcionario?.nome} -{" "}
-                    {formatarData(licenca.dataInicio)} até{" "}
-                    {formatarData(licenca.dataFim)}
-                  </option>
-                {/each}
-              </select>
-            </div>
-          {/if}
+					{#if licencaMaternidade.ehProrrogacao}
+						<div class="form-control md:col-span-2">
+							<div class="label">
+								<span class="label-text font-medium"
+									>Licença Original <span class="text-error">*</span></span
+								>
+							</div>
+							<select
+								bind:value={licencaMaternidade.licencaOriginalId}
+								class="select select-bordered"
+								required
+							>
+								<option value="">Selecione a licença original</option>
+								{#each licencasMaternidade as licenca}
+									<option value={licenca._id}>
+										{licenca.funcionario?.nome} -{' '}
+										{formatarData(licenca.dataInicio)} até{' '}
+										{formatarData(licenca.dataFim)}
+									</option>
+								{/each}
+							</select>
+						</div>
+					{/if}
 
-          <div class="form-control md:col-span-2">
-            <FileUpload
-              label="Anexar Documento (PDF ou Imagem)"
-              bind:value={licencaMaternidade.documentoId}
-              required={true}
-              onUpload={async (file) => {
-                licencaMaternidade.documentoId = await handleDocumentoUpload(
-                  file
-                );
-              }}
-              onRemove={async () => {
-                licencaMaternidade.documentoId = undefined;
-              }}
-            />
-          </div>
+					<div class="form-control md:col-span-2">
+						<FileUpload
+							label="Anexar Documento (PDF ou Imagem)"
+							bind:value={licencaMaternidade.documentoId}
+							required={true}
+							onUpload={async (file) => {
+								licencaMaternidade.documentoId = await handleDocumentoUpload(file);
+							}}
+							onRemove={async () => {
+								licencaMaternidade.documentoId = undefined;
+							}}
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <div class="label">
-              <span class="label-text font-medium">Observações</span>
-            </div>
-            <textarea
-              bind:value={licencaMaternidade.observacoes}
-              class="textarea textarea-bordered h-24"
-              placeholder="Observações adicionais..."
-            ></textarea>
-          </div>
-        </div>
+					<div class="form-control md:col-span-2">
+						<div class="label">
+							<span class="label-text font-medium">Observações</span>
+						</div>
+						<textarea
+							bind:value={licencaMaternidade.observacoes}
+							class="textarea textarea-bordered h-24"
+							placeholder="Observações adicionais..."
+						></textarea>
+					</div>
+				</div>
 
-        <div class="card-actions justify-end mt-6">
-          <button
-            class="btn btn-ghost"
-            onclick={resetarFormularioMaternidade}
-          >
-            Cancelar
-          </button>
-          <button
-            class="btn btn-primary"
-            onclick={salvarLicencaMaternidade}
-            disabled={salvandoMaternidade}
-          >
-            {#if salvandoMaternidade}
-              <span class="loading loading-spinner loading-sm"></span>
-              Salvando...
-            {:else}
-              Salvar
-            {/if}
-          </button>
-        </div>
-      </div>
-    </div>
-  {:else if abaAtiva === "paternidade"}
-    <!-- Formulário Licença Paternidade -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Registrar Licença Paternidade</h2>
+				<div class="card-actions mt-6 justify-end">
+					<button class="btn" onclick={resetarFormularioMaternidade}> Cancelar </button>
+					<button
+						class="btn btn-primary"
+						onclick={salvarLicencaMaternidade}
+						disabled={salvandoMaternidade}
+					>
+						{#if salvandoMaternidade}
+							<span class="loading loading-spinner loading-sm"></span>
+							Salvando...
+						{:else}
+							Salvar
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	{:else if abaAtiva === 'paternidade'}
+		<!-- Formulário Licença Paternidade -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registrar Licença Paternidade</h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <FuncionarioSelect
-            bind:value={licencaPaternidade.funcionarioId}
-            required={true}
-          />
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<FuncionarioSelect bind:value={licencaPaternidade.funcionarioId} required={true} />
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Início <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={licencaPaternidade.dataInicio}
-              class="input input-bordered"
-              required
-            />
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium"
+								>Data Início <span class="text-error">*</span></span
+							>
+						</div>
+						<input
+							type="date"
+							bind:value={licencaPaternidade.dataInicio}
+							class="input input-bordered"
+							required
+						/>
+					</div>
 
-          <div class="form-control">
-            <div class="label">
-              <span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
-            </div>
-            <input
-              type="date"
-              bind:value={licencaPaternidade.dataFim}
-              class="input input-bordered"
-              required
-            />
-            <div class="label">
-              <span class="label-text-alt">Calculado automaticamente (20 dias)</span>
-            </div>
-          </div>
+					<div class="form-control">
+						<div class="label">
+							<span class="label-text font-medium">Data Fim <span class="text-error">*</span></span>
+						</div>
+						<input
+							type="date"
+							bind:value={licencaPaternidade.dataFim}
+							class="input input-bordered"
+							required
+						/>
+						<div class="label">
+							<span class="label-text-alt">Calculado automaticamente (20 dias)</span>
+						</div>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <FileUpload
-              label="Anexar Documento (PDF ou Imagem)"
-              bind:value={licencaPaternidade.documentoId}
-              required={true}
-              onUpload={async (file) => {
-                licencaPaternidade.documentoId = await handleDocumentoUpload(
-                  file
-                );
-              }}
-              onRemove={async () => {
-                licencaPaternidade.documentoId = undefined;
-              }}
-            />
-          </div>
+					<div class="form-control md:col-span-2">
+						<FileUpload
+							label="Anexar Documento (PDF ou Imagem)"
+							bind:value={licencaPaternidade.documentoId}
+							required={true}
+							onUpload={async (file) => {
+								licencaPaternidade.documentoId = await handleDocumentoUpload(file);
+							}}
+							onRemove={async () => {
+								licencaPaternidade.documentoId = undefined;
+							}}
+						/>
+					</div>
 
-          <div class="form-control md:col-span-2">
-            <div class="label">
-              <span class="label-text font-medium">Observações</span>
-            </div>
-            <textarea
-              bind:value={licencaPaternidade.observacoes}
-              class="textarea textarea-bordered h-24"
-              placeholder="Observações adicionais..."
-            ></textarea>
-          </div>
-        </div>
+					<div class="form-control md:col-span-2">
+						<div class="label">
+							<span class="label-text font-medium">Observações</span>
+						</div>
+						<textarea
+							bind:value={licencaPaternidade.observacoes}
+							class="textarea textarea-bordered h-24"
+							placeholder="Observações adicionais..."
+						></textarea>
+					</div>
+				</div>
 
-        <div class="card-actions justify-end mt-6">
-          <button
-            class="btn btn-ghost"
-            onclick={resetarFormularioPaternidade}
-          >
-            Cancelar
-          </button>
-          <button
-            class="btn btn-primary"
-            onclick={salvarLicencaPaternidade}
-            disabled={salvandoPaternidade}
-          >
-            {#if salvandoPaternidade}
-              <span class="loading loading-spinner loading-sm"></span>
-              Salvando...
-            {:else}
-              Salvar
-            {/if}
-          </button>
-        </div>
-      </div>
-    </div>
-  {/if}
+				<div class="card-actions mt-6 justify-end">
+					<button class="btn" onclick={resetarFormularioPaternidade}> Cancelar </button>
+					<button
+						class="btn btn-primary"
+						onclick={salvarLicencaPaternidade}
+						disabled={salvandoPaternidade}
+					>
+						{#if salvandoPaternidade}
+							<span class="loading loading-spinner loading-sm"></span>
+							Salvando...
+						{:else}
+							Salvar
+						{/if}
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
 </main>
 
 <!-- Modal de Erro -->
 <ErrorModal
-  bind:open={erroModal.aberto}
-  title={erroModal.titulo}
-  message={erroModal.mensagem}
-  details={erroModal.detalhes}
-  onClose={() => {
-    erroModal.aberto = false;
-  }}
+	bind:open={erroModal.aberto}
+	title={erroModal.titulo}
+	message={erroModal.mensagem}
+	details={erroModal.detalhes}
+	onClose={() => {
+		erroModal.aberto = false;
+	}}
 />
-
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 cfd5744..829ff89 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte
@@ -1,426 +1,405 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import AprovarAusencias from "$lib/components/AprovarAusencias.svelte";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { goto } from '$app/navigation';
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  // Buscar TODAS as solicitações de ausências (Dashboard RH)
-  const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
+	// Buscar TODAS as solicitações de ausências (Dashboard RH)
+	const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
 
-  let filtroStatus = $state<string>("todos");
-  let solicitacaoSelecionada = $state<Id<"solicitacoesAusencias"> | null>(null);
+	let filtroStatus = $state<string>('todos');
+	let solicitacaoSelecionada = $state<Id<'solicitacoesAusencias'> | null>(null);
 
-  const ausencias = $derived(todasAusenciasQuery?.data || []);
+	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;
-    }),
-  );
+	// 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,
-  });
+	// 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 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 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;
-  }
+	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 selecionarSolicitacao(solicitacaoId: Id<'solicitacoesAusencias'>) {
+		solicitacaoSelecionada = solicitacaoId;
+	}
 
-  async function recarregar() {
-    solicitacaoSelecionada = null;
-  }
+	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="/recursos-humanos" class="text-primary hover:underline"
-          >Recursos Humanos</a
-        >
-      </li>
-      <li>Gestão de Ausências</li>
-    </ul>
-  </div>
+<main class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</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">
-            Dashboard 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("/recursos-humanos")}
-      >
-        <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>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-orange-500/20 p-3">
+					<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-primary text-3xl font-bold">Dashboard 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 gap-2" onclick={() => goto('/recursos-humanos')}>
+				<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>
+	<!-- Estatísticas -->
+	<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+		<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+			<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 rounded-box border-warning/30 border shadow-lg">
+			<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 rounded-box border-success/30 border shadow-lg">
+			<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>
+		<div class="stat bg-base-100 rounded-box border-error/30 border shadow-lg">
+			<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>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">Filtros</h2>
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+				<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>
+	<!-- Lista de Solicitações -->
+	<div class="card bg-base-100 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				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>
+			{#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 h-6 w-6 shrink-0"
+					>
+						<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-zebra table">
+						<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-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 && currentUser.data}
-  {#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={currentUser.data._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}
+	{#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={currentUser.data._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/ferias/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
index 58a1b33..9c8243c 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
@@ -824,7 +824,7 @@
 					<p class="text-base-content/70">Visão geral de todas as solicitações e funcionários</p>
 				</div>
 			</div>
-			<button class="btn btn-ghost gap-2" onclick={() => goto(resolve('/recursos-humanos'))}>
+			<button class="btn gap-2" onclick={() => goto(resolve('/recursos-humanos'))}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="h-5 w-5"
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte
index 54a14f0..97abb91 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte
@@ -1,236 +1,310 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { goto } from "$app/navigation";
-  import type { SimboloTipo } from "@sgse-app/backend/convex/schema";
-  import PrintModal from "$lib/components/PrintModal.svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { goto } from '$app/navigation';
+	import type { SimboloTipo } from '@sgse-app/backend/convex/schema';
+	import PrintModal from '$lib/components/PrintModal.svelte';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let list: Array<any> = [];
-  let filtered: Array<any> = [];
-  let selectedId: string | null = null;
-  let openMenuId: string | null = null;
-  let funcionarioParaImprimir: any = null;
+	let list: Array<any> = [];
+	let filtered: Array<any> = [];
+	let selectedId: string | null = null;
+	let openMenuId: string | null = null;
+	let funcionarioParaImprimir: any = null;
 
-  let filtroNome = "";
-  let filtroCPF = "";
-  let filtroMatricula = "";
-  let filtroTipo: SimboloTipo | "" = "";
+	let filtroNome = '';
+	let filtroCPF = '';
+	let filtroMatricula = '';
+	let filtroTipo: SimboloTipo | '' = '';
 
-  function applyFilters() {
-    const nome = filtroNome.toLowerCase();
-    const cpf = filtroCPF.replace(/\D/g, "");
-    const mat = filtroMatricula.toLowerCase();
-    filtered = list.filter((f) => {
-      const okNome = !nome || (f.nome || "").toLowerCase().includes(nome);
-      const okCPF = !cpf || (f.cpf || "").includes(cpf);
-      const okMat = !mat || (f.matricula || "").toLowerCase().includes(mat);
-      const okTipo = !filtroTipo || f.simboloTipo === filtroTipo;
-      return okNome && okCPF && okMat && okTipo;
-    });
-  }
+	function applyFilters() {
+		const nome = filtroNome.toLowerCase();
+		const cpf = filtroCPF.replace(/\D/g, '');
+		const mat = filtroMatricula.toLowerCase();
+		filtered = list.filter((f) => {
+			const okNome = !nome || (f.nome || '').toLowerCase().includes(nome);
+			const okCPF = !cpf || (f.cpf || '').includes(cpf);
+			const okMat = !mat || (f.matricula || '').toLowerCase().includes(mat);
+			const okTipo = !filtroTipo || f.simboloTipo === filtroTipo;
+			return okNome && okCPF && okMat && okTipo;
+		});
+	}
 
-  async function load() {
-    list = await client.query(api.funcionarios.getAll, {} as any);
-    applyFilters();
-  }
+	async function load() {
+		list = await client.query(api.funcionarios.getAll, {} as any);
+		applyFilters();
+	}
 
-  function editSelected() {
-    if (selectedId) goto(`/recursos-humanos/funcionarios/${selectedId}/editar`);
-  }
+	function editSelected() {
+		if (selectedId) goto(`/recursos-humanos/funcionarios/${selectedId}/editar`);
+	}
 
-  async function openPrintModal(funcionarioId: string) {
-    try {
-      const data = await client.query(api.funcionarios.getFichaCompleta, { 
-        id: funcionarioId as any 
-      });
-      funcionarioParaImprimir = data;
-    } catch (err) {
-      console.error("Erro ao carregar funcionário:", err);
-      alert("Erro ao carregar dados para impressão");
-    }
-  }
+	async function openPrintModal(funcionarioId: string) {
+		try {
+			const data = await client.query(api.funcionarios.getFichaCompleta, {
+				id: funcionarioId as any
+			});
+			funcionarioParaImprimir = data;
+		} catch (err) {
+			console.error('Erro ao carregar funcionário:', err);
+			alert('Erro ao carregar dados para impressão');
+		}
+	}
 
-  function navCadastro() { goto("/recursos-humanos/funcionarios/cadastro"); }
+	function navCadastro() {
+		goto('/recursos-humanos/funcionarios/cadastro');
+	}
 
-  load();
+	load();
 
-  function toggleMenu(id: string) {
-    openMenuId = openMenuId === id ? null : id;
-  }
-  $: needsScroll = filtered.length > 8;
+	function toggleMenu(id: string) {
+		openMenuId = openMenuId === id ? null : id;
+	}
+	$: needsScroll = filtered.length > 8;
 </script>
 
 <main class="container mx-auto px-4 py-4">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-      <li>Funcionários</li>
-    </ul>
-  </div>
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
+			<li>Funcionários</li>
+		</ul>
+	</div>
 
-  <!-- Cabeçalho -->
-  <div class="mb-6">
-    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-blue-500/20 rounded-xl">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Funcionários Cadastrados</h1>
-          <p class="text-base-content/70">Gerencie os funcionários da secretaria</p>
-        </div>
-      </div>
-      <button class="btn btn-primary btn-lg gap-2" onclick={navCadastro}>
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
-        </svg>
-        Novo Funcionário
-      </button>
-    </div>
-  </div>
+	<!-- Cabeçalho -->
+	<div class="mb-6">
+		<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-blue-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-blue-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Funcionários Cadastrados</h1>
+					<p class="text-base-content/70">Gerencie os funcionários da secretaria</p>
+				</div>
+			</div>
+			<button class="btn btn-primary btn-lg gap-2" onclick={navCadastro}>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+				Novo Funcionário
+			</button>
+		</div>
+	</div>
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">
-        <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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-        </svg>
-        Filtros de Pesquisa
-      </h2>
-      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
-        <div class="form-control w-full">
-          <label class="label" for="func_nome">
-            <span class="label-text font-semibold">Nome</span>
-          </label>
-          <input 
-            id="func_nome" 
-            class="input input-bordered focus:input-primary w-full" 
-            placeholder="Buscar por nome..."
-            bind:value={filtroNome} 
-            oninput={applyFilters} 
-          />
-        </div>
-        <div class="form-control w-full">
-          <label class="label" for="func_cpf">
-            <span class="label-text font-semibold">CPF</span>
-          </label>
-          <input 
-            id="func_cpf" 
-            class="input input-bordered focus:input-primary w-full" 
-            placeholder="000.000.000-00"
-            bind:value={filtroCPF} 
-            oninput={applyFilters} 
-          />
-        </div>
-        <div class="form-control w-full">
-          <label class="label" for="func_matricula">
-            <span class="label-text font-semibold">Matrícula</span>
-          </label>
-          <input 
-            id="func_matricula" 
-            class="input input-bordered focus:input-primary w-full" 
-            placeholder="Buscar por matrícula..."
-            bind:value={filtroMatricula} 
-            oninput={applyFilters} 
-          />
-        </div>
-        <div class="form-control w-full">
-          <label class="label" for="func_tipo">
-            <span class="label-text font-semibold">Símbolo Tipo</span>
-          </label>
-          <select id="func_tipo" class="select select-bordered focus:select-primary w-full" bind:value={filtroTipo} oninput={applyFilters}>
-            <option value="">Todos os tipos</option>
-            <option value="cargo_comissionado">Cargo Comissionado</option>
-            <option value="funcao_gratificada">Função Gratificada</option>
-          </select>
-        </div>
-      </div>
-      {#if filtroNome || filtroCPF || filtroMatricula || filtroTipo}
-        <div class="mt-4">
-          <button 
-            class="btn btn-ghost btn-sm gap-2"
-            onclick={() => {
-              filtroNome = "";
-              filtroCPF = "";
-              filtroMatricula = "";
-              filtroTipo = "";
-              applyFilters();
-            }}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-            Limpar Filtros
-          </button>
-        </div>
-      {/if}
-    </div>
-  </div>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-xl">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				<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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+					/>
+				</svg>
+				Filtros de Pesquisa
+			</h2>
+			<div class="grid grid-cols-1 items-end gap-4 md:grid-cols-4">
+				<div class="form-control w-full">
+					<label class="label" for="func_nome">
+						<span class="label-text font-semibold">Nome</span>
+					</label>
+					<input
+						id="func_nome"
+						class="input input-bordered focus:input-primary w-full"
+						placeholder="Buscar por nome..."
+						bind:value={filtroNome}
+						oninput={applyFilters}
+					/>
+				</div>
+				<div class="form-control w-full">
+					<label class="label" for="func_cpf">
+						<span class="label-text font-semibold">CPF</span>
+					</label>
+					<input
+						id="func_cpf"
+						class="input input-bordered focus:input-primary w-full"
+						placeholder="000.000.000-00"
+						bind:value={filtroCPF}
+						oninput={applyFilters}
+					/>
+				</div>
+				<div class="form-control w-full">
+					<label class="label" for="func_matricula">
+						<span class="label-text font-semibold">Matrícula</span>
+					</label>
+					<input
+						id="func_matricula"
+						class="input input-bordered focus:input-primary w-full"
+						placeholder="Buscar por matrícula..."
+						bind:value={filtroMatricula}
+						oninput={applyFilters}
+					/>
+				</div>
+				<div class="form-control w-full">
+					<label class="label" for="func_tipo">
+						<span class="label-text font-semibold">Símbolo Tipo</span>
+					</label>
+					<select
+						id="func_tipo"
+						class="select select-bordered focus:select-primary w-full"
+						bind:value={filtroTipo}
+						oninput={applyFilters}
+					>
+						<option value="">Todos os tipos</option>
+						<option value="cargo_comissionado">Cargo Comissionado</option>
+						<option value="funcao_gratificada">Função Gratificada</option>
+					</select>
+				</div>
+			</div>
+			{#if filtroNome || filtroCPF || filtroMatricula || filtroTipo}
+				<div class="mt-4">
+					<button
+						class="btn btn-sm gap-2"
+						onclick={() => {
+							filtroNome = '';
+							filtroCPF = '';
+							filtroMatricula = '';
+							filtroTipo = '';
+							applyFilters();
+						}}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+						Limpar Filtros
+					</button>
+				</div>
+			{/if}
+		</div>
+	</div>
 
-  <!-- Tabela de Funcionários -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body p-0">
-      <div class="overflow-x-auto">
-        <div class="overflow-y-auto" style="max-height: {filtered.length > 8 ? '600px' : 'none'};">
-          <table class="table table-zebra w-full">
-            <thead class="sticky top-0 bg-base-200 z-10">
-              <tr>
-                <th class="font-bold">Nome</th>
-                <th class="font-bold">CPF</th>
-                <th class="font-bold">Matrícula</th>
-                <th class="font-bold">Tipo</th>
-                <th class="font-bold">Cidade</th>
-                <th class="font-bold">UF</th>
-                <th class="text-right font-bold">Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-        {#each filtered as f}
-          <tr class="hover">
-            <td class="font-medium">{f.nome}</td>
-            <td>{f.cpf}</td>
-            <td>{f.matricula}</td>
-            <td>{f.simboloTipo}</td>
-            <td>{f.cidade}</td>
-            <td>{f.uf}</td>
-            <td class="text-right">
-              <div class="dropdown dropdown-end" class:dropdown-open={openMenuId === f._id}>
-                <button type="button" aria-label="Abrir menu" class="btn btn-ghost btn-sm" onclick={() => toggleMenu(f._id)}>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/></svg>
-                </button>
-                <ul class="dropdown-content menu bg-base-100 rounded-box z-10 w-52 p-2 shadow-lg border border-base-300">
-                  <li><a href={`/recursos-humanos/funcionarios/${f._id}`}>Ver Detalhes</a></li>
-                  <li><a href={`/recursos-humanos/funcionarios/${f._id}/editar`}>Editar</a></li>
-                  <li><a href={`/recursos-humanos/funcionarios/${f._id}/documentos`}>Ver Documentos</a></li>
-                  <li><button onclick={() => openPrintModal(f._id)}>Imprimir Ficha</button></li>
-                </ul>
-              </div>
-            </td>
-          </tr>
-        {/each}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Tabela de Funcionários -->
+	<div class="card bg-base-100 shadow-xl">
+		<div class="card-body p-0">
+			<div class="overflow-x-auto">
+				<div class="overflow-y-auto" style="max-height: {filtered.length > 8 ? '600px' : 'none'};">
+					<table class="table-zebra table w-full">
+						<thead class="bg-base-200 sticky top-0 z-10">
+							<tr>
+								<th class="font-bold">Nome</th>
+								<th class="font-bold">CPF</th>
+								<th class="font-bold">Matrícula</th>
+								<th class="font-bold">Tipo</th>
+								<th class="font-bold">Cidade</th>
+								<th class="font-bold">UF</th>
+								<th class="text-right font-bold">Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each filtered as f}
+								<tr class="hover">
+									<td class="font-medium">{f.nome}</td>
+									<td>{f.cpf}</td>
+									<td>{f.matricula}</td>
+									<td>{f.simboloTipo}</td>
+									<td>{f.cidade}</td>
+									<td>{f.uf}</td>
+									<td class="text-right">
+										<div class="dropdown dropdown-end" class:dropdown-open={openMenuId === f._id}>
+											<button
+												type="button"
+												aria-label="Abrir menu"
+												class="btn btn-sm"
+												onclick={() => toggleMenu(f._id)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-5 w-5"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													><path
+														d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
+													/></svg
+												>
+											</button>
+											<ul
+												class="dropdown-content menu bg-base-100 rounded-box border-base-300 z-10 w-52 border p-2 shadow-lg"
+											>
+												<li>
+													<a href={`/recursos-humanos/funcionarios/${f._id}`}>Ver Detalhes</a>
+												</li>
+												<li>
+													<a href={`/recursos-humanos/funcionarios/${f._id}/editar`}>Editar</a>
+												</li>
+												<li>
+													<a href={`/recursos-humanos/funcionarios/${f._id}/documentos`}
+														>Ver Documentos</a
+													>
+												</li>
+												<li>
+													<button onclick={() => openPrintModal(f._id)}>Imprimir Ficha</button>
+												</li>
+											</ul>
+										</div>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	</div>
 
-  <!-- Informação sobre resultados -->
-  <div class="mt-4 text-sm text-base-content/70 text-center">
-    Exibindo {filtered.length} de {list.length} funcionário(s)
-  </div>
+	<!-- Informação sobre resultados -->
+	<div class="text-base-content/70 mt-4 text-center text-sm">
+		Exibindo {filtered.length} de {list.length} funcionário(s)
+	</div>
 
-  <!-- Modal de Impressão -->
-  {#if funcionarioParaImprimir}
-    <PrintModal 
-      funcionario={funcionarioParaImprimir} 
-      onClose={() => funcionarioParaImprimir = null} 
-    />
-  {/if}
+	<!-- Modal de Impressão -->
+	{#if funcionarioParaImprimir}
+		<PrintModal
+			funcionario={funcionarioParaImprimir}
+			onClose={() => (funcionarioParaImprimir = null)}
+		/>
+	{/if}
 </main>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/documentos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/documentos/+page.svelte
index 5e02825..f96c08b 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/documentos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/documentos/+page.svelte
@@ -1,277 +1,358 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { page } from "$app/stores";
-  import { goto } from "$app/navigation";
-  import FileUpload from "$lib/components/FileUpload.svelte";
-  import ModelosDeclaracoes from "$lib/components/ModelosDeclaracoes.svelte";
-  import { documentos, categoriasDocumentos, getDocumentosByCategoria } from "$lib/utils/documentos";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import FileUpload from '$lib/components/FileUpload.svelte';
+	import ModelosDeclaracoes from '$lib/components/ModelosDeclaracoes.svelte';
+	import {
+		documentos,
+		categoriasDocumentos,
+		getDocumentosByCategoria
+	} from '$lib/utils/documentos';
 
-  const client = useConvexClient();
-  
-  let funcionarioId = $derived($page.params.funcionarioId as string);
+	const client = useConvexClient();
 
-  let funcionario = $state<any>(null);
-  let documentosStorage = $state<Record<string, string | undefined>>({});
-  let loading = $state(true);
-  let filtro = $state<string>("todos"); // todos, enviados, pendentes
+	let funcionarioId = $derived($page.params.funcionarioId as string);
 
-  async function load() {
-    try {
-      loading = true;
-      
-      // Carregar dados do funcionário
-      const data = await client.query(api.funcionarios.getById, { 
-        id: funcionarioId as any 
-      });
-      
-      if (!data) {
-        goto("/recursos-humanos/funcionarios");
-        return;
-      }
-      
-      funcionario = data;
-      
-      // Mapear storage IDs dos documentos
-      documentos.forEach(doc => {
-        if ((data as any)[doc.campo]) {
-          documentosStorage[doc.campo] = (data as any)[doc.campo];
-        }
-      });
-    } catch (err) {
-      console.error("Erro ao carregar:", err);
-      goto("/recursos-humanos/funcionarios");
-    } finally {
-      loading = false;
-    }
-  }
+	let funcionario = $state<any>(null);
+	let documentosStorage = $state<Record<string, string | undefined>>({});
+	let loading = $state(true);
+	let filtro = $state<string>('todos'); // todos, enviados, pendentes
 
-  async function handleDocumentoUpload(campo: string, file: File) {
-    try {
-      // Gerar URL de upload
-      const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-      
-      // Fazer upload do arquivo
-      const result = await fetch(uploadUrl, {
-        method: "POST",
-        headers: { "Content-Type": file.type },
-        body: file,
-      });
-      
-      const { storageId } = await result.json();
-      
-      // Atualizar documento no funcionário
-      await client.mutation(api.documentos.updateDocumento, {
-        funcionarioId: funcionarioId as any,
-        campo,
-        storageId: storageId as any,
-      });
-      
-      // Atualizar localmente
-      documentosStorage[campo] = storageId;
-      
-      // Recarregar
-      await load();
-    } catch (err: any) {
-      throw new Error(err?.message || "Erro ao fazer upload");
-    }
-  }
+	async function load() {
+		try {
+			loading = true;
 
-  async function handleDocumentoRemove(campo: string) {
-    try {
-      // Atualizar documento no funcionário (set to null)
-      await client.mutation(api.documentos.updateDocumento, {
-        funcionarioId: funcionarioId as any,
-        campo,
-        storageId: null,
-      });
-      
-      // Atualizar localmente
-      documentosStorage[campo] = undefined;
-      
-      // Recarregar
-      await load();
-    } catch (err: any) {
-      alert("Erro ao remover documento: " + (err?.message || ""));
-    }
-  }
+			// Carregar dados do funcionário
+			const data = await client.query(api.funcionarios.getById, {
+				id: funcionarioId as any
+			});
 
-  function documentosFiltrados() {
-    return documentos.filter(doc => {
-      const temDocumento = !!documentosStorage[doc.campo];
-      if (filtro === "enviados") return temDocumento;
-      if (filtro === "pendentes") return !temDocumento;
-      return true; // todos
-    });
-  }
+			if (!data) {
+				goto('/recursos-humanos/funcionarios');
+				return;
+			}
 
-  function contarDocumentos() {
-    const total = documentos.length;
-    const enviados = documentos.filter(doc => !!documentosStorage[doc.campo]).length;
-    const pendentes = total - enviados;
-    return { total, enviados, pendentes };
-  }
+			funcionario = data;
 
-  load();
+			// Mapear storage IDs dos documentos
+			documentos.forEach((doc) => {
+				if ((data as any)[doc.campo]) {
+					documentosStorage[doc.campo] = (data as any)[doc.campo];
+				}
+			});
+		} catch (err) {
+			console.error('Erro ao carregar:', err);
+			goto('/recursos-humanos/funcionarios');
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function handleDocumentoUpload(campo: string, file: File) {
+		try {
+			// Gerar URL de upload
+			const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+
+			// Fazer upload do arquivo
+			const result = await fetch(uploadUrl, {
+				method: 'POST',
+				headers: { 'Content-Type': file.type },
+				body: file
+			});
+
+			const { storageId } = await result.json();
+
+			// Atualizar documento no funcionário
+			await client.mutation(api.documentos.updateDocumento, {
+				funcionarioId: funcionarioId as any,
+				campo,
+				storageId: storageId as any
+			});
+
+			// Atualizar localmente
+			documentosStorage[campo] = storageId;
+
+			// Recarregar
+			await load();
+		} catch (err: any) {
+			throw new Error(err?.message || 'Erro ao fazer upload');
+		}
+	}
+
+	async function handleDocumentoRemove(campo: string) {
+		try {
+			// Atualizar documento no funcionário (set to null)
+			await client.mutation(api.documentos.updateDocumento, {
+				funcionarioId: funcionarioId as any,
+				campo,
+				storageId: null
+			});
+
+			// Atualizar localmente
+			documentosStorage[campo] = undefined;
+
+			// Recarregar
+			await load();
+		} catch (err: any) {
+			alert('Erro ao remover documento: ' + (err?.message || ''));
+		}
+	}
+
+	function documentosFiltrados() {
+		return documentos.filter((doc) => {
+			const temDocumento = !!documentosStorage[doc.campo];
+			if (filtro === 'enviados') return temDocumento;
+			if (filtro === 'pendentes') return !temDocumento;
+			return true; // todos
+		});
+	}
+
+	function contarDocumentos() {
+		const total = documentos.length;
+		const enviados = documentos.filter((doc) => !!documentosStorage[doc.campo]).length;
+		const pendentes = total - enviados;
+		return { total, enviados, pendentes };
+	}
+
+	load();
 </script>
 
 {#if loading}
-  <div class="flex items-center justify-center min-h-screen">
-    <span class="loading loading-spinner loading-lg"></span>
-  </div>
+	<div class="flex min-h-screen items-center justify-center">
+		<span class="loading loading-spinner loading-lg"></span>
+	</div>
 {:else if funcionario}
-  <main class="container mx-auto px-4 py-4 max-w-7xl">
-    <!-- Breadcrumb -->
-    <div class="text-sm breadcrumbs mb-4">
-      <ul>
-        <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-        <li><a href="/recursos-humanos/funcionarios" class="text-primary hover:underline">Funcionários</a></li>
-        <li><a href={`/recursos-humanos/funcionarios/${funcionarioId}`} class="text-primary hover:underline">{funcionario.nome}</a></li>
-        <li>Documentos</li>
-      </ul>
-    </div>
+	<main class="container mx-auto max-w-7xl px-4 py-4">
+		<!-- Breadcrumb -->
+		<div class="breadcrumbs mb-4 text-sm">
+			<ul>
+				<li>
+					<a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a>
+				</li>
+				<li>
+					<a href="/recursos-humanos/funcionarios" class="text-primary hover:underline"
+						>Funcionários</a
+					>
+				</li>
+				<li>
+					<a
+						href={`/recursos-humanos/funcionarios/${funcionarioId}`}
+						class="text-primary hover:underline">{funcionario.nome}</a
+					>
+				</li>
+				<li>Documentos</li>
+			</ul>
+		</div>
 
-    <!-- Cabeçalho -->
-    <div class="mb-6">
-      <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-        <div class="flex items-center gap-4">
-          <div class="p-3 bg-purple-500/20 rounded-xl">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-          </div>
-          <div>
-            <h1 class="text-3xl font-bold text-primary">Gerenciar Documentos</h1>
-            <p class="text-base-content/70">{funcionario.nome} - Matrícula: {funcionario.matricula}</p>
-          </div>
-        </div>
+		<!-- Cabeçalho -->
+		<div class="mb-6">
+			<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+				<div class="flex items-center gap-4">
+					<div class="rounded-xl bg-purple-500/20 p-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8 text-purple-600"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h1 class="text-primary text-3xl font-bold">Gerenciar Documentos</h1>
+						<p class="text-base-content/70">
+							{funcionario.nome} - Matrícula: {funcionario.matricula}
+						</p>
+					</div>
+				</div>
 
-        <button 
-          class="btn btn-ghost gap-2"
-          onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}`)}
-        >
-          <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 aos Detalhes
-        </button>
-      </div>
-    </div>
+				<button
+					class="btn gap-2"
+					onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}`)}
+				>
+					<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 aos Detalhes
+				</button>
+			</div>
+		</div>
 
-    <!-- Estatísticas -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-      <div class="stats shadow">
-        <div class="stat">
-          <div class="stat-figure text-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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 de Documentos</div>
-          <div class="stat-value text-primary">{contarDocumentos().total}</div>
-        </div>
-      </div>
+		<!-- Estatísticas -->
+		<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-3">
+			<div class="stats shadow">
+				<div class="stat">
+					<div class="stat-figure text-primary">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="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 de Documentos</div>
+					<div class="stat-value text-primary">{contarDocumentos().total}</div>
+				</div>
+			</div>
 
-      <div class="stats shadow">
-        <div class="stat">
-          <div class="stat-figure text-success">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <div class="stat-title">Documentos Enviados</div>
-          <div class="stat-value text-success">{contarDocumentos().enviados}</div>
-        </div>
-      </div>
+			<div class="stats shadow">
+				<div class="stat">
+					<div class="stat-figure text-success">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+					</div>
+					<div class="stat-title">Documentos Enviados</div>
+					<div class="stat-value text-success">{contarDocumentos().enviados}</div>
+				</div>
+			</div>
 
-      <div class="stats shadow">
-        <div class="stat">
-          <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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-          </div>
-          <div class="stat-title">Documentos Pendentes</div>
-          <div class="stat-value text-warning">{contarDocumentos().pendentes}</div>
-        </div>
-      </div>
-    </div>
+			<div class="stats shadow">
+				<div class="stat">
+					<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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+					</div>
+					<div class="stat-title">Documentos Pendentes</div>
+					<div class="stat-value text-warning">{contarDocumentos().pendentes}</div>
+				</div>
+			</div>
+		</div>
 
-    <!-- Modelos de Declarações -->
-    <div class="mb-6">
-      <ModelosDeclaracoes funcionario={funcionario} showPreencherButton={true} />
-    </div>
+		<!-- Modelos de Declarações -->
+		<div class="mb-6">
+			<ModelosDeclaracoes {funcionario} showPreencherButton={true} />
+		</div>
 
-    <!-- Filtros -->
-    <div class="card bg-base-100 shadow-xl mb-6">
-      <div class="card-body">
-        <div class="flex flex-wrap gap-2">
-          <button 
-            class="btn btn-sm"
-            class:btn-primary={filtro === "todos"}
-            onclick={() => filtro = "todos"}
-          >
-            Todos ({contarDocumentos().total})
-          </button>
-          <button 
-            class="btn btn-sm"
-            class:btn-success={filtro === "enviados"}
-            onclick={() => filtro = "enviados"}
-          >
-            Enviados ({contarDocumentos().enviados})
-          </button>
-          <button 
-            class="btn btn-sm"
-            class:btn-warning={filtro === "pendentes"}
-            onclick={() => filtro = "pendentes"}
-          >
-            Pendentes ({contarDocumentos().pendentes})
-          </button>
-        </div>
-      </div>
-    </div>
+		<!-- Filtros -->
+		<div class="card bg-base-100 mb-6 shadow-xl">
+			<div class="card-body">
+				<div class="flex flex-wrap gap-2">
+					<button
+						class="btn btn-sm"
+						class:btn-primary={filtro === 'todos'}
+						onclick={() => (filtro = 'todos')}
+					>
+						Todos ({contarDocumentos().total})
+					</button>
+					<button
+						class="btn btn-sm"
+						class:btn-success={filtro === 'enviados'}
+						onclick={() => (filtro = 'enviados')}
+					>
+						Enviados ({contarDocumentos().enviados})
+					</button>
+					<button
+						class="btn btn-sm"
+						class:btn-warning={filtro === 'pendentes'}
+						onclick={() => (filtro = 'pendentes')}
+					>
+						Pendentes ({contarDocumentos().pendentes})
+					</button>
+				</div>
+			</div>
+		</div>
 
-    <!-- Documentos por Categoria -->
-    {#each categoriasDocumentos as categoria}
-      {@const docsCategoria = getDocumentosByCategoria(categoria).filter(doc => {
-        const temDocumento = !!documentosStorage[doc.campo];
-        if (filtro === "enviados") return temDocumento;
-        if (filtro === "pendentes") return !temDocumento;
-        return true;
-      })}
-      
-      {#if docsCategoria.length > 0}
-        <div class="card bg-base-100 shadow-xl mb-6">
-          <div class="card-body">
-            <h2 class="card-title text-xl border-b pb-3 mb-4">
-              {categoria}
-              <div class="badge badge-primary ml-2">{docsCategoria.length}</div>
-            </h2>
+		<!-- Documentos por Categoria -->
+		{#each categoriasDocumentos as categoria}
+			{@const docsCategoria = getDocumentosByCategoria(categoria).filter((doc) => {
+				const temDocumento = !!documentosStorage[doc.campo];
+				if (filtro === 'enviados') return temDocumento;
+				if (filtro === 'pendentes') return !temDocumento;
+				return true;
+			})}
 
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {#each docsCategoria as doc}
-                <FileUpload
-                  label={doc.nome}
-                  helpUrl={doc.helpUrl}
-                  value={documentosStorage[doc.campo]}
-                  onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
-                  onRemove={() => handleDocumentoRemove(doc.campo)}
-                />
-              {/each}
-            </div>
-          </div>
-        </div>
-      {/if}
-    {/each}
+			{#if docsCategoria.length > 0}
+				<div class="card bg-base-100 mb-6 shadow-xl">
+					<div class="card-body">
+						<h2 class="card-title mb-4 border-b pb-3 text-xl">
+							{categoria}
+							<div class="badge badge-primary ml-2">{docsCategoria.length}</div>
+						</h2>
 
-    {#if documentosFiltrados().length === 0}
-      <div class="alert">
-        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
-        <span>Nenhum documento encontrado com o filtro selecionado.</span>
-      </div>
-    {/if}
-  </main>
+						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+							{#each docsCategoria as doc}
+								<FileUpload
+									label={doc.nome}
+									helpUrl={doc.helpUrl}
+									value={documentosStorage[doc.campo]}
+									onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
+									onRemove={() => handleDocumentoRemove(doc.campo)}
+								/>
+							{/each}
+						</div>
+					</div>
+				</div>
+			{/if}
+		{/each}
+
+		{#if documentosFiltrados().length === 0}
+			<div class="alert">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<span>Nenhum documento encontrado com o filtro selecionado.</span>
+			</div>
+		{/if}
+	</main>
 {/if}
-
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
index c51afda..3316c22 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
@@ -1708,7 +1708,7 @@
 					<div class="flex flex-col justify-end gap-3 sm:flex-row">
 						<button
 							type="button"
-							class="btn btn-ghost btn-lg"
+							class="btn btn-lg"
 							disabled={loading}
 							onclick={() => goto('/recursos-humanos/funcionarios')}
 						>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/cadastro/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/cadastro/+page.svelte
index 931c6f4..0827dfb 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/cadastro/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/cadastro/+page.svelte
@@ -1090,7 +1090,7 @@
 								</div>
 								<button
 									type="button"
-									class="btn btn-sm btn-error btn-square"
+									class="btn btn-sm btn-error"
 									aria-label="Remover curso"
 									onclick={() => removerCurso(curso.id)}
 								>
@@ -1388,7 +1388,7 @@
 								</div>
 								<button
 									type="button"
-									class="btn btn-sm btn-error btn-square"
+									class="btn btn-sm btn-error"
 									aria-label="Remover dependente"
 									onclick={() => removerDependente(dep.id)}
 								>
@@ -1887,7 +1887,7 @@
 				<div class="flex flex-col justify-end gap-3 sm:flex-row">
 					<button
 						type="button"
-						class="btn btn-ghost btn-lg"
+						class="btn btn-lg"
 						disabled={loading}
 						onclick={() => goto(resolve('/recursos-humanos/funcionarios'))}
 					>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/excluir/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/excluir/+page.svelte
index 9ec3f57..cf72eb7 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/excluir/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/excluir/+page.svelte
@@ -1,330 +1,514 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { goto } from "$app/navigation";
-  import { onMount } from "svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let list: Array<any> = $state([]);
-  let filtro = $state("");
-  let notice: { kind: "success" | "error"; text: string } | null = $state(null);
-  let toDelete: { id: string; nome: string; cpf: string; matricula: string } | null = $state(null);
-  let deletingId: string | null = $state(null);
+	let list: Array<any> = $state([]);
+	let filtro = $state('');
+	let notice: { kind: 'success' | 'error'; text: string } | null = $state(null);
+	let toDelete: { id: string; nome: string; cpf: string; matricula: string } | null = $state(null);
+	let deletingId: string | null = $state(null);
 
-  async function load() {
-    try {
-      list = await client.query(api.funcionarios.getAll, {} as any);
-    } catch (e) {
-      notice = { kind: "error", text: "Falha ao carregar funcionários." };
-    }
-  }
+	async function load() {
+		try {
+			list = await client.query(api.funcionarios.getAll, {} as any);
+		} catch (e) {
+			notice = { kind: 'error', text: 'Falha ao carregar funcionários.' };
+		}
+	}
 
-  function openDeleteModal(id: string, nome: string, cpf: string, matricula: string) {
-    toDelete = { id, nome, cpf, matricula };
-    (document.getElementById("delete_modal_func_excluir") as HTMLDialogElement)?.showModal();
-  }
+	function openDeleteModal(id: string, nome: string, cpf: string, matricula: string) {
+		toDelete = { id, nome, cpf, matricula };
+		(document.getElementById('delete_modal_func_excluir') as HTMLDialogElement)?.showModal();
+	}
 
-  function closeDeleteModal() {
-    toDelete = null;
-    (document.getElementById("delete_modal_func_excluir") as HTMLDialogElement)?.close();
-  }
+	function closeDeleteModal() {
+		toDelete = null;
+		(document.getElementById('delete_modal_func_excluir') as HTMLDialogElement)?.close();
+	}
 
-  async function confirmDelete() {
-    if (!toDelete) return;
-    try {
-      deletingId = toDelete.id;
-      await client.mutation(api.funcionarios.remove, { id: toDelete.id } as any);
-      closeDeleteModal();
-      notice = { kind: "success", text: `Funcionário "${toDelete.nome}" excluído com sucesso!` };
-      await load();
-      
-      // Auto-fechar mensagem de sucesso após 5 segundos
-      setTimeout(() => {
-        notice = null;
-      }, 5000);
-    } catch (e) {
-      notice = { kind: "error", text: "Erro ao excluir cadastro. Tente novamente." };
-    } finally {
-      deletingId = null;
-    }
-  }
+	async function confirmDelete() {
+		if (!toDelete) return;
+		try {
+			deletingId = toDelete.id;
+			await client.mutation(api.funcionarios.remove, { id: toDelete.id } as any);
+			closeDeleteModal();
+			notice = { kind: 'success', text: `Funcionário "${toDelete.nome}" excluído com sucesso!` };
+			await load();
 
-  function limparFiltro() {
-    filtro = "";
-  }
+			// Auto-fechar mensagem de sucesso após 5 segundos
+			setTimeout(() => {
+				notice = null;
+			}, 5000);
+		} catch (e) {
+			notice = { kind: 'error', text: 'Erro ao excluir cadastro. Tente novamente.' };
+		} finally {
+			deletingId = null;
+		}
+	}
 
-  function back() { 
-    goto("/recursos-humanos/funcionarios"); 
-  }
+	function limparFiltro() {
+		filtro = '';
+	}
 
-  // Computed para lista filtrada
-  const filtered = $derived(
-    list.filter((f) => {
-      const q = (filtro || "").toLowerCase();
-      return !q || 
-        (f.nome || "").toLowerCase().includes(q) || 
-        (f.cpf || "").includes(q) || 
-        (f.matricula || "").toLowerCase().includes(q);
-    })
-  );
+	function back() {
+		goto('/recursos-humanos/funcionarios');
+	}
 
-  onMount(() => { 
-    void load(); 
-  });
+	// Computed para lista filtrada
+	const filtered = $derived(
+		list.filter((f) => {
+			const q = (filtro || '').toLowerCase();
+			return (
+				!q ||
+				(f.nome || '').toLowerCase().includes(q) ||
+				(f.cpf || '').includes(q) ||
+				(f.matricula || '').toLowerCase().includes(q)
+			);
+		})
+	);
+
+	onMount(() => {
+		void load();
+	});
 </script>
 
 <!-- Breadcrumb -->
-<div class="text-sm breadcrumbs mb-4">
-  <ul>
-    <li>
-      <a href="/" class="text-primary hover:text-primary-focus">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-        </svg>
-        Dashboard
-      </a>
-    </li>
-    <li>
-      <a href="/recursos-humanos" class="text-primary hover:text-primary-focus">Recursos Humanos</a>
-    </li>
-    <li>
-      <a href="/recursos-humanos/funcionarios" class="text-primary hover:text-primary-focus">Funcionários</a>
-    </li>
-    <li class="font-semibold">Excluir Funcionários</li>
-  </ul>
+<div class="breadcrumbs mb-4 text-sm">
+	<ul>
+		<li>
+			<a href="/" class="text-primary hover:text-primary-focus">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-4 w-4"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+					/>
+				</svg>
+				Dashboard
+			</a>
+		</li>
+		<li>
+			<a href="/recursos-humanos" class="text-primary hover:text-primary-focus">Recursos Humanos</a>
+		</li>
+		<li>
+			<a href="/recursos-humanos/funcionarios" class="text-primary hover:text-primary-focus"
+				>Funcionários</a
+			>
+		</li>
+		<li class="font-semibold">Excluir Funcionários</li>
+	</ul>
 </div>
 
 <!-- Header com ícone e descrição -->
 <div class="mb-6">
-  <div class="flex items-center gap-3 mb-2">
-    <div class="p-3 bg-error/10 rounded-xl">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-error" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-      </svg>
-    </div>
-    <div class="flex-1">
-      <h1 class="text-3xl font-bold text-base-content">Excluir Funcionários</h1>
-      <p class="text-base-content/60 mt-1">Selecione o funcionário que deseja remover do sistema</p>
-    </div>
-    <button 
-      class="btn btn-ghost gap-2"
-      onclick={back}
-    >
-      <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 class="mb-2 flex items-center gap-3">
+		<div class="bg-error/10 rounded-xl p-3">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="text-error h-8 w-8"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+				/>
+			</svg>
+		</div>
+		<div class="flex-1">
+			<h1 class="text-base-content text-3xl font-bold">Excluir Funcionários</h1>
+			<p class="text-base-content/60 mt-1">Selecione o funcionário que deseja remover do sistema</p>
+		</div>
+		<button class="btn gap-2" onclick={back}>
+			<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>
 
 <!-- Alerta de sucesso/erro -->
 {#if notice}
-  <div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
-    {#if notice.kind === "success"}
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-    {:else}
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-      </svg>
-    {/if}
-    <span class="font-semibold">{notice.text}</span>
-    <button class="btn btn-sm btn-ghost" onclick={() => notice = null} aria-label="Fechar alerta">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-      </svg>
-    </button>
-  </div>
+	<div
+		class="alert mb-6 shadow-lg"
+		class:alert-success={notice.kind === 'success'}
+		class:alert-error={notice.kind === 'error'}
+	>
+		{#if notice.kind === 'success'}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				<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>
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+				/>
+			</svg>
+		{/if}
+		<span class="font-semibold">{notice.text}</span>
+		<button class="btn btn-sm btn-ghost" onclick={() => (notice = null)} aria-label="Fechar alerta">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M6 18L18 6M6 6l12 12"
+				/>
+			</svg>
+		</button>
+	</div>
 {/if}
 
 <!-- Card de Filtros -->
-<div class="card bg-base-100 shadow-xl mb-6">
-  <div class="card-body">
-    <div class="flex items-center justify-between mb-4">
-      <h2 class="card-title text-lg">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-        </svg>
-        Filtros de Busca
-      </h2>
-      {#if filtro}
-        <button class="btn btn-sm btn-ghost gap-2" onclick={limparFiltro}>
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-          Limpar Filtros
-        </button>
-      {/if}
-    </div>
-    
-    <div class="form-control w-full">
-      <label class="label" for="func_excluir_busca">
-        <span class="label-text font-semibold">Buscar por Nome, CPF ou Matrícula</span>
-      </label>
-      <input 
-        id="func_excluir_busca" 
-        type="text"
-        placeholder="Digite para filtrar..." 
-        class="input input-bordered input-primary w-full focus:input-primary" 
-        bind:value={filtro} 
-      />
-      <div class="label">
-        <span class="label-text-alt text-base-content/60">
-          {filtered.length} funcionário{filtered.length !== 1 ? 's' : ''} encontrado{filtered.length !== 1 ? 's' : ''}
-        </span>
-      </div>
-    </div>
-  </div>
+<div class="card bg-base-100 mb-6 shadow-xl">
+	<div class="card-body">
+		<div class="mb-4 flex items-center justify-between">
+			<h2 class="card-title text-lg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-primary h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+					/>
+				</svg>
+				Filtros de Busca
+			</h2>
+			{#if filtro}
+				<button class="btn btn-sm btn-ghost gap-2" onclick={limparFiltro}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+					Limpar Filtros
+				</button>
+			{/if}
+		</div>
+
+		<div class="form-control w-full">
+			<label class="label" for="func_excluir_busca">
+				<span class="label-text font-semibold">Buscar por Nome, CPF ou Matrícula</span>
+			</label>
+			<input
+				id="func_excluir_busca"
+				type="text"
+				placeholder="Digite para filtrar..."
+				class="input input-bordered input-primary focus:input-primary w-full"
+				bind:value={filtro}
+			/>
+			<div class="label">
+				<span class="label-text-alt text-base-content/60">
+					{filtered.length} funcionário{filtered.length !== 1 ? 's' : ''} encontrado{filtered.length !==
+					1
+						? 's'
+						: ''}
+				</span>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Tabela de Funcionários -->
 <div class="card bg-base-100 shadow-xl">
-  <div class="card-body">
-    <h2 class="card-title text-lg mb-4">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
-      Lista de Funcionários
-    </h2>
+	<div class="card-body">
+		<h2 class="card-title mb-4 text-lg">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="text-primary 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 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>
+			Lista de Funcionários
+		</h2>
 
-    {#if list.length === 0}
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="p-4 bg-base-200 rounded-full mb-4">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-base-content/30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
-          </svg>
-        </div>
-        <p class="text-lg font-semibold text-base-content/70">Nenhum funcionário cadastrado</p>
-        <p class="text-sm text-base-content/50 mt-2">Cadastre funcionários para gerenciá-los aqui</p>
-      </div>
-    {:else if filtered.length === 0}
-      <div class="flex flex-col items-center justify-center py-12 text-center">
-        <div class="p-4 bg-base-200 rounded-full mb-4">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-base-content/30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-          </svg>
-        </div>
-        <p class="text-lg font-semibold text-base-content/70">Nenhum resultado encontrado</p>
-        <p class="text-sm text-base-content/50 mt-2">Tente ajustar os filtros de busca</p>
-        <button class="btn btn-primary btn-sm mt-4" onclick={limparFiltro}>Limpar Filtros</button>
-      </div>
-    {:else}
-      <div class="overflow-x-auto">
-        <table class="table table-zebra">
-          <thead class="bg-base-200 sticky top-0 z-10">
-            <tr>
-              <th class="text-base">Nome</th>
-              <th class="text-base">CPF</th>
-              <th class="text-base">Matrícula</th>
-              <th class="text-base text-center">Ações</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each filtered as f}
-              <tr class="hover">
-                <td class="font-semibold">{f.nome}</td>
-                <td>{f.cpf}</td>
-                <td><span class="badge badge-ghost">{f.matricula}</span></td>
-                <td class="text-center">
-                  <button 
-                    class="btn btn-error btn-sm gap-2"
-                    onclick={() => openDeleteModal(f._id, f.nome, f.cpf, f.matricula)}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                    </svg>
-                    Excluir
-                  </button>
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {/if}
-  </div>
+		{#if list.length === 0}
+			<div class="flex flex-col items-center justify-center py-12 text-center">
+				<div class="bg-base-200 mb-4 rounded-full p-4">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-base-content/30 h-12 w-12"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+						/>
+					</svg>
+				</div>
+				<p class="text-base-content/70 text-lg font-semibold">Nenhum funcionário cadastrado</p>
+				<p class="text-base-content/50 mt-2 text-sm">
+					Cadastre funcionários para gerenciá-los aqui
+				</p>
+			</div>
+		{:else if filtered.length === 0}
+			<div class="flex flex-col items-center justify-center py-12 text-center">
+				<div class="bg-base-200 mb-4 rounded-full p-4">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-base-content/30 h-12 w-12"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+						/>
+					</svg>
+				</div>
+				<p class="text-base-content/70 text-lg font-semibold">Nenhum resultado encontrado</p>
+				<p class="text-base-content/50 mt-2 text-sm">Tente ajustar os filtros de busca</p>
+				<button class="btn btn-primary btn-sm mt-4" onclick={limparFiltro}>Limpar Filtros</button>
+			</div>
+		{:else}
+			<div class="overflow-x-auto">
+				<table class="table-zebra table">
+					<thead class="bg-base-200 sticky top-0 z-10">
+						<tr>
+							<th class="text-base">Nome</th>
+							<th class="text-base">CPF</th>
+							<th class="text-base">Matrícula</th>
+							<th class="text-center text-base">Ações</th>
+						</tr>
+					</thead>
+					<tbody>
+						{#each filtered as f}
+							<tr class="hover">
+								<td class="font-semibold">{f.nome}</td>
+								<td>{f.cpf}</td>
+								<td><span class="badge badge-ghost">{f.matricula}</span></td>
+								<td class="text-center">
+									<button
+										class="btn btn-error btn-sm gap-2"
+										onclick={() => openDeleteModal(f._id, f.nome, f.cpf, f.matricula)}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+											/>
+										</svg>
+										Excluir
+									</button>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		{/if}
+	</div>
 </div>
 
 <!-- Modal de Confirmação de Exclusão -->
 <dialog id="delete_modal_func_excluir" class="modal">
-  <div class="modal-box max-w-md">
-    <h3 class="font-bold text-2xl mb-4 flex items-center gap-2 text-error">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-      </svg>
-      Confirmar Exclusão
-    </h3>
-    
-    <div class="alert alert-warning mb-4">
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-      </svg>
-      <div>
-        <span class="font-bold">Atenção!</span>
-        <p class="text-sm">Esta ação não pode ser desfeita!</p>
-      </div>
-    </div>
-    
-    {#if toDelete}
-      <div class="bg-base-200 rounded-lg p-4 mb-4">
-        <p class="text-sm text-base-content/70 mb-3">Você está prestes a excluir o seguinte funcionário:</p>
-        <div class="space-y-2">
-          <div class="flex items-center gap-2">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-            </svg>
-            <strong class="text-error text-lg">{toDelete.nome}</strong>
-          </div>
-          <div class="flex items-center gap-2 text-sm">
-            <span class="text-base-content/60">CPF:</span>
-            <span class="font-semibold">{toDelete.cpf}</span>
-          </div>
-          <div class="flex items-center gap-2 text-sm">
-            <span class="text-base-content/60">Matrícula:</span>
-            <span class="badge badge-ghost">{toDelete.matricula}</span>
-          </div>
-        </div>
-      </div>
-      
-      <p class="text-center text-sm text-base-content/70 mb-6">
-        Tem certeza que deseja continuar?
-      </p>
-    {/if}
-    
-    <div class="modal-action justify-between">
-      <button 
-        class="btn btn-ghost gap-2" 
-        onclick={closeDeleteModal} 
-        disabled={deletingId !== null}
-      >
-        <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="M6 18L18 6M6 6l12 12" />
-        </svg>
-        Cancelar
-      </button>
-      <button 
-        class="btn btn-error gap-2" 
-        onclick={confirmDelete} 
-        disabled={deletingId !== null}
-      >
-        {#if deletingId}
-          <span class="loading loading-spinner loading-sm"></span>
-          Excluindo...
-        {:else}
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-          </svg>
-          Confirmar Exclusão
-        {/if}
-      </button>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
+	<div class="modal-box max-w-md">
+		<h3 class="text-error mb-4 flex items-center gap-2 text-2xl font-bold">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-7 w-7"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+				/>
+			</svg>
+			Confirmar Exclusão
+		</h3>
+
+		<div class="alert alert-warning mb-4">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+				/>
+			</svg>
+			<div>
+				<span class="font-bold">Atenção!</span>
+				<p class="text-sm">Esta ação não pode ser desfeita!</p>
+			</div>
+		</div>
+
+		{#if toDelete}
+			<div class="bg-base-200 mb-4 rounded-lg p-4">
+				<p class="text-base-content/70 mb-3 text-sm">
+					Você está prestes a excluir o seguinte funcionário:
+				</p>
+				<div class="space-y-2">
+					<div class="flex items-center gap-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+							/>
+						</svg>
+						<strong class="text-error text-lg">{toDelete.nome}</strong>
+					</div>
+					<div class="flex items-center gap-2 text-sm">
+						<span class="text-base-content/60">CPF:</span>
+						<span class="font-semibold">{toDelete.cpf}</span>
+					</div>
+					<div class="flex items-center gap-2 text-sm">
+						<span class="text-base-content/60">Matrícula:</span>
+						<span class="badge badge-ghost">{toDelete.matricula}</span>
+					</div>
+				</div>
+			</div>
+
+			<p class="text-base-content/70 mb-6 text-center text-sm">Tem certeza que deseja continuar?</p>
+		{/if}
+
+		<div class="modal-action justify-between">
+			<button class="btn gap-2" onclick={closeDeleteModal} disabled={deletingId !== null}>
+				<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="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+				Cancelar
+			</button>
+			<button class="btn btn-error gap-2" onclick={confirmDelete} disabled={deletingId !== null}>
+				{#if deletingId}
+					<span class="loading loading-spinner loading-sm"></span>
+					Excluindo...
+				{:else}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+						/>
+					</svg>
+					Confirmar Exclusão
+				{/if}
+			</button>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
 </dialog>
-
-
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/+page.svelte
index 3ea6688..76a2f2c 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/+page.svelte
@@ -1,359 +1,440 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { onMount } from "svelte";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { onMount } from 'svelte';
 
-  const client = useConvexClient();
-  let isLoading = true;
-  let list: Array<any> = [];
-  let filtroNome = "";
-  let filtroTipo: "" | "cargo_comissionado" | "funcao_gratificada" = "";
-  let filtroDescricao = "";
-  let filtered: Array<any> = [];
-  let notice: { kind: "success" | "error"; text: string } | null = null;
-  $: needsScroll = filtered.length > 8;
-  let openMenuId: string | null = null;
-  function toggleMenu(id: string) {
-    openMenuId = openMenuId === id ? null : id;
-  }
-  $: filtered = (list ?? []).filter((s) => {
-    const nome = (filtroNome || "").toLowerCase();
-    const desc = (filtroDescricao || "").toLowerCase();
-    const okNome = !nome || (s.nome || "").toLowerCase().includes(nome);
-    const okDesc = !desc || (s.descricao || "").toLowerCase().includes(desc);
-    const okTipo = !filtroTipo || s.tipo === filtroTipo;
-    return okNome && okDesc && okTipo;
-  });
-  onMount(async () => {
-    try {
-      list = await client.query(api.simbolos.getAll, {} as any);
-    } finally {
-      isLoading = false;
-    }
-  });
+	const client = useConvexClient();
+	let isLoading = true;
+	let list: Array<any> = [];
+	let filtroNome = '';
+	let filtroTipo: '' | 'cargo_comissionado' | 'funcao_gratificada' = '';
+	let filtroDescricao = '';
+	let filtered: Array<any> = [];
+	let notice: { kind: 'success' | 'error'; text: string } | null = null;
+	$: needsScroll = filtered.length > 8;
+	let openMenuId: string | null = null;
+	function toggleMenu(id: string) {
+		openMenuId = openMenuId === id ? null : id;
+	}
+	$: filtered = (list ?? []).filter((s) => {
+		const nome = (filtroNome || '').toLowerCase();
+		const desc = (filtroDescricao || '').toLowerCase();
+		const okNome = !nome || (s.nome || '').toLowerCase().includes(nome);
+		const okDesc = !desc || (s.descricao || '').toLowerCase().includes(desc);
+		const okTipo = !filtroTipo || s.tipo === filtroTipo;
+		return okNome && okDesc && okTipo;
+	});
+	onMount(async () => {
+		try {
+			list = await client.query(api.simbolos.getAll, {} as any);
+		} finally {
+			isLoading = false;
+		}
+	});
 
-  let deletingId: Id<"simbolos"> | null = null;
-  let simboloToDelete: { id: Id<"simbolos">; nome: string } | null = null;
+	let deletingId: Id<'simbolos'> | null = null;
+	let simboloToDelete: { id: Id<'simbolos'>; nome: string } | null = null;
 
-  function openDeleteModal(id: Id<"simbolos">, nome: string) {
-    simboloToDelete = { id, nome };
-    (document.getElementById("delete_modal") as HTMLDialogElement)?.showModal();
-  }
+	function openDeleteModal(id: Id<'simbolos'>, nome: string) {
+		simboloToDelete = { id, nome };
+		(document.getElementById('delete_modal') as HTMLDialogElement)?.showModal();
+	}
 
-  function closeDeleteModal() {
-    simboloToDelete = null;
-    (document.getElementById("delete_modal") as HTMLDialogElement)?.close();
-  }
+	function closeDeleteModal() {
+		simboloToDelete = null;
+		(document.getElementById('delete_modal') as HTMLDialogElement)?.close();
+	}
 
-  async function confirmDelete() {
-    if (!simboloToDelete) return;
-    try {
-      deletingId = simboloToDelete.id;
-      await client.mutation(api.simbolos.remove, { id: simboloToDelete.id });
-      // reload list
-      list = await client.query(api.simbolos.getAll, {} as any);
-      notice = { kind: "success", text: "Símbolo excluído com sucesso." };
-      closeDeleteModal();
-    } catch (error) {
-      notice = { kind: "error", text: "Erro ao excluir símbolo." };
-    } finally {
-      deletingId = null;
-    }
-  }
+	async function confirmDelete() {
+		if (!simboloToDelete) return;
+		try {
+			deletingId = simboloToDelete.id;
+			await client.mutation(api.simbolos.remove, { id: simboloToDelete.id });
+			// reload list
+			list = await client.query(api.simbolos.getAll, {} as any);
+			notice = { kind: 'success', text: 'Símbolo excluído com sucesso.' };
+			closeDeleteModal();
+		} catch (error) {
+			notice = { kind: 'error', text: 'Erro ao excluir símbolo.' };
+		} finally {
+			deletingId = null;
+		}
+	}
 
-  function formatMoney(value: string) {
-    const num = parseFloat(value);
-    if (isNaN(num)) return "R$ 0,00";
-    return `R$ ${num.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-  }
+	function formatMoney(value: string) {
+		const num = parseFloat(value);
+		if (isNaN(num)) return 'R$ 0,00';
+		return `R$ ${num.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+	}
 
-  function getTipoLabel(tipo: string) {
-    return tipo === "cargo_comissionado" ? "Cargo Comissionado" : "Função Gratificada";
-  }
+	function getTipoLabel(tipo: string) {
+		return tipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada';
+	}
 </script>
 
 <main class="container mx-auto px-4 py-4">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-      <li>Símbolos</li>
-    </ul>
-  </div>
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
+			<li>Símbolos</li>
+		</ul>
+	</div>
 
-  <!-- Cabeçalho -->
-  <div class="mb-6">
-    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-green-500/20 rounded-xl">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-primary">Símbolos Cadastrados</h1>
-          <p class="text-base-content/70">Gerencie cargos comissionados e funções gratificadas</p>
-        </div>
-      </div>
-      <a href="/recursos-humanos/simbolos/cadastro" class="btn btn-primary btn-lg gap-2">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
-        </svg>
-        Novo Símbolo
-      </a>
-    </div>
-  </div>
+	<!-- Cabeçalho -->
+	<div class="mb-6">
+		<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-green-500/20 p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-8 w-8 text-green-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Símbolos Cadastrados</h1>
+					<p class="text-base-content/70">Gerencie cargos comissionados e funções gratificadas</p>
+				</div>
+			</div>
+			<a href="/recursos-humanos/simbolos/cadastro" class="btn btn-primary btn-lg gap-2">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fill-rule="evenodd"
+						d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+				Novo Símbolo
+			</a>
+		</div>
+	</div>
 
-  <!-- Alertas -->
-  {#if notice}
-    <div class="alert mb-6 shadow-lg" class:alert-success={notice.kind === "success"} class:alert-error={notice.kind === "error"}>
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-        {#if notice.kind === "success"}
-          <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" />
-        {:else}
-          <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" />
-        {/if}
-      </svg>
-      <span>{notice.text}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if notice}
+		<div
+			class="alert mb-6 shadow-lg"
+			class:alert-success={notice.kind === 'success'}
+			class:alert-error={notice.kind === 'error'}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if notice.kind === 'success'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span>{notice.text}</span>
+		</div>
+	{/if}
 
-  <!-- Filtros -->
-  <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
-      <h2 class="card-title text-lg mb-4">
-        <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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-        </svg>
-        Filtros de Pesquisa
-      </h2>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="form-control">
-          <label class="label" for="symbol_nome">
-            <span class="label-text font-semibold">Nome do Símbolo</span>
-          </label>
-          <input 
-            id="symbol_nome" 
-            class="input input-bordered focus:input-primary" 
-            placeholder="Buscar por nome..."
-            bind:value={filtroNome} 
-          />
-        </div>
-        <div class="form-control">
-          <label class="label" for="symbol_tipo">
-            <span class="label-text font-semibold">Tipo</span>
-          </label>
-          <select id="symbol_tipo" class="select select-bordered focus:select-primary" bind:value={filtroTipo}>
-            <option value="">Todos os tipos</option>
-            <option value="cargo_comissionado">Cargo Comissionado</option>
-            <option value="funcao_gratificada">Função Gratificada</option>
-          </select>
-        </div>
-        <div class="form-control">
-          <label class="label" for="symbol_desc">
-            <span class="label-text font-semibold">Descrição</span>
-          </label>
-          <input 
-            id="symbol_desc" 
-            class="input input-bordered focus:input-primary" 
-            placeholder="Buscar na descrição..."
-            bind:value={filtroDescricao} 
-          />
-        </div>
-      </div>
-      {#if filtroNome || filtroTipo || filtroDescricao}
-        <div class="mt-4">
-          <button 
-            class="btn btn-ghost btn-sm gap-2"
-            onclick={() => {
-              filtroNome = "";
-              filtroTipo = "";
-              filtroDescricao = "";
-            }}
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-            Limpar Filtros
-          </button>
-        </div>
-      {/if}
-    </div>
-  </div>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-xl">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				<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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+					/>
+				</svg>
+				Filtros de Pesquisa
+			</h2>
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+				<div class="form-control">
+					<label class="label" for="symbol_nome">
+						<span class="label-text font-semibold">Nome do Símbolo</span>
+					</label>
+					<input
+						id="symbol_nome"
+						class="input input-bordered focus:input-primary"
+						placeholder="Buscar por nome..."
+						bind:value={filtroNome}
+					/>
+				</div>
+				<div class="form-control">
+					<label class="label" for="symbol_tipo">
+						<span class="label-text font-semibold">Tipo</span>
+					</label>
+					<select
+						id="symbol_tipo"
+						class="select select-bordered focus:select-primary"
+						bind:value={filtroTipo}
+					>
+						<option value="">Todos os tipos</option>
+						<option value="cargo_comissionado">Cargo Comissionado</option>
+						<option value="funcao_gratificada">Função Gratificada</option>
+					</select>
+				</div>
+				<div class="form-control">
+					<label class="label" for="symbol_desc">
+						<span class="label-text font-semibold">Descrição</span>
+					</label>
+					<input
+						id="symbol_desc"
+						class="input input-bordered focus:input-primary"
+						placeholder="Buscar na descrição..."
+						bind:value={filtroDescricao}
+					/>
+				</div>
+			</div>
+			{#if filtroNome || filtroTipo || filtroDescricao}
+				<div class="mt-4">
+					<button
+						class="btn btn-sm gap-2"
+						onclick={() => {
+							filtroNome = '';
+							filtroTipo = '';
+							filtroDescricao = '';
+						}}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+						Limpar Filtros
+					</button>
+				</div>
+			{/if}
+		</div>
+	</div>
 
-  {#if isLoading}
-    <div class="flex justify-center items-center py-12">
-      <span class="loading loading-spinner loading-lg"></span>
-    </div>
-  {:else}
-    <!-- Tabela de Símbolos -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body p-0">
-        <div class="overflow-x-auto">
-          <div class="overflow-y-auto" style="max-height: {filtered.length > 8 ? '600px' : 'none'};">
-            <table class="table table-zebra w-full">
-              <thead class="sticky top-0 bg-base-200 z-10">
-                <tr>
-                  <th class="font-bold">Nome</th>
-                  <th class="font-bold">Tipo</th>
-                  <th class="font-bold">Valor Referência</th>
-                  <th class="font-bold">Valor Vencimento</th>
-                  <th class="font-bold">Valor Total</th>
-                  <th class="font-bold">Descrição</th>
-                  <th class="text-right font-bold">Ações</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#if filtered.length > 0}
-                  {#each filtered as simbolo}
-                    <tr class="hover">
-                      <td class="font-medium">{simbolo.nome}</td>
-                      <td>
-                        <span
-                          class="badge"
-                          class:badge-primary={simbolo.tipo === "cargo_comissionado"}
-                          class:badge-secondary={simbolo.tipo === "funcao_gratificada"}
-                        >
-                          {getTipoLabel(simbolo.tipo)}
-                        </span>
-                      </td>
-                      <td>{simbolo.repValor ? formatMoney(simbolo.repValor) : "—"}</td>
-                      <td>{simbolo.vencValor ? formatMoney(simbolo.vencValor) : "—"}</td>
-                      <td class="font-semibold">{formatMoney(simbolo.valor)}</td>
-                      <td class="max-w-xs truncate">{simbolo.descricao}</td>
-                      <td class="text-right">
-                <div class="dropdown dropdown-end" class:dropdown-open={openMenuId === simbolo._id}>
-                  <button type="button" class="btn btn-ghost btn-sm" onclick={() => toggleMenu(simbolo._id)}>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                    >
-                      <path
-                        d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
-                      />
-                    </svg>
-                  </button>
-                  <ul class="dropdown-content menu bg-base-100 rounded-box z-10 w-52 p-2 shadow-lg border border-base-300">
-                    <li>
-                      <a href={"/recursos-humanos/simbolos/" + simbolo._id + "/editar"}>
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
-                          />
-                        </svg>
-                        Editar
-                      </a>
-                    </li>
-                    <li>
-                      <button type="button" onclick={() => openDeleteModal(simbolo._id, simbolo.nome)} class="text-error">
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          viewBox="0 0 20 20"
-                          fill="currentColor"
-                        >
-                          <path
-                            fill-rule="evenodd"
-                            d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-                            clip-rule="evenodd"
-                          />
-                        </svg>
-                        Excluir
-                      </button>
-                    </li>
-                  </ul>
-                        </div>
-                      </td>
-                    </tr>
-                  {/each}
-                {:else}
-                  <tr>
-                    <td colspan="7" class="text-center opacity-70 py-8">Nenhum símbolo encontrado com os filtros atuais.</td>
-                  </tr>
-                {/if}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Informação sobre resultados -->
-    <div class="mt-4 text-sm text-base-content/70 text-center">
-      Exibindo {filtered.length} de {list.length} símbolo(s)
-    </div>
-  {/if}
+	{#if isLoading}
+		<div class="flex items-center justify-center py-12">
+			<span class="loading loading-spinner loading-lg"></span>
+		</div>
+	{:else}
+		<!-- Tabela de Símbolos -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body p-0">
+				<div class="overflow-x-auto">
+					<div
+						class="overflow-y-auto"
+						style="max-height: {filtered.length > 8 ? '600px' : 'none'};"
+					>
+						<table class="table-zebra table w-full">
+							<thead class="bg-base-200 sticky top-0 z-10">
+								<tr>
+									<th class="font-bold">Nome</th>
+									<th class="font-bold">Tipo</th>
+									<th class="font-bold">Valor Referência</th>
+									<th class="font-bold">Valor Vencimento</th>
+									<th class="font-bold">Valor Total</th>
+									<th class="font-bold">Descrição</th>
+									<th class="text-right font-bold">Ações</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#if filtered.length > 0}
+									{#each filtered as simbolo}
+										<tr class="hover">
+											<td class="font-medium">{simbolo.nome}</td>
+											<td>
+												<span
+													class="badge"
+													class:badge-primary={simbolo.tipo === 'cargo_comissionado'}
+													class:badge-secondary={simbolo.tipo === 'funcao_gratificada'}
+												>
+													{getTipoLabel(simbolo.tipo)}
+												</span>
+											</td>
+											<td>{simbolo.repValor ? formatMoney(simbolo.repValor) : '—'}</td>
+											<td>{simbolo.vencValor ? formatMoney(simbolo.vencValor) : '—'}</td>
+											<td class="font-semibold">{formatMoney(simbolo.valor)}</td>
+											<td class="max-w-xs truncate">{simbolo.descricao}</td>
+											<td class="text-right">
+												<div
+													class="dropdown dropdown-end"
+													class:dropdown-open={openMenuId === simbolo._id}
+												>
+													<button
+														type="button"
+														class="btn btn-sm"
+														onclick={() => toggleMenu(simbolo._id)}
+													>
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															class="h-5 w-5"
+															viewBox="0 0 20 20"
+															fill="currentColor"
+														>
+															<path
+																d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
+															/>
+														</svg>
+													</button>
+													<ul
+														class="dropdown-content menu bg-base-100 rounded-box border-base-300 z-10 w-52 border p-2 shadow-lg"
+													>
+														<li>
+															<a href={'/recursos-humanos/simbolos/' + simbolo._id + '/editar'}>
+																<svg
+																	xmlns="http://www.w3.org/2000/svg"
+																	class="h-4 w-4"
+																	viewBox="0 0 20 20"
+																	fill="currentColor"
+																>
+																	<path
+																		d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
+																	/>
+																</svg>
+																Editar
+															</a>
+														</li>
+														<li>
+															<button
+																type="button"
+																onclick={() => openDeleteModal(simbolo._id, simbolo.nome)}
+																class="text-error"
+															>
+																<svg
+																	xmlns="http://www.w3.org/2000/svg"
+																	class="h-4 w-4"
+																	viewBox="0 0 20 20"
+																	fill="currentColor"
+																>
+																	<path
+																		fill-rule="evenodd"
+																		d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+																		clip-rule="evenodd"
+																	/>
+																</svg>
+																Excluir
+															</button>
+														</li>
+													</ul>
+												</div>
+											</td>
+										</tr>
+									{/each}
+								{:else}
+									<tr>
+										<td colspan="7" class="py-8 text-center opacity-70"
+											>Nenhum símbolo encontrado com os filtros atuais.</td
+										>
+									</tr>
+								{/if}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Informação sobre resultados -->
+		<div class="text-base-content/70 mt-4 text-center text-sm">
+			Exibindo {filtered.length} de {list.length} símbolo(s)
+		</div>
+	{/if}
 </main>
 
 <!-- Modal de Confirmação de Exclusão -->
 <dialog id="delete_modal" class="modal">
-  <div class="modal-box">
-    <h3 class="font-bold text-lg mb-4">Confirmar Exclusão</h3>
-    <div class="alert alert-warning mb-4">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-        />
-      </svg>
-      <span>Esta ação não pode ser desfeita!</span>
-    </div>
-    {#if simboloToDelete}
-      <p class="py-2">
-        Tem certeza que deseja excluir o símbolo <strong class="text-error"
-          >{simboloToDelete.nome}</strong
-        >?
-      </p>
-    {/if}
-    <div class="modal-action">
-      <form method="dialog" class="flex gap-2">
-        <button class="btn btn-ghost" onclick={closeDeleteModal} type="button">
-          Cancelar
-        </button>
-        <button
-          class="btn btn-error"
-          onclick={confirmDelete}
-          disabled={deletingId !== null}
-          type="button"
-        >
-          {#if deletingId}
-            <span class="loading loading-spinner loading-sm"></span>
-            Excluindo...
-          {:else}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
-                clip-rule="evenodd"
-              />
-            </svg>
-            Confirmar Exclusão
-          {/if}
-        </button>
-      </form>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button>close</button>
-  </form>
+	<div class="modal-box">
+		<h3 class="mb-4 text-lg font-bold">Confirmar Exclusão</h3>
+		<div class="alert alert-warning mb-4">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+				/>
+			</svg>
+			<span>Esta ação não pode ser desfeita!</span>
+		</div>
+		{#if simboloToDelete}
+			<p class="py-2">
+				Tem certeza que deseja excluir o símbolo <strong class="text-error"
+					>{simboloToDelete.nome}</strong
+				>?
+			</p>
+		{/if}
+		<div class="modal-action">
+			<form method="dialog" class="flex gap-2">
+				<button class="btn" onclick={closeDeleteModal} type="button"> Cancelar </button>
+				<button
+					class="btn btn-error"
+					onclick={confirmDelete}
+					disabled={deletingId !== null}
+					type="button"
+				>
+					{#if deletingId}
+						<span class="loading loading-spinner loading-sm"></span>
+						Excluindo...
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+						Confirmar Exclusão
+					{/if}
+				</button>
+			</form>
+		</div>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
 </dialog>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/[simboloId]/editar/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/[simboloId]/editar/+page.svelte
index 59859f3..1b6960a 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/[simboloId]/editar/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/[simboloId]/editar/+page.svelte
@@ -1,431 +1,415 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { createForm } from "@tanstack/svelte-form";
-  import z from "zod";
-  import { Save } from "lucide-svelte";
-  import { goto } from "$app/navigation";
-  import { page } from "$app/stores";
-  import type { SimboloTipo } from "@sgse-app/backend/convex/schema";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { createForm } from '@tanstack/svelte-form';
+	import z from 'zod';
+	import { Save } from 'lucide-svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import type { SimboloTipo } from '@sgse-app/backend/convex/schema';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
-  const simboloId = $page.params.simboloId as Id<"simbolos">;
+	const client = useConvexClient();
+	const simboloId = $page.params.simboloId as Id<'simbolos'>;
 
-  const simboloQuery = useQuery(api.simbolos.getById, { id: simboloId });
+	const simboloQuery = useQuery(api.simbolos.getById, { id: simboloId });
 
-  let tipo = $state<SimboloTipo>("cargo_comissionado");
-  let isFormInitialized = $state(false);
+	let tipo = $state<SimboloTipo>('cargo_comissionado');
+	let isFormInitialized = $state(false);
 
-  const schema = z.object({
-    nome: z.string().min(1),
-    refValor: z.string().optional(),
-    vencValor: z.string().optional(),
-    descricao: z.string().min(1),
-    tipo: z.enum(["cargo_comissionado", "funcao_gratificada"]),
-    valor: z.string().optional(),
-  });
+	const schema = z.object({
+		nome: z.string().min(1),
+		refValor: z.string().optional(),
+		vencValor: z.string().optional(),
+		descricao: z.string().min(1),
+		tipo: z.enum(['cargo_comissionado', 'funcao_gratificada']),
+		valor: z.string().optional()
+	});
 
-  function formatCurrencyBR(raw: string): string {
-    const digits = (raw || "").replace(/\D/g, "");
-    if (!digits) return "";
-    const number = parseInt(digits, 10);
-    const cents = (number / 100).toFixed(2);
-    const [intPart, decPart] = cents.split(".");
-    const intWithThousands = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    return `${intWithThousands},${decPart}`;
-  }
+	function formatCurrencyBR(raw: string): string {
+		const digits = (raw || '').replace(/\D/g, '');
+		if (!digits) return '';
+		const number = parseInt(digits, 10);
+		const cents = (number / 100).toFixed(2);
+		const [intPart, decPart] = cents.split('.');
+		const intWithThousands = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+		return `${intWithThousands},${decPart}`;
+	}
 
-  function unmaskCurrencyToDotDecimal(masked: string): string {
-    if (!masked) return "";
-    const digits = masked.replace(/\D/g, "");
-    if (!digits) return "";
-    const value = (parseInt(digits, 10) / 100).toFixed(2);
-    return value;
-  }
+	function unmaskCurrencyToDotDecimal(masked: string): string {
+		if (!masked) return '';
+		const digits = masked.replace(/\D/g, '');
+		if (!digits) return '';
+		const value = (parseInt(digits, 10) / 100).toFixed(2);
+		return value;
+	}
 
-  function formatDotDecimalToBR(value: string): string {
-    if (!value) return "";
-    const [intPart, decRaw] = value.split(".");
-    const intDigits = (intPart || "0").replace(/\D/g, "");
-    const intWithThousands = intDigits.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    const decPart = (decRaw ?? "00").padEnd(2, "0").slice(0, 2);
-    return `${intWithThousands},${decPart}`;
-  }
+	function formatDotDecimalToBR(value: string): string {
+		if (!value) return '';
+		const [intPart, decRaw] = value.split('.');
+		const intDigits = (intPart || '0').replace(/\D/g, '');
+		const intWithThousands = intDigits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+		const decPart = (decRaw ?? '00').padEnd(2, '0').slice(0, 2);
+		return `${intWithThousands},${decPart}`;
+	}
 
-  let notice = $state<{ kind: "success" | "error"; text: string } | null>(null);
-  
-  function getTotalPreview(): string {
-    if (tipo !== "cargo_comissionado") return "";
-    const r = unmaskCurrencyToDotDecimal(form.getFieldValue("refValor"));
-    const v = unmaskCurrencyToDotDecimal(form.getFieldValue("vencValor"));
-    if (!r || !v) return "";
-    const sum = (Number(r) + Number(v)).toFixed(2);
-    return formatDotDecimalToBR(sum);
-  }
+	let notice = $state<{ kind: 'success' | 'error'; text: string } | null>(null);
 
-  const form = createForm(() => ({
-    onSubmit: async ({ value }) => {
-      const isCargo = value.tipo === "cargo_comissionado";
-      const payload = {
-        id: simboloId,
-        nome: value.nome,
-        refValor: isCargo ? unmaskCurrencyToDotDecimal(value.refValor) : "",
-        vencValor: isCargo ? unmaskCurrencyToDotDecimal(value.vencValor) : "",
-        descricao: value.descricao,
-        tipo: value.tipo as SimboloTipo,
-        valor: !isCargo ? unmaskCurrencyToDotDecimal(value.valor) : undefined,
-      };
+	function getTotalPreview(): string {
+		if (tipo !== 'cargo_comissionado') return '';
+		const r = unmaskCurrencyToDotDecimal(form.getFieldValue('refValor'));
+		const v = unmaskCurrencyToDotDecimal(form.getFieldValue('vencValor'));
+		if (!r || !v) return '';
+		const sum = (Number(r) + Number(v)).toFixed(2);
+		return formatDotDecimalToBR(sum);
+	}
 
-      try {
-        await client.mutation(api.simbolos.update, payload);
-        notice = { kind: "success", text: "Símbolo atualizado com sucesso." };
-        setTimeout(() => goto("/recursos-humanos/simbolos"), 600);
-      } catch (error) {
-        console.error("erro ao atualizar símbolo", error);
-        notice = { kind: "error", text: "Erro ao atualizar símbolo." };
-      }
-    },
-    defaultValues: {
-      nome: "",
-      refValor: "",
-      vencValor: "",
-      descricao: "",
-      tipo: "cargo_comissionado",
-      valor: "",
-    },
-  }));
+	const form = createForm(() => ({
+		onSubmit: async ({ value }) => {
+			const isCargo = value.tipo === 'cargo_comissionado';
+			const payload = {
+				id: simboloId,
+				nome: value.nome,
+				refValor: isCargo ? unmaskCurrencyToDotDecimal(value.refValor) : '',
+				vencValor: isCargo ? unmaskCurrencyToDotDecimal(value.vencValor) : '',
+				descricao: value.descricao,
+				tipo: value.tipo as SimboloTipo,
+				valor: !isCargo ? unmaskCurrencyToDotDecimal(value.valor) : undefined
+			};
 
-  // Inicializar o formulário quando os dados estiverem disponíveis
-  $effect(() => {
-    if (simboloQuery.data && !isFormInitialized) {
-      const simbolo = simboloQuery.data;
-      
-      tipo = simbolo.tipo;
-      
-      form.setFieldValue("nome", simbolo.nome);
-      form.setFieldValue("descricao", simbolo.descricao);
-      form.setFieldValue("tipo", simbolo.tipo);
-      
-      if (simbolo.tipo === "cargo_comissionado") {
-        form.setFieldValue("refValor", formatDotDecimalToBR(simbolo.repValor));
-        form.setFieldValue("vencValor", formatDotDecimalToBR(simbolo.vencValor));
-      } else {
-        form.setFieldValue("valor", formatDotDecimalToBR(simbolo.valor));
-      }
-      
-      isFormInitialized = true;
-    }
-  });
+			try {
+				await client.mutation(api.simbolos.update, payload);
+				notice = { kind: 'success', text: 'Símbolo atualizado com sucesso.' };
+				setTimeout(() => goto('/recursos-humanos/simbolos'), 600);
+			} catch (error) {
+				console.error('erro ao atualizar símbolo', error);
+				notice = { kind: 'error', text: 'Erro ao atualizar símbolo.' };
+			}
+		},
+		defaultValues: {
+			nome: '',
+			refValor: '',
+			vencValor: '',
+			descricao: '',
+			tipo: 'cargo_comissionado',
+			valor: ''
+		}
+	}));
+
+	// Inicializar o formulário quando os dados estiverem disponíveis
+	$effect(() => {
+		if (simboloQuery.data && !isFormInitialized) {
+			const simbolo = simboloQuery.data;
+
+			tipo = simbolo.tipo;
+
+			form.setFieldValue('nome', simbolo.nome);
+			form.setFieldValue('descricao', simbolo.descricao);
+			form.setFieldValue('tipo', simbolo.tipo);
+
+			if (simbolo.tipo === 'cargo_comissionado') {
+				form.setFieldValue('refValor', formatDotDecimalToBR(simbolo.repValor));
+				form.setFieldValue('vencValor', formatDotDecimalToBR(simbolo.vencValor));
+			} else {
+				form.setFieldValue('valor', formatDotDecimalToBR(simbolo.valor));
+			}
+
+			isFormInitialized = true;
+		}
+	});
 </script>
 
 {#if simboloQuery.isLoading}
-  <div class="flex justify-center items-center py-12">
-    <span class="loading loading-spinner loading-lg"></span>
-  </div>
+	<div class="flex items-center justify-center py-12">
+		<span class="loading loading-spinner loading-lg"></span>
+	</div>
 {:else if !simboloQuery.data}
-  <div class="alert alert-error max-w-3xl mx-auto m-4">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="stroke-current shrink-0 h-6 w-6"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
-    </svg>
-    <span>Símbolo não encontrado.</span>
-  </div>
+	<div class="alert alert-error m-4 mx-auto max-w-3xl">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-6 w-6 shrink-0 stroke-current"
+			fill="none"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+		<span>Símbolo não encontrado.</span>
+	</div>
 {:else}
-  <form
-    class="max-w-3xl mx-auto p-4"
-    onsubmit={(e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      form.handleSubmit();
-    }}
-  >
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-6">
-        {#if notice}
-          <div
-            class="alert"
-            class:alert-success={notice.kind === "success"}
-            class:alert-error={notice.kind === "error"}
-          >
-            <span>{notice.text}</span>
-          </div>
-        {/if}
-        <div>
-          <h2 class="card-title text-3xl">Editar Símbolo</h2>
-          <p class="opacity-70">
-            Atualize os campos abaixo para editar o símbolo.
-          </p>
-        </div>
+	<form
+		class="mx-auto max-w-3xl p-4"
+		onsubmit={(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			form.handleSubmit();
+		}}
+	>
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-6">
+				{#if notice}
+					<div
+						class="alert"
+						class:alert-success={notice.kind === 'success'}
+						class:alert-error={notice.kind === 'error'}
+					>
+						<span>{notice.text}</span>
+					</div>
+				{/if}
+				<div>
+					<h2 class="card-title text-3xl">Editar Símbolo</h2>
+					<p class="opacity-70">Atualize os campos abaixo para editar o símbolo.</p>
+				</div>
 
-        <form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="nome">
-                <span class="label-text font-medium"
-                  >Símbolo <span class="text-error">*</span></span
-                >
-              </label>
-              <input
-                {name}
-                value={state.value}
-                placeholder="Ex.: DAS-1"
-                class="input input-bordered w-full"
-                autocomplete="off"
-                oninput={(e) => {
-                  const target = e.target as HTMLInputElement;
-                  const value = target.value;
-                  handleChange(value);
-                }}
-                required
-                aria-required="true"
-              />
-              <div class="label">
-                <span class="label-text-alt opacity-60"
-                  >Informe o nome identificador do símbolo.</span
-                >
-              </div>
-            </div>
-          {/snippet}
-        </form.Field>
+				<form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="nome">
+								<span class="label-text font-medium">Símbolo <span class="text-error">*</span></span
+								>
+							</label>
+							<input
+								{name}
+								value={state.value}
+								placeholder="Ex.: DAS-1"
+								class="input input-bordered w-full"
+								autocomplete="off"
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									const value = target.value;
+									handleChange(value);
+								}}
+								required
+								aria-required="true"
+							/>
+							<div class="label">
+								<span class="label-text-alt opacity-60"
+									>Informe o nome identificador do símbolo.</span
+								>
+							</div>
+						</div>
+					{/snippet}
+				</form.Field>
 
-        <form.Field
-          name="descricao"
-          validators={{ onChange: schema.shape.descricao }}
-        >
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="descricao">
-                <span class="label-text font-medium"
-                  >Descrição <span class="text-error">*</span></span
-                >
-              </label>
-              <input
-                {name}
-                value={state.value}
-                placeholder="Ex.: Cargo de Apoio 1"
-                class="input input-bordered w-full"
-                autocomplete="off"
-                oninput={(e) => {
-                  const target = e.target as HTMLInputElement;
-                  const value = target.value;
-                  handleChange(value);
-                }}
-                required
-                aria-required="true"
-              />
-              <div class="label">
-                <span class="label-text-alt opacity-60"
-                  >Descreva brevemente o símbolo.</span
-                >
-              </div>
-            </div>
-          {/snippet}
-        </form.Field>
+				<form.Field name="descricao" validators={{ onChange: schema.shape.descricao }}>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="descricao">
+								<span class="label-text font-medium"
+									>Descrição <span class="text-error">*</span></span
+								>
+							</label>
+							<input
+								{name}
+								value={state.value}
+								placeholder="Ex.: Cargo de Apoio 1"
+								class="input input-bordered w-full"
+								autocomplete="off"
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									const value = target.value;
+									handleChange(value);
+								}}
+								required
+								aria-required="true"
+							/>
+							<div class="label">
+								<span class="label-text-alt opacity-60">Descreva brevemente o símbolo.</span>
+							</div>
+						</div>
+					{/snippet}
+				</form.Field>
 
-        <form.Field
-          name="tipo"
-          validators={{
-            onChange: ({ value }) => (value ? undefined : "Obrigatório"),
-          }}
-        >
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="tipo">
-                <span class="label-text font-medium"
-                  >Tipo <span class="text-error">*</span></span
-                >
-              </label>
-              <select
-                {name}
-                class="select select-bordered w-full"
-                bind:value={tipo}
-                oninput={(e) => {
-                  const target = e.target as HTMLSelectElement;
-                  const value = target.value;
-                  handleChange(value);
-                }}
-                required
-                aria-required="true"
-              >
-                <option value="cargo_comissionado">Cargo comissionado</option>
-                <option value="funcao_gratificada">Função gratificada</option>
-              </select>
-            </div>
-          {/snippet}
-        </form.Field>
+				<form.Field
+					name="tipo"
+					validators={{
+						onChange: ({ value }) => (value ? undefined : 'Obrigatório')
+					}}
+				>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="tipo">
+								<span class="label-text font-medium">Tipo <span class="text-error">*</span></span>
+							</label>
+							<select
+								{name}
+								class="select select-bordered w-full"
+								bind:value={tipo}
+								oninput={(e) => {
+									const target = e.target as HTMLSelectElement;
+									const value = target.value;
+									handleChange(value);
+								}}
+								required
+								aria-required="true"
+							>
+								<option value="cargo_comissionado">Cargo comissionado</option>
+								<option value="funcao_gratificada">Função gratificada</option>
+							</select>
+						</div>
+					{/snippet}
+				</form.Field>
 
-        {#if tipo === "cargo_comissionado"}
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <form.Field
-              name="vencValor"
-              validators={{
-                onChange: ({ value }) =>
-                  form.getFieldValue("tipo") === "cargo_comissionado" && !value
-                    ? "Obrigatório"
-                    : undefined,
-              }}
-            >
-              {#snippet children({ name, state, handleChange })}
-                <div class="form-control">
-                  <label class="label" for="vencValor">
-                    <span class="label-text font-medium"
-                      >Valor de Vencimento <span class="text-error">*</span></span
-                    >
-                  </label>
-                  <input
-                    {name}
-                    value={state.value}
-                    placeholder="Ex.: 1200,00"
-                    class="input input-bordered w-full"
-                    inputmode="decimal"
-                    autocomplete="off"
-                    oninput={(e) => {
-                      const target = e.target as HTMLInputElement;
-                      const formatted = formatCurrencyBR(target.value);
-                      target.value = formatted;
-                      handleChange(formatted);
-                    }}
-                    required
-                    aria-required="true"
-                  />
-                  <div class="label">
-                    <span class="label-text-alt opacity-60"
-                      >Valor efetivo de vencimento.</span
-                    >
-                  </div>
-                </div>
-              {/snippet}
-            </form.Field>
+				{#if tipo === 'cargo_comissionado'}
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<form.Field
+							name="vencValor"
+							validators={{
+								onChange: ({ value }) =>
+									form.getFieldValue('tipo') === 'cargo_comissionado' && !value
+										? 'Obrigatório'
+										: undefined
+							}}
+						>
+							{#snippet children({ name, state, handleChange })}
+								<div class="form-control">
+									<label class="label" for="vencValor">
+										<span class="label-text font-medium"
+											>Valor de Vencimento <span class="text-error">*</span></span
+										>
+									</label>
+									<input
+										{name}
+										value={state.value}
+										placeholder="Ex.: 1200,00"
+										class="input input-bordered w-full"
+										inputmode="decimal"
+										autocomplete="off"
+										oninput={(e) => {
+											const target = e.target as HTMLInputElement;
+											const formatted = formatCurrencyBR(target.value);
+											target.value = formatted;
+											handleChange(formatted);
+										}}
+										required
+										aria-required="true"
+									/>
+									<div class="label">
+										<span class="label-text-alt opacity-60">Valor efetivo de vencimento.</span>
+									</div>
+								</div>
+							{/snippet}
+						</form.Field>
 
-            <form.Field
-              name="refValor"
-              validators={{
-                onChange: ({ value }) =>
-                  form.getFieldValue("tipo") === "cargo_comissionado" && !value
-                    ? "Obrigatório"
-                    : undefined,
-              }}
-            >
-              {#snippet children({ name, state, handleChange })}
-                <div class="form-control">
-                  <label class="label" for="refValor">
-                    <span class="label-text font-medium"
-                      >Valor de Referência <span class="text-error">*</span></span
-                    >
-                  </label>
-                  <input
-                    {name}
-                    value={state.value}
-                    placeholder="Ex.: 1000,00"
-                    class="input input-bordered w-full"
-                    inputmode="decimal"
-                    autocomplete="off"
-                    oninput={(e) => {
-                      const target = e.target as HTMLInputElement;
-                      const formatted = formatCurrencyBR(target.value);
-                      target.value = formatted;
-                      handleChange(formatted);
-                    }}
-                    required
-                    aria-required="true"
-                  />
-                  <div class="label">
-                    <span class="label-text-alt opacity-60"
-                      >Valor base de referência.</span
-                    >
-                  </div>
-                </div>
-              {/snippet}
-            </form.Field>
-          </div>
-          {#if getTotalPreview()}
-            <div class="alert bg-base-200">
-              <span>Total previsto: R$ {getTotalPreview()}</span>
-            </div>
-          {/if}
-        {:else}
-          <form.Field
-            name="valor"
-            validators={{
-              onChange: ({ value }) =>
-                form.getFieldValue("tipo") === "funcao_gratificada" && !value
-                  ? "Obrigatório"
-                  : undefined,
-            }}
-          >
-            {#snippet children({ name, state, handleChange })}
-              <div class="form-control">
-                <label class="label" for="valor">
-                  <span class="label-text font-medium"
-                    >Valor <span class="text-error">*</span></span
-                  >
-                </label>
-                <input
-                  {name}
-                  value={state.value}
-                  placeholder="Ex.: 1.500,00"
-                  class="input input-bordered w-full"
-                  inputmode="decimal"
-                  autocomplete="off"
-                  oninput={(e) => {
-                    const target = e.target as HTMLInputElement;
-                    const formatted = formatCurrencyBR(target.value);
-                    target.value = formatted;
-                    handleChange(formatted);
-                  }}
-                  required
-                  aria-required="true"
-                />
-                <div class="label">
-                  <span class="label-text-alt opacity-60"
-                    >Informe o valor da função gratificada.</span
-                  >
-                </div>
-              </div>
-            {/snippet}
-          </form.Field>
-        {/if}
+						<form.Field
+							name="refValor"
+							validators={{
+								onChange: ({ value }) =>
+									form.getFieldValue('tipo') === 'cargo_comissionado' && !value
+										? 'Obrigatório'
+										: undefined
+							}}
+						>
+							{#snippet children({ name, state, handleChange })}
+								<div class="form-control">
+									<label class="label" for="refValor">
+										<span class="label-text font-medium"
+											>Valor de Referência <span class="text-error">*</span></span
+										>
+									</label>
+									<input
+										{name}
+										value={state.value}
+										placeholder="Ex.: 1000,00"
+										class="input input-bordered w-full"
+										inputmode="decimal"
+										autocomplete="off"
+										oninput={(e) => {
+											const target = e.target as HTMLInputElement;
+											const formatted = formatCurrencyBR(target.value);
+											target.value = formatted;
+											handleChange(formatted);
+										}}
+										required
+										aria-required="true"
+									/>
+									<div class="label">
+										<span class="label-text-alt opacity-60">Valor base de referência.</span>
+									</div>
+								</div>
+							{/snippet}
+						</form.Field>
+					</div>
+					{#if getTotalPreview()}
+						<div class="alert bg-base-200">
+							<span>Total previsto: R$ {getTotalPreview()}</span>
+						</div>
+					{/if}
+				{:else}
+					<form.Field
+						name="valor"
+						validators={{
+							onChange: ({ value }) =>
+								form.getFieldValue('tipo') === 'funcao_gratificada' && !value
+									? 'Obrigatório'
+									: undefined
+						}}
+					>
+						{#snippet children({ name, state, handleChange })}
+							<div class="form-control">
+								<label class="label" for="valor">
+									<span class="label-text font-medium">Valor <span class="text-error">*</span></span
+									>
+								</label>
+								<input
+									{name}
+									value={state.value}
+									placeholder="Ex.: 1.500,00"
+									class="input input-bordered w-full"
+									inputmode="decimal"
+									autocomplete="off"
+									oninput={(e) => {
+										const target = e.target as HTMLInputElement;
+										const formatted = formatCurrencyBR(target.value);
+										target.value = formatted;
+										handleChange(formatted);
+									}}
+									required
+									aria-required="true"
+								/>
+								<div class="label">
+									<span class="label-text-alt opacity-60"
+										>Informe o valor da função gratificada.</span
+									>
+								</div>
+							</div>
+						{/snippet}
+					</form.Field>
+				{/if}
 
-        <form.Subscribe
-          selector={(state) => ({
-            canSubmit: state.canSubmit,
-            isSubmitting: state.isSubmitting,
-          })}
-        >
-          {#snippet children({ canSubmit, isSubmitting })}
-            <div class="card-actions justify-end pt-2">
-              <button
-                type="button"
-                class="btn btn-ghost"
-                disabled={isSubmitting}
-                onclick={() => goto("/recursos-humanos/simbolos")}
-              >
-                Cancelar
-              </button>
-              <button
-                type="submit"
-                class="btn btn-primary"
-                class:loading={isSubmitting}
-                disabled={isSubmitting || !canSubmit}
-              >
-                <Save class="h-5 w-5" />
-                <span>Salvar Alterações</span>
-              </button>
-            </div>
-          {/snippet}
-        </form.Subscribe>
-      </div>
-    </div>
-  </form>
+				<form.Subscribe
+					selector={(state) => ({
+						canSubmit: state.canSubmit,
+						isSubmitting: state.isSubmitting
+					})}
+				>
+					{#snippet children({ canSubmit, isSubmitting })}
+						<div class="card-actions justify-end pt-2">
+							<button
+								type="button"
+								class="btn"
+								disabled={isSubmitting}
+								onclick={() => goto('/recursos-humanos/simbolos')}
+							>
+								Cancelar
+							</button>
+							<button
+								type="submit"
+								class="btn btn-primary"
+								class:loading={isSubmitting}
+								disabled={isSubmitting || !canSubmit}
+							>
+								<Save class="h-5 w-5" />
+								<span>Salvar Alterações</span>
+							</button>
+						</div>
+					{/snippet}
+				</form.Subscribe>
+			</div>
+		</div>
+	</form>
 {/if}
-
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/cadastro/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/cadastro/+page.svelte
index 1396d45..d75fa52 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/cadastro/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/cadastro/+page.svelte
@@ -1,477 +1,539 @@
 <script lang="ts">
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { createForm } from "@tanstack/svelte-form";
-  import z from "zod";
-  import { goto } from "$app/navigation";
-  import type { SimboloTipo } from "@sgse-app/backend/convex/schema";
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { createForm } from '@tanstack/svelte-form';
+	import z from 'zod';
+	import { goto } from '$app/navigation';
+	import type { SimboloTipo } from '@sgse-app/backend/convex/schema';
 
-  const client = useConvexClient();
+	const client = useConvexClient();
 
-  let tipo = $state<SimboloTipo>("cargo_comissionado");
+	let tipo = $state<SimboloTipo>('cargo_comissionado');
 
-  const defaultValues = {
-    nome: "",
-    refValor: "",
-    vencValor: "",
-    descricao: "",
-    tipo: "cargo_comissionado",
-    valor: "",
-  };
+	const defaultValues = {
+		nome: '',
+		refValor: '',
+		vencValor: '',
+		descricao: '',
+		tipo: 'cargo_comissionado',
+		valor: ''
+	};
 
-  const schema = z.object({
-    nome: z.string().min(1),
-    refValor: z.string().optional(),
-    vencValor: z.string().optional(),
-    descricao: z.string().min(1),
-    tipo: z.enum(["cargo_comissionado", "funcao_gratificada"]),
-    valor: z.string().optional(),
-  });
+	const schema = z.object({
+		nome: z.string().min(1),
+		refValor: z.string().optional(),
+		vencValor: z.string().optional(),
+		descricao: z.string().min(1),
+		tipo: z.enum(['cargo_comissionado', 'funcao_gratificada']),
+		valor: z.string().optional()
+	});
 
-  function formatCurrencyBR(raw: string): string {
-    const digits = (raw || "").replace(/\D/g, "");
-    if (!digits) return "";
-    const number = parseInt(digits, 10);
-    const cents = (number / 100).toFixed(2);
-    const [intPart, decPart] = cents.split(".");
-    const intWithThousands = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    return `${intWithThousands},${decPart}`;
-  }
+	function formatCurrencyBR(raw: string): string {
+		const digits = (raw || '').replace(/\D/g, '');
+		if (!digits) return '';
+		const number = parseInt(digits, 10);
+		const cents = (number / 100).toFixed(2);
+		const [intPart, decPart] = cents.split('.');
+		const intWithThousands = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+		return `${intWithThousands},${decPart}`;
+	}
 
-  function unmaskCurrencyToDotDecimal(masked: string): string {
-    if (!masked) return "";
-    const digits = masked.replace(/\D/g, "");
-    if (!digits) return "";
-    const value = (parseInt(digits, 10) / 100).toFixed(2);
-    return value;
-  }
+	function unmaskCurrencyToDotDecimal(masked: string): string {
+		if (!masked) return '';
+		const digits = masked.replace(/\D/g, '');
+		if (!digits) return '';
+		const value = (parseInt(digits, 10) / 100).toFixed(2);
+		return value;
+	}
 
-  function formatDotDecimalToBR(value: string): string {
-    if (!value) return "";
-    const [intPart, decRaw] = value.split(".");
-    const intDigits = (intPart || "0").replace(/\D/g, "");
-    const intWithThousands = intDigits.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-    const decPart = (decRaw ?? "00").padEnd(2, "0").slice(0, 2);
-    return `${intWithThousands},${decPart}`;
-  }
+	function formatDotDecimalToBR(value: string): string {
+		if (!value) return '';
+		const [intPart, decRaw] = value.split('.');
+		const intDigits = (intPart || '0').replace(/\D/g, '');
+		const intWithThousands = intDigits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+		const decPart = (decRaw ?? '00').padEnd(2, '0').slice(0, 2);
+		return `${intWithThousands},${decPart}`;
+	}
 
-  let notice = $state<{ kind: "success" | "error"; text: string } | null>(null);
-  
-  function getTotalPreview(): string {
-    if (tipo !== "cargo_comissionado") return "";
-    const r = unmaskCurrencyToDotDecimal(form.getFieldValue("refValor"));
-    const v = unmaskCurrencyToDotDecimal(form.getFieldValue("vencValor"));
-    if (!r || !v) return "";
-    const sum = (Number(r) + Number(v)).toFixed(2);
-    return formatDotDecimalToBR(sum);
-  }
+	let notice = $state<{ kind: 'success' | 'error'; text: string } | null>(null);
 
-  const form = createForm(() => ({
-    onSubmit: async ({ value, formApi }) => {
-      const isCargo = value.tipo === "cargo_comissionado";
-      const payload = {
-        nome: value.nome,
-        refValor: isCargo ? unmaskCurrencyToDotDecimal(value.refValor) : "",
-        vencValor: isCargo ? unmaskCurrencyToDotDecimal(value.vencValor) : "",
-        descricao: value.descricao,
-        tipo: value.tipo as SimboloTipo,
-        valor: !isCargo ? unmaskCurrencyToDotDecimal(value.valor) : undefined,
-      };
+	function getTotalPreview(): string {
+		if (tipo !== 'cargo_comissionado') return '';
+		const r = unmaskCurrencyToDotDecimal(form.getFieldValue('refValor'));
+		const v = unmaskCurrencyToDotDecimal(form.getFieldValue('vencValor'));
+		if (!r || !v) return '';
+		const sum = (Number(r) + Number(v)).toFixed(2);
+		return formatDotDecimalToBR(sum);
+	}
 
-      try {
-        const res = await client.mutation(api.simbolos.create, payload);
-        if (res) {
-          formApi.reset();
-          notice = { kind: "success", text: "Símbolo cadastrado com sucesso!" };
-          setTimeout(() => goto("/recursos-humanos/simbolos"), 1500);
-        }
-      } catch (error: any) {
-        notice = { kind: "error", text: error.message || "Erro ao cadastrar símbolo." };
-      }
-    },
-    defaultValues,
-  }));
+	const form = createForm(() => ({
+		onSubmit: async ({ value, formApi }) => {
+			const isCargo = value.tipo === 'cargo_comissionado';
+			const payload = {
+				nome: value.nome,
+				refValor: isCargo ? unmaskCurrencyToDotDecimal(value.refValor) : '',
+				vencValor: isCargo ? unmaskCurrencyToDotDecimal(value.vencValor) : '',
+				descricao: value.descricao,
+				tipo: value.tipo as SimboloTipo,
+				valor: !isCargo ? unmaskCurrencyToDotDecimal(value.valor) : undefined
+			};
+
+			try {
+				const res = await client.mutation(api.simbolos.create, payload);
+				if (res) {
+					formApi.reset();
+					notice = { kind: 'success', text: 'Símbolo cadastrado com sucesso!' };
+					setTimeout(() => goto('/recursos-humanos/simbolos'), 1500);
+				}
+			} catch (error: any) {
+				notice = { kind: 'error', text: error.message || 'Erro ao cadastrar símbolo.' };
+			}
+		},
+		defaultValues
+	}));
 </script>
 
-<main class="container mx-auto px-4 py-4 max-w-4xl">
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
-      <li><a href="/recursos-humanos/simbolos" class="text-primary hover:underline">Símbolos</a></li>
-      <li>Cadastrar</li>
-    </ul>
-  </div>
+<main class="container mx-auto max-w-4xl px-4 py-4">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li><a href="/recursos-humanos" class="text-primary hover:underline">Recursos Humanos</a></li>
+			<li>
+				<a href="/recursos-humanos/simbolos" class="text-primary hover:underline">Símbolos</a>
+			</li>
+			<li>Cadastrar</li>
+		</ul>
+	</div>
 
-  <!-- Cabeçalho -->
-  <div class="mb-6">
-    <div class="flex items-center gap-4 mb-2">
-      <div class="p-3 bg-green-500/20 rounded-xl">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-primary">Cadastro de Símbolo</h1>
-        <p class="text-base-content/70">Preencha os campos abaixo para cadastrar um novo cargo ou função</p>
-      </div>
-    </div>
-  </div>
+	<!-- Cabeçalho -->
+	<div class="mb-6">
+		<div class="mb-2 flex items-center gap-4">
+			<div class="rounded-xl bg-green-500/20 p-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-8 w-8 text-green-600"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
+					/>
+				</svg>
+			</div>
+			<div>
+				<h1 class="text-primary text-3xl font-bold">Cadastro de Símbolo</h1>
+				<p class="text-base-content/70">
+					Preencha os campos abaixo para cadastrar um novo cargo ou função
+				</p>
+			</div>
+		</div>
+	</div>
 
-  <!-- Alertas -->
-  {#if notice}
-    <div
-      class="alert mb-6 shadow-lg"
-      class:alert-success={notice.kind === "success"}
-      class:alert-error={notice.kind === "error"}
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-        {#if notice.kind === "success"}
-          <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" />
-        {:else}
-          <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" />
-        {/if}
-      </svg>
-      <span>{notice.text}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if notice}
+		<div
+			class="alert mb-6 shadow-lg"
+			class:alert-success={notice.kind === 'success'}
+			class:alert-error={notice.kind === 'error'}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if notice.kind === 'success'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span>{notice.text}</span>
+		</div>
+	{/if}
 
-  <!-- Formulário -->
-  <form
-    class="space-y-6"
-    onsubmit={(e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      form.handleSubmit();
-    }}
-  >
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-6">
-        <h2 class="card-title text-xl border-b pb-3">Informações Básicas</h2>
+	<!-- Formulário -->
+	<form
+		class="space-y-6"
+		onsubmit={(e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			form.handleSubmit();
+		}}
+	>
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-6">
+				<h2 class="card-title border-b pb-3 text-xl">Informações Básicas</h2>
 
-        <!-- Nome do Símbolo -->
-        <form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="nome">
-                <span class="label-text font-semibold">
-                  Nome do Símbolo <span class="text-error">*</span>
-                </span>
-              </label>
-              <input
-                {name}
-                id="nome"
-                value={state.value}
-                placeholder="Ex.: DAS-1, CAA-2, FDA-3"
-                class="input input-bordered w-full focus:input-primary"
-                autocomplete="off"
-                oninput={(e) => {
-                  const target = e.target as HTMLInputElement;
-                  handleChange(target.value);
-                }}
-                required
-              />
-              <label class="label">
-                <span class="label-text-alt text-base-content/60">
-                  Informe o código identificador do símbolo
-                </span>
-              </label>
-            </div>
-          {/snippet}
-        </form.Field>
+				<!-- Nome do Símbolo -->
+				<form.Field name="nome" validators={{ onChange: schema.shape.nome }}>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="nome">
+								<span class="label-text font-semibold">
+									Nome do Símbolo <span class="text-error">*</span>
+								</span>
+							</label>
+							<input
+								{name}
+								id="nome"
+								value={state.value}
+								placeholder="Ex.: DAS-1, CAA-2, FDA-3"
+								class="input input-bordered focus:input-primary w-full"
+								autocomplete="off"
+								oninput={(e) => {
+									const target = e.target as HTMLInputElement;
+									handleChange(target.value);
+								}}
+								required
+							/>
+							<label class="label">
+								<span class="label-text-alt text-base-content/60">
+									Informe o código identificador do símbolo
+								</span>
+							</label>
+						</div>
+					{/snippet}
+				</form.Field>
 
-        <!-- Descrição -->
-        <form.Field name="descricao" validators={{ onChange: schema.shape.descricao }}>
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="descricao">
-                <span class="label-text font-semibold">
-                  Descrição <span class="text-error">*</span>
-                </span>
-              </label>
-              <textarea
-                {name}
-                id="descricao"
-                value={state.value}
-                placeholder="Ex.: Cargo de Direção e Assessoramento Superior - Nível 1"
-                class="textarea textarea-bordered w-full h-24 focus:textarea-primary"
-                autocomplete="off"
-                oninput={(e) => {
-                  const target = e.target as HTMLTextAreaElement;
-                  handleChange(target.value);
-                }}
-                required
-              ></textarea>
-              <label class="label">
-                <span class="label-text-alt text-base-content/60">
-                  Descreva detalhadamente o símbolo
-                </span>
-              </label>
-            </div>
-          {/snippet}
-        </form.Field>
+				<!-- Descrição -->
+				<form.Field name="descricao" validators={{ onChange: schema.shape.descricao }}>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="descricao">
+								<span class="label-text font-semibold">
+									Descrição <span class="text-error">*</span>
+								</span>
+							</label>
+							<textarea
+								{name}
+								id="descricao"
+								value={state.value}
+								placeholder="Ex.: Cargo de Direção e Assessoramento Superior - Nível 1"
+								class="textarea textarea-bordered focus:textarea-primary h-24 w-full"
+								autocomplete="off"
+								oninput={(e) => {
+									const target = e.target as HTMLTextAreaElement;
+									handleChange(target.value);
+								}}
+								required
+							></textarea>
+							<label class="label">
+								<span class="label-text-alt text-base-content/60">
+									Descreva detalhadamente o símbolo
+								</span>
+							</label>
+						</div>
+					{/snippet}
+				</form.Field>
 
-        <!-- Tipo -->
-        <form.Field
-          name="tipo"
-          validators={{
-            onChange: ({ value }) => (value ? undefined : "Obrigatório"),
-          }}
-        >
-          {#snippet children({ name, state, handleChange })}
-            <div class="form-control">
-              <label class="label" for="tipo">
-                <span class="label-text font-semibold">
-                  Tipo <span class="text-error">*</span>
-                </span>
-              </label>
-              <select
-                {name}
-                id="tipo"
-                class="select select-bordered w-full focus:select-primary"
-                bind:value={tipo}
-                oninput={(e) => {
-                  const target = e.target as HTMLSelectElement;
-                  handleChange(target.value);
-                }}
-                required
-              >
-                <option value="cargo_comissionado">Cargo Comissionado (CC)</option>
-                <option value="funcao_gratificada">Função Gratificada (FG)</option>
-              </select>
-              <label class="label">
-                <span class="label-text-alt text-base-content/60">
-                  Selecione se é um cargo comissionado ou função gratificada
-                </span>
-              </label>
-            </div>
-          {/snippet}
-        </form.Field>
-      </div>
-    </div>
+				<!-- Tipo -->
+				<form.Field
+					name="tipo"
+					validators={{
+						onChange: ({ value }) => (value ? undefined : 'Obrigatório')
+					}}
+				>
+					{#snippet children({ name, state, handleChange })}
+						<div class="form-control">
+							<label class="label" for="tipo">
+								<span class="label-text font-semibold">
+									Tipo <span class="text-error">*</span>
+								</span>
+							</label>
+							<select
+								{name}
+								id="tipo"
+								class="select select-bordered focus:select-primary w-full"
+								bind:value={tipo}
+								oninput={(e) => {
+									const target = e.target as HTMLSelectElement;
+									handleChange(target.value);
+								}}
+								required
+							>
+								<option value="cargo_comissionado">Cargo Comissionado (CC)</option>
+								<option value="funcao_gratificada">Função Gratificada (FG)</option>
+							</select>
+							<label class="label">
+								<span class="label-text-alt text-base-content/60">
+									Selecione se é um cargo comissionado ou função gratificada
+								</span>
+							</label>
+						</div>
+					{/snippet}
+				</form.Field>
+			</div>
+		</div>
 
-    <!-- Card de Valores -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body space-y-6">
-        <h2 class="card-title text-xl border-b pb-3">
-          Valores Financeiros
-          <span class="badge badge-primary badge-lg ml-2">
-            {tipo === "cargo_comissionado" ? "Cargo Comissionado" : "Função Gratificada"}
-          </span>
-        </h2>
+		<!-- Card de Valores -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body space-y-6">
+				<h2 class="card-title border-b pb-3 text-xl">
+					Valores Financeiros
+					<span class="badge badge-primary badge-lg ml-2">
+						{tipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'}
+					</span>
+				</h2>
 
-        {#if tipo === "cargo_comissionado"}
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Valor de Vencimento -->
-            <form.Field
-              name="vencValor"
-              validators={{
-                onChange: ({ value }) =>
-                  form.getFieldValue("tipo") === "cargo_comissionado" && !value
-                    ? "Obrigatório"
-                    : undefined,
-              }}
-            >
-              {#snippet children({ name, state, handleChange })}
-                <div class="form-control">
-                  <label class="label" for="vencValor">
-                    <span class="label-text font-semibold">
-                      Valor de Vencimento <span class="text-error">*</span>
-                    </span>
-                  </label>
-                  <label class="input-group">
-                    <span>R$</span>
-                    <input
-                      {name}
-                      id="vencValor"
-                      value={state.value}
-                      placeholder="0,00"
-                      class="input input-bordered w-full focus:input-primary"
-                      inputmode="decimal"
-                      autocomplete="off"
-                      oninput={(e) => {
-                        const target = e.target as HTMLInputElement;
-                        const formatted = formatCurrencyBR(target.value);
-                        target.value = formatted;
-                        handleChange(formatted);
-                      }}
-                      required
-                    />
-                  </label>
-                  <label class="label">
-                    <span class="label-text-alt text-base-content/60">
-                      Valor base de vencimento
-                    </span>
-                  </label>
-                </div>
-              {/snippet}
-            </form.Field>
+				{#if tipo === 'cargo_comissionado'}
+					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+						<!-- Valor de Vencimento -->
+						<form.Field
+							name="vencValor"
+							validators={{
+								onChange: ({ value }) =>
+									form.getFieldValue('tipo') === 'cargo_comissionado' && !value
+										? 'Obrigatório'
+										: undefined
+							}}
+						>
+							{#snippet children({ name, state, handleChange })}
+								<div class="form-control">
+									<label class="label" for="vencValor">
+										<span class="label-text font-semibold">
+											Valor de Vencimento <span class="text-error">*</span>
+										</span>
+									</label>
+									<label class="input-group">
+										<span>R$</span>
+										<input
+											{name}
+											id="vencValor"
+											value={state.value}
+											placeholder="0,00"
+											class="input input-bordered focus:input-primary w-full"
+											inputmode="decimal"
+											autocomplete="off"
+											oninput={(e) => {
+												const target = e.target as HTMLInputElement;
+												const formatted = formatCurrencyBR(target.value);
+												target.value = formatted;
+												handleChange(formatted);
+											}}
+											required
+										/>
+									</label>
+									<label class="label">
+										<span class="label-text-alt text-base-content/60">
+											Valor base de vencimento
+										</span>
+									</label>
+								</div>
+							{/snippet}
+						</form.Field>
 
-            <!-- Valor de Referência -->
-            <form.Field
-              name="refValor"
-              validators={{
-                onChange: ({ value }) =>
-                  form.getFieldValue("tipo") === "cargo_comissionado" && !value
-                    ? "Obrigatório"
-                    : undefined,
-              }}
-            >
-              {#snippet children({ name, state, handleChange })}
-                <div class="form-control">
-                  <label class="label" for="refValor">
-                    <span class="label-text font-semibold">
-                      Valor de Referência <span class="text-error">*</span>
-                    </span>
-                  </label>
-                  <label class="input-group">
-                    <span>R$</span>
-                    <input
-                      {name}
-                      id="refValor"
-                      value={state.value}
-                      placeholder="0,00"
-                      class="input input-bordered w-full focus:input-primary"
-                      inputmode="decimal"
-                      autocomplete="off"
-                      oninput={(e) => {
-                        const target = e.target as HTMLInputElement;
-                        const formatted = formatCurrencyBR(target.value);
-                        target.value = formatted;
-                        handleChange(formatted);
-                      }}
-                      required
-                    />
-                  </label>
-                  <label class="label">
-                    <span class="label-text-alt text-base-content/60">
-                      Valor de referência do cargo
-                    </span>
-                  </label>
-                </div>
-              {/snippet}
-            </form.Field>
-          </div>
+						<!-- Valor de Referência -->
+						<form.Field
+							name="refValor"
+							validators={{
+								onChange: ({ value }) =>
+									form.getFieldValue('tipo') === 'cargo_comissionado' && !value
+										? 'Obrigatório'
+										: undefined
+							}}
+						>
+							{#snippet children({ name, state, handleChange })}
+								<div class="form-control">
+									<label class="label" for="refValor">
+										<span class="label-text font-semibold">
+											Valor de Referência <span class="text-error">*</span>
+										</span>
+									</label>
+									<label class="input-group">
+										<span>R$</span>
+										<input
+											{name}
+											id="refValor"
+											value={state.value}
+											placeholder="0,00"
+											class="input input-bordered focus:input-primary w-full"
+											inputmode="decimal"
+											autocomplete="off"
+											oninput={(e) => {
+												const target = e.target as HTMLInputElement;
+												const formatted = formatCurrencyBR(target.value);
+												target.value = formatted;
+												handleChange(formatted);
+											}}
+											required
+										/>
+									</label>
+									<label class="label">
+										<span class="label-text-alt text-base-content/60">
+											Valor de referência do cargo
+										</span>
+									</label>
+								</div>
+							{/snippet}
+						</form.Field>
+					</div>
 
-          <!-- Preview do Total -->
-          {#if getTotalPreview()}
-            <div class="alert alert-info shadow-lg">
-              <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">Valor Total Calculado</h3>
-                <div class="text-2xl font-bold mt-1">R$ {getTotalPreview()}</div>
-              </div>
-            </div>
-          {/if}
-        {:else}
-          <!-- Valor da Função Gratificada -->
-          <form.Field
-            name="valor"
-            validators={{
-              onChange: ({ value }) =>
-                form.getFieldValue("tipo") === "funcao_gratificada" && !value
-                  ? "Obrigatório"
-                  : undefined,
-            }}
-          >
-            {#snippet children({ name, state, handleChange })}
-              <div class="form-control">
-                <label class="label" for="valor">
-                  <span class="label-text font-semibold">
-                    Valor da Função Gratificada <span class="text-error">*</span>
-                  </span>
-                </label>
-                <label class="input-group">
-                  <span>R$</span>
-                  <input
-                    {name}
-                    id="valor"
-                    value={state.value}
-                    placeholder="0,00"
-                    class="input input-bordered w-full focus:input-primary"
-                    inputmode="decimal"
-                    autocomplete="off"
-                    oninput={(e) => {
-                      const target = e.target as HTMLInputElement;
-                      const formatted = formatCurrencyBR(target.value);
-                      target.value = formatted;
-                      handleChange(formatted);
-                    }}
-                    required
-                  />
-                </label>
-                <label class="label">
-                  <span class="label-text-alt text-base-content/60">
-                    Valor mensal da função gratificada
-                  </span>
-                </label>
-              </div>
-            {/snippet}
-          </form.Field>
-        {/if}
-      </div>
-    </div>
+					<!-- Preview do Total -->
+					{#if getTotalPreview()}
+						<div class="alert alert-info shadow-lg">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								class="h-6 w-6 shrink-0 stroke-current"
+							>
+								<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">Valor Total Calculado</h3>
+								<div class="mt-1 text-2xl font-bold">R$ {getTotalPreview()}</div>
+							</div>
+						</div>
+					{/if}
+				{:else}
+					<!-- Valor da Função Gratificada -->
+					<form.Field
+						name="valor"
+						validators={{
+							onChange: ({ value }) =>
+								form.getFieldValue('tipo') === 'funcao_gratificada' && !value
+									? 'Obrigatório'
+									: undefined
+						}}
+					>
+						{#snippet children({ name, state, handleChange })}
+							<div class="form-control">
+								<label class="label" for="valor">
+									<span class="label-text font-semibold">
+										Valor da Função Gratificada <span class="text-error">*</span>
+									</span>
+								</label>
+								<label class="input-group">
+									<span>R$</span>
+									<input
+										{name}
+										id="valor"
+										value={state.value}
+										placeholder="0,00"
+										class="input input-bordered focus:input-primary w-full"
+										inputmode="decimal"
+										autocomplete="off"
+										oninput={(e) => {
+											const target = e.target as HTMLInputElement;
+											const formatted = formatCurrencyBR(target.value);
+											target.value = formatted;
+											handleChange(formatted);
+										}}
+										required
+									/>
+								</label>
+								<label class="label">
+									<span class="label-text-alt text-base-content/60">
+										Valor mensal da função gratificada
+									</span>
+								</label>
+							</div>
+						{/snippet}
+					</form.Field>
+				{/if}
+			</div>
+		</div>
 
-    <!-- Botões de Ação -->
-    <form.Subscribe
-      selector={(state) => ({
-        canSubmit: state.canSubmit,
-        isSubmitting: state.isSubmitting,
-      })}
-    >
-      {#snippet children({ canSubmit, isSubmitting })}
-        <div class="card bg-base-100 shadow-xl">
-          <div class="card-body">
-            <div class="flex flex-col sm:flex-row gap-3 justify-end">
-              <button
-                type="button"
-                class="btn btn-ghost btn-lg"
-                disabled={isSubmitting}
-                onclick={() => goto("/recursos-humanos/simbolos")}
-              >
-                <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="M6 18L18 6M6 6l12 12" />
-                </svg>
-                Cancelar
-              </button>
-              <button
-                type="submit"
-                class="btn btn-primary btn-lg"
-                disabled={isSubmitting || !canSubmit}
-              >
-                {#if isSubmitting}
-                  <span class="loading loading-spinner"></span>
-                  Cadastrando...
-                {:else}
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                  </svg>
-                  Cadastrar Símbolo
-                {/if}
-              </button>
-            </div>
-          </div>
-        </div>
-      {/snippet}
-    </form.Subscribe>
-  </form>
+		<!-- Botões de Ação -->
+		<form.Subscribe
+			selector={(state) => ({
+				canSubmit: state.canSubmit,
+				isSubmitting: state.isSubmitting
+			})}
+		>
+			{#snippet children({ canSubmit, isSubmitting })}
+				<div class="card bg-base-100 shadow-xl">
+					<div class="card-body">
+						<div class="flex flex-col justify-end gap-3 sm:flex-row">
+							<button
+								type="button"
+								class="btn btn-lg"
+								disabled={isSubmitting}
+								onclick={() => goto('/recursos-humanos/simbolos')}
+							>
+								<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="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Cancelar
+							</button>
+							<button
+								type="submit"
+								class="btn btn-primary btn-lg"
+								disabled={isSubmitting || !canSubmit}
+							>
+								{#if isSubmitting}
+									<span class="loading loading-spinner"></span>
+									Cadastrando...
+								{:else}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-5 w-5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M5 13l4 4L19 7"
+										/>
+									</svg>
+									Cadastrar Símbolo
+								{/if}
+							</button>
+						</div>
+					</div>
+				</div>
+			{/snippet}
+		</form.Subscribe>
+	</form>
 </main>
 
 <style>
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  .card {
-    animation: fadeIn 0.3s ease-out;
-  }
+	.card {
+		animation: fadeIn 0.3s 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
index d6618dd..28b8fac 100644
--- a/apps/web/src/routes/(dashboard)/secretaria-executiva/gestao-ausencias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/secretaria-executiva/gestao-ausencias/+page.svelte
@@ -1,424 +1,406 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import AprovarAusencias from "$lib/components/AprovarAusencias.svelte";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { goto } from '$app/navigation';
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  const client = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  // Buscar TODAS as solicitações de ausências
-  const todasAusenciasQuery = useQuery(api.ausencias.listarTodas, {});
+	// 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);
+	let filtroStatus = $state<string>('todos');
+	let solicitacaoSelecionada = $state<Id<'solicitacoesAusencias'> | null>(null);
 
-  const ausencias = $derived(todasAusenciasQuery?.data || []);
+	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;
-    }),
-  );
+	// 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,
-  });
+	// 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 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 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;
-  }
+	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 selecionarSolicitacao(solicitacaoId: Id<'solicitacoesAusencias'>) {
+		solicitacaoSelecionada = solicitacaoId;
+	}
 
-  async function recarregar() {
-    solicitacaoSelecionada = null;
-  }
+	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>
+<main class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<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>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="rounded-xl bg-orange-500/20 p-3">
+					<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-primary text-3xl font-bold">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 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>
+	<!-- Estatísticas -->
+	<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+		<div class="stat bg-base-100 rounded-box border-base-300 border shadow-lg">
+			<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 rounded-box border-warning/30 border shadow-lg">
+			<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 rounded-box border-success/30 border shadow-lg">
+			<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>
+		<div class="stat bg-base-100 rounded-box border-error/30 border shadow-lg">
+			<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>
+	<!-- Filtros -->
+	<div class="card bg-base-100 mb-6 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">Filtros</h2>
+			<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+				<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>
+	<!-- Lista de Solicitações -->
+	<div class="card bg-base-100 shadow-lg">
+		<div class="card-body">
+			<h2 class="card-title mb-4 text-lg">
+				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>
+			{#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 h-6 w-6 shrink-0"
+					>
+						<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-zebra table">
+						<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-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 && currentUser.data}
-  {#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={currentUser.data._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}
+	{#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={currentUser.data._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)/solicitar-acesso/+page.svelte b/apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte
index 5afa446..e349a09 100644
--- a/apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte
@@ -1,394 +1,347 @@
 <script lang="ts">
-  import { goto } from "$app/navigation";
-  import { useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { createForm } from "@tanstack/svelte-form";
-  import z from "zod";
+	import { goto } from '$app/navigation';
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { createForm } from '@tanstack/svelte-form';
+	import z from 'zod';
 
-  const convex = useConvexClient();
+	const convex = useConvexClient();
 
-  // Estado para mensagens
-  let notice = $state<{ type: "success" | "error"; message: string } | null>(
-    null,
-  );
+	// Estado para mensagens
+	let notice = $state<{ type: 'success' | 'error'; message: string } | null>(null);
 
-  // Schema de validação
-  const formSchema = z.object({
-    nome: z.string().min(3, "Nome deve ter no mínimo 3 caracteres"),
-    matricula: z.string().min(1, "Matrícula é obrigatória"),
-    email: z.string().email("E-mail inválido"),
-    telefone: z.string().min(14, "Telefone inválido"),
-  });
+	// Schema de validação
+	const formSchema = z.object({
+		nome: z.string().min(3, 'Nome deve ter no mínimo 3 caracteres'),
+		matricula: z.string().min(1, 'Matrícula é obrigatória'),
+		email: z.string().email('E-mail inválido'),
+		telefone: z.string().min(14, 'Telefone inválido')
+	});
 
-  // Criar o formulário
-  const form = createForm(() => ({
-    defaultValues: {
-      nome: "",
-      matricula: "",
-      email: "",
-      telefone: "",
-    },
-    onSubmit: async ({ value }) => {
-      try {
-        notice = null;
-        await convex.mutation(api.solicitacoesAcesso.create, {
-          nome: value.nome,
-          matricula: value.matricula,
-          email: value.email,
-          telefone: value.telefone,
-        });
-        notice = {
-          type: "success",
-          message:
-            "Solicitação de acesso enviada com sucesso! Aguarde a análise da equipe de TI.",
-        };
-        // Limpar o formulário
-        form.reset();
-        // Redirecionar após 3 segundos
-        setTimeout(() => {
-          goto("/");
-        }, 3000);
-      } catch (error: any) {
-        notice = {
-          type: "error",
-          message:
-            error.message || "Erro ao enviar solicitação. Tente novamente.",
-        };
-      }
-    },
-  }));
+	// Criar o formulário
+	const form = createForm(() => ({
+		defaultValues: {
+			nome: '',
+			matricula: '',
+			email: '',
+			telefone: ''
+		},
+		onSubmit: async ({ value }) => {
+			try {
+				notice = null;
+				await convex.mutation(api.solicitacoesAcesso.create, {
+					nome: value.nome,
+					matricula: value.matricula,
+					email: value.email,
+					telefone: value.telefone
+				});
+				notice = {
+					type: 'success',
+					message: 'Solicitação de acesso enviada com sucesso! Aguarde a análise da equipe de TI.'
+				};
+				// Limpar o formulário
+				form.reset();
+				// Redirecionar após 3 segundos
+				setTimeout(() => {
+					goto('/');
+				}, 3000);
+			} catch (error: any) {
+				notice = {
+					type: 'error',
+					message: error.message || 'Erro ao enviar solicitação. Tente novamente.'
+				};
+			}
+		}
+	}));
 
-  // Máscaras
-  function maskTelefone(value: string): string {
-    const cleaned = value.replace(/\D/g, "");
-    if (cleaned.length <= 10) {
-      return cleaned
-        .replace(/^(\d{2})(\d)/, "($1) $2")
-        .replace(/(\d{4})(\d)/, "$1-$2");
-    }
-    return cleaned
-      .replace(/^(\d{2})(\d)/, "($1) $2")
-      .replace(/(\d{5})(\d)/, "$1-$2");
-  }
+	// Máscaras
+	function maskTelefone(value: string): string {
+		const cleaned = value.replace(/\D/g, '');
+		if (cleaned.length <= 10) {
+			return cleaned.replace(/^(\d{2})(\d)/, '($1) $2').replace(/(\d{4})(\d)/, '$1-$2');
+		}
+		return cleaned.replace(/^(\d{2})(\d)/, '($1) $2').replace(/(\d{5})(\d)/, '$1-$2');
+	}
 
-  function handleCancel() {
-    goto("/");
-  }
+	function handleCancel() {
+		goto('/');
+	}
 </script>
 
 <main class="mx-auto w-full max-w-4xl space-y-8 px-4 py-10">
-  <!-- Cabeçalho Estilizado -->
-  <section
-    class="relative overflow-hidden rounded-3xl border border-primary/25 bg-linear-to-br from-primary/10 via-base-100 to-secondary/20 p-8 shadow-2xl"
-  >
-    <div
-      class="absolute -left-10 top-10 h-40 w-40 rounded-full bg-primary/20 blur-3xl"
-    ></div>
-    <div
-      class="absolute -bottom-16 right-0 h-56 w-56 rounded-full bg-secondary/20 blur-3xl"
-    ></div>
-    <div class="relative z-10 space-y-4">
-      <span
-        class="inline-flex w-fit items-center gap-2 rounded-full border border-primary/40 bg-primary/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.28em] text-primary"
-      >
-        Acesso ao Sistema
-      </span>
-      <h1
-        class="text-4xl font-black leading-tight text-base-content sm:text-5xl"
-      >
-        Solicitar Acesso ao SGSE
-      </h1>
-      <p class="text-base leading-relaxed text-base-content/70 sm:text-lg">
-        Preencha o formulário abaixo para solicitar acesso ao Sistema de
-        Gerenciamento da Secretaria de Esportes. Sua solicitação será analisada
-        pela equipe de Tecnologia da Informação.
-      </p>
-    </div>
-  </section>
+	<!-- Cabeçalho Estilizado -->
+	<section
+		class="border-primary/25 from-primary/10 via-base-100 to-secondary/20 relative overflow-hidden rounded-3xl border bg-linear-to-br p-8 shadow-2xl"
+	>
+		<div class="bg-primary/20 absolute top-10 -left-10 h-40 w-40 rounded-full blur-3xl"></div>
+		<div class="bg-secondary/20 absolute right-0 -bottom-16 h-56 w-56 rounded-full blur-3xl"></div>
+		<div class="relative z-10 space-y-4">
+			<span
+				class="border-primary/40 bg-primary/10 text-primary inline-flex w-fit items-center gap-2 rounded-full border px-4 py-1 text-xs font-semibold tracking-[0.28em] uppercase"
+			>
+				Acesso ao Sistema
+			</span>
+			<h1 class="text-base-content text-4xl leading-tight font-black sm:text-5xl">
+				Solicitar Acesso ao SGSE
+			</h1>
+			<p class="text-base-content/70 text-base leading-relaxed sm:text-lg">
+				Preencha o formulário abaixo para solicitar acesso ao Sistema de Gerenciamento da Secretaria
+				de Esportes. Sua solicitação será analisada pela equipe de Tecnologia da Informação.
+			</p>
+		</div>
+	</section>
 
-  <!-- Alertas -->
-  {#if notice}
-    <div
-      class="alert {notice.type === 'success'
-        ? 'alert-success'
-        : 'alert-error'} shadow-xl"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        {#if notice.type === "success"}
-          <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"
-          />
-        {:else}
-          <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"
-          />
-        {/if}
-      </svg>
-      <span class="font-semibold">{notice.message}</span>
-    </div>
-  {/if}
+	<!-- Alertas -->
+	{#if notice}
+		<div class="alert {notice.type === 'success' ? 'alert-success' : 'alert-error'} shadow-xl">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if notice.type === 'success'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span class="font-semibold">{notice.message}</span>
+		</div>
+	{/if}
 
-  <!-- Formulário -->
-  <section
-    class="relative overflow-hidden rounded-3xl border border-base-200 bg-base-100/90 p-8 shadow-2xl"
-  >
-    <div
-      class="absolute inset-x-6 top-0 h-24 rounded-b-full bg-linear-to-b from-base-200/40 to-transparent opacity-50"
-    ></div>
-    <div class="relative z-10">
-      <form
-        onsubmit={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          form.handleSubmit();
-        }}
-      >
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <!-- Nome -->
-          <form.Field
-            name="nome"
-            validators={{ onChange: formSchema.shape.nome }}
-          >
-            {#snippet children(field)}
-              <div class="form-control md:col-span-2">
-                <label class="label" for="nome">
-                  <span class="label-text font-semibold">Nome Completo</span>
-                  <span class="text-error">*</span>
-                </label>
-                <input
-                  id="nome"
-                  type="text"
-                  placeholder="Digite seu nome completo"
-                  class="input input-bordered w-full focus:input-primary transition-colors duration-300"
-                  value={field.state.value}
-                  onblur={field.handleBlur}
-                  oninput={(e) => field.handleChange(e.currentTarget.value)}
-                />
-                {#if field.state.meta.errors.length > 0}
-                  <label class="label">
-                    <span class="text-error text-sm mt-1"
-                      >{field.state.meta.errors[0]}</span
-                    >
-                  </label>
-                {/if}
-              </div>
-            {/snippet}
-          </form.Field>
+	<!-- Formulário -->
+	<section
+		class="border-base-200 bg-base-100/90 relative overflow-hidden rounded-3xl border p-8 shadow-2xl"
+	>
+		<div
+			class="from-base-200/40 absolute inset-x-6 top-0 h-24 rounded-b-full bg-linear-to-b to-transparent opacity-50"
+		></div>
+		<div class="relative z-10">
+			<form
+				onsubmit={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					form.handleSubmit();
+				}}
+			>
+				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+					<!-- Nome -->
+					<form.Field name="nome" validators={{ onChange: formSchema.shape.nome }}>
+						{#snippet children(field)}
+							<div class="form-control md:col-span-2">
+								<label class="label" for="nome">
+									<span class="label-text font-semibold">Nome Completo</span>
+									<span class="text-error">*</span>
+								</label>
+								<input
+									id="nome"
+									type="text"
+									placeholder="Digite seu nome completo"
+									class="input input-bordered focus:input-primary w-full transition-colors duration-300"
+									value={field.state.value}
+									onblur={field.handleBlur}
+									oninput={(e) => field.handleChange(e.currentTarget.value)}
+								/>
+								{#if field.state.meta.errors.length > 0}
+									<label class="label">
+										<span class="text-error mt-1 text-sm">{field.state.meta.errors[0]}</span>
+									</label>
+								{/if}
+							</div>
+						{/snippet}
+					</form.Field>
 
-          <!-- Matrícula -->
-          <form.Field
-            name="matricula"
-            validators={{ onChange: formSchema.shape.matricula }}
-          >
-            {#snippet children(field)}
-              <div class="form-control">
-                <label class="label" for="matricula">
-                  <span class="label-text font-semibold">Matrícula</span>
-                  <span class="text-error">*</span>
-                </label>
-                <input
-                  id="matricula"
-                  type="text"
-                  placeholder="Digite sua matrícula"
-                  class="input input-bordered w-full focus:input-primary transition-colors duration-300"
-                  value={field.state.value}
-                  onblur={field.handleBlur}
-                  oninput={(e) => field.handleChange(e.currentTarget.value)}
-                />
-                {#if field.state.meta.errors.length > 0}
-                  <label class="label">
-                    <span class="text-error text-sm mt-1"
-                      >{field.state.meta.errors[0]}</span
-                    >
-                  </label>
-                {/if}
-              </div>
-            {/snippet}
-          </form.Field>
+					<!-- Matrícula -->
+					<form.Field name="matricula" validators={{ onChange: formSchema.shape.matricula }}>
+						{#snippet children(field)}
+							<div class="form-control">
+								<label class="label" for="matricula">
+									<span class="label-text font-semibold">Matrícula</span>
+									<span class="text-error">*</span>
+								</label>
+								<input
+									id="matricula"
+									type="text"
+									placeholder="Digite sua matrícula"
+									class="input input-bordered focus:input-primary w-full transition-colors duration-300"
+									value={field.state.value}
+									onblur={field.handleBlur}
+									oninput={(e) => field.handleChange(e.currentTarget.value)}
+								/>
+								{#if field.state.meta.errors.length > 0}
+									<label class="label">
+										<span class="text-error mt-1 text-sm">{field.state.meta.errors[0]}</span>
+									</label>
+								{/if}
+							</div>
+						{/snippet}
+					</form.Field>
 
-          <!-- E-mail -->
-          <form.Field
-            name="email"
-            validators={{ onChange: formSchema.shape.email }}
-          >
-            {#snippet children(field)}
-              <div class="form-control">
-                <label class="label" for="email">
-                  <span class="label-text font-semibold">E-mail</span>
-                  <span class="text-error">*</span>
-                </label>
-                <input
-                  id="email"
-                  type="email"
-                  placeholder="seu@email.com"
-                  class="input input-bordered w-full focus:input-primary transition-colors duration-300"
-                  value={field.state.value}
-                  onblur={field.handleBlur}
-                  oninput={(e) => field.handleChange(e.currentTarget.value)}
-                />
-                {#if field.state.meta.errors.length > 0}
-                  <label class="label">
-                    <span class="text-error text-sm mt-1"
-                      >{field.state.meta.errors[0]}</span
-                    >
-                  </label>
-                {/if}
-              </div>
-            {/snippet}
-          </form.Field>
+					<!-- E-mail -->
+					<form.Field name="email" validators={{ onChange: formSchema.shape.email }}>
+						{#snippet children(field)}
+							<div class="form-control">
+								<label class="label" for="email">
+									<span class="label-text font-semibold">E-mail</span>
+									<span class="text-error">*</span>
+								</label>
+								<input
+									id="email"
+									type="email"
+									placeholder="seu@email.com"
+									class="input input-bordered focus:input-primary w-full transition-colors duration-300"
+									value={field.state.value}
+									onblur={field.handleBlur}
+									oninput={(e) => field.handleChange(e.currentTarget.value)}
+								/>
+								{#if field.state.meta.errors.length > 0}
+									<label class="label">
+										<span class="text-error mt-1 text-sm">{field.state.meta.errors[0]}</span>
+									</label>
+								{/if}
+							</div>
+						{/snippet}
+					</form.Field>
 
-          <!-- Telefone -->
-          <form.Field
-            name="telefone"
-            validators={{ onChange: formSchema.shape.telefone }}
-          >
-            {#snippet children(field)}
-              <div class="form-control md:col-span-2">
-                <label class="label" for="telefone">
-                  <span class="label-text font-semibold">Telefone</span>
-                  <span class="text-error">*</span>
-                </label>
-                <input
-                  id="telefone"
-                  type="text"
-                  placeholder="(00) 00000-0000"
-                  class="input input-bordered w-full focus:input-primary transition-colors duration-300"
-                  value={field.state.value}
-                  onblur={field.handleBlur}
-                  oninput={(e) => {
-                    const masked = maskTelefone(e.currentTarget.value);
-                    e.currentTarget.value = masked;
-                    field.handleChange(masked);
-                  }}
-                  maxlength="15"
-                />
-                {#if field.state.meta.errors.length > 0}
-                  <label class="label">
-                    <span class="text-error text-sm mt-1"
-                      >{field.state.meta.errors[0]}</span
-                    >
-                  </label>
-                {/if}
-              </div>
-            {/snippet}
-          </form.Field>
-        </div>
+					<!-- Telefone -->
+					<form.Field name="telefone" validators={{ onChange: formSchema.shape.telefone }}>
+						{#snippet children(field)}
+							<div class="form-control md:col-span-2">
+								<label class="label" for="telefone">
+									<span class="label-text font-semibold">Telefone</span>
+									<span class="text-error">*</span>
+								</label>
+								<input
+									id="telefone"
+									type="text"
+									placeholder="(00) 00000-0000"
+									class="input input-bordered focus:input-primary w-full transition-colors duration-300"
+									value={field.state.value}
+									onblur={field.handleBlur}
+									oninput={(e) => {
+										const masked = maskTelefone(e.currentTarget.value);
+										e.currentTarget.value = masked;
+										field.handleChange(masked);
+									}}
+									maxlength="15"
+								/>
+								{#if field.state.meta.errors.length > 0}
+									<label class="label">
+										<span class="text-error mt-1 text-sm">{field.state.meta.errors[0]}</span>
+									</label>
+								{/if}
+							</div>
+						{/snippet}
+					</form.Field>
+				</div>
 
-        <!-- Botões de Ação -->
-        <div class="flex justify-end gap-4 mt-8 pt-6 border-t border-base-300">
-          <button
-            type="button"
-            class="btn btn-ghost btn-md"
-            onclick={handleCancel}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 mr-2"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-            Cancelar
-          </button>
-          <button
-            type="submit"
-            class="btn btn-primary btn-md shadow-md transition-all duration-200 hover:shadow-primary/40"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 mr-2"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-            Solicitar Acesso
-          </button>
-        </div>
-      </form>
-    </div>
-  </section>
+				<!-- Botões de Ação -->
+				<div class="border-base-300 mt-8 flex justify-end gap-4 border-t pt-6">
+					<button type="button" class="btn btn-md" onclick={handleCancel}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="mr-2 h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+						Cancelar
+					</button>
+					<button
+						type="submit"
+						class="btn btn-primary btn-md hover:shadow-primary/40 shadow-md transition-all duration-200"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="mr-2 h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						Solicitar Acesso
+					</button>
+				</div>
+			</form>
+		</div>
+	</section>
 
-  <!-- Informações Importantes -->
-  <div class="alert alert-info shadow-xl border border-info/30">
-    <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 text-lg mb-2">Informações Importantes</h3>
-      <div class="text-sm space-y-1">
-        <div class="flex items-start gap-2">
-          <span class="text-info font-bold">•</span>
-          <span>Todos os campos marcados com * são obrigatórios</span>
-        </div>
-        <div class="flex items-start gap-2">
-          <span class="text-info font-bold">•</span>
-          <span
-            >Sua solicitação será analisada pela equipe de TI em até 48 horas
-            úteis</span
-          >
-        </div>
-        <div class="flex items-start gap-2">
-          <span class="text-info font-bold">•</span>
-          <span>Você receberá um e-mail com o resultado da análise</span>
-        </div>
-        <div class="flex items-start gap-2">
-          <span class="text-info font-bold">•</span>
-          <span>Em caso de dúvidas, entre em contato com o suporte técnico</span
-          >
-        </div>
-      </div>
-    </div>
-  </div>
+	<!-- Informações Importantes -->
+	<div class="alert alert-info border-info/30 border shadow-xl">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="h-6 w-6 shrink-0 stroke-current"
+		>
+			<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="mb-2 text-lg font-bold">Informações Importantes</h3>
+			<div class="space-y-1 text-sm">
+				<div class="flex items-start gap-2">
+					<span class="text-info font-bold">•</span>
+					<span>Todos os campos marcados com * são obrigatórios</span>
+				</div>
+				<div class="flex items-start gap-2">
+					<span class="text-info font-bold">•</span>
+					<span>Sua solicitação será analisada pela equipe de TI em até 48 horas úteis</span>
+				</div>
+				<div class="flex items-start gap-2">
+					<span class="text-info font-bold">•</span>
+					<span>Você receberá um e-mail com o resultado da análise</span>
+				</div>
+				<div class="flex items-start gap-2">
+					<span class="text-info font-bold">•</span>
+					<span>Em caso de dúvidas, entre em contato com o suporte técnico</span>
+				</div>
+			</div>
+		</div>
+	</div>
 </main>
 
 <style>
-  @keyframes fadeInUp {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
+	@keyframes fadeInUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
 
-  section {
-    animation: fadeInUp 0.5s ease-out;
-  }
+	section {
+		animation: fadeInUp 0.5s ease-out;
+	}
 </style>
diff --git a/apps/web/src/routes/(dashboard)/ti/monitoramento-emails/+page.svelte b/apps/web/src/routes/(dashboard)/ti/monitoramento-emails/+page.svelte
index 214332c..0a3cd0e 100644
--- a/apps/web/src/routes/(dashboard)/ti/monitoramento-emails/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/monitoramento-emails/+page.svelte
@@ -1,463 +1,568 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Doc } from "@sgse-app/backend/convex/_generated/dataModel";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Doc } from '@sgse-app/backend/convex/_generated/dataModel';
 
-  type EmailDetalhes = Doc<"notificacoesEmail"> | null;
+	type EmailDetalhes = Doc<'notificacoesEmail'> | null;
 
-  let autoRefresh = $state(true);
-  let refreshInterval: ReturnType<typeof setInterval> | null = null;
-  let processando = $state(false);
-  let modalDetalhesAberto = $state(false);
-  let emailSelecionado = $state<EmailDetalhes>(null);
+	let autoRefresh = $state(true);
+	let refreshInterval: ReturnType<typeof setInterval> | null = null;
+	let processando = $state(false);
+	let modalDetalhesAberto = $state(false);
+	let emailSelecionado = $state<EmailDetalhes>(null);
 
-  const client = useConvexClient();
-  
-  // Criar uma chave reativa para forçar atualização das queries
-  let refreshKey = $state(0);
-  
-  // Usar refreshKey nos argumentos para forçar recarregamento quando mudar
-  // O backend ignora esse parâmetro, mas força o Convex Svelte a reexecutar a query
-  const estatisticas = useQuery(api.email.obterEstatisticasFilaEmails, { _refresh: refreshKey });
-  const filaEmails = useQuery(api.email.listarFilaEmails, { limite: 50, _refresh: refreshKey });
+	const client = useConvexClient();
 
-  // Função para forçar refresh das queries
-  function refreshQueries() {
-    refreshKey++;
-  }
+	// Criar uma chave reativa para forçar atualização das queries
+	let refreshKey = $state(0);
 
-  $effect(() => {
-    if (autoRefresh) {
-      refreshInterval = setInterval(() => {
-        refreshQueries();
-      }, 5000); // Refresh a cada 5 segundos
-    } else {
-      if (refreshInterval) {
-        clearInterval(refreshInterval);
-        refreshInterval = null;
-      }
-    }
+	// Usar refreshKey nos argumentos para forçar recarregamento quando mudar
+	// O backend ignora esse parâmetro, mas força o Convex Svelte a reexecutar a query
+	const estatisticas = useQuery(api.email.obterEstatisticasFilaEmails, { _refresh: refreshKey });
+	const filaEmails = useQuery(api.email.listarFilaEmails, { limite: 50, _refresh: refreshKey });
 
-    return () => {
-      if (refreshInterval) {
-        clearInterval(refreshInterval);
-        refreshInterval = null;
-      }
-    };
-  });
+	// Função para forçar refresh das queries
+	function refreshQueries() {
+		refreshKey++;
+	}
 
-  async function processarFilaManual() {
-    if (processando) return;
-    
-    try {
-      processando = true;
-      const resultado = await client.action(api.email.processarFilaEmailsManual, { limite: 10 });
-      
-      if (resultado.sucesso) {
-        alert(`✅ Processados: ${resultado.processados}, Falhas: ${resultado.falhas}`);
-        // Forçar atualização após processar
-        refreshQueries();
-      } else {
-        alert(`❌ Erro: ${resultado.erro || "Erro desconhecido"}`);
-      }
-    } catch (error) {
-      console.error("Erro ao processar fila:", error);
-      alert("Erro ao processar fila de emails");
-    } finally {
-      processando = false;
-    }
-  }
+	$effect(() => {
+		if (autoRefresh) {
+			refreshInterval = setInterval(() => {
+				refreshQueries();
+			}, 5000); // Refresh a cada 5 segundos
+		} else {
+			if (refreshInterval) {
+				clearInterval(refreshInterval);
+				refreshInterval = null;
+			}
+		}
 
-  function formatarData(timestamp: number | undefined): string {
-    if (!timestamp) return "-";
-    return new Date(timestamp).toLocaleString("pt-BR");
-  }
+		return () => {
+			if (refreshInterval) {
+				clearInterval(refreshInterval);
+				refreshInterval = null;
+			}
+		};
+	});
 
-  function getStatusBadgeClass(status: string): string {
-    switch (status) {
-      case "pendente":
-        return "badge badge-warning";
-      case "enviando":
-        return "badge badge-info";
-      case "enviado":
-        return "badge badge-success";
-      case "falha":
-        return "badge badge-error";
-      default:
-        return "badge badge-ghost";
-    }
-  }
+	async function processarFilaManual() {
+		if (processando) return;
 
-  function getStatusLabel(status: string): string {
-    switch (status) {
-      case "pendente":
-        return "Pendente";
-      case "enviando":
-        return "Enviando";
-      case "enviado":
-        return "Enviado";
-      case "falha":
-        return "Falha";
-      default:
-        return status;
-    }
-  }
+		try {
+			processando = true;
+			const resultado = await client.action(api.email.processarFilaEmailsManual, { limite: 10 });
 
-  function abrirModalDetalhes(email: Doc<"notificacoesEmail">) {
-    emailSelecionado = email;
-    modalDetalhesAberto = true;
-  }
+			if (resultado.sucesso) {
+				alert(`✅ Processados: ${resultado.processados}, Falhas: ${resultado.falhas}`);
+				// Forçar atualização após processar
+				refreshQueries();
+			} else {
+				alert(`❌ Erro: ${resultado.erro || 'Erro desconhecido'}`);
+			}
+		} catch (error) {
+			console.error('Erro ao processar fila:', error);
+			alert('Erro ao processar fila de emails');
+		} finally {
+			processando = false;
+		}
+	}
 
-  function fecharModalDetalhes() {
-    modalDetalhesAberto = false;
-    emailSelecionado = null;
-  }
+	function formatarData(timestamp: number | undefined): string {
+		if (!timestamp) return '-';
+		return new Date(timestamp).toLocaleString('pt-BR');
+	}
+
+	function getStatusBadgeClass(status: string): string {
+		switch (status) {
+			case 'pendente':
+				return 'badge badge-warning';
+			case 'enviando':
+				return 'badge badge-info';
+			case 'enviado':
+				return 'badge badge-success';
+			case 'falha':
+				return 'badge badge-error';
+			default:
+				return 'badge badge-ghost';
+		}
+	}
+
+	function getStatusLabel(status: string): string {
+		switch (status) {
+			case 'pendente':
+				return 'Pendente';
+			case 'enviando':
+				return 'Enviando';
+			case 'enviado':
+				return 'Enviado';
+			case 'falha':
+				return 'Falha';
+			default:
+				return status;
+		}
+	}
+
+	function abrirModalDetalhes(email: Doc<'notificacoesEmail'>) {
+		emailSelecionado = email;
+		modalDetalhesAberto = true;
+	}
+
+	function fecharModalDetalhes() {
+		modalDetalhesAberto = false;
+		emailSelecionado = null;
+	}
 </script>
 
 <div class="container mx-auto p-6">
-  <div class="mb-6">
-    <h1 class="text-3xl font-bold mb-2">📧 Monitoramento de Emails</h1>
-    <p class="text-base-content/70">
-      Acompanhe o status da fila de emails e identifique problemas de envio
-    </p>
-  </div>
+	<div class="mb-6">
+		<h1 class="mb-2 text-3xl font-bold">📧 Monitoramento de Emails</h1>
+		<p class="text-base-content/70">
+			Acompanhe o status da fila de emails e identifique problemas de envio
+		</p>
+	</div>
 
-  <!-- Estatísticas -->
-  {#if estatisticas?.data}
-    <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6">
-      <div class="stat bg-base-200 rounded-lg shadow">
-        <div class="stat-title">Total</div>
-        <div class="stat-value text-2xl">{estatisticas.data.total}</div>
-        <div class="stat-desc">Emails na fila</div>
-      </div>
+	<!-- Estatísticas -->
+	{#if estatisticas?.data}
+		<div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-5">
+			<div class="stat bg-base-200 rounded-lg shadow">
+				<div class="stat-title">Total</div>
+				<div class="stat-value text-2xl">{estatisticas.data.total}</div>
+				<div class="stat-desc">Emails na fila</div>
+			</div>
 
-      <div class="stat bg-warning/10 rounded-lg shadow">
-        <div class="stat-title">Pendentes</div>
-        <div class="stat-value text-2xl text-warning">{estatisticas.data.pendentes}</div>
-        <div class="stat-desc">Aguardando envio</div>
-      </div>
+			<div class="stat bg-warning/10 rounded-lg shadow">
+				<div class="stat-title">Pendentes</div>
+				<div class="stat-value text-warning text-2xl">{estatisticas.data.pendentes}</div>
+				<div class="stat-desc">Aguardando envio</div>
+			</div>
 
-      <div class="stat bg-info/10 rounded-lg shadow">
-        <div class="stat-title">Enviando</div>
-        <div class="stat-value text-2xl text-info">{estatisticas.data.enviando}</div>
-        <div class="stat-desc">Em processamento</div>
-      </div>
+			<div class="stat bg-info/10 rounded-lg shadow">
+				<div class="stat-title">Enviando</div>
+				<div class="stat-value text-info text-2xl">{estatisticas.data.enviando}</div>
+				<div class="stat-desc">Em processamento</div>
+			</div>
 
-      <div class="stat bg-success/10 rounded-lg shadow">
-        <div class="stat-title">Enviados</div>
-        <div class="stat-value text-2xl text-success">{estatisticas.data.enviados}</div>
-        <div class="stat-desc">Concluídos</div>
-      </div>
+			<div class="stat bg-success/10 rounded-lg shadow">
+				<div class="stat-title">Enviados</div>
+				<div class="stat-value text-success text-2xl">{estatisticas.data.enviados}</div>
+				<div class="stat-desc">Concluídos</div>
+			</div>
 
-      <div class="stat bg-error/10 rounded-lg shadow">
-        <div class="stat-title">Falhas</div>
-        <div class="stat-value text-2xl text-error">{estatisticas.data.falhas}</div>
-        <div class="stat-desc">Com erro</div>
-      </div>
-    </div>
-  {:else if estatisticas === undefined}
-    <div class="text-center py-8">
-      <span class="loading loading-spinner loading-lg"></span>
-    </div>
-  {/if}
+			<div class="stat bg-error/10 rounded-lg shadow">
+				<div class="stat-title">Falhas</div>
+				<div class="stat-value text-error text-2xl">{estatisticas.data.falhas}</div>
+				<div class="stat-desc">Com erro</div>
+			</div>
+		</div>
+	{:else if estatisticas === undefined}
+		<div class="py-8 text-center">
+			<span class="loading loading-spinner loading-lg"></span>
+		</div>
+	{/if}
 
-  <!-- Controles -->
-  <div class="card bg-base-100 shadow-xl mb-6">
-    <div class="card-body">
-      <div class="flex items-center justify-between">
-        <div class="form-control">
-          <label class="label cursor-pointer gap-4">
-            <span class="label-text">Atualização automática</span>
-            <input
-              type="checkbox"
-              class="toggle toggle-primary"
-              bind:checked={autoRefresh}
-            />
-          </label>
-        </div>
+	<!-- Controles -->
+	<div class="card bg-base-100 mb-6 shadow-xl">
+		<div class="card-body">
+			<div class="flex items-center justify-between">
+				<div class="form-control">
+					<label class="label cursor-pointer gap-4">
+						<span class="label-text">Atualização automática</span>
+						<input type="checkbox" class="toggle toggle-primary" bind:checked={autoRefresh} />
+					</label>
+				</div>
 
-        <button
-          class="btn btn-primary"
-          onclick={processarFilaManual}
-          disabled={processando}
-        >
-          {#if processando}
-            <span class="loading loading-spinner loading-sm"></span>
-            Processando...
-          {:else}
-            🔄 Processar Fila Manualmente
-          {/if}
-        </button>
-      </div>
-    </div>
-  </div>
+				<button class="btn btn-primary" onclick={processarFilaManual} disabled={processando}>
+					{#if processando}
+						<span class="loading loading-spinner loading-sm"></span>
+						Processando...
+					{:else}
+						🔄 Processar Fila Manualmente
+					{/if}
+				</button>
+			</div>
+		</div>
+	</div>
 
-  <!-- Lista de Emails -->
-  <div class="card bg-base-100 shadow-xl">
-    <div class="card-body">
-      <h2 class="card-title mb-4">Fila de Emails</h2>
+	<!-- Lista de Emails -->
+	<div class="card bg-base-100 shadow-xl">
+		<div class="card-body">
+			<h2 class="card-title mb-4">Fila de Emails</h2>
 
-      {#if filaEmails?.data && filaEmails.data.length > 0}
-        <div class="overflow-x-auto">
-          <table class="table table-zebra w-full">
-            <thead>
-              <tr>
-                <th>Destinatário</th>
-                <th>Assunto</th>
-                <th>Status</th>
-                <th>Tentativas</th>
-                <th>Criado em</th>
-                <th>Última tentativa</th>
-                <th>Erro</th>
-                <th>Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each filaEmails.data as email}
-                <tr>
-                  <td>
-                    <div class="font-medium">{email.destinatario}</div>
-                  </td>
-                  <td>
-                    <div class="max-w-xs truncate" title={email.assunto}>
-                      {email.assunto}
-                    </div>
-                  </td>
-                  <td>
-                    <span class={getStatusBadgeClass(email.status)}>
-                      {getStatusLabel(email.status)}
-                    </span>
-                  </td>
-                  <td>{email.tentativas || 0}</td>
-                  <td class="text-sm">{formatarData(email.criadoEm)}</td>
-                  <td class="text-sm">
-                    {formatarData(email.ultimaTentativa)}
-                  </td>
-                  <td>
-                    {#if email.erroDetalhes}
-                      <button
-                        class="btn btn-ghost btn-xs text-error"
-                        onclick={() => abrirModalDetalhes(email)}
-                      >
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                        </svg>
-                        Ver erro
-                      </button>
-                    {:else}
-                      <span class="text-base-content/50">-</span>
-                    {/if}
-                  </td>
-                  <td>
-                    <button
-                      class="btn btn-ghost btn-xs"
-                      onclick={() => abrirModalDetalhes(email)}
-                      title="Ver detalhes"
-                    >
-                      <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>
-                    </button>
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {:else if filaEmails?.data !== undefined}
-        <div class="text-center py-8 text-base-content/50">
-          <p>Nenhum email na fila</p>
-        </div>
-      {:else}
-        <div class="text-center py-8">
-          <span class="loading loading-spinner loading-lg"></span>
-        </div>
-      {/if}
-    </div>
-  </div>
+			{#if filaEmails?.data && filaEmails.data.length > 0}
+				<div class="overflow-x-auto">
+					<table class="table-zebra table w-full">
+						<thead>
+							<tr>
+								<th>Destinatário</th>
+								<th>Assunto</th>
+								<th>Status</th>
+								<th>Tentativas</th>
+								<th>Criado em</th>
+								<th>Última tentativa</th>
+								<th>Erro</th>
+								<th>Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each filaEmails.data as email}
+								<tr>
+									<td>
+										<div class="font-medium">{email.destinatario}</div>
+									</td>
+									<td>
+										<div class="max-w-xs truncate" title={email.assunto}>
+											{email.assunto}
+										</div>
+									</td>
+									<td>
+										<span class={getStatusBadgeClass(email.status)}>
+											{getStatusLabel(email.status)}
+										</span>
+									</td>
+									<td>{email.tentativas || 0}</td>
+									<td class="text-sm">{formatarData(email.criadoEm)}</td>
+									<td class="text-sm">
+										{formatarData(email.ultimaTentativa)}
+									</td>
+									<td>
+										{#if email.erroDetalhes}
+											<button
+												class="btn btn-xs text-error"
+												onclick={() => abrirModalDetalhes(email)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+													/>
+												</svg>
+												Ver erro
+											</button>
+										{:else}
+											<span class="text-base-content/50">-</span>
+										{/if}
+									</td>
+									<td>
+										<button
+											class="btn btn-xs"
+											onclick={() => abrirModalDetalhes(email)}
+											title="Ver detalhes"
+										>
+											<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>
+										</button>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{:else if filaEmails?.data !== undefined}
+				<div class="text-base-content/50 py-8 text-center">
+					<p>Nenhum email na fila</p>
+				</div>
+			{:else}
+				<div class="py-8 text-center">
+					<span class="loading loading-spinner loading-lg"></span>
+				</div>
+			{/if}
+		</div>
+	</div>
 
-  <!-- Dicas de Troubleshooting -->
-  <div class="card bg-base-200 shadow-xl mt-6">
-    <div class="card-body">
-      <h2 class="card-title">🔍 Troubleshooting</h2>
-      <div class="space-y-2 text-sm">
-        <p>
-          <strong>Emails pendentes não estão sendo enviados?</strong>
-        </p>
-        <ul class="list-disc list-inside ml-4 space-y-1">
-          <li>Verifique se a configuração SMTP está ativa em Configurações de Email</li>
-          <li>Confirme se o cron job está rodando (verifique logs do Convex)</li>
-          <li>Clique em "Processar Fila Manualmente" para forçar o processamento</li>
-        </ul>
+	<!-- Dicas de Troubleshooting -->
+	<div class="card bg-base-200 mt-6 shadow-xl">
+		<div class="card-body">
+			<h2 class="card-title">🔍 Troubleshooting</h2>
+			<div class="space-y-2 text-sm">
+				<p>
+					<strong>Emails pendentes não estão sendo enviados?</strong>
+				</p>
+				<ul class="ml-4 list-inside list-disc space-y-1">
+					<li>Verifique se a configuração SMTP está ativa em Configurações de Email</li>
+					<li>Confirme se o cron job está rodando (verifique logs do Convex)</li>
+					<li>Clique em "Processar Fila Manualmente" para forçar o processamento</li>
+				</ul>
 
-        <p class="mt-4">
-          <strong>Emails com status "Falha"?</strong>
-        </p>
-        <ul class="list-disc list-inside ml-4 space-y-1">
-          <li>Verifique as credenciais SMTP em Configurações de Email</li>
-          <li>Confirme se o servidor SMTP está acessível</li>
-          <li>Verifique os logs do Convex para detalhes do erro</li>
-          <li>Teste a conexão SMTP na página de configurações</li>
-        </ul>
-      </div>
-    </div>
-  </div>
+				<p class="mt-4">
+					<strong>Emails com status "Falha"?</strong>
+				</p>
+				<ul class="ml-4 list-inside list-disc space-y-1">
+					<li>Verifique as credenciais SMTP em Configurações de Email</li>
+					<li>Confirme se o servidor SMTP está acessível</li>
+					<li>Verifique os logs do Convex para detalhes do erro</li>
+					<li>Teste a conexão SMTP na página de configurações</li>
+				</ul>
+			</div>
+		</div>
+	</div>
 </div>
 
 <!-- Modal de Detalhes do Email -->
 {#if modalDetalhesAberto && emailSelecionado}
-  <div class="modal modal-open">
-    <div class="modal-box max-w-4xl">
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="font-bold text-2xl flex items-center gap-2">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-          </svg>
-          Detalhes do Email
-        </h3>
-        <button class="btn btn-sm btn-circle btn-ghost" onclick={fecharModalDetalhes}>
-          <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="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
+	<div class="modal modal-open">
+		<div class="modal-box max-w-4xl">
+			<div class="mb-4 flex items-center justify-between">
+				<h3 class="flex items-center gap-2 text-2xl font-bold">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-6 w-6"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+						/>
+					</svg>
+					Detalhes do Email
+				</h3>
+				<button class="btn btn-sm btn-circle btn-ghost" onclick={fecharModalDetalhes}>
+					<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="M6 18L18 6M6 6l12 12"
+						/>
+					</svg>
+				</button>
+			</div>
 
-      <div class="space-y-4">
-        <!-- Status -->
-        <div class="flex items-center gap-2">
-          <span class="font-semibold">Status:</span>
-          <span class={getStatusBadgeClass(emailSelecionado.status)}>
-            {getStatusLabel(emailSelecionado.status)}
-          </span>
-        </div>
+			<div class="space-y-4">
+				<!-- Status -->
+				<div class="flex items-center gap-2">
+					<span class="font-semibold">Status:</span>
+					<span class={getStatusBadgeClass(emailSelecionado.status)}>
+						{getStatusLabel(emailSelecionado.status)}
+					</span>
+				</div>
 
-        <!-- Informações Principais -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label class="label">
-              <span class="label-text font-semibold">Destinatário</span>
-            </label>
-            <div class="input input-bordered flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-              </svg>
-              {emailSelecionado.destinatario}
-            </div>
-          </div>
+				<!-- Informações Principais -->
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+					<div>
+						<label class="label">
+							<span class="label-text font-semibold">Destinatário</span>
+						</label>
+						<div class="input input-bordered flex items-center gap-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-base-content/50 h-4 w-4"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+								/>
+							</svg>
+							{emailSelecionado.destinatario}
+						</div>
+					</div>
 
-          <div>
-            <label class="label">
-              <span class="label-text font-semibold">Tentativas</span>
-            </label>
-            <div class="input input-bordered flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-              </svg>
-              {emailSelecionado.tentativas || 0}
-            </div>
-          </div>
-        </div>
+					<div>
+						<label class="label">
+							<span class="label-text font-semibold">Tentativas</span>
+						</label>
+						<div class="input input-bordered flex items-center gap-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-base-content/50 h-4 w-4"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+								/>
+							</svg>
+							{emailSelecionado.tentativas || 0}
+						</div>
+					</div>
+				</div>
 
-        <!-- Assunto -->
-        <div>
-          <label class="label">
-            <span class="label-text font-semibold">Assunto</span>
-          </label>
-          <div class="input input-bordered">
-            {emailSelecionado.assunto}
-          </div>
-        </div>
+				<!-- Assunto -->
+				<div>
+					<label class="label">
+						<span class="label-text font-semibold">Assunto</span>
+					</label>
+					<div class="input input-bordered">
+						{emailSelecionado.assunto}
+					</div>
+				</div>
 
-        <!-- Datas -->
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div>
-            <label class="label">
-              <span class="label-text font-semibold">Criado em</span>
-            </label>
-            <div class="input input-bordered flex items-center gap-2">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" 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>
-              {formatarData(emailSelecionado.criadoEm)}
-            </div>
-          </div>
+				<!-- Datas -->
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+					<div>
+						<label class="label">
+							<span class="label-text font-semibold">Criado em</span>
+						</label>
+						<div class="input input-bordered flex items-center gap-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-base-content/50 h-4 w-4"
+								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>
+							{formatarData(emailSelecionado.criadoEm)}
+						</div>
+					</div>
 
-          {#if emailSelecionado.ultimaTentativa}
-            <div>
-              <label class="label">
-                <span class="label-text font-semibold">Última tentativa</span>
-              </label>
-              <div class="input input-bordered flex items-center gap-2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-base-content/50" 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>
-                {formatarData(emailSelecionado.ultimaTentativa)}
-              </div>
-            </div>
-          {/if}
+					{#if emailSelecionado.ultimaTentativa}
+						<div>
+							<label class="label">
+								<span class="label-text font-semibold">Última tentativa</span>
+							</label>
+							<div class="input input-bordered flex items-center gap-2">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-base-content/50 h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+								{formatarData(emailSelecionado.ultimaTentativa)}
+							</div>
+						</div>
+					{/if}
 
-          {#if emailSelecionado.enviadoEm}
-            <div>
-              <label class="label">
-                <span class="label-text font-semibold">Enviado em</span>
-              </label>
-              <div class="input input-bordered flex items-center gap-2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-                {formatarData(emailSelecionado.enviadoEm)}
-              </div>
-            </div>
-          {/if}
+					{#if emailSelecionado.enviadoEm}
+						<div>
+							<label class="label">
+								<span class="label-text font-semibold">Enviado em</span>
+							</label>
+							<div class="input input-bordered flex items-center gap-2">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-success h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+									/>
+								</svg>
+								{formatarData(emailSelecionado.enviadoEm)}
+							</div>
+						</div>
+					{/if}
 
-          {#if emailSelecionado.agendadaPara}
-            <div>
-              <label class="label">
-                <span class="label-text font-semibold">Agendado para</span>
-              </label>
-              <div class="input input-bordered flex items-center gap-2">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-info" 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>
-                {formatarData(emailSelecionado.agendadaPara)}
-              </div>
-            </div>
-          {/if}
-        </div>
+					{#if emailSelecionado.agendadaPara}
+						<div>
+							<label class="label">
+								<span class="label-text font-semibold">Agendado para</span>
+							</label>
+							<div class="input input-bordered flex items-center gap-2">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-info h-4 w-4"
+									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>
+								{formatarData(emailSelecionado.agendadaPara)}
+							</div>
+						</div>
+					{/if}
+				</div>
 
-        <!-- Erro Detalhado -->
-        {#if emailSelecionado.erroDetalhes}
-          <div>
-            <label class="label">
-              <span class="label-text font-semibold text-error">Detalhes do Erro</span>
-            </label>
-            <div class="bg-error/10 border border-error/20 rounded-lg p-4">
-              <pre class="text-sm text-error whitespace-pre-wrap break-words">{emailSelecionado.erroDetalhes}</pre>
-            </div>
-          </div>
-        {/if}
+				<!-- Erro Detalhado -->
+				{#if emailSelecionado.erroDetalhes}
+					<div>
+						<label class="label">
+							<span class="label-text text-error font-semibold">Detalhes do Erro</span>
+						</label>
+						<div class="bg-error/10 border-error/20 rounded-lg border p-4">
+							<pre
+								class="text-error text-sm break-words whitespace-pre-wrap">{emailSelecionado.erroDetalhes}</pre>
+						</div>
+					</div>
+				{/if}
 
-        <!-- Corpo do Email (Preview) -->
-        {#if emailSelecionado.corpo}
-          <div>
-            <label class="label">
-              <span class="label-text font-semibold">Preview do Email</span>
-            </label>
-            <div class="border border-base-300 rounded-lg p-4 bg-base-200 max-h-64 overflow-y-auto">
-              {@html emailSelecionado.corpo}
-            </div>
-          </div>
-        {/if}
-      </div>
+				<!-- Corpo do Email (Preview) -->
+				{#if emailSelecionado.corpo}
+					<div>
+						<label class="label">
+							<span class="label-text font-semibold">Preview do Email</span>
+						</label>
+						<div class="border-base-300 bg-base-200 max-h-64 overflow-y-auto rounded-lg border p-4">
+							{@html emailSelecionado.corpo}
+						</div>
+					</div>
+				{/if}
+			</div>
 
-      <div class="modal-action">
-        <button class="btn btn-primary" onclick={fecharModalDetalhes}>
-          Fechar
-        </button>
-      </div>
-    </div>
-    <div class="modal-backdrop" onclick={fecharModalDetalhes}></div>
-  </div>
+			<div class="modal-action">
+				<button class="btn btn-primary" onclick={fecharModalDetalhes}> Fechar </button>
+			</div>
+		</div>
+		<div class="modal-backdrop" onclick={fecharModalDetalhes}></div>
+	</div>
 {/if}
-
diff --git a/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte b/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte
index 274680b..32b2e99 100644
--- a/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte
@@ -30,7 +30,7 @@
 				</p>
 			</div>
 		</div>
-		<a href={resolve('/ti')} class="btn btn-ghost">
+		<a href={resolve('/ti')} class="btn">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				class="h-5 w-5"
diff --git a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
index f6f233c..89f0240 100644
--- a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
@@ -1,2271 +1,2024 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
-
-  // Tipos para agendamentos
-  type TipoAgendamento = "email" | "chat";
-  type StatusAgendamento = "agendado" | "enviado" | "cancelado";
-
-  interface AgendamentoEmail {
-    _id: Id<"notificacoesEmail">;
-    _creationTime: number;
-    destinatario: string;
-    destinatarioId: Id<"usuarios"> | undefined;
-    assunto: string;
-    corpo: string;
-    templateId: Id<"templatesMensagens"> | undefined;
-    status: "pendente" | "enviando" | "enviado" | "falha";
-    agendadaPara: number | undefined;
-    enviadoPor: Id<"usuarios">;
-    criadoEm: number;
-    enviadoEm: number | undefined;
-    destinatarioInfo: Doc<"usuarios"> | null;
-    templateInfo: Doc<"templatesMensagens"> | null;
-  }
-
-  interface AgendamentoChat {
-    _id: Id<"mensagens">;
-    _creationTime: number;
-    conversaId: Id<"conversas">;
-    remetenteId: Id<"usuarios">;
-    conteudo: string;
-    agendadaPara: number | undefined;
-    enviadaEm: number;
-    conversaInfo: Doc<"conversas"> | null;
-    destinatarioInfo: Doc<"usuarios"> | null;
-  }
-
-  type Agendamento =
-    | { tipo: "email"; dados: AgendamentoEmail }
-    | { tipo: "chat"; dados: AgendamentoChat };
-
-  const client = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
-
-  // Queries
-  const templatesQuery = useQuery(api.templatesMensagens.listarTemplates, {});
-  const usuariosQuery = useQuery(api.usuarios.listar, {});
-
-  // Mapa de emailIds para rastrear status
-  let emailIdsRastreados = $state<Set<string>>(new Set());
-
-  // Query para buscar status dos emails (só executa quando há IDs)
-  const emailIdsArray = $derived(
-    Array.from(emailIdsRastreados).map((id) => id as Id<"notificacoesEmail">),
-  );
-  // Usar função para evitar execução quando array está vazio
-  const emailsStatusQuery = $derived.by(() => {
-    if (emailIdsArray.length === 0) return null;
-    return useQuery(api.email.buscarEmailsPorIds, { emailIds: emailIdsArray });
-  });
-
-  // Queries para agendamentos
-  const agendamentosEmailQuery = useQuery(
-    api.email.listarAgendamentosEmail,
-    {},
-  );
-  const agendamentosChatQuery = useQuery(api.chat.listarAgendamentosChat, {});
-
-  // Filtro de agendamentos
-  type FiltroAgendamento = "todos" | "agendados" | "enviados";
-  let filtroAgendamento = $state<FiltroAgendamento>("todos");
-
-  // Extrair dados das queries de forma robusta
-  const templates = $derived.by(() => {
-    if (templatesQuery === undefined || templatesQuery === null) {
-      return [];
-    }
-    if ("data" in templatesQuery && templatesQuery.data !== undefined) {
-      return Array.isArray(templatesQuery.data) ? templatesQuery.data : [];
-    }
-    if (Array.isArray(templatesQuery)) {
-      return templatesQuery;
-    }
-    return [];
-  });
-
-  const usuarios = $derived.by(() => {
-    if (usuariosQuery === undefined || usuariosQuery === null) {
-      return [];
-    }
-    if ("data" in usuariosQuery && usuariosQuery.data !== undefined) {
-      return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
-    }
-    if (Array.isArray(usuariosQuery)) {
-      return usuariosQuery;
-    }
-    return [];
-  });
-
-  // Estados de carregamento e erro
-  const carregandoTemplates = $derived(
-    templatesQuery === undefined || templatesQuery === null,
-  );
-  const carregandoUsuarios = $derived(
-    usuariosQuery === undefined || usuariosQuery === null,
-  );
-
-  // Verificar erros de forma mais robusta
-  const erroTemplates = $derived.by(() => {
-    if (templatesQuery === undefined || templatesQuery === null) return false;
-    // Verificar se é um objeto com propriedade error
-    if (typeof templatesQuery === "object" && "error" in templatesQuery) {
-      return (
-        templatesQuery.error !== undefined && templatesQuery.error !== null
-      );
-    }
-    return false;
-  });
-
-  const erroUsuarios = $derived.by(() => {
-    if (usuariosQuery === undefined || usuariosQuery === null) return false;
-    if (typeof usuariosQuery === "object" && "error" in usuariosQuery) {
-      return usuariosQuery.error !== undefined && usuariosQuery.error !== null;
-    }
-    return false;
-  });
-
-  // Log para debug (remover depois se necessário)
-  $effect(() => {
-    if (templatesQuery !== undefined && templatesQuery !== null) {
-      console.log("Templates Query:", templatesQuery);
-      console.log("Templates Extraídos:", templates);
-    }
-  });
-
-  let destinatarioId = $state("");
-  let enviarParaTodos = $state(false);
-  let canal = $state<"chat" | "email" | "ambos">("chat");
-  let templateId = $state("");
-  let mensagemPersonalizada = $state("");
-  let usarTemplate = $state(true);
-  let processando = $state(false);
-  let criandoTemplates = $state(false);
-  let progressoEnvio = $state({ total: 0, enviados: 0, falhas: 0 });
-
-  // Estrutura de dados para logs de envio
-  type StatusLog = "sucesso" | "erro" | "fila" | "info" | "enviando";
-  type TipoLog = "chat" | "email";
-  type LogEnvio = {
-    timestamp: number;
-    tipo: TipoLog;
-    destinatario: string;
-    status: StatusLog;
-    mensagem: string;
-    emailId?: string; // Para emails, guardar o ID para rastrear status
-  };
-
-  let logsEnvio = $state<LogEnvio[]>([]);
-  let terminalScrollRef: HTMLDivElement | null = $state(null);
-
-  // Estados para agendamento
-  let agendarEnvio = $state(false);
-  let dataAgendamento = $state("");
-  let horaAgendamento = $state("");
-
-  // Calcular data/hora mínimas
-  const now = new Date();
-  const minDate = format(now, "yyyy-MM-dd");
-
-  // Hora mínima recalculada baseada na data selecionada
-  const horaMinima = $derived.by(() => {
-    if (!dataAgendamento) return format(now, "HH:mm");
-    const hoje = format(now, "yyyy-MM-dd");
-    if (dataAgendamento === hoje) {
-      return format(now, "HH:mm");
-    }
-    return undefined; // Sem restrição se for data futura
-  });
-
-  function getPreviewAgendamento(): string {
-    if (!agendarEnvio || !dataAgendamento || !horaAgendamento) return "";
-    try {
-      const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
-      return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
-    } catch {
-      return "";
-    }
-  }
-
-  // Estados para modal de novo template
-  let modalNovoTemplateAberto = $state(false);
-  let codigoTemplate = $state("");
-  let nomeTemplate = $state("");
-  let tituloTemplate = $state("");
-  let corpoTemplate = $state("");
-  let variaveisTemplate = $state("");
-  let criandoNovoTemplate = $state(false);
-
-  // Estado para mensagens de feedback
-  let mensagem = $state<{
-    tipo: "success" | "error" | "info";
-    texto: string;
-  } | null>(null);
-
-  const templateSelecionado = $derived(
-    templates.find((t) => t._id === templateId),
-  );
-
-  // Função para renderizar template com variáveis (similar à função do backend)
-  function renderizarTemplate(
-    template: string,
-    variaveis: Record<string, string>,
-  ): string {
-    let resultado = template;
-
-    for (const [chave, valor] of Object.entries(variaveis)) {
-      const placeholder = `{{${chave}}}`;
-      resultado = resultado.replace(new RegExp(placeholder, "g"), valor);
-    }
-
-    return resultado;
-  }
-
-  // Função para mostrar mensagens
-  function mostrarMensagem(tipo: "success" | "error" | "info", texto: string) {
-    mensagem = { tipo, texto };
-    setTimeout(() => {
-      mensagem = null;
-    }, 5000);
-  }
-
-  // Função para adicionar log ao terminal
-  function adicionarLog(
-    tipo: TipoLog,
-    destinatario: string,
-    status: StatusLog,
-    mensagem: string,
-    emailId?: string,
-  ) {
-    logsEnvio = [
-      ...logsEnvio,
-      {
-        timestamp: Date.now(),
-        tipo,
-        destinatario,
-        status,
-        mensagem,
-        emailId,
-      },
-    ];
-
-    // Adicionar emailId ao rastreamento se fornecido
-    if (emailId) {
-      emailIdsRastreados = new Set([...emailIdsRastreados, emailId]);
-    }
-
-    // Auto-scroll para o final
-    setTimeout(() => {
-      if (terminalScrollRef) {
-        terminalScrollRef.scrollTop = terminalScrollRef.scrollHeight;
-      }
-    }, 10);
-  }
-
-  // Atualizar logs quando status dos emails mudar
-  $effect(() => {
-    if (!emailsStatusQuery || emailsStatusQuery === undefined) return;
-
-    // Extrair dados da query
-    const emails = Array.isArray(emailsStatusQuery)
-      ? emailsStatusQuery
-      : "data" in emailsStatusQuery && Array.isArray(emailsStatusQuery.data)
-        ? emailsStatusQuery.data
-        : [];
-
-    if (emails.length === 0) return;
-
-    for (const email of emails) {
-      if (!email) continue;
-
-      // Encontrar logs relacionados a este email
-      const logsRelacionados = logsEnvio.filter(
-        (log) => log.emailId === email._id,
-      );
-
-      for (const log of logsRelacionados) {
-        // Verificar se o status mudou
-        const novoStatus: StatusLog =
-          email.status === "enviado"
-            ? "sucesso"
-            : email.status === "falha"
-              ? "erro"
-              : email.status === "enviando"
-                ? "enviando"
-                : email.status === "pendente"
-                  ? "fila"
-                  : "info";
-
-        // Se o status mudou, atualizar o log
-        if (log.status !== novoStatus) {
-          const indice = logsEnvio.findIndex((l) => l === log);
-          if (indice !== -1) {
-            const novaMensagem =
-              email.status === "enviado"
-                ? "Email enviado com sucesso"
-                : email.status === "falha"
-                  ? `Falha ao enviar: ${email.erroDetalhes || "Erro desconhecido"}`
-                  : email.status === "enviando"
-                    ? "Enviando email..."
-                    : email.status === "pendente"
-                      ? "Email em fila de envio"
-                      : log.mensagem;
-
-            logsEnvio = logsEnvio.map((l, i) =>
-              i === indice
-                ? { ...l, status: novoStatus, mensagem: novaMensagem }
-                : l,
-            );
-          }
-        }
-      }
-    }
-  });
-
-  // Função para limpar logs
-  function limparLogs() {
-    logsEnvio = [];
-    emailIdsRastreados = new Set();
-  }
-
-  // Extrair e processar agendamentos
-  const agendamentosEmail = $derived.by(() => {
-    if (!agendamentosEmailQuery || agendamentosEmailQuery === undefined)
-      return [];
-    const dados = Array.isArray(agendamentosEmailQuery)
-      ? agendamentosEmailQuery
-      : "data" in agendamentosEmailQuery &&
-          Array.isArray(agendamentosEmailQuery.data)
-        ? agendamentosEmailQuery.data
-        : [];
-    return dados as AgendamentoEmail[];
-  });
-
-  const agendamentosChat = $derived.by(() => {
-    if (!agendamentosChatQuery || agendamentosChatQuery === undefined)
-      return [];
-    const dados = Array.isArray(agendamentosChatQuery)
-      ? agendamentosChatQuery
-      : "data" in agendamentosChatQuery &&
-          Array.isArray(agendamentosChatQuery.data)
-        ? agendamentosChatQuery.data
-        : [];
-    return dados as AgendamentoChat[];
-  });
-
-  // Combinar e processar agendamentos
-  const todosAgendamentos = $derived.by(() => {
-    const agendamentos: Agendamento[] = [];
-
-    for (const email of agendamentosEmail) {
-      if (email.agendadaPara) {
-        agendamentos.push({
-          tipo: "email",
-          dados: email,
-        });
-      }
-    }
-
-    for (const chat of agendamentosChat) {
-      if (chat.agendadaPara) {
-        agendamentos.push({
-          tipo: "chat",
-          dados: chat,
-        });
-      }
-    }
-
-    // Ordenar: futuros primeiro (mais próximos primeiro), depois passados (mais recentes primeiro)
-    return agendamentos.sort((a, b) => {
-      const timestampA =
-        a.tipo === "email"
-          ? (a.dados.agendadaPara ?? 0)
-          : (a.dados.agendadaPara ?? 0);
-      const timestampB =
-        b.tipo === "email"
-          ? (b.dados.agendadaPara ?? 0)
-          : (b.dados.agendadaPara ?? 0);
-      const agora = Date.now();
-
-      const aFuturo = timestampA > agora;
-      const bFuturo = timestampB > agora;
-
-      // Futuros primeiro
-      if (aFuturo && !bFuturo) return -1;
-      if (!aFuturo && bFuturo) return 1;
-
-      // Dentro do mesmo grupo, ordenar por timestamp
-      if (aFuturo) {
-        // Futuros: mais próximos primeiro
-        return timestampA - timestampB;
-      } else {
-        // Passados: mais recentes primeiro
-        return timestampB - timestampA;
-      }
-    });
-  });
-
-  // Filtrar agendamentos
-  const agendamentosFiltrados = $derived.by(() => {
-    if (filtroAgendamento === "todos") return todosAgendamentos;
-
-    return todosAgendamentos.filter((ag) => {
-      const status = obterStatusAgendamento(ag);
-      if (filtroAgendamento === "agendados") return status === "agendado";
-      if (filtroAgendamento === "enviados") return status === "enviado";
-      return true;
-    });
-  });
-
-  // Função para obter status do agendamento
-  function obterStatusAgendamento(agendamento: Agendamento): StatusAgendamento {
-    if (agendamento.tipo === "email") {
-      const email = agendamento.dados;
-      if (email.status === "enviado") return "enviado";
-      if (email.agendadaPara && email.agendadaPara <= Date.now())
-        return "enviado";
-      return "agendado";
-    } else {
-      const chat = agendamento.dados;
-      if (chat.agendadaPara && chat.agendadaPara <= Date.now())
-        return "enviado";
-      return "agendado";
-    }
-  }
-
-  // Função para cancelar agendamento
-  async function cancelarAgendamento(agendamento: Agendamento) {
-    if (!confirm("Tem certeza que deseja cancelar este agendamento?")) {
-      return;
-    }
-
-    try {
-      if (agendamento.tipo === "email") {
-        const resultado = await client.mutation(
-          api.email.cancelarAgendamentoEmail,
-          {
-            emailId: agendamento.dados._id,
-          },
-        );
-        if (resultado.sucesso) {
-          mostrarMensagem(
-            "success",
-            "Agendamento de email cancelado com sucesso!",
-          );
-        } else {
-          mostrarMensagem(
-            "error",
-            resultado.erro || "Erro ao cancelar agendamento",
-          );
-        }
-      } else {
-        const resultado = await client.mutation(
-          api.chat.cancelarMensagemAgendada,
-          {
-            mensagemId: agendamento.dados._id,
-          },
-        );
-        if (resultado.sucesso) {
-          mostrarMensagem(
-            "success",
-            "Agendamento de chat cancelado com sucesso!",
-          );
-        } else {
-          mostrarMensagem(
-            "error",
-            resultado.erro || "Erro ao cancelar agendamento",
-          );
-        }
-      }
-    } catch (error) {
-      const erro = error instanceof Error ? error.message : "Erro desconhecido";
-      mostrarMensagem("error", `Erro ao cancelar agendamento: ${erro}`);
-    }
-  }
-
-  // Função para obter nome do destinatário
-  function obterNomeDestinatario(agendamento: Agendamento): string {
-    if (agendamento.tipo === "email") {
-      return (
-        agendamento.dados.destinatarioInfo?.nome ||
-        agendamento.dados.destinatario ||
-        "Usuário"
-      );
-    } else {
-      return agendamento.dados.destinatarioInfo?.nome || "Usuário";
-    }
-  }
-
-  // Função para formatar data/hora do agendamento
-  function formatarDataAgendamento(agendamento: Agendamento): string {
-    const timestamp =
-      agendamento.tipo === "email"
-        ? agendamento.dados.agendadaPara
-        : agendamento.dados.agendadaPara;
-
-    if (!timestamp) return "N/A";
-
-    return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
-      locale: ptBR,
-    });
-  }
-
-  // Função para formatar timestamp
-  function formatarTimestamp(timestamp: number): string {
-    return format(new Date(timestamp), "HH:mm:ss", { locale: ptBR });
-  }
-
-  // Função para obter cor do status
-  function obterCorStatus(status: StatusLog): string {
-    switch (status) {
-      case "sucesso":
-        return "text-success";
-      case "erro":
-        return "text-error";
-      case "fila":
-        return "text-warning";
-      case "enviando":
-        return "text-info";
-      case "info":
-        return "text-info";
-      default:
-        return "text-base-content";
-    }
-  }
-
-  async function criarTemplatesPadrao() {
-    if (criandoTemplates) return;
-
-    criandoTemplates = true;
-    try {
-      const resultado = await client.mutation(
-        api.templatesMensagens.criarTemplatesPadrao,
-        {},
-      );
-      if (resultado.sucesso) {
-        mostrarMensagem(
-          "success",
-          "Templates padrão criados com sucesso! A página será recarregada.",
-        );
-        setTimeout(() => {
-          window.location.reload();
-        }, 2000);
-      } else {
-        mostrarMensagem("error", "Erro ao criar templates padrão.");
-      }
-    } catch (error) {
-      const erro = error instanceof Error ? error.message : "Erro desconhecido";
-      console.error("Erro ao criar templates:", error);
-      mostrarMensagem("error", "Erro ao criar templates: " + erro);
-    } finally {
-      criandoTemplates = false;
-    }
-  }
-
-  function abrirModalNovoTemplate() {
-    modalNovoTemplateAberto = true;
-    // Limpar campos
-    codigoTemplate = "";
-    nomeTemplate = "";
-    tituloTemplate = "";
-    corpoTemplate = "";
-    variaveisTemplate = "";
-  }
-
-  function fecharModalNovoTemplate() {
-    modalNovoTemplateAberto = false;
-  }
-
-  async function salvarNovoTemplate() {
-    if (!currentUser?.data) {
-      mostrarMensagem(
-        "error",
-        "Você precisa estar autenticado para criar templates.",
-      );
-      return;
-    }
-
-    // Validações
-    if (!codigoTemplate.trim()) {
-      mostrarMensagem("error", "O código do template é obrigatório.");
-      return;
-    }
-    if (!nomeTemplate.trim()) {
-      mostrarMensagem("error", "O nome do template é obrigatório.");
-      return;
-    }
-    if (!tituloTemplate.trim()) {
-      mostrarMensagem("error", "O título do template é obrigatório.");
-      return;
-    }
-    if (!corpoTemplate.trim()) {
-      mostrarMensagem("error", "O corpo do template é obrigatório.");
-      return;
-    }
-
-    // Processar variáveis (separadas por vírgula ou espaço)
-    const variaveis = variaveisTemplate
-      .split(/[,;\s]+/)
-      .map((v) => v.trim())
-      .filter((v) => v.length > 0);
-
-    criandoNovoTemplate = true;
-    try {
-      const resultado = await client.mutation(
-        api.templatesMensagens.criarTemplate,
-        {
-          codigo: codigoTemplate.trim().toUpperCase().replace(/\s+/g, "_"),
-          nome: nomeTemplate.trim(),
-          titulo: tituloTemplate.trim(),
-          corpo: corpoTemplate.trim(),
-          variaveis: variaveis.length > 0 ? variaveis : undefined,
-          criadoPorId: currentUser.data._id as Id<"usuarios">,
-        },
-      );
-
-      if (resultado.sucesso) {
-        mostrarMensagem("success", "Template criado com sucesso!");
-        fecharModalNovoTemplate();
-        // Recarregar a página para atualizar a lista
-        setTimeout(() => {
-          window.location.reload();
-        }, 1500);
-      } else {
-        mostrarMensagem(
-          "error",
-          "Erro ao criar template: " + (resultado.erro || "Erro desconhecido"),
-        );
-      }
-    } catch (error) {
-      const erro = error instanceof Error ? error.message : "Erro desconhecido";
-      console.error("Erro ao criar template:", error);
-      mostrarMensagem("error", "Erro ao criar template: " + erro);
-    } finally {
-      criandoNovoTemplate = false;
-    }
-  }
-
-  async function enviarNotificacao() {
-    if (!enviarParaTodos && !destinatarioId) {
-      mostrarMensagem(
-        "error",
-        "Selecione um destinatário ou marque 'Enviar para todos'",
-      );
-      return;
-    }
-
-    if (usarTemplate && !templateId) {
-      mostrarMensagem("error", "Selecione um template");
-      return;
-    }
-
-    if (!usarTemplate && !mensagemPersonalizada.trim()) {
-      mostrarMensagem("error", "Digite uma mensagem");
-      return;
-    }
-
-    // Validar agendamento se marcado
-    let agendadaPara: number | undefined = undefined;
-    if (agendarEnvio) {
-      if (!dataAgendamento || !horaAgendamento) {
-        mostrarMensagem("error", "Preencha a data e hora para agendamento");
-        return;
-      }
-
-      try {
-        const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
-        if (dataHora.getTime() <= Date.now()) {
-          mostrarMensagem("error", "A data e hora devem ser futuras");
-          return;
-        }
-        agendadaPara = dataHora.getTime();
-      } catch (error) {
-        mostrarMensagem("error", "Data ou hora inválida");
-        return;
-      }
-    }
-
-    processando = true;
-    progressoEnvio = { total: 0, enviados: 0, falhas: 0 };
-
-    // Limpar logs anteriores quando iniciar novo envio
-    logsEnvio = [];
-    emailIdsRastreados = new Set();
-
-    try {
-      // Obter lista de destinatários
-      const destinatarios: typeof usuarios = enviarParaTodos
-        ? usuarios
-        : usuarios.filter((u) => u._id === destinatarioId);
-
-      if (destinatarios.length === 0) {
-        adicionarLog(
-          "email",
-          "Sistema",
-          "erro",
-          "Nenhum destinatário encontrado",
-        );
-        mostrarMensagem("error", "Nenhum destinatário encontrado");
-        return;
-      }
-
-      progressoEnvio.total = destinatarios.length;
-
-      // Log inicial
-      const tipoMensagem = usarTemplate
-        ? `Template: ${templateSelecionado?.nome || ""}`
-        : "Mensagem personalizada";
-      const destinatariosText = enviarParaTodos
-        ? `Todos os usuários (${destinatarios.length})`
-        : destinatarios.map((d) => d.nome).join(", ");
-      adicionarLog(
-        "email",
-        "Sistema",
-        "info",
-        `Iniciando envio de notificação via ${canal} para ${destinatariosText} - ${tipoMensagem}`,
-      );
-
-      // Se for envio para um único usuário
-      if (destinatarios.length === 1) {
-        const destinatario = destinatarios[0];
-        let resultadoChat = null;
-        let resultadoEmail = null;
-
-        // ENVIAR PARA CHAT
-        if (canal === "chat" || canal === "ambos") {
-          try {
-            adicionarLog(
-              "chat",
-              destinatario.nome,
-              "enviando",
-              "Criando/buscando conversa...",
-            );
-            const conversaId = await client.mutation(
-              api.chat.criarOuBuscarConversaIndividual,
-              { outroUsuarioId: destinatario._id as Id<"usuarios"> },
-            );
-
-            if (conversaId) {
-              const mensagem =
-                usarTemplate && templateSelecionado
-                  ? renderizarTemplate(templateSelecionado.corpo, {
-                      nome: destinatario.nome,
-                      matricula: destinatario.matricula || "",
-                    })
-                  : mensagemPersonalizada;
-
-              if (agendadaPara) {
-                // Agendar mensagem
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "info",
-                  "Agendando mensagem...",
-                );
-                resultadoChat = await client.mutation(
-                  api.chat.agendarMensagem,
-                  {
-                    conversaId: conversaId,
-                    conteudo: mensagem,
-                    agendadaPara: agendadaPara,
-                  },
-                );
-                const dataFormatada = format(
-                  new Date(agendadaPara),
-                  "dd/MM/yyyy 'às' HH:mm",
-                  { locale: ptBR },
-                );
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "sucesso",
-                  `Mensagem agendada para ${dataFormatada}`,
-                );
-              } else {
-                // Envio imediato
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "enviando",
-                  "Enviando mensagem...",
-                );
-                resultadoChat = await client.mutation(api.chat.enviarMensagem, {
-                  conversaId: conversaId,
-                  conteudo: mensagem,
-                  tipo: "texto",
-                  permitirNotificacaoParaSiMesmo: true,
-                });
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "sucesso",
-                  "Mensagem enviada com sucesso",
-                );
-              }
-            } else {
-              adicionarLog(
-                "chat",
-                destinatario.nome,
-                "erro",
-                "Falha ao criar/buscar conversa",
-              );
-            }
-          } catch (error) {
-            const erro =
-              error instanceof Error ? error.message : "Erro desconhecido";
-            console.error("Erro ao enviar chat:", error);
-            adicionarLog("chat", destinatario.nome, "erro", `Erro: ${erro}`);
-          }
-        }
-
-        // ENVIAR PARA EMAIL
-        if (canal === "email" || canal === "ambos") {
-          if (destinatario.email) {
-            try {
-              adicionarLog(
-                "email",
-                destinatario.nome,
-                "enviando",
-                `Enfileirando email para ${destinatario.email}...`,
-              );
-              if (usarTemplate && templateId) {
-                const template = templateSelecionado;
-                if (template) {
-                  const emailId = await client.action(
-                    api.email.enviarEmailComTemplate,
-                    {
-                      destinatario: destinatario.email,
-                      destinatarioId: destinatario._id as Id<"usuarios">,
-                      templateCodigo: template.codigo,
-                      variaveis: {
-                        nome: destinatario.nome,
-                        matricula: destinatario.matricula,
-                      },
-                      enviadoPor: currentUser.data._id as Id<"usuarios">,
-                      agendadaPara: agendadaPara,
-                    },
-                  );
-                  if (emailId) {
-                    if (agendadaPara) {
-                      const dataFormatada = format(
-                        new Date(agendadaPara),
-                        "dd/MM/yyyy 'às' HH:mm",
-                        { locale: ptBR },
-                      );
-                      adicionarLog(
-                        "email",
-                        destinatario.nome,
-                        "fila",
-                        `Email agendado para ${dataFormatada}`,
-                        emailId,
-                      );
-                    } else {
-                      adicionarLog(
-                        "email",
-                        destinatario.nome,
-                        "fila",
-                        "Email enfileirado para envio",
-                        emailId,
-                      );
-                    }
-                  } else {
-                    adicionarLog(
-                      "email",
-                      destinatario.nome,
-                      "erro",
-                      "Falha ao enfileirar email",
-                    );
-                  }
-                } else {
-                  adicionarLog(
-                    "email",
-                    destinatario.nome,
-                    "erro",
-                    "Template não encontrado",
-                  );
-                }
-              } else {
-                const emailId = await client.mutation(
-                  api.email.enfileirarEmail,
-                  {
-                    destinatario: destinatario.email,
-                    destinatarioId: destinatario._id as Id<"usuarios">,
-                    assunto: "Notificação do Sistema",
-                    corpo: mensagemPersonalizada,
-                    enviadoPor: currentUser.data._id as Id<"usuarios">,
-                    agendadaPara: agendadaPara,
-                  },
-                );
-                if (emailId) {
-                  resultadoEmail = { sucesso: true, emailId };
-                  if (agendadaPara) {
-                    const dataFormatada = format(
-                      new Date(agendadaPara),
-                      "dd/MM/yyyy 'às' HH:mm",
-                      { locale: ptBR },
-                    );
-                    adicionarLog(
-                      "email",
-                      destinatario.nome,
-                      "fila",
-                      `Email agendado para ${dataFormatada}`,
-                      emailId,
-                    );
-                  } else {
-                    adicionarLog(
-                      "email",
-                      destinatario.nome,
-                      "fila",
-                      "Email enfileirado para envio",
-                      emailId,
-                    );
-                  }
-                } else {
-                  adicionarLog(
-                    "email",
-                    destinatario.nome,
-                    "erro",
-                    "Falha ao enfileirar email",
-                  );
-                }
-              }
-            } catch (error) {
-              const erro =
-                error instanceof Error ? error.message : "Erro desconhecido";
-              console.error("Erro ao enviar email:", error);
-              adicionarLog("email", destinatario.nome, "erro", `Erro: ${erro}`);
-            }
-          } else {
-            adicionarLog(
-              "email",
-              destinatario.nome,
-              "erro",
-              "Destinatário não possui email cadastrado",
-            );
-          }
-        }
-
-        // Feedback de sucesso
-        let mensagemSucesso = agendadaPara
-          ? `Notificação agendada com sucesso!`
-          : "Notificação enviada com sucesso!";
-        if (agendadaPara) {
-          const dataFormatada = format(
-            new Date(agendadaPara),
-            "dd/MM/yyyy 'às' HH:mm",
-            { locale: ptBR },
-          );
-          mensagemSucesso += ` Será enviada em: ${dataFormatada}`;
-        } else {
-          if (canal === "ambos") {
-            if (resultadoChat && resultadoEmail) {
-              mensagemSucesso = "Notificação enviada para Chat e Email!";
-            } else if (resultadoChat) {
-              mensagemSucesso = "Notificação enviada para Chat. Email falhou.";
-            } else if (resultadoEmail) {
-              mensagemSucesso = "Notificação enviada para Email. Chat falhou.";
-            }
-          } else if (canal === "chat" && resultadoChat) {
-            mensagemSucesso = "Mensagem enviada no Chat!";
-          } else if (canal === "email" && resultadoEmail) {
-            mensagemSucesso = "Email enfileirado para envio!";
-          }
-        }
-
-        mostrarMensagem("success", mensagemSucesso);
-        progressoEnvio.enviados = 1;
-      } else {
-        // ENVIO EM MASSA
-        let sucessosChat = 0;
-        let sucessosEmail = 0;
-        let falhasChat = 0;
-        let falhasEmail = 0;
-
-        adicionarLog(
-          "email",
-          "Sistema",
-          "info",
-          `Processando ${destinatarios.length} destinatários...`,
-        );
-
-        for (const destinatario of destinatarios) {
-          try {
-            // ENVIAR PARA CHAT
-            if (canal === "chat" || canal === "ambos") {
-              try {
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "enviando",
-                  "Processando...",
-                );
-                const conversaId = await client.mutation(
-                  api.chat.criarOuBuscarConversaIndividual,
-                  { outroUsuarioId: destinatario._id as Id<"usuarios"> },
-                );
-
-                if (conversaId) {
-                  // Renderizar template com variáveis do destinatário
-                  const mensagem =
-                    usarTemplate && templateSelecionado
-                      ? renderizarTemplate(templateSelecionado.corpo, {
-                          nome: destinatario.nome,
-                          matricula: destinatario.matricula || "",
-                        })
-                      : mensagemPersonalizada;
-
-                  if (agendadaPara) {
-                    await client.mutation(api.chat.agendarMensagem, {
-                      conversaId: conversaId,
-                      conteudo: mensagem,
-                      agendadaPara: agendadaPara,
-                    });
-                    const dataFormatada = format(
-                      new Date(agendadaPara),
-                      "dd/MM/yyyy 'às' HH:mm",
-                      { locale: ptBR },
-                    );
-                    adicionarLog(
-                      "chat",
-                      destinatario.nome,
-                      "sucesso",
-                      `Agendado para ${dataFormatada}`,
-                    );
-                  } else {
-                    await client.mutation(api.chat.enviarMensagem, {
-                      conversaId: conversaId,
-                      conteudo: mensagem,
-                      tipo: "texto",
-                      permitirNotificacaoParaSiMesmo: true,
-                    });
-                    adicionarLog(
-                      "chat",
-                      destinatario.nome,
-                      "sucesso",
-                      "Enviado com sucesso",
-                    );
-                  }
-                  sucessosChat++;
-                } else {
-                  adicionarLog(
-                    "chat",
-                    destinatario.nome,
-                    "erro",
-                    "Falha ao criar/buscar conversa",
-                  );
-                  falhasChat++;
-                }
-              } catch (error) {
-                const erro =
-                  error instanceof Error ? error.message : "Erro desconhecido";
-                console.error(
-                  `Erro ao enviar chat para ${destinatario.nome}:`,
-                  error,
-                );
-                adicionarLog(
-                  "chat",
-                  destinatario.nome,
-                  "erro",
-                  `Erro: ${erro}`,
-                );
-                falhasChat++;
-              }
-            }
-
-            // ENVIAR PARA EMAIL
-            if (canal === "email" || canal === "ambos") {
-              if (destinatario.email) {
-                try {
-                  adicionarLog(
-                    "email",
-                    destinatario.nome,
-                    "enviando",
-                    `Enfileirando email para ${destinatario.email}...`,
-                  );
-                  if (usarTemplate && templateId) {
-                    const template = templateSelecionado;
-                    if (template) {
-                      const emailId = await client.action(
-                        api.email.enviarEmailComTemplate,
-                        {
-                          destinatario: destinatario.email,
-                          destinatarioId: destinatario._id as Id<"usuarios">,
-                          templateCodigo: template.codigo,
-                          variaveis: {
-                            nome: destinatario.nome,
-                            matricula: destinatario.matricula || "",
-                          },
-                          enviadoPor: currentUser.data._id as Id<"usuarios">,
-                          agendadaPara: agendadaPara,
-                        },
-                      );
-                      if (emailId) {
-                        if (agendadaPara) {
-                          const dataFormatada = format(
-                            new Date(agendadaPara),
-                            "dd/MM/yyyy 'às' HH:mm",
-                            { locale: ptBR },
-                          );
-                          adicionarLog(
-                            "email",
-                            destinatario.nome,
-                            "fila",
-                            `Agendado para ${dataFormatada}`,
-                            emailId,
-                          );
-                        } else {
-                          adicionarLog(
-                            "email",
-                            destinatario.nome,
-                            "fila",
-                            "Enfileirado para envio",
-                            emailId,
-                          );
-                        }
-                        sucessosEmail++;
-                      } else {
-                        adicionarLog(
-                          "email",
-                          destinatario.nome,
-                          "erro",
-                          "Falha ao enfileirar email",
-                        );
-                        falhasEmail++;
-                      }
-                    } else {
-                      adicionarLog(
-                        "email",
-                        destinatario.nome,
-                        "erro",
-                        "Template não encontrado",
-                      );
-                      falhasEmail++;
-                    }
-                  } else {
-                    const emailId = await client.mutation(
-                      api.email.enfileirarEmail,
-                      {
-                        destinatario: destinatario.email,
-                        destinatarioId: destinatario._id as Id<"usuarios">,
-                        assunto: "Notificação do Sistema",
-                        corpo: mensagemPersonalizada,
-                        enviadoPor: currentUser.data?._id as Id<"usuarios">,
-                        agendadaPara: agendadaPara,
-                      },
-                    );
-                    if (emailId) {
-                      resultadoEmail = { sucesso: true, emailId };
-                      if (agendadaPara) {
-                        const dataFormatada = format(
-                          new Date(agendadaPara),
-                          "dd/MM/yyyy 'às' HH:mm",
-                          { locale: ptBR },
-                        );
-                        adicionarLog(
-                          "email",
-                          destinatario.nome,
-                          "fila",
-                          `Agendado para ${dataFormatada}`,
-                          emailId,
-                        );
-                      } else {
-                        adicionarLog(
-                          "email",
-                          destinatario.nome,
-                          "fila",
-                          "Enfileirado para envio",
-                          emailId,
-                        );
-                      }
-                      sucessosEmail++;
-                    } else {
-                      adicionarLog(
-                        "email",
-                        destinatario.nome,
-                        "erro",
-                        "Falha ao enfileirar email",
-                      );
-                      falhasEmail++;
-                    }
-                  }
-                } catch (error) {
-                  const erro =
-                    error instanceof Error
-                      ? error.message
-                      : "Erro desconhecido";
-                  console.error(
-                    `Erro ao enviar email para ${destinatario.nome}:`,
-                    error,
-                  );
-                  adicionarLog(
-                    "email",
-                    destinatario.nome,
-                    "erro",
-                    `Erro: ${erro}`,
-                  );
-                  falhasEmail++;
-                }
-              } else {
-                adicionarLog(
-                  "email",
-                  destinatario.nome,
-                  "erro",
-                  "Destinatário não possui email cadastrado",
-                );
-                falhasEmail++;
-              }
-            }
-
-            progressoEnvio.enviados++;
-          } catch (error) {
-            console.error(
-              `Erro geral ao enviar para ${destinatario.nome}:`,
-              error,
-            );
-            progressoEnvio.falhas++;
-          }
-        }
-
-        // Feedback de envio em massa
-        let mensagemMassa = agendadaPara
-          ? `Agendamento em massa concluído! `
-          : `Envio em massa concluído! `;
-
-        if (agendadaPara) {
-          const dataFormatada = format(
-            new Date(agendadaPara),
-            "dd/MM/yyyy 'às' HH:mm",
-            { locale: ptBR },
-          );
-          mensagemMassa += `Será enviado em: ${dataFormatada}. `;
-        }
-
-        if (canal === "ambos") {
-          mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? "agendados" : "enviados"}, ${falhasChat} falhas. `;
-          mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? "agendados" : "enviados"}, ${falhasEmail} falhas.`;
-        } else if (canal === "chat") {
-          mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? "agendados" : "enviados"}, ${falhasChat} falhas.`;
-        } else if (canal === "email") {
-          mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? "agendados" : "enviados"}, ${falhasEmail} falhas.`;
-        }
-
-        // Adicionar log resumo
-        adicionarLog("email", "Sistema", "info", mensagemMassa);
-        mostrarMensagem("success", mensagemMassa);
-      }
-
-      // Limpar form
-      destinatarioId = "";
-      enviarParaTodos = false;
-      templateId = "";
-      mensagemPersonalizada = "";
-      agendarEnvio = false;
-      dataAgendamento = "";
-      horaAgendamento = "";
-    } catch (error) {
-      const erro = error instanceof Error ? error.message : "Erro desconhecido";
-      console.error("Erro ao enviar notificação:", error);
-      adicionarLog("email", "Sistema", "erro", `Erro geral: ${erro}`);
-      mostrarMensagem("error", "Erro ao enviar notificação: " + erro);
-    } finally {
-      processando = false;
-      progressoEnvio = { total: 0, enviados: 0, falhas: 0 };
-      adicionarLog("email", "Sistema", "info", "Processo de envio finalizado");
-    }
-  }
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+
+	// Tipos para agendamentos
+	type TipoAgendamento = 'email' | 'chat';
+	type StatusAgendamento = 'agendado' | 'enviado' | 'cancelado';
+
+	interface AgendamentoEmail {
+		_id: Id<'notificacoesEmail'>;
+		_creationTime: number;
+		destinatario: string;
+		destinatarioId: Id<'usuarios'> | undefined;
+		assunto: string;
+		corpo: string;
+		templateId: Id<'templatesMensagens'> | undefined;
+		status: 'pendente' | 'enviando' | 'enviado' | 'falha';
+		agendadaPara: number | undefined;
+		enviadoPor: Id<'usuarios'>;
+		criadoEm: number;
+		enviadoEm: number | undefined;
+		destinatarioInfo: Doc<'usuarios'> | null;
+		templateInfo: Doc<'templatesMensagens'> | null;
+	}
+
+	interface AgendamentoChat {
+		_id: Id<'mensagens'>;
+		_creationTime: number;
+		conversaId: Id<'conversas'>;
+		remetenteId: Id<'usuarios'>;
+		conteudo: string;
+		agendadaPara: number | undefined;
+		enviadaEm: number;
+		conversaInfo: Doc<'conversas'> | null;
+		destinatarioInfo: Doc<'usuarios'> | null;
+	}
+
+	type Agendamento =
+		| { tipo: 'email'; dados: AgendamentoEmail }
+		| { tipo: 'chat'; dados: AgendamentoChat };
+
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
+
+	// Queries
+	const templatesQuery = useQuery(api.templatesMensagens.listarTemplates, {});
+	const usuariosQuery = useQuery(api.usuarios.listar, {});
+
+	// Mapa de emailIds para rastrear status
+	let emailIdsRastreados = $state<Set<string>>(new Set());
+
+	// Query para buscar status dos emails (só executa quando há IDs)
+	const emailIdsArray = $derived(
+		Array.from(emailIdsRastreados).map((id) => id as Id<'notificacoesEmail'>)
+	);
+	// Usar função para evitar execução quando array está vazio
+	const emailsStatusQuery = $derived.by(() => {
+		if (emailIdsArray.length === 0) return null;
+		return useQuery(api.email.buscarEmailsPorIds, { emailIds: emailIdsArray });
+	});
+
+	// Queries para agendamentos
+	const agendamentosEmailQuery = useQuery(api.email.listarAgendamentosEmail, {});
+	const agendamentosChatQuery = useQuery(api.chat.listarAgendamentosChat, {});
+
+	// Filtro de agendamentos
+	type FiltroAgendamento = 'todos' | 'agendados' | 'enviados';
+	let filtroAgendamento = $state<FiltroAgendamento>('todos');
+
+	// Extrair dados das queries de forma robusta
+	const templates = $derived.by(() => {
+		if (templatesQuery === undefined || templatesQuery === null) {
+			return [];
+		}
+		if ('data' in templatesQuery && templatesQuery.data !== undefined) {
+			return Array.isArray(templatesQuery.data) ? templatesQuery.data : [];
+		}
+		if (Array.isArray(templatesQuery)) {
+			return templatesQuery;
+		}
+		return [];
+	});
+
+	const usuarios = $derived.by(() => {
+		if (usuariosQuery === undefined || usuariosQuery === null) {
+			return [];
+		}
+		if ('data' in usuariosQuery && usuariosQuery.data !== undefined) {
+			return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
+		}
+		if (Array.isArray(usuariosQuery)) {
+			return usuariosQuery;
+		}
+		return [];
+	});
+
+	// Estados de carregamento e erro
+	const carregandoTemplates = $derived(templatesQuery === undefined || templatesQuery === null);
+	const carregandoUsuarios = $derived(usuariosQuery === undefined || usuariosQuery === null);
+
+	// Verificar erros de forma mais robusta
+	const erroTemplates = $derived.by(() => {
+		if (templatesQuery === undefined || templatesQuery === null) return false;
+		// Verificar se é um objeto com propriedade error
+		if (typeof templatesQuery === 'object' && 'error' in templatesQuery) {
+			return templatesQuery.error !== undefined && templatesQuery.error !== null;
+		}
+		return false;
+	});
+
+	const erroUsuarios = $derived.by(() => {
+		if (usuariosQuery === undefined || usuariosQuery === null) return false;
+		if (typeof usuariosQuery === 'object' && 'error' in usuariosQuery) {
+			return usuariosQuery.error !== undefined && usuariosQuery.error !== null;
+		}
+		return false;
+	});
+
+	// Log para debug (remover depois se necessário)
+	$effect(() => {
+		if (templatesQuery !== undefined && templatesQuery !== null) {
+			console.log('Templates Query:', templatesQuery);
+			console.log('Templates Extraídos:', templates);
+		}
+	});
+
+	let destinatarioId = $state('');
+	let enviarParaTodos = $state(false);
+	let canal = $state<'chat' | 'email' | 'ambos'>('chat');
+	let templateId = $state('');
+	let mensagemPersonalizada = $state('');
+	let usarTemplate = $state(true);
+	let processando = $state(false);
+	let criandoTemplates = $state(false);
+	let progressoEnvio = $state({ total: 0, enviados: 0, falhas: 0 });
+
+	// Estrutura de dados para logs de envio
+	type StatusLog = 'sucesso' | 'erro' | 'fila' | 'info' | 'enviando';
+	type TipoLog = 'chat' | 'email';
+	type LogEnvio = {
+		timestamp: number;
+		tipo: TipoLog;
+		destinatario: string;
+		status: StatusLog;
+		mensagem: string;
+		emailId?: string; // Para emails, guardar o ID para rastrear status
+	};
+
+	let logsEnvio = $state<LogEnvio[]>([]);
+	let terminalScrollRef: HTMLDivElement | null = $state(null);
+
+	// Estados para agendamento
+	let agendarEnvio = $state(false);
+	let dataAgendamento = $state('');
+	let horaAgendamento = $state('');
+
+	// Calcular data/hora mínimas
+	const now = new Date();
+	const minDate = format(now, 'yyyy-MM-dd');
+
+	// Hora mínima recalculada baseada na data selecionada
+	const horaMinima = $derived.by(() => {
+		if (!dataAgendamento) return format(now, 'HH:mm');
+		const hoje = format(now, 'yyyy-MM-dd');
+		if (dataAgendamento === hoje) {
+			return format(now, 'HH:mm');
+		}
+		return undefined; // Sem restrição se for data futura
+	});
+
+	function getPreviewAgendamento(): string {
+		if (!agendarEnvio || !dataAgendamento || !horaAgendamento) return '';
+		try {
+			const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
+			return `Será enviada em ${format(dataHora, "dd/MM/yyyy 'às' HH:mm", { locale: ptBR })}`;
+		} catch {
+			return '';
+		}
+	}
+
+	// Estados para modal de novo template
+	let modalNovoTemplateAberto = $state(false);
+	let codigoTemplate = $state('');
+	let nomeTemplate = $state('');
+	let tituloTemplate = $state('');
+	let corpoTemplate = $state('');
+	let variaveisTemplate = $state('');
+	let criandoNovoTemplate = $state(false);
+
+	// Estado para mensagens de feedback
+	let mensagem = $state<{
+		tipo: 'success' | 'error' | 'info';
+		texto: string;
+	} | null>(null);
+
+	const templateSelecionado = $derived(templates.find((t) => t._id === templateId));
+
+	// Função para renderizar template com variáveis (similar à função do backend)
+	function renderizarTemplate(template: string, variaveis: Record<string, string>): string {
+		let resultado = template;
+
+		for (const [chave, valor] of Object.entries(variaveis)) {
+			const placeholder = `{{${chave}}}`;
+			resultado = resultado.replace(new RegExp(placeholder, 'g'), valor);
+		}
+
+		return resultado;
+	}
+
+	// Função para mostrar mensagens
+	function mostrarMensagem(tipo: 'success' | 'error' | 'info', texto: string) {
+		mensagem = { tipo, texto };
+		setTimeout(() => {
+			mensagem = null;
+		}, 5000);
+	}
+
+	// Função para adicionar log ao terminal
+	function adicionarLog(
+		tipo: TipoLog,
+		destinatario: string,
+		status: StatusLog,
+		mensagem: string,
+		emailId?: string
+	) {
+		logsEnvio = [
+			...logsEnvio,
+			{
+				timestamp: Date.now(),
+				tipo,
+				destinatario,
+				status,
+				mensagem,
+				emailId
+			}
+		];
+
+		// Adicionar emailId ao rastreamento se fornecido
+		if (emailId) {
+			emailIdsRastreados = new Set([...emailIdsRastreados, emailId]);
+		}
+
+		// Auto-scroll para o final
+		setTimeout(() => {
+			if (terminalScrollRef) {
+				terminalScrollRef.scrollTop = terminalScrollRef.scrollHeight;
+			}
+		}, 10);
+	}
+
+	// Atualizar logs quando status dos emails mudar
+	$effect(() => {
+		if (!emailsStatusQuery || emailsStatusQuery === undefined) return;
+
+		// Extrair dados da query
+		const emails = Array.isArray(emailsStatusQuery)
+			? emailsStatusQuery
+			: 'data' in emailsStatusQuery && Array.isArray(emailsStatusQuery.data)
+				? emailsStatusQuery.data
+				: [];
+
+		if (emails.length === 0) return;
+
+		for (const email of emails) {
+			if (!email) continue;
+
+			// Encontrar logs relacionados a este email
+			const logsRelacionados = logsEnvio.filter((log) => log.emailId === email._id);
+
+			for (const log of logsRelacionados) {
+				// Verificar se o status mudou
+				const novoStatus: StatusLog =
+					email.status === 'enviado'
+						? 'sucesso'
+						: email.status === 'falha'
+							? 'erro'
+							: email.status === 'enviando'
+								? 'enviando'
+								: email.status === 'pendente'
+									? 'fila'
+									: 'info';
+
+				// Se o status mudou, atualizar o log
+				if (log.status !== novoStatus) {
+					const indice = logsEnvio.findIndex((l) => l === log);
+					if (indice !== -1) {
+						const novaMensagem =
+							email.status === 'enviado'
+								? 'Email enviado com sucesso'
+								: email.status === 'falha'
+									? `Falha ao enviar: ${email.erroDetalhes || 'Erro desconhecido'}`
+									: email.status === 'enviando'
+										? 'Enviando email...'
+										: email.status === 'pendente'
+											? 'Email em fila de envio'
+											: log.mensagem;
+
+						logsEnvio = logsEnvio.map((l, i) =>
+							i === indice ? { ...l, status: novoStatus, mensagem: novaMensagem } : l
+						);
+					}
+				}
+			}
+		}
+	});
+
+	// Função para limpar logs
+	function limparLogs() {
+		logsEnvio = [];
+		emailIdsRastreados = new Set();
+	}
+
+	// Extrair e processar agendamentos
+	const agendamentosEmail = $derived.by(() => {
+		if (!agendamentosEmailQuery || agendamentosEmailQuery === undefined) return [];
+		const dados = Array.isArray(agendamentosEmailQuery)
+			? agendamentosEmailQuery
+			: 'data' in agendamentosEmailQuery && Array.isArray(agendamentosEmailQuery.data)
+				? agendamentosEmailQuery.data
+				: [];
+		return dados as AgendamentoEmail[];
+	});
+
+	const agendamentosChat = $derived.by(() => {
+		if (!agendamentosChatQuery || agendamentosChatQuery === undefined) return [];
+		const dados = Array.isArray(agendamentosChatQuery)
+			? agendamentosChatQuery
+			: 'data' in agendamentosChatQuery && Array.isArray(agendamentosChatQuery.data)
+				? agendamentosChatQuery.data
+				: [];
+		return dados as AgendamentoChat[];
+	});
+
+	// Combinar e processar agendamentos
+	const todosAgendamentos = $derived.by(() => {
+		const agendamentos: Agendamento[] = [];
+
+		for (const email of agendamentosEmail) {
+			if (email.agendadaPara) {
+				agendamentos.push({
+					tipo: 'email',
+					dados: email
+				});
+			}
+		}
+
+		for (const chat of agendamentosChat) {
+			if (chat.agendadaPara) {
+				agendamentos.push({
+					tipo: 'chat',
+					dados: chat
+				});
+			}
+		}
+
+		// Ordenar: futuros primeiro (mais próximos primeiro), depois passados (mais recentes primeiro)
+		return agendamentos.sort((a, b) => {
+			const timestampA =
+				a.tipo === 'email' ? (a.dados.agendadaPara ?? 0) : (a.dados.agendadaPara ?? 0);
+			const timestampB =
+				b.tipo === 'email' ? (b.dados.agendadaPara ?? 0) : (b.dados.agendadaPara ?? 0);
+			const agora = Date.now();
+
+			const aFuturo = timestampA > agora;
+			const bFuturo = timestampB > agora;
+
+			// Futuros primeiro
+			if (aFuturo && !bFuturo) return -1;
+			if (!aFuturo && bFuturo) return 1;
+
+			// Dentro do mesmo grupo, ordenar por timestamp
+			if (aFuturo) {
+				// Futuros: mais próximos primeiro
+				return timestampA - timestampB;
+			} else {
+				// Passados: mais recentes primeiro
+				return timestampB - timestampA;
+			}
+		});
+	});
+
+	// Filtrar agendamentos
+	const agendamentosFiltrados = $derived.by(() => {
+		if (filtroAgendamento === 'todos') return todosAgendamentos;
+
+		return todosAgendamentos.filter((ag) => {
+			const status = obterStatusAgendamento(ag);
+			if (filtroAgendamento === 'agendados') return status === 'agendado';
+			if (filtroAgendamento === 'enviados') return status === 'enviado';
+			return true;
+		});
+	});
+
+	// Função para obter status do agendamento
+	function obterStatusAgendamento(agendamento: Agendamento): StatusAgendamento {
+		if (agendamento.tipo === 'email') {
+			const email = agendamento.dados;
+			if (email.status === 'enviado') return 'enviado';
+			if (email.agendadaPara && email.agendadaPara <= Date.now()) return 'enviado';
+			return 'agendado';
+		} else {
+			const chat = agendamento.dados;
+			if (chat.agendadaPara && chat.agendadaPara <= Date.now()) return 'enviado';
+			return 'agendado';
+		}
+	}
+
+	// Função para cancelar agendamento
+	async function cancelarAgendamento(agendamento: Agendamento) {
+		if (!confirm('Tem certeza que deseja cancelar este agendamento?')) {
+			return;
+		}
+
+		try {
+			if (agendamento.tipo === 'email') {
+				const resultado = await client.mutation(api.email.cancelarAgendamentoEmail, {
+					emailId: agendamento.dados._id
+				});
+				if (resultado.sucesso) {
+					mostrarMensagem('success', 'Agendamento de email cancelado com sucesso!');
+				} else {
+					mostrarMensagem('error', resultado.erro || 'Erro ao cancelar agendamento');
+				}
+			} else {
+				const resultado = await client.mutation(api.chat.cancelarMensagemAgendada, {
+					mensagemId: agendamento.dados._id
+				});
+				if (resultado.sucesso) {
+					mostrarMensagem('success', 'Agendamento de chat cancelado com sucesso!');
+				} else {
+					mostrarMensagem('error', resultado.erro || 'Erro ao cancelar agendamento');
+				}
+			}
+		} catch (error) {
+			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+			mostrarMensagem('error', `Erro ao cancelar agendamento: ${erro}`);
+		}
+	}
+
+	// Função para obter nome do destinatário
+	function obterNomeDestinatario(agendamento: Agendamento): string {
+		if (agendamento.tipo === 'email') {
+			return (
+				agendamento.dados.destinatarioInfo?.nome || agendamento.dados.destinatario || 'Usuário'
+			);
+		} else {
+			return agendamento.dados.destinatarioInfo?.nome || 'Usuário';
+		}
+	}
+
+	// Função para formatar data/hora do agendamento
+	function formatarDataAgendamento(agendamento: Agendamento): string {
+		const timestamp =
+			agendamento.tipo === 'email'
+				? agendamento.dados.agendadaPara
+				: agendamento.dados.agendadaPara;
+
+		if (!timestamp) return 'N/A';
+
+		return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", {
+			locale: ptBR
+		});
+	}
+
+	// Função para formatar timestamp
+	function formatarTimestamp(timestamp: number): string {
+		return format(new Date(timestamp), 'HH:mm:ss', { locale: ptBR });
+	}
+
+	// Função para obter cor do status
+	function obterCorStatus(status: StatusLog): string {
+		switch (status) {
+			case 'sucesso':
+				return 'text-success';
+			case 'erro':
+				return 'text-error';
+			case 'fila':
+				return 'text-warning';
+			case 'enviando':
+				return 'text-info';
+			case 'info':
+				return 'text-info';
+			default:
+				return 'text-base-content';
+		}
+	}
+
+	async function criarTemplatesPadrao() {
+		if (criandoTemplates) return;
+
+		criandoTemplates = true;
+		try {
+			const resultado = await client.mutation(api.templatesMensagens.criarTemplatesPadrao, {});
+			if (resultado.sucesso) {
+				mostrarMensagem(
+					'success',
+					'Templates padrão criados com sucesso! A página será recarregada.'
+				);
+				setTimeout(() => {
+					window.location.reload();
+				}, 2000);
+			} else {
+				mostrarMensagem('error', 'Erro ao criar templates padrão.');
+			}
+		} catch (error) {
+			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+			console.error('Erro ao criar templates:', error);
+			mostrarMensagem('error', 'Erro ao criar templates: ' + erro);
+		} finally {
+			criandoTemplates = false;
+		}
+	}
+
+	function abrirModalNovoTemplate() {
+		modalNovoTemplateAberto = true;
+		// Limpar campos
+		codigoTemplate = '';
+		nomeTemplate = '';
+		tituloTemplate = '';
+		corpoTemplate = '';
+		variaveisTemplate = '';
+	}
+
+	function fecharModalNovoTemplate() {
+		modalNovoTemplateAberto = false;
+	}
+
+	async function salvarNovoTemplate() {
+		if (!currentUser?.data) {
+			mostrarMensagem('error', 'Você precisa estar autenticado para criar templates.');
+			return;
+		}
+
+		// Validações
+		if (!codigoTemplate.trim()) {
+			mostrarMensagem('error', 'O código do template é obrigatório.');
+			return;
+		}
+		if (!nomeTemplate.trim()) {
+			mostrarMensagem('error', 'O nome do template é obrigatório.');
+			return;
+		}
+		if (!tituloTemplate.trim()) {
+			mostrarMensagem('error', 'O título do template é obrigatório.');
+			return;
+		}
+		if (!corpoTemplate.trim()) {
+			mostrarMensagem('error', 'O corpo do template é obrigatório.');
+			return;
+		}
+
+		// Processar variáveis (separadas por vírgula ou espaço)
+		const variaveis = variaveisTemplate
+			.split(/[,;\s]+/)
+			.map((v) => v.trim())
+			.filter((v) => v.length > 0);
+
+		criandoNovoTemplate = true;
+		try {
+			const resultado = await client.mutation(api.templatesMensagens.criarTemplate, {
+				codigo: codigoTemplate.trim().toUpperCase().replace(/\s+/g, '_'),
+				nome: nomeTemplate.trim(),
+				titulo: tituloTemplate.trim(),
+				corpo: corpoTemplate.trim(),
+				variaveis: variaveis.length > 0 ? variaveis : undefined,
+				criadoPorId: currentUser.data._id as Id<'usuarios'>
+			});
+
+			if (resultado.sucesso) {
+				mostrarMensagem('success', 'Template criado com sucesso!');
+				fecharModalNovoTemplate();
+				// Recarregar a página para atualizar a lista
+				setTimeout(() => {
+					window.location.reload();
+				}, 1500);
+			} else {
+				mostrarMensagem(
+					'error',
+					'Erro ao criar template: ' + (resultado.erro || 'Erro desconhecido')
+				);
+			}
+		} catch (error) {
+			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+			console.error('Erro ao criar template:', error);
+			mostrarMensagem('error', 'Erro ao criar template: ' + erro);
+		} finally {
+			criandoNovoTemplate = false;
+		}
+	}
+
+	async function enviarNotificacao() {
+		if (!enviarParaTodos && !destinatarioId) {
+			mostrarMensagem('error', "Selecione um destinatário ou marque 'Enviar para todos'");
+			return;
+		}
+
+		if (usarTemplate && !templateId) {
+			mostrarMensagem('error', 'Selecione um template');
+			return;
+		}
+
+		if (!usarTemplate && !mensagemPersonalizada.trim()) {
+			mostrarMensagem('error', 'Digite uma mensagem');
+			return;
+		}
+
+		// Validar agendamento se marcado
+		let agendadaPara: number | undefined = undefined;
+		if (agendarEnvio) {
+			if (!dataAgendamento || !horaAgendamento) {
+				mostrarMensagem('error', 'Preencha a data e hora para agendamento');
+				return;
+			}
+
+			try {
+				const dataHora = new Date(`${dataAgendamento}T${horaAgendamento}`);
+				if (dataHora.getTime() <= Date.now()) {
+					mostrarMensagem('error', 'A data e hora devem ser futuras');
+					return;
+				}
+				agendadaPara = dataHora.getTime();
+			} catch (error) {
+				mostrarMensagem('error', 'Data ou hora inválida');
+				return;
+			}
+		}
+
+		processando = true;
+		progressoEnvio = { total: 0, enviados: 0, falhas: 0 };
+
+		// Limpar logs anteriores quando iniciar novo envio
+		logsEnvio = [];
+		emailIdsRastreados = new Set();
+
+		try {
+			// Obter lista de destinatários
+			const destinatarios: typeof usuarios = enviarParaTodos
+				? usuarios
+				: usuarios.filter((u) => u._id === destinatarioId);
+
+			if (destinatarios.length === 0) {
+				adicionarLog('email', 'Sistema', 'erro', 'Nenhum destinatário encontrado');
+				mostrarMensagem('error', 'Nenhum destinatário encontrado');
+				return;
+			}
+
+			progressoEnvio.total = destinatarios.length;
+
+			// Log inicial
+			const tipoMensagem = usarTemplate
+				? `Template: ${templateSelecionado?.nome || ''}`
+				: 'Mensagem personalizada';
+			const destinatariosText = enviarParaTodos
+				? `Todos os usuários (${destinatarios.length})`
+				: destinatarios.map((d) => d.nome).join(', ');
+			adicionarLog(
+				'email',
+				'Sistema',
+				'info',
+				`Iniciando envio de notificação via ${canal} para ${destinatariosText} - ${tipoMensagem}`
+			);
+
+			// Se for envio para um único usuário
+			if (destinatarios.length === 1) {
+				const destinatario = destinatarios[0];
+				let resultadoChat = null;
+				let resultadoEmail = null;
+
+				// ENVIAR PARA CHAT
+				if (canal === 'chat' || canal === 'ambos') {
+					try {
+						adicionarLog('chat', destinatario.nome, 'enviando', 'Criando/buscando conversa...');
+						const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
+							outroUsuarioId: destinatario._id as Id<'usuarios'>
+						});
+
+						if (conversaId) {
+							const mensagem =
+								usarTemplate && templateSelecionado
+									? renderizarTemplate(templateSelecionado.corpo, {
+											nome: destinatario.nome,
+											matricula: destinatario.matricula || ''
+										})
+									: mensagemPersonalizada;
+
+							if (agendadaPara) {
+								// Agendar mensagem
+								adicionarLog('chat', destinatario.nome, 'info', 'Agendando mensagem...');
+								resultadoChat = await client.mutation(api.chat.agendarMensagem, {
+									conversaId: conversaId,
+									conteudo: mensagem,
+									agendadaPara: agendadaPara
+								});
+								const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
+									locale: ptBR
+								});
+								adicionarLog(
+									'chat',
+									destinatario.nome,
+									'sucesso',
+									`Mensagem agendada para ${dataFormatada}`
+								);
+							} else {
+								// Envio imediato
+								adicionarLog('chat', destinatario.nome, 'enviando', 'Enviando mensagem...');
+								resultadoChat = await client.mutation(api.chat.enviarMensagem, {
+									conversaId: conversaId,
+									conteudo: mensagem,
+									tipo: 'texto',
+									permitirNotificacaoParaSiMesmo: true
+								});
+								adicionarLog('chat', destinatario.nome, 'sucesso', 'Mensagem enviada com sucesso');
+							}
+						} else {
+							adicionarLog('chat', destinatario.nome, 'erro', 'Falha ao criar/buscar conversa');
+						}
+					} catch (error) {
+						const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+						console.error('Erro ao enviar chat:', error);
+						adicionarLog('chat', destinatario.nome, 'erro', `Erro: ${erro}`);
+					}
+				}
+
+				// ENVIAR PARA EMAIL
+				if (canal === 'email' || canal === 'ambos') {
+					if (destinatario.email) {
+						try {
+							adicionarLog(
+								'email',
+								destinatario.nome,
+								'enviando',
+								`Enfileirando email para ${destinatario.email}...`
+							);
+							if (usarTemplate && templateId) {
+								const template = templateSelecionado;
+								if (template) {
+									const emailId = await client.action(api.email.enviarEmailComTemplate, {
+										destinatario: destinatario.email,
+										destinatarioId: destinatario._id as Id<'usuarios'>,
+										templateCodigo: template.codigo,
+										variaveis: {
+											nome: destinatario.nome,
+											matricula: destinatario.matricula
+										},
+										enviadoPor: currentUser.data._id as Id<'usuarios'>,
+										agendadaPara: agendadaPara
+									});
+									if (emailId) {
+										if (agendadaPara) {
+											const dataFormatada = format(
+												new Date(agendadaPara),
+												"dd/MM/yyyy 'às' HH:mm",
+												{ locale: ptBR }
+											);
+											adicionarLog(
+												'email',
+												destinatario.nome,
+												'fila',
+												`Email agendado para ${dataFormatada}`,
+												emailId
+											);
+										} else {
+											adicionarLog(
+												'email',
+												destinatario.nome,
+												'fila',
+												'Email enfileirado para envio',
+												emailId
+											);
+										}
+									} else {
+										adicionarLog('email', destinatario.nome, 'erro', 'Falha ao enfileirar email');
+									}
+								} else {
+									adicionarLog('email', destinatario.nome, 'erro', 'Template não encontrado');
+								}
+							} else {
+								const emailId = await client.mutation(api.email.enfileirarEmail, {
+									destinatario: destinatario.email,
+									destinatarioId: destinatario._id as Id<'usuarios'>,
+									assunto: 'Notificação do Sistema',
+									corpo: mensagemPersonalizada,
+									enviadoPor: currentUser.data._id as Id<'usuarios'>,
+									agendadaPara: agendadaPara
+								});
+								if (emailId) {
+									resultadoEmail = { sucesso: true, emailId };
+									if (agendadaPara) {
+										const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
+											locale: ptBR
+										});
+										adicionarLog(
+											'email',
+											destinatario.nome,
+											'fila',
+											`Email agendado para ${dataFormatada}`,
+											emailId
+										);
+									} else {
+										adicionarLog(
+											'email',
+											destinatario.nome,
+											'fila',
+											'Email enfileirado para envio',
+											emailId
+										);
+									}
+								} else {
+									adicionarLog('email', destinatario.nome, 'erro', 'Falha ao enfileirar email');
+								}
+							}
+						} catch (error) {
+							const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+							console.error('Erro ao enviar email:', error);
+							adicionarLog('email', destinatario.nome, 'erro', `Erro: ${erro}`);
+						}
+					} else {
+						adicionarLog(
+							'email',
+							destinatario.nome,
+							'erro',
+							'Destinatário não possui email cadastrado'
+						);
+					}
+				}
+
+				// Feedback de sucesso
+				let mensagemSucesso = agendadaPara
+					? `Notificação agendada com sucesso!`
+					: 'Notificação enviada com sucesso!';
+				if (agendadaPara) {
+					const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
+						locale: ptBR
+					});
+					mensagemSucesso += ` Será enviada em: ${dataFormatada}`;
+				} else {
+					if (canal === 'ambos') {
+						if (resultadoChat && resultadoEmail) {
+							mensagemSucesso = 'Notificação enviada para Chat e Email!';
+						} else if (resultadoChat) {
+							mensagemSucesso = 'Notificação enviada para Chat. Email falhou.';
+						} else if (resultadoEmail) {
+							mensagemSucesso = 'Notificação enviada para Email. Chat falhou.';
+						}
+					} else if (canal === 'chat' && resultadoChat) {
+						mensagemSucesso = 'Mensagem enviada no Chat!';
+					} else if (canal === 'email' && resultadoEmail) {
+						mensagemSucesso = 'Email enfileirado para envio!';
+					}
+				}
+
+				mostrarMensagem('success', mensagemSucesso);
+				progressoEnvio.enviados = 1;
+			} else {
+				// ENVIO EM MASSA
+				let sucessosChat = 0;
+				let sucessosEmail = 0;
+				let falhasChat = 0;
+				let falhasEmail = 0;
+
+				adicionarLog(
+					'email',
+					'Sistema',
+					'info',
+					`Processando ${destinatarios.length} destinatários...`
+				);
+
+				for (const destinatario of destinatarios) {
+					try {
+						// ENVIAR PARA CHAT
+						if (canal === 'chat' || canal === 'ambos') {
+							try {
+								adicionarLog('chat', destinatario.nome, 'enviando', 'Processando...');
+								const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
+									outroUsuarioId: destinatario._id as Id<'usuarios'>
+								});
+
+								if (conversaId) {
+									// Renderizar template com variáveis do destinatário
+									const mensagem =
+										usarTemplate && templateSelecionado
+											? renderizarTemplate(templateSelecionado.corpo, {
+													nome: destinatario.nome,
+													matricula: destinatario.matricula || ''
+												})
+											: mensagemPersonalizada;
+
+									if (agendadaPara) {
+										await client.mutation(api.chat.agendarMensagem, {
+											conversaId: conversaId,
+											conteudo: mensagem,
+											agendadaPara: agendadaPara
+										});
+										const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
+											locale: ptBR
+										});
+										adicionarLog(
+											'chat',
+											destinatario.nome,
+											'sucesso',
+											`Agendado para ${dataFormatada}`
+										);
+									} else {
+										await client.mutation(api.chat.enviarMensagem, {
+											conversaId: conversaId,
+											conteudo: mensagem,
+											tipo: 'texto',
+											permitirNotificacaoParaSiMesmo: true
+										});
+										adicionarLog('chat', destinatario.nome, 'sucesso', 'Enviado com sucesso');
+									}
+									sucessosChat++;
+								} else {
+									adicionarLog('chat', destinatario.nome, 'erro', 'Falha ao criar/buscar conversa');
+									falhasChat++;
+								}
+							} catch (error) {
+								const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+								console.error(`Erro ao enviar chat para ${destinatario.nome}:`, error);
+								adicionarLog('chat', destinatario.nome, 'erro', `Erro: ${erro}`);
+								falhasChat++;
+							}
+						}
+
+						// ENVIAR PARA EMAIL
+						if (canal === 'email' || canal === 'ambos') {
+							if (destinatario.email) {
+								try {
+									adicionarLog(
+										'email',
+										destinatario.nome,
+										'enviando',
+										`Enfileirando email para ${destinatario.email}...`
+									);
+									if (usarTemplate && templateId) {
+										const template = templateSelecionado;
+										if (template) {
+											const emailId = await client.action(api.email.enviarEmailComTemplate, {
+												destinatario: destinatario.email,
+												destinatarioId: destinatario._id as Id<'usuarios'>,
+												templateCodigo: template.codigo,
+												variaveis: {
+													nome: destinatario.nome,
+													matricula: destinatario.matricula || ''
+												},
+												enviadoPor: currentUser.data._id as Id<'usuarios'>,
+												agendadaPara: agendadaPara
+											});
+											if (emailId) {
+												if (agendadaPara) {
+													const dataFormatada = format(
+														new Date(agendadaPara),
+														"dd/MM/yyyy 'às' HH:mm",
+														{ locale: ptBR }
+													);
+													adicionarLog(
+														'email',
+														destinatario.nome,
+														'fila',
+														`Agendado para ${dataFormatada}`,
+														emailId
+													);
+												} else {
+													adicionarLog(
+														'email',
+														destinatario.nome,
+														'fila',
+														'Enfileirado para envio',
+														emailId
+													);
+												}
+												sucessosEmail++;
+											} else {
+												adicionarLog(
+													'email',
+													destinatario.nome,
+													'erro',
+													'Falha ao enfileirar email'
+												);
+												falhasEmail++;
+											}
+										} else {
+											adicionarLog('email', destinatario.nome, 'erro', 'Template não encontrado');
+											falhasEmail++;
+										}
+									} else {
+										const emailId = await client.mutation(api.email.enfileirarEmail, {
+											destinatario: destinatario.email,
+											destinatarioId: destinatario._id as Id<'usuarios'>,
+											assunto: 'Notificação do Sistema',
+											corpo: mensagemPersonalizada,
+											enviadoPor: currentUser.data?._id as Id<'usuarios'>,
+											agendadaPara: agendadaPara
+										});
+										if (emailId) {
+											resultadoEmail = { sucesso: true, emailId };
+											if (agendadaPara) {
+												const dataFormatada = format(
+													new Date(agendadaPara),
+													"dd/MM/yyyy 'às' HH:mm",
+													{ locale: ptBR }
+												);
+												adicionarLog(
+													'email',
+													destinatario.nome,
+													'fila',
+													`Agendado para ${dataFormatada}`,
+													emailId
+												);
+											} else {
+												adicionarLog(
+													'email',
+													destinatario.nome,
+													'fila',
+													'Enfileirado para envio',
+													emailId
+												);
+											}
+											sucessosEmail++;
+										} else {
+											adicionarLog('email', destinatario.nome, 'erro', 'Falha ao enfileirar email');
+											falhasEmail++;
+										}
+									}
+								} catch (error) {
+									const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+									console.error(`Erro ao enviar email para ${destinatario.nome}:`, error);
+									adicionarLog('email', destinatario.nome, 'erro', `Erro: ${erro}`);
+									falhasEmail++;
+								}
+							} else {
+								adicionarLog(
+									'email',
+									destinatario.nome,
+									'erro',
+									'Destinatário não possui email cadastrado'
+								);
+								falhasEmail++;
+							}
+						}
+
+						progressoEnvio.enviados++;
+					} catch (error) {
+						console.error(`Erro geral ao enviar para ${destinatario.nome}:`, error);
+						progressoEnvio.falhas++;
+					}
+				}
+
+				// Feedback de envio em massa
+				let mensagemMassa = agendadaPara
+					? `Agendamento em massa concluído! `
+					: `Envio em massa concluído! `;
+
+				if (agendadaPara) {
+					const dataFormatada = format(new Date(agendadaPara), "dd/MM/yyyy 'às' HH:mm", {
+						locale: ptBR
+					});
+					mensagemMassa += `Será enviado em: ${dataFormatada}. `;
+				}
+
+				if (canal === 'ambos') {
+					mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasChat} falhas. `;
+					mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasEmail} falhas.`;
+				} else if (canal === 'chat') {
+					mensagemMassa += `Chat: ${sucessosChat} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasChat} falhas.`;
+				} else if (canal === 'email') {
+					mensagemMassa += `Email: ${sucessosEmail} ${agendadaPara ? 'agendados' : 'enviados'}, ${falhasEmail} falhas.`;
+				}
+
+				// Adicionar log resumo
+				adicionarLog('email', 'Sistema', 'info', mensagemMassa);
+				mostrarMensagem('success', mensagemMassa);
+			}
+
+			// Limpar form
+			destinatarioId = '';
+			enviarParaTodos = false;
+			templateId = '';
+			mensagemPersonalizada = '';
+			agendarEnvio = false;
+			dataAgendamento = '';
+			horaAgendamento = '';
+		} catch (error) {
+			const erro = error instanceof Error ? error.message : 'Erro desconhecido';
+			console.error('Erro ao enviar notificação:', error);
+			adicionarLog('email', 'Sistema', 'erro', `Erro geral: ${erro}`);
+			mostrarMensagem('error', 'Erro ao enviar notificação: ' + erro);
+		} finally {
+			processando = false;
+			progressoEnvio = { total: 0, enviados: 0, falhas: 0 };
+			adicionarLog('email', 'Sistema', 'info', 'Processo de envio finalizado');
+		}
+	}
 </script>
 
-<div class="container mx-auto px-4 py-6 max-w-7xl">
-  <!-- Header -->
-  <div class="flex items-center justify-between mb-6">
-    <div class="flex items-center gap-4">
-      <div class="p-3 bg-info/10 rounded-xl">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8 text-info"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
-          />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-base-content">
-          Notificações e Mensagens
-        </h1>
-        <p class="text-base-content/60 mt-1">
-          Enviar notificações para usuários do sistema
-        </p>
-      </div>
-    </div>
-  </div>
+<div class="container mx-auto max-w-7xl px-4 py-6">
+	<!-- Header -->
+	<div class="mb-6 flex items-center justify-between">
+		<div class="flex items-center gap-4">
+			<div class="bg-info/10 rounded-xl p-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-info h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+					/>
+				</svg>
+			</div>
+			<div>
+				<h1 class="text-base-content text-3xl font-bold">Notificações e Mensagens</h1>
+				<p class="text-base-content/60 mt-1">Enviar notificações para usuários do sistema</p>
+			</div>
+		</div>
+	</div>
 
-  <!-- Mensagens de Feedback -->
-  {#if mensagem}
-    <div
-      class="alert mb-6 shadow-lg"
-      class:alert-success={mensagem.tipo === "success"}
-      class:alert-error={mensagem.tipo === "error"}
-      class:alert-info={mensagem.tipo === "info"}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        {#if mensagem.tipo === "success"}
-          <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"
-          />
-        {:else if mensagem.tipo === "error"}
-          <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"
-          />
-        {:else}
-          <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"
-          />
-        {/if}
-      </svg>
-      <span class="font-medium">{mensagem.texto}</span>
-      <button
-        type="button"
-        class="btn btn-sm btn-circle btn-ghost"
-        onclick={() => (mensagem = null)}
-      >
-        ✕
-      </button>
-    </div>
-  {/if}
+	<!-- Mensagens de Feedback -->
+	{#if mensagem}
+		<div
+			class="alert mb-6 shadow-lg"
+			class:alert-success={mensagem.tipo === 'success'}
+			class:alert-error={mensagem.tipo === 'error'}
+			class:alert-info={mensagem.tipo === 'info'}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-6 w-6 shrink-0 stroke-current"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				{#if mensagem.tipo === 'success'}
+					<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"
+					/>
+				{:else if mensagem.tipo === 'error'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span class="font-medium">{mensagem.texto}</span>
+			<button
+				type="button"
+				class="btn btn-sm btn-circle btn-ghost"
+				onclick={() => (mensagem = null)}
+			>
+				✕
+			</button>
+		</div>
+	{/if}
 
-  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-    <!-- Formulário -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Enviar Notificação</h2>
+	<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+		<!-- Formulário -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Enviar Notificação</h2>
 
-        <!-- Destinatário -->
-        <div class="form-control mb-4">
-          <div class="flex items-center justify-between mb-2">
-            <label class="label" for="destinatario-select">
-              <span class="label-text font-medium">Destinatário *</span>
-            </label>
-            <label class="label cursor-pointer gap-2">
-              <input
-                type="checkbox"
-                bind:checked={enviarParaTodos}
-                class="checkbox checkbox-primary checkbox-sm"
-                disabled={processando}
-              />
-              <span class="label-text text-sm"
-                >Enviar para todos ({usuarios.length} usuários)</span
-              >
-            </label>
-          </div>
-          <select
-            id="destinatario-select"
-            bind:value={destinatarioId}
-            class="select select-bordered"
-            disabled={enviarParaTodos || processando}
-          >
-            <option value="">Selecione um usuário</option>
-            {#if carregandoUsuarios}
-              <option disabled>Carregando usuários...</option>
-            {:else if usuarios.length > 0}
-              {#each usuarios as usuario}
-                <option value={usuario._id}>
-                  {usuario.nome} ({usuario.matricula})
-                </option>
-              {/each}
-            {:else}
-              <option disabled>Nenhum usuário disponível</option>
-            {/if}
-          </select>
-          {#if enviarParaTodos}
-            <label class="label">
-              <span class="label-text-alt text-warning">
-                ⚠️ A notificação será enviada para todos os {usuarios.length} usuários
-                do sistema
-              </span>
-            </label>
-          {/if}
-        </div>
+				<!-- Destinatário -->
+				<div class="form-control mb-4">
+					<div class="mb-2 flex items-center justify-between">
+						<label class="label" for="destinatario-select">
+							<span class="label-text font-medium">Destinatário *</span>
+						</label>
+						<label class="label cursor-pointer gap-2">
+							<input
+								type="checkbox"
+								bind:checked={enviarParaTodos}
+								class="checkbox checkbox-primary checkbox-sm"
+								disabled={processando}
+							/>
+							<span class="label-text text-sm">Enviar para todos ({usuarios.length} usuários)</span>
+						</label>
+					</div>
+					<select
+						id="destinatario-select"
+						bind:value={destinatarioId}
+						class="select select-bordered"
+						disabled={enviarParaTodos || processando}
+					>
+						<option value="">Selecione um usuário</option>
+						{#if carregandoUsuarios}
+							<option disabled>Carregando usuários...</option>
+						{:else if usuarios.length > 0}
+							{#each usuarios as usuario}
+								<option value={usuario._id}>
+									{usuario.nome} ({usuario.matricula})
+								</option>
+							{/each}
+						{:else}
+							<option disabled>Nenhum usuário disponível</option>
+						{/if}
+					</select>
+					{#if enviarParaTodos}
+						<label class="label">
+							<span class="label-text-alt text-warning">
+								⚠️ A notificação será enviada para todos os {usuarios.length} usuários do sistema
+							</span>
+						</label>
+					{/if}
+				</div>
 
-        <!-- Canal -->
-        <div class="form-control mb-4">
-          <div class="label">
-            <span class="label-text font-medium">Canal de Envio *</span>
-          </div>
-          <div class="flex gap-4">
-            <label class="label cursor-pointer">
-              <input
-                type="radio"
-                value="chat"
-                bind:group={canal}
-                class="radio radio-primary"
-              />
-              <span class="label-text ml-2">Chat</span>
-            </label>
-            <label class="label cursor-pointer">
-              <input
-                type="radio"
-                value="email"
-                bind:group={canal}
-                class="radio radio-primary"
-              />
-              <span class="label-text ml-2">Email</span>
-            </label>
-            <label class="label cursor-pointer">
-              <input
-                type="radio"
-                value="ambos"
-                bind:group={canal}
-                class="radio radio-primary"
-              />
-              <span class="label-text ml-2">Ambos</span>
-            </label>
-          </div>
-        </div>
+				<!-- Canal -->
+				<div class="form-control mb-4">
+					<div class="label">
+						<span class="label-text font-medium">Canal de Envio *</span>
+					</div>
+					<div class="flex gap-4">
+						<label class="label cursor-pointer">
+							<input type="radio" value="chat" bind:group={canal} class="radio radio-primary" />
+							<span class="label-text ml-2">Chat</span>
+						</label>
+						<label class="label cursor-pointer">
+							<input type="radio" value="email" bind:group={canal} class="radio radio-primary" />
+							<span class="label-text ml-2">Email</span>
+						</label>
+						<label class="label cursor-pointer">
+							<input type="radio" value="ambos" bind:group={canal} class="radio radio-primary" />
+							<span class="label-text ml-2">Ambos</span>
+						</label>
+					</div>
+				</div>
 
-        <!-- Tipo de Mensagem -->
-        <div class="form-control mb-4">
-          <div class="label">
-            <span class="label-text font-medium">Tipo de Mensagem</span>
-          </div>
-          <div class="flex gap-4">
-            <label class="label cursor-pointer">
-              <input
-                type="radio"
-                checked={usarTemplate}
-                onchange={() => (usarTemplate = true)}
-                class="radio radio-secondary"
-              />
-              <span class="label-text ml-2">Usar Template</span>
-            </label>
-            <label class="label cursor-pointer">
-              <input
-                type="radio"
-                checked={!usarTemplate}
-                onchange={() => (usarTemplate = false)}
-                class="radio radio-secondary"
-              />
-              <span class="label-text ml-2">Mensagem Personalizada</span>
-            </label>
-          </div>
-        </div>
+				<!-- Tipo de Mensagem -->
+				<div class="form-control mb-4">
+					<div class="label">
+						<span class="label-text font-medium">Tipo de Mensagem</span>
+					</div>
+					<div class="flex gap-4">
+						<label class="label cursor-pointer">
+							<input
+								type="radio"
+								checked={usarTemplate}
+								onchange={() => (usarTemplate = true)}
+								class="radio radio-secondary"
+							/>
+							<span class="label-text ml-2">Usar Template</span>
+						</label>
+						<label class="label cursor-pointer">
+							<input
+								type="radio"
+								checked={!usarTemplate}
+								onchange={() => (usarTemplate = false)}
+								class="radio radio-secondary"
+							/>
+							<span class="label-text ml-2">Mensagem Personalizada</span>
+						</label>
+					</div>
+				</div>
 
-        {#if usarTemplate}
-          <!-- Template -->
-          <div class="form-control mb-4">
-            <label class="label" for="template-select">
-              <span class="label-text font-medium">Template *</span>
-            </label>
-            <select
-              id="template-select"
-              bind:value={templateId}
-              class="select select-bordered"
-            >
-              <option value="">Selecione um template</option>
-              {#if carregandoTemplates}
-                <option disabled>Carregando templates...</option>
-              {:else if templates.length > 0}
-                {#each templates as template}
-                  <option value={template._id}>
-                    {template.nome}
-                  </option>
-                {/each}
-              {:else}
-                <option disabled>Nenhum template disponível</option>
-              {/if}
-            </select>
-          </div>
+				{#if usarTemplate}
+					<!-- Template -->
+					<div class="form-control mb-4">
+						<label class="label" for="template-select">
+							<span class="label-text font-medium">Template *</span>
+						</label>
+						<select id="template-select" bind:value={templateId} class="select select-bordered">
+							<option value="">Selecione um template</option>
+							{#if carregandoTemplates}
+								<option disabled>Carregando templates...</option>
+							{:else if templates.length > 0}
+								{#each templates as template}
+									<option value={template._id}>
+										{template.nome}
+									</option>
+								{/each}
+							{:else}
+								<option disabled>Nenhum template disponível</option>
+							{/if}
+						</select>
+					</div>
 
-          {#if templateSelecionado}
-            <div class="alert alert-info mb-4">
-              <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>
-                <div class="font-bold">{templateSelecionado.titulo}</div>
-                <div class="text-sm mt-1">{templateSelecionado.corpo}</div>
-              </div>
-            </div>
-          {/if}
-        {:else}
-          <!-- Mensagem Personalizada -->
-          <div class="form-control mb-4">
-            <label class="label" for="mensagem-textarea">
-              <span class="label-text font-medium">Mensagem *</span>
-            </label>
-            <textarea
-              id="mensagem-textarea"
-              bind:value={mensagemPersonalizada}
-              class="textarea textarea-bordered h-32"
-              placeholder="Digite sua mensagem personalizada..."
-            ></textarea>
-          </div>
-        {/if}
+					{#if templateSelecionado}
+						<div class="alert alert-info mb-4">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								class="h-6 w-6 shrink-0 stroke-current"
+							>
+								<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>
+								<div class="font-bold">{templateSelecionado.titulo}</div>
+								<div class="mt-1 text-sm">{templateSelecionado.corpo}</div>
+							</div>
+						</div>
+					{/if}
+				{:else}
+					<!-- Mensagem Personalizada -->
+					<div class="form-control mb-4">
+						<label class="label" for="mensagem-textarea">
+							<span class="label-text font-medium">Mensagem *</span>
+						</label>
+						<textarea
+							id="mensagem-textarea"
+							bind:value={mensagemPersonalizada}
+							class="textarea textarea-bordered h-32"
+							placeholder="Digite sua mensagem personalizada..."
+						></textarea>
+					</div>
+				{/if}
 
-        <!-- Agendamento -->
-        <div class="form-control mb-4">
-          <label class="label cursor-pointer">
-            <span class="label-text font-medium">Agendar Envio</span>
-            <input
-              type="checkbox"
-              bind:checked={agendarEnvio}
-              class="checkbox checkbox-primary"
-              disabled={processando}
-            />
-          </label>
+				<!-- Agendamento -->
+				<div class="form-control mb-4">
+					<label class="label cursor-pointer">
+						<span class="label-text font-medium">Agendar Envio</span>
+						<input
+							type="checkbox"
+							bind:checked={agendarEnvio}
+							class="checkbox checkbox-primary"
+							disabled={processando}
+						/>
+					</label>
 
-          {#if agendarEnvio}
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-              <div class="form-control">
-                <label class="label" for="data-agendamento">
-                  <span class="label-text">Data</span>
-                </label>
-                <input
-                  id="data-agendamento"
-                  type="date"
-                  class="input input-bordered"
-                  bind:value={dataAgendamento}
-                  min={minDate}
-                  disabled={processando}
-                />
-              </div>
+					{#if agendarEnvio}
+						<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+							<div class="form-control">
+								<label class="label" for="data-agendamento">
+									<span class="label-text">Data</span>
+								</label>
+								<input
+									id="data-agendamento"
+									type="date"
+									class="input input-bordered"
+									bind:value={dataAgendamento}
+									min={minDate}
+									disabled={processando}
+								/>
+							</div>
 
-              <div class="form-control">
-                <label class="label" for="hora-agendamento">
-                  <span class="label-text">Hora</span>
-                </label>
-                <input
-                  id="hora-agendamento"
-                  type="time"
-                  class="input input-bordered"
-                  bind:value={horaAgendamento}
-                  min={horaMinima}
-                  disabled={processando}
-                />
-              </div>
-            </div>
+							<div class="form-control">
+								<label class="label" for="hora-agendamento">
+									<span class="label-text">Hora</span>
+								</label>
+								<input
+									id="hora-agendamento"
+									type="time"
+									class="input input-bordered"
+									bind:value={horaAgendamento}
+									min={horaMinima}
+									disabled={processando}
+								/>
+							</div>
+						</div>
 
-            {#if getPreviewAgendamento()}
-              <div class="alert alert-info mt-4">
-                <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>
-                <span>{getPreviewAgendamento()}</span>
-              </div>
-            {/if}
-          {/if}
-        </div>
+						{#if getPreviewAgendamento()}
+							<div class="alert alert-info mt-4">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									class="h-6 w-6 shrink-0 stroke-current"
+								>
+									<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>{getPreviewAgendamento()}</span>
+							</div>
+						{/if}
+					{/if}
+				</div>
 
-        <!-- Botão Enviar -->
-        <div class="card-actions justify-end mt-4">
-          <button
-            class="btn btn-primary btn-block"
-            onclick={() => enviarNotificacao()}
-            disabled={processando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner loading-sm"></span>
-              {#if progressoEnvio.total > 1}
-                <span class="ml-2">
-                  Enviando... ({progressoEnvio.enviados}/{progressoEnvio.total})
-                </span>
-              {:else}
-                <span class="ml-2">Enviando...</span>
-              {/if}
-            {:else}
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
-                />
-              </svg>
-            {/if}
-            {#if processando}
-              <!-- Texto já está no bloco acima -->
-            {:else if agendarEnvio && enviarParaTodos}
-              Agendar para Todos ({usuarios.length})
-            {:else if agendarEnvio}
-              Agendar Notificação
-            {:else if enviarParaTodos}
-              Enviar para Todos ({usuarios.length})
-            {:else}
-              Enviar Notificação
-            {/if}
-          </button>
-        </div>
+				<!-- Botão Enviar -->
+				<div class="card-actions mt-4 justify-end">
+					<button
+						class="btn btn-primary btn-block"
+						onclick={() => enviarNotificacao()}
+						disabled={processando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner loading-sm"></span>
+							{#if progressoEnvio.total > 1}
+								<span class="ml-2">
+									Enviando... ({progressoEnvio.enviados}/{progressoEnvio.total})
+								</span>
+							{:else}
+								<span class="ml-2">Enviando...</span>
+							{/if}
+						{:else}
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+								/>
+							</svg>
+						{/if}
+						{#if processando}
+							<!-- Texto já está no bloco acima -->
+						{:else if agendarEnvio && enviarParaTodos}
+							Agendar para Todos ({usuarios.length})
+						{:else if agendarEnvio}
+							Agendar Notificação
+						{:else if enviarParaTodos}
+							Enviar para Todos ({usuarios.length})
+						{:else}
+							Enviar Notificação
+						{/if}
+					</button>
+				</div>
 
-        <!-- Terminal de Status -->
-        <div class="mt-4">
-          <div class="flex items-center justify-between mb-2">
-            <label class="label">
-              <span class="label-text font-medium">Terminal de Status</span>
-            </label>
-            {#if logsEnvio.length > 0}
-              <button
-                type="button"
-                class="btn btn-sm btn-ghost"
-                onclick={limparLogs}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-                Limpar
-              </button>
-            {/if}
-          </div>
-          <div
-            bind:this={terminalScrollRef}
-            class="bg-neutral text-neutral-content p-4 rounded-lg font-mono text-sm max-h-64 overflow-y-auto"
-            style="background-color: #1a1a1a; color: #e5e5e5;"
-          >
-            {#if logsEnvio.length === 0}
-              <div class="text-neutral-content/60 italic">
-                Aguardando envio de notificação...
-              </div>
-            {:else}
-              {#each logsEnvio as log}
-                <div class="mb-1">
-                  <span class="text-neutral-content/60"
-                    >[{formatarTimestamp(log.timestamp)}]</span
-                  >
-                  <span
-                    class="ml-2 badge badge-xs {log.tipo === 'chat'
-                      ? 'badge-info'
-                      : 'badge-secondary'}"
-                  >
-                    {log.tipo.toUpperCase()}
-                  </span>
-                  <span class="ml-2 font-semibold">{log.destinatario}:</span>
-                  <span class="ml-2 {obterCorStatus(log.status)}">
-                    {log.mensagem}
-                  </span>
-                </div>
-              {/each}
-            {/if}
-          </div>
-        </div>
-      </div>
-    </div>
+				<!-- Terminal de Status -->
+				<div class="mt-4">
+					<div class="mb-2 flex items-center justify-between">
+						<label class="label">
+							<span class="label-text font-medium">Terminal de Status</span>
+						</label>
+						{#if logsEnvio.length > 0}
+							<button type="button" class="btn btn-sm btn-ghost" onclick={limparLogs}>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Limpar
+							</button>
+						{/if}
+					</div>
+					<div
+						bind:this={terminalScrollRef}
+						class="bg-neutral text-neutral-content max-h-64 overflow-y-auto rounded-lg p-4 font-mono text-sm"
+						style="background-color: #1a1a1a; color: #e5e5e5;"
+					>
+						{#if logsEnvio.length === 0}
+							<div class="text-neutral-content/60 italic">Aguardando envio de notificação...</div>
+						{:else}
+							{#each logsEnvio as log}
+								<div class="mb-1">
+									<span class="text-neutral-content/60">[{formatarTimestamp(log.timestamp)}]</span>
+									<span
+										class="badge badge-xs ml-2 {log.tipo === 'chat'
+											? 'badge-info'
+											: 'badge-secondary'}"
+									>
+										{log.tipo.toUpperCase()}
+									</span>
+									<span class="ml-2 font-semibold">{log.destinatario}:</span>
+									<span class="ml-2 {obterCorStatus(log.status)}">
+										{log.mensagem}
+									</span>
+								</div>
+							{/each}
+						{/if}
+					</div>
+				</div>
+			</div>
+		</div>
 
-    <!-- Lista de Templates -->
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <div class="flex items-center justify-between mb-4">
-          <h2 class="card-title">Templates Disponíveis</h2>
-          <button
-            type="button"
-            class="btn btn-sm btn-outline btn-primary"
-            onclick={() => abrirModalNovoTemplate()}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-4 w-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 4v16m8-8H4"
-              />
-            </svg>
-            Novo Template
-          </button>
-        </div>
+		<!-- Lista de Templates -->
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<div class="mb-4 flex items-center justify-between">
+					<h2 class="card-title">Templates Disponíveis</h2>
+					<button
+						type="button"
+						class="btn btn-sm btn-outline btn-primary"
+						onclick={() => abrirModalNovoTemplate()}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 4v16m8-8H4"
+							/>
+						</svg>
+						Novo Template
+					</button>
+				</div>
 
-        {#if carregandoTemplates}
-          <div class="flex flex-col items-center justify-center py-10 gap-4">
-            <span class="loading loading-spinner loading-lg"></span>
-            <p class="text-sm text-base-content/60">Carregando templates...</p>
-          </div>
-        {:else if templates.length > 0}
-          <!-- Mostrar templates se existirem -->
-          <div class="space-y-3 max-h-[600px] overflow-y-auto">
-            {#each templates as template}
-              <div class="card bg-base-200 compact">
-                <div class="card-body">
-                  <div class="flex items-start justify-between">
-                    <div class="flex-1">
-                      <h3 class="font-bold text-sm">{template.nome}</h3>
-                      <p class="text-xs opacity-70 mt-1">{template.titulo}</p>
-                      <p class="text-xs mt-2 line-clamp-2">{template.corpo}</p>
-                      <div class="flex gap-2 mt-2">
-                        <span
-                          class="badge badge-sm {template.tipo === 'sistema'
-                            ? 'badge-primary'
-                            : 'badge-secondary'}"
-                        >
-                          {template.tipo}
-                        </span>
-                        {#if template.variaveis && template.variaveis.length > 0}
-                          <span class="badge badge-sm badge-outline">
-                            {template.variaveis.length} variáveis
-                          </span>
-                        {/if}
-                      </div>
-                    </div>
-                    {#if template.tipo !== "sistema"}
-                      <div class="dropdown dropdown-end">
-                        <button
-                          type="button"
-                          tabindex="0"
-                          class="btn btn-ghost btn-xs"
-                          aria-label="Opções do template"
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-4 w-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                          >
-                            <path
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-                            />
-                          </svg>
-                        </button>
-                        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-                        <ul
-                          tabindex="0"
-                          class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-32"
-                        >
-                          <li><button type="button">Editar</button></li>
-                          <li>
-                            <button type="button" class="text-error"
-                              >Excluir</button
-                            >
-                          </li>
-                        </ul>
-                      </div>
-                    {/if}
-                  </div>
-                </div>
-              </div>
-            {/each}
-          </div>
-        {:else}
-          <!-- Nenhum template disponível - mostrar botão para criar -->
-          <div class="text-center py-10">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-12 w-12 mx-auto mb-4 opacity-50"
-              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>
-            <p class="font-medium text-base-content mb-2">
-              Nenhum template disponível
-            </p>
-            <p class="text-sm text-base-content/60 mb-4">
-              Clique no botão abaixo para criar os templates padrão do sistema.
-            </p>
-            <button
-              class="btn btn-primary btn-sm"
-              onclick={criarTemplatesPadrao}
-              disabled={criandoTemplates}
-            >
-              {#if criandoTemplates}
-                <span class="loading loading-spinner loading-xs"></span>
-                Criando templates...
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 4v16m8-8H4"
-                  />
-                </svg>
-                Criar Templates Padrão
-              {/if}
-            </button>
-          </div>
-        {/if}
-      </div>
-    </div>
-  </div>
+				{#if carregandoTemplates}
+					<div class="flex flex-col items-center justify-center gap-4 py-10">
+						<span class="loading loading-spinner loading-lg"></span>
+						<p class="text-base-content/60 text-sm">Carregando templates...</p>
+					</div>
+				{:else if templates.length > 0}
+					<!-- Mostrar templates se existirem -->
+					<div class="max-h-[600px] space-y-3 overflow-y-auto">
+						{#each templates as template}
+							<div class="card bg-base-200 compact">
+								<div class="card-body">
+									<div class="flex items-start justify-between">
+										<div class="flex-1">
+											<h3 class="text-sm font-bold">{template.nome}</h3>
+											<p class="mt-1 text-xs opacity-70">{template.titulo}</p>
+											<p class="mt-2 line-clamp-2 text-xs">{template.corpo}</p>
+											<div class="mt-2 flex gap-2">
+												<span
+													class="badge badge-sm {template.tipo === 'sistema'
+														? 'badge-primary'
+														: 'badge-secondary'}"
+												>
+													{template.tipo}
+												</span>
+												{#if template.variaveis && template.variaveis.length > 0}
+													<span class="badge badge-sm badge-outline">
+														{template.variaveis.length} variáveis
+													</span>
+												{/if}
+											</div>
+										</div>
+										{#if template.tipo !== 'sistema'}
+											<div class="dropdown dropdown-end">
+												<button
+													type="button"
+													tabindex="0"
+													class="btn btn-xs"
+													aria-label="Opções do template"
+												>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														class="h-4 w-4"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke="currentColor"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+														/>
+													</svg>
+												</button>
+												<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+												<ul
+													tabindex="0"
+													class="dropdown-content menu bg-base-100 rounded-box w-32 p-2 shadow"
+												>
+													<li><button type="button">Editar</button></li>
+													<li>
+														<button type="button" class="text-error">Excluir</button>
+													</li>
+												</ul>
+											</div>
+										{/if}
+									</div>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{:else}
+					<!-- Nenhum template disponível - mostrar botão para criar -->
+					<div class="py-10 text-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="mx-auto mb-4 h-12 w-12 opacity-50"
+							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>
+						<p class="text-base-content mb-2 font-medium">Nenhum template disponível</p>
+						<p class="text-base-content/60 mb-4 text-sm">
+							Clique no botão abaixo para criar os templates padrão do sistema.
+						</p>
+						<button
+							class="btn btn-primary btn-sm"
+							onclick={criarTemplatesPadrao}
+							disabled={criandoTemplates}
+						>
+							{#if criandoTemplates}
+								<span class="loading loading-spinner loading-xs"></span>
+								Criando templates...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 4v16m8-8H4"
+									/>
+								</svg>
+								Criar Templates Padrão
+							{/if}
+						</button>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
 
-  <!-- Histórico de Agendamentos -->
-  <div class="card bg-base-100 shadow-xl mt-6">
-    <div class="card-body">
-      <div class="flex items-center justify-between mb-4">
-        <div class="flex items-center gap-3">
-          <div class="p-2 bg-secondary/10 rounded-lg">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6 text-secondary"
-              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>
-          <h2 class="card-title">Histórico de Agendamentos</h2>
-        </div>
+	<!-- Histórico de Agendamentos -->
+	<div class="card bg-base-100 mt-6 shadow-xl">
+		<div class="card-body">
+			<div class="mb-4 flex items-center justify-between">
+				<div class="flex items-center gap-3">
+					<div class="bg-secondary/10 rounded-lg p-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-secondary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+					</div>
+					<h2 class="card-title">Histórico de Agendamentos</h2>
+				</div>
 
-        <!-- Filtros -->
-        <div class="flex gap-2">
-          <button
-            type="button"
-            class="btn btn-sm {filtroAgendamento === 'todos'
-              ? 'btn-primary'
-              : 'btn-ghost'}"
-            onclick={() => (filtroAgendamento = "todos")}
-          >
-            Todos
-          </button>
-          <button
-            type="button"
-            class="btn btn-sm {filtroAgendamento === 'agendados'
-              ? 'btn-primary'
-              : 'btn-ghost'}"
-            onclick={() => (filtroAgendamento = "agendados")}
-          >
-            Agendados
-          </button>
-          <button
-            type="button"
-            class="btn btn-sm {filtroAgendamento === 'enviados'
-              ? 'btn-primary'
-              : 'btn-ghost'}"
-            onclick={() => (filtroAgendamento = "enviados")}
-          >
-            Enviados
-          </button>
-        </div>
-      </div>
+				<!-- Filtros -->
+				<div class="flex gap-2">
+					<button
+						type="button"
+						class="btn btn-sm {filtroAgendamento === 'todos' ? 'btn-primary' : 'btn-ghost'}"
+						onclick={() => (filtroAgendamento = 'todos')}
+					>
+						Todos
+					</button>
+					<button
+						type="button"
+						class="btn btn-sm {filtroAgendamento === 'agendados' ? 'btn-primary' : 'btn-ghost'}"
+						onclick={() => (filtroAgendamento = 'agendados')}
+					>
+						Agendados
+					</button>
+					<button
+						type="button"
+						class="btn btn-sm {filtroAgendamento === 'enviados' ? 'btn-primary' : 'btn-ghost'}"
+						onclick={() => (filtroAgendamento = 'enviados')}
+					>
+						Enviados
+					</button>
+				</div>
+			</div>
 
-      {#if agendamentosFiltrados.length === 0}
-        <div class="text-center py-10">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-12 w-12 mx-auto mb-4 opacity-50"
-            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>
-          <p class="font-medium text-base-content mb-2">
-            Nenhum agendamento encontrado
-          </p>
-          <p class="text-sm text-base-content/60">
-            Os agendamentos aparecerão aqui quando você agendar envios.
-          </p>
-        </div>
-      {:else}
-        <!-- Tabela de Agendamentos -->
-        <div class="overflow-x-auto">
-          <table class="table table-zebra">
-            <thead>
-              <tr>
-                <th>Tipo</th>
-                <th>Destinatário</th>
-                <th>Data/Hora</th>
-                <th>Status</th>
-                <th>Template</th>
-                <th>Ações</th>
-              </tr>
-            </thead>
-            <tbody>
-              {#each agendamentosFiltrados as agendamento}
-                {@const status = obterStatusAgendamento(agendamento)}
-                {@const nomeDestinatario = obterNomeDestinatario(agendamento)}
-                {@const dataFormatada = formatarDataAgendamento(agendamento)}
-                {@const podeCancelar = status === "agendado"}
-                {@const templateNome =
-                  agendamento.tipo === "email" && agendamento.dados.templateInfo
-                    ? agendamento.dados.templateInfo.nome
-                    : agendamento.tipo === "email" &&
-                        agendamento.dados.templateId
-                      ? "Template removido"
-                      : "-"}
-                <tr>
-                  <td>
-                    <div class="flex items-center gap-2">
-                      {#if agendamento.tipo === "email"}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-5 w-5 text-info"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                          />
-                        </svg>
-                        <span class="badge badge-info badge-sm">Email</span>
-                      {:else}
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-5 w-5 text-primary"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                          />
-                        </svg>
-                        <span class="badge badge-primary badge-sm">Chat</span>
-                      {/if}
-                    </div>
-                  </td>
-                  <td>
-                    <div class="font-medium">{nomeDestinatario}</div>
-                    {#if agendamento.tipo === "email"}
-                      <div class="text-xs text-base-content/60">
-                        {agendamento.dados.destinatario}
-                      </div>
-                    {/if}
-                  </td>
-                  <td>
-                    <div class="font-medium">{dataFormatada}</div>
-                    {#if podeCancelar}
-                      {@const tempoRestante =
-                        agendamento.tipo === "email"
-                          ? (agendamento.dados.agendadaPara ?? 0) - Date.now()
-                          : (agendamento.dados.agendadaPara ?? 0) - Date.now()}
-                      {@const horasRestantes = Math.floor(
-                        tempoRestante / (1000 * 60 * 60),
-                      )}
-                      {@const minutosRestantes = Math.floor(
-                        (tempoRestante % (1000 * 60 * 60)) / (1000 * 60),
-                      )}
-                      {#if horasRestantes < 1 && minutosRestantes < 60}
-                        <div class="text-xs text-warning">
-                          Em {minutosRestantes} min
-                        </div>
-                      {:else if horasRestantes < 24}
-                        <div class="text-xs text-info">
-                          Em {horasRestantes}h {minutosRestantes}min
-                        </div>
-                      {/if}
-                    {/if}
-                  </td>
-                  <td>
-                    {#if status === "agendado"}
-                      <span class="badge badge-warning badge-sm">Agendado</span>
-                    {:else if status === "enviado"}
-                      <span class="badge badge-success badge-sm">Enviado</span>
-                    {:else}
-                      <span class="badge badge-error badge-sm">Cancelado</span>
-                    {/if}
-                  </td>
-                  <td>
-                    {#if agendamento.tipo === "email"}
-                      {#if agendamento.dados.templateInfo}
-                        <div class="text-sm">
-                          {agendamento.dados.templateInfo.nome}
-                        </div>
-                      {:else if agendamento.dados.templateId}
-                        <div class="text-sm text-base-content/60 italic">
-                          Template removido
-                        </div>
-                      {:else}
-                        <div class="text-sm text-base-content/60">-</div>
-                      {/if}
-                    {:else}
-                      <div class="text-sm text-base-content/60">-</div>
-                    {/if}
-                  </td>
-                  <td>
-                    {#if podeCancelar}
-                      <button
-                        type="button"
-                        class="btn btn-sm btn-error btn-outline"
-                        onclick={() => cancelarAgendamento(agendamento)}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-4 w-4"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M6 18L18 6M6 6l12 12"
-                          />
-                        </svg>
-                        Cancelar
-                      </button>
-                    {:else}
-                      <span class="text-sm text-base-content/60">-</span>
-                    {/if}
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        </div>
-      {/if}
-    </div>
-  </div>
+			{#if agendamentosFiltrados.length === 0}
+				<div class="py-10 text-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="mx-auto mb-4 h-12 w-12 opacity-50"
+						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>
+					<p class="text-base-content mb-2 font-medium">Nenhum agendamento encontrado</p>
+					<p class="text-base-content/60 text-sm">
+						Os agendamentos aparecerão aqui quando você agendar envios.
+					</p>
+				</div>
+			{:else}
+				<!-- Tabela de Agendamentos -->
+				<div class="overflow-x-auto">
+					<table class="table-zebra table">
+						<thead>
+							<tr>
+								<th>Tipo</th>
+								<th>Destinatário</th>
+								<th>Data/Hora</th>
+								<th>Status</th>
+								<th>Template</th>
+								<th>Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each agendamentosFiltrados as agendamento}
+								{@const status = obterStatusAgendamento(agendamento)}
+								{@const nomeDestinatario = obterNomeDestinatario(agendamento)}
+								{@const dataFormatada = formatarDataAgendamento(agendamento)}
+								{@const podeCancelar = status === 'agendado'}
+								{@const templateNome =
+									agendamento.tipo === 'email' && agendamento.dados.templateInfo
+										? agendamento.dados.templateInfo.nome
+										: agendamento.tipo === 'email' && agendamento.dados.templateId
+											? 'Template removido'
+											: '-'}
+								<tr>
+									<td>
+										<div class="flex items-center gap-2">
+											{#if agendamento.tipo === 'email'}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="text-info h-5 w-5"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+													/>
+												</svg>
+												<span class="badge badge-info badge-sm">Email</span>
+											{:else}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="text-primary h-5 w-5"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+													/>
+												</svg>
+												<span class="badge badge-primary badge-sm">Chat</span>
+											{/if}
+										</div>
+									</td>
+									<td>
+										<div class="font-medium">{nomeDestinatario}</div>
+										{#if agendamento.tipo === 'email'}
+											<div class="text-base-content/60 text-xs">
+												{agendamento.dados.destinatario}
+											</div>
+										{/if}
+									</td>
+									<td>
+										<div class="font-medium">{dataFormatada}</div>
+										{#if podeCancelar}
+											{@const tempoRestante =
+												agendamento.tipo === 'email'
+													? (agendamento.dados.agendadaPara ?? 0) - Date.now()
+													: (agendamento.dados.agendadaPara ?? 0) - Date.now()}
+											{@const horasRestantes = Math.floor(tempoRestante / (1000 * 60 * 60))}
+											{@const minutosRestantes = Math.floor(
+												(tempoRestante % (1000 * 60 * 60)) / (1000 * 60)
+											)}
+											{#if horasRestantes < 1 && minutosRestantes < 60}
+												<div class="text-warning text-xs">
+													Em {minutosRestantes} min
+												</div>
+											{:else if horasRestantes < 24}
+												<div class="text-info text-xs">
+													Em {horasRestantes}h {minutosRestantes}min
+												</div>
+											{/if}
+										{/if}
+									</td>
+									<td>
+										{#if status === 'agendado'}
+											<span class="badge badge-warning badge-sm">Agendado</span>
+										{:else if status === 'enviado'}
+											<span class="badge badge-success badge-sm">Enviado</span>
+										{:else}
+											<span class="badge badge-error badge-sm">Cancelado</span>
+										{/if}
+									</td>
+									<td>
+										{#if agendamento.tipo === 'email'}
+											{#if agendamento.dados.templateInfo}
+												<div class="text-sm">
+													{agendamento.dados.templateInfo.nome}
+												</div>
+											{:else if agendamento.dados.templateId}
+												<div class="text-base-content/60 text-sm italic">Template removido</div>
+											{:else}
+												<div class="text-base-content/60 text-sm">-</div>
+											{/if}
+										{:else}
+											<div class="text-base-content/60 text-sm">-</div>
+										{/if}
+									</td>
+									<td>
+										{#if podeCancelar}
+											<button
+												type="button"
+												class="btn btn-sm btn-error btn-outline"
+												onclick={() => cancelarAgendamento(agendamento)}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-4 w-4"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M6 18L18 6M6 6l12 12"
+													/>
+												</svg>
+												Cancelar
+											</button>
+										{:else}
+											<span class="text-base-content/60 text-sm">-</span>
+										{/if}
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				</div>
+			{/if}
+		</div>
+	</div>
 
-  <!-- Info -->
-  <div class="alert alert-warning mt-6">
-    <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-      ></path>
-    </svg>
-    <span
-      >Para enviar emails, certifique-se de configurar o SMTP em Configurações
-      de Email.</span
-    >
-  </div>
+	<!-- Info -->
+	<div class="alert alert-warning mt-6">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="h-6 w-6 shrink-0 stroke-current"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+			></path>
+		</svg>
+		<span>Para enviar emails, certifique-se de configurar o SMTP em Configurações de Email.</span>
+	</div>
 </div>
 
 <!-- Modal Novo Template -->
 {#if modalNovoTemplateAberto}
-  <div class="modal modal-open">
-    <div class="modal-box max-w-2xl">
-      <h3 class="font-bold text-lg mb-4">Criar Novo Template</h3>
+	<div class="modal modal-open">
+		<div class="modal-box max-w-2xl">
+			<h3 class="mb-4 text-lg font-bold">Criar Novo Template</h3>
 
-      <div class="space-y-4">
-        <!-- Código -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-medium">Código *</span>
-            <span class="label-text-alt">Ex: AVISO_IMPORTANTE</span>
-          </label>
-          <input
-            type="text"
-            bind:value={codigoTemplate}
-            placeholder="CODIGO_TEMPLATE"
-            class="input input-bordered"
-            maxlength="50"
-          />
-          <label class="label">
-            <span class="label-text-alt"
-              >Código único para identificar o template (será convertido para
-              MAIÚSCULAS)</span
-            >
-          </label>
-        </div>
+			<div class="space-y-4">
+				<!-- Código -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Código *</span>
+						<span class="label-text-alt">Ex: AVISO_IMPORTANTE</span>
+					</label>
+					<input
+						type="text"
+						bind:value={codigoTemplate}
+						placeholder="CODIGO_TEMPLATE"
+						class="input input-bordered"
+						maxlength="50"
+					/>
+					<label class="label">
+						<span class="label-text-alt"
+							>Código único para identificar o template (será convertido para MAIÚSCULAS)</span
+						>
+					</label>
+				</div>
 
-        <!-- Nome -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-medium">Nome *</span>
-          </label>
-          <input
-            type="text"
-            bind:value={nomeTemplate}
-            placeholder="Nome do Template"
-            class="input input-bordered"
-            maxlength="100"
-          />
-          <label class="label">
-            <span class="label-text-alt"
-              >Nome exibido na lista de templates</span
-            >
-          </label>
-        </div>
+				<!-- Nome -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Nome *</span>
+					</label>
+					<input
+						type="text"
+						bind:value={nomeTemplate}
+						placeholder="Nome do Template"
+						class="input input-bordered"
+						maxlength="100"
+					/>
+					<label class="label">
+						<span class="label-text-alt">Nome exibido na lista de templates</span>
+					</label>
+				</div>
 
-        <!-- Título -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-medium">Título *</span>
-          </label>
-          <input
-            type="text"
-            bind:value={tituloTemplate}
-            placeholder="Título da Mensagem"
-            class="input input-bordered"
-            maxlength="200"
-          />
-          <label class="label">
-            <span class="label-text-alt"
-              >Título usado no assunto do email ou cabeçalho da mensagem</span
-            >
-          </label>
-        </div>
+				<!-- Título -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Título *</span>
+					</label>
+					<input
+						type="text"
+						bind:value={tituloTemplate}
+						placeholder="Título da Mensagem"
+						class="input input-bordered"
+						maxlength="200"
+					/>
+					<label class="label">
+						<span class="label-text-alt"
+							>Título usado no assunto do email ou cabeçalho da mensagem</span
+						>
+					</label>
+				</div>
 
-        <!-- Corpo -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-medium">Corpo da Mensagem *</span>
-          </label>
-          <textarea
-            bind:value={corpoTemplate}
-            placeholder="Digite o conteúdo da mensagem..."
-            class="textarea textarea-bordered h-32"
-            maxlength="2000"
-          ></textarea>
-          <label class="label">
-            <span class="label-text-alt"
-              >Use {"{{"}variavel{"}}"} para variáveis dinâmicas (ex: {"{{"}nome{"}}"},
-              {"{{"}data{"}}"})</span
-            >
-          </label>
-        </div>
+				<!-- Corpo -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Corpo da Mensagem *</span>
+					</label>
+					<textarea
+						bind:value={corpoTemplate}
+						placeholder="Digite o conteúdo da mensagem..."
+						class="textarea textarea-bordered h-32"
+						maxlength="2000"
+					></textarea>
+					<label class="label">
+						<span class="label-text-alt"
+							>Use {'{{'}variavel{'}}'} para variáveis dinâmicas (ex: {'{{'}nome{'}}'},
+							{'{{'}data{'}}'})</span
+						>
+					</label>
+				</div>
 
-        <!-- Variáveis -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-medium">Variáveis (opcional)</span>
-          </label>
-          <input
-            type="text"
-            bind:value={variaveisTemplate}
-            placeholder="nome, data, valor (separadas por vírgula)"
-            class="input input-bordered"
-          />
-          <label class="label">
-            <span class="label-text-alt"
-              >Liste as variáveis que podem ser substituídas no template
-              (separadas por vírgula ou espaço)</span
-            >
-          </label>
-        </div>
-      </div>
+				<!-- Variáveis -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Variáveis (opcional)</span>
+					</label>
+					<input
+						type="text"
+						bind:value={variaveisTemplate}
+						placeholder="nome, data, valor (separadas por vírgula)"
+						class="input input-bordered"
+					/>
+					<label class="label">
+						<span class="label-text-alt"
+							>Liste as variáveis que podem ser substituídas no template (separadas por vírgula ou
+							espaço)</span
+						>
+					</label>
+				</div>
+			</div>
 
-      <div class="modal-action">
-        <button
-          class="btn btn-ghost"
-          onclick={fecharModalNovoTemplate}
-          disabled={criandoNovoTemplate}
-        >
-          Cancelar
-        </button>
-        <button
-          class="btn btn-primary"
-          onclick={salvarNovoTemplate}
-          disabled={criandoNovoTemplate}
-        >
-          {#if criandoNovoTemplate}
-            <span class="loading loading-spinner loading-sm"></span>
-            Criando...
-          {:else}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-            Criar Template
-          {/if}
-        </button>
-      </div>
-    </div>
-    <div class="modal-backdrop" onclick={fecharModalNovoTemplate}></div>
-  </div>
+			<div class="modal-action">
+				<button class="btn" onclick={fecharModalNovoTemplate} disabled={criandoNovoTemplate}>
+					Cancelar
+				</button>
+				<button class="btn btn-primary" onclick={salvarNovoTemplate} disabled={criandoNovoTemplate}>
+					{#if criandoNovoTemplate}
+						<span class="loading loading-spinner loading-sm"></span>
+						Criando...
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M5 13l4 4L19 7"
+							/>
+						</svg>
+						Criar Template
+					{/if}
+				</button>
+			</div>
+		</div>
+		<div class="modal-backdrop" onclick={fecharModalNovoTemplate}></div>
+	</div>
 {/if}
diff --git a/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
index f4225cb..130a768 100644
--- a/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
@@ -284,7 +284,7 @@
 				</svg>
 				Criar novo perfil
 			</button>
-			<button class="btn btn-ghost gap-2" onclick={() => goto(resolve('/ti'))}>
+			<button class="btn gap-2" onclick={() => goto(resolve('/ti'))}>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
 					class="h-5 w-5"
@@ -402,11 +402,7 @@
 					{#if busca}
 						<div class="badge badge-primary gap-2">
 							Busca: {busca}
-							<button
-								class="btn btn-ghost btn-xs"
-								onclick={() => (busca = '')}
-								aria-label="Limpar busca"
-							>
+							<button class="btn btn-xs" onclick={() => (busca = '')} aria-label="Limpar busca">
 								✕
 							</button>
 						</div>
@@ -415,7 +411,7 @@
 						<div class="badge badge-secondary gap-2">
 							Perfil filtrado
 							<button
-								class="btn btn-ghost btn-xs"
+								class="btn btn-xs"
 								onclick={() => (filtroRole = '')}
 								aria-label="Limpar filtro"
 							>
@@ -761,7 +757,7 @@
 						<div class="flex flex-wrap gap-3">
 							<button
 								type="button"
-								class="btn btn-ghost"
+								class="btn"
 								onclick={fecharModalNovoPerfil}
 								disabled={criandoNovoPerfil}
 							>
diff --git a/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte b/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
index 6232f81..7d3ab7d 100644
--- a/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
@@ -1,846 +1,786 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import StatsCard from "$lib/components/ti/StatsCard.svelte";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import { Users, Shield, AlertTriangle, Info, Building2 } from "lucide-svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import StatsCard from '$lib/components/ti/StatsCard.svelte';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+	import { Users, Shield, AlertTriangle, Info, Building2 } from 'lucide-svelte';
 
-  type Role = {
-    _id: Id<"roles">;
-    _creationTime: number;
-    nome: string;
-    descricao: string;
-    nivel: number;
-    setor?: string;
-  };
+	type Role = {
+		_id: Id<'roles'>;
+		_creationTime: number;
+		nome: string;
+		descricao: string;
+		nivel: number;
+		setor?: string;
+	};
 
-  const client = useConvexClient();
-  const rolesQuery = useQuery(api.roles.listar, {});
-  const roles = $derived(rolesQuery?.data ?? []);
-  const carregando = $derived(rolesQuery === undefined);
+	const client = useConvexClient();
+	const rolesQuery = useQuery(api.roles.listar, {});
+	const roles = $derived(rolesQuery?.data ?? []);
+	const carregando = $derived(rolesQuery === undefined);
 
-  let busca = $state("");
-  let filtroSetor = $state("");
-  let filtroNivel = $state<number | "">("");
-  let roleSelecionada = $state<Role | null>(null);
-  let modalDetalhesAberto = $state(false);
+	let busca = $state('');
+	let filtroSetor = $state('');
+	let filtroNivel = $state<number | ''>('');
+	let roleSelecionada = $state<Role | null>(null);
+	let modalDetalhesAberto = $state(false);
 
-  const setoresDisponiveis = $derived.by(() => {
-    const setores = new Set<string>();
-    roles.forEach((r) => {
-      if (r.setor) setores.add(r.setor);
-    });
-    return Array.from(setores).sort();
-  });
+	const setoresDisponiveis = $derived.by(() => {
+		const setores = new Set<string>();
+		roles.forEach((r) => {
+			if (r.setor) setores.add(r.setor);
+		});
+		return Array.from(setores).sort();
+	});
 
-  // Estatísticas
-  const stats = $derived.by(() => {
-    if (carregando) return null;
+	// Estatísticas
+	const stats = $derived.by(() => {
+		if (carregando) return null;
 
-    const porNivel = {
-      0: roles.filter((r) => r.nivel === 0).length,
-      1: roles.filter((r) => r.nivel === 1).length,
-      2: roles.filter((r) => r.nivel === 2).length,
-      3: roles.filter((r) => r.nivel >= 3).length,
-    };
+		const porNivel = {
+			0: roles.filter((r) => r.nivel === 0).length,
+			1: roles.filter((r) => r.nivel === 1).length,
+			2: roles.filter((r) => r.nivel === 2).length,
+			3: roles.filter((r) => r.nivel >= 3).length
+		};
 
-    return {
-      total: roles.length,
-      nivelMaximo: porNivel[0],
-      nivelAlto: porNivel[1],
-      nivelMedio: porNivel[2],
-      nivelBaixo: porNivel[3],
-      comSetor: roles.filter((r) => r.setor).length,
-    };
-  });
+		return {
+			total: roles.length,
+			nivelMaximo: porNivel[0],
+			nivelAlto: porNivel[1],
+			nivelMedio: porNivel[2],
+			nivelBaixo: porNivel[3],
+			comSetor: roles.filter((r) => r.setor).length
+		};
+	});
 
-  const rolesFiltradas = $derived.by(() => {
-    let resultado = roles;
+	const rolesFiltradas = $derived.by(() => {
+		let resultado = roles;
 
-    // Filtro por busca (nome ou descrição)
-    if (busca.trim()) {
-      const buscaLower = busca.toLowerCase();
-      resultado = resultado.filter(
-        (r) =>
-          r.nome.toLowerCase().includes(buscaLower) ||
-          r.descricao.toLowerCase().includes(buscaLower),
-      );
-    }
+		// Filtro por busca (nome ou descrição)
+		if (busca.trim()) {
+			const buscaLower = busca.toLowerCase();
+			resultado = resultado.filter(
+				(r) =>
+					r.nome.toLowerCase().includes(buscaLower) ||
+					r.descricao.toLowerCase().includes(buscaLower)
+			);
+		}
 
-    // Filtro por setor
-    if (filtroSetor) {
-      resultado = resultado.filter((r) => r.setor === filtroSetor);
-    }
+		// Filtro por setor
+		if (filtroSetor) {
+			resultado = resultado.filter((r) => r.setor === filtroSetor);
+		}
 
-    // Filtro por nível
-    if (filtroNivel !== "") {
-      if (filtroNivel === 3) {
-        resultado = resultado.filter((r) => r.nivel >= 3);
-      } else {
-        resultado = resultado.filter((r) => r.nivel === filtroNivel);
-      }
-    }
+		// Filtro por nível
+		if (filtroNivel !== '') {
+			if (filtroNivel === 3) {
+				resultado = resultado.filter((r) => r.nivel >= 3);
+			} else {
+				resultado = resultado.filter((r) => r.nivel === filtroNivel);
+			}
+		}
 
-    return resultado.sort((a, b) => {
-      // Ordenar por nível primeiro (menor nível = maior privilégio)
-      if (a.nivel !== b.nivel) return a.nivel - b.nivel;
-      // Depois por nome
-      return a.nome.localeCompare(b.nome);
-    });
-  });
+		return resultado.sort((a, b) => {
+			// Ordenar por nível primeiro (menor nível = maior privilégio)
+			if (a.nivel !== b.nivel) return a.nivel - b.nivel;
+			// Depois por nome
+			return a.nome.localeCompare(b.nome);
+		});
+	});
 
-  function obterCorNivel(nivel: number): string {
-    if (nivel === 0) return "badge-error";
-    if (nivel === 1) return "badge-warning";
-    if (nivel === 2) return "badge-info";
-    return "badge-ghost";
-  }
+	function obterCorNivel(nivel: number): string {
+		if (nivel === 0) return 'badge-error';
+		if (nivel === 1) return 'badge-warning';
+		if (nivel === 2) return 'badge-info';
+		return 'badge-ghost';
+	}
 
-  function obterTextoNivel(nivel: number): string {
-    if (nivel === 0) return "Máximo";
-    if (nivel === 1) return "Alto";
-    if (nivel === 2) return "Médio";
-    if (nivel === 3) return "Baixo";
-    return `Nível ${nivel}`;
-  }
+	function obterTextoNivel(nivel: number): string {
+		if (nivel === 0) return 'Máximo';
+		if (nivel === 1) return 'Alto';
+		if (nivel === 2) return 'Médio';
+		if (nivel === 3) return 'Baixo';
+		return `Nível ${nivel}`;
+	}
 
-  function obterCorCardNivel(nivel: number): string {
-    if (nivel === 0) return "border-l-4 border-error";
-    if (nivel === 1) return "border-l-4 border-warning";
-    if (nivel === 2) return "border-l-4 border-info";
-    return "border-l-4 border-base-300";
-  }
+	function obterCorCardNivel(nivel: number): string {
+		if (nivel === 0) return 'border-l-4 border-error';
+		if (nivel === 1) return 'border-l-4 border-warning';
+		if (nivel === 2) return 'border-l-4 border-info';
+		return 'border-l-4 border-base-300';
+	}
 
-  function abrirDetalhes(role: Role) {
-    roleSelecionada = role;
-    modalDetalhesAberto = true;
-  }
+	function abrirDetalhes(role: Role) {
+		roleSelecionada = role;
+		modalDetalhesAberto = true;
+	}
 
-  function fecharDetalhes() {
-    modalDetalhesAberto = false;
-    roleSelecionada = null;
-  }
+	function fecharDetalhes() {
+		modalDetalhesAberto = false;
+		roleSelecionada = null;
+	}
 
-  function formatarData(timestamp: number): string {
-    try {
-      return format(new Date(timestamp), "dd/MM/yyyy HH:mm", { locale: ptBR });
-    } catch {
-      return "Data inválida";
-    }
-  }
+	function formatarData(timestamp: number): string {
+		try {
+			return format(new Date(timestamp), 'dd/MM/yyyy HH:mm', { locale: ptBR });
+		} catch {
+			return 'Data inválida';
+		}
+	}
 
-  function limparFiltros() {
-    busca = "";
-    filtroSetor = "";
-    filtroNivel = "";
-  }
+	function limparFiltros() {
+		busca = '';
+		filtroSetor = '';
+		filtroNivel = '';
+	}
 
-  const temFiltrosAtivos = $derived(
-    busca.trim() !== "" || filtroSetor !== "" || filtroNivel !== "",
-  );
+	const temFiltrosAtivos = $derived(
+		busca.trim() !== '' || filtroSetor !== '' || filtroNivel !== ''
+	);
 </script>
 
-<ProtectedRoute
-  allowedRoles={["ti_master", "admin", "ti_usuario"]}
-  maxLevel={3}
->
-  <div class="container mx-auto px-4 py-6 max-w-7xl">
-    <!-- Header -->
-    <div class="flex items-center justify-between mb-8">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-primary/10 rounded-xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="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-base-content">Gestão de Perfis</h1>
-          <p class="text-base-content/60 mt-1">
-            Visualize e gerencie os perfis de acesso do sistema
-          </p>
-        </div>
-      </div>
-    </div>
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
+	<div class="container mx-auto max-w-7xl px-4 py-6">
+		<!-- Header -->
+		<div class="mb-8 flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="bg-primary/10 rounded-xl p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary 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 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-base-content text-3xl font-bold">Gestão de Perfis</h1>
+					<p class="text-base-content/60 mt-1">
+						Visualize e gerencie os perfis de acesso do sistema
+					</p>
+				</div>
+			</div>
+		</div>
 
-    <!-- Estatísticas -->
-    {#if stats}
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
-        <StatsCard
-          title="Total de Perfis"
-          value={stats.total}
-          Icon={Users}
-          color="primary"
-        />
-        <StatsCard
-          title="Nível Máximo"
-          value={stats.nivelMaximo}
-          description="Acesso total"
-          Icon={Shield}
-          color="error"
-        />
-        <StatsCard
-          title="Nível Alto"
-          value={stats.nivelAlto}
-          description="Acesso elevado"
-          Icon={AlertTriangle}
-          color="warning"
-        />
-        <StatsCard
-          title="Nível Médio"
-          value={stats.nivelMedio}
-          description="Acesso padrão"
-          Icon={Info}
-          color="info"
-        />
-        <StatsCard
-          title="Com Setor"
-          value={stats.comSetor}
-          description={stats.total > 0
-            ? ((stats.comSetor / stats.total) * 100).toFixed(0) + "% do total"
-            : "0%"}
-          Icon={Building2}
-          color="secondary"
-        />
-      </div>
-    {/if}
+		<!-- Estatísticas -->
+		{#if stats}
+			<div class="mb-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-5">
+				<StatsCard title="Total de Perfis" value={stats.total} Icon={Users} color="primary" />
+				<StatsCard
+					title="Nível Máximo"
+					value={stats.nivelMaximo}
+					description="Acesso total"
+					Icon={Shield}
+					color="error"
+				/>
+				<StatsCard
+					title="Nível Alto"
+					value={stats.nivelAlto}
+					description="Acesso elevado"
+					Icon={AlertTriangle}
+					color="warning"
+				/>
+				<StatsCard
+					title="Nível Médio"
+					value={stats.nivelMedio}
+					description="Acesso padrão"
+					Icon={Info}
+					color="info"
+				/>
+				<StatsCard
+					title="Com Setor"
+					value={stats.comSetor}
+					description={stats.total > 0
+						? ((stats.comSetor / stats.total) * 100).toFixed(0) + '% do total'
+						: '0%'}
+					Icon={Building2}
+					color="secondary"
+				/>
+			</div>
+		{/if}
 
-    <!-- Filtros -->
-    {#if !carregando && roles.length > 0}
-      <div class="card bg-base-100 shadow-xl mb-6 border border-base-300">
-        <div class="card-body">
-          <div class="flex flex-wrap items-center justify-between gap-4 mb-4">
-            <div class="flex items-center gap-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 text-primary"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-                />
-              </svg>
-              <h2 class="card-title text-lg">Filtros de Busca</h2>
-            </div>
-            {#if temFiltrosAtivos}
-              <button
-                type="button"
-                class="btn btn-sm btn-outline btn-error"
-                onclick={limparFiltros}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-                Limpar Filtros
-              </button>
-            {/if}
-          </div>
+		<!-- Filtros -->
+		{#if !carregando && roles.length > 0}
+			<div class="card bg-base-100 border-base-300 mb-6 border shadow-xl">
+				<div class="card-body">
+					<div class="mb-4 flex flex-wrap items-center justify-between gap-4">
+						<div class="flex items-center gap-2">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="text-primary h-5 w-5"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
+								/>
+							</svg>
+							<h2 class="card-title text-lg">Filtros de Busca</h2>
+						</div>
+						{#if temFiltrosAtivos}
+							<button
+								type="button"
+								class="btn btn-sm btn-outline btn-error"
+								onclick={limparFiltros}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Limpar Filtros
+							</button>
+						{/if}
+					</div>
 
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <!-- Busca -->
-            <div class="form-control">
-              <label class="label" for="busca">
-                <span class="label-text font-medium">Buscar</span>
-              </label>
-              <div class="relative">
-                <input
-                  id="busca"
-                  type="text"
-                  bind:value={busca}
-                  placeholder="Buscar por nome ou descrição..."
-                  class="input input-bordered w-full pl-10"
-                />
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-base-content/40"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                  />
-                </svg>
-              </div>
-            </div>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+						<!-- Busca -->
+						<div class="form-control">
+							<label class="label" for="busca">
+								<span class="label-text font-medium">Buscar</span>
+							</label>
+							<div class="relative">
+								<input
+									id="busca"
+									type="text"
+									bind:value={busca}
+									placeholder="Buscar por nome ou descrição..."
+									class="input input-bordered w-full pl-10"
+								/>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+									/>
+								</svg>
+							</div>
+						</div>
 
-            <!-- Setor -->
-            <div class="form-control">
-              <label class="label" for="filtro-setor">
-                <span class="label-text font-medium">Setor</span>
-              </label>
-              <select
-                id="filtro-setor"
-                bind:value={filtroSetor}
-                class="select select-bordered"
-              >
-                <option value="">Todos os setores</option>
-                {#each setoresDisponiveis as setor}
-                  <option value={setor}>{setor}</option>
-                {/each}
-              </select>
-            </div>
+						<!-- Setor -->
+						<div class="form-control">
+							<label class="label" for="filtro-setor">
+								<span class="label-text font-medium">Setor</span>
+							</label>
+							<select id="filtro-setor" bind:value={filtroSetor} class="select select-bordered">
+								<option value="">Todos os setores</option>
+								{#each setoresDisponiveis as setor}
+									<option value={setor}>{setor}</option>
+								{/each}
+							</select>
+						</div>
 
-            <!-- Nível -->
-            <div class="form-control">
-              <label class="label" for="filtro-nivel">
-                <span class="label-text font-medium">Nível de Acesso</span>
-              </label>
-              <select
-                id="filtro-nivel"
-                bind:value={filtroNivel}
-                class="select select-bordered"
-              >
-                <option value="">Todos os níveis</option>
-                <option value={0}>Máximo (0)</option>
-                <option value={1}>Alto (1)</option>
-                <option value={2}>Médio (2)</option>
-                <option value={3}>Baixo (3+)</option>
-              </select>
-            </div>
-          </div>
+						<!-- Nível -->
+						<div class="form-control">
+							<label class="label" for="filtro-nivel">
+								<span class="label-text font-medium">Nível de Acesso</span>
+							</label>
+							<select id="filtro-nivel" bind:value={filtroNivel} class="select select-bordered">
+								<option value="">Todos os níveis</option>
+								<option value={0}>Máximo (0)</option>
+								<option value={1}>Alto (1)</option>
+								<option value={2}>Médio (2)</option>
+								<option value={3}>Baixo (3+)</option>
+							</select>
+						</div>
+					</div>
 
-          <div class="mt-4 flex items-center justify-between">
-            <div class="text-sm text-base-content/60">
-              <span class="font-medium text-base-content"
-                >{rolesFiltradas.length}</span
-              >
-              de
-              <span class="font-medium text-base-content">{roles.length}</span>
-              perfil(is)
-              {#if temFiltrosAtivos}
-                <span class="badge badge-primary badge-sm ml-2">Filtrado</span>
-              {/if}
-            </div>
-          </div>
-        </div>
-      </div>
-    {/if}
+					<div class="mt-4 flex items-center justify-between">
+						<div class="text-base-content/60 text-sm">
+							<span class="text-base-content font-medium">{rolesFiltradas.length}</span>
+							de
+							<span class="text-base-content font-medium">{roles.length}</span>
+							perfil(is)
+							{#if temFiltrosAtivos}
+								<span class="badge badge-primary badge-sm ml-2">Filtrado</span>
+							{/if}
+						</div>
+					</div>
+				</div>
+			</div>
+		{/if}
 
-    <!-- Lista de Perfis -->
-    {#if carregando}
-      <div class="flex justify-center items-center py-20">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-      </div>
-    {:else if roles.length === 0}
-      <div class="flex flex-col items-center justify-center py-16 text-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-16 w-16 text-base-content/30"
-          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>
-        <h3 class="text-xl font-semibold mt-4">Nenhum perfil encontrado</h3>
-        <p class="text-base-content/60 mt-2">
-          Não há perfis cadastrados no sistema.
-        </p>
-      </div>
-    {:else if rolesFiltradas.length === 0}
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-          <div
-            class="flex flex-col items-center justify-center py-16 text-center"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-16 w-16 text-base-content/30 mb-4"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              />
-            </svg>
-            <h3 class="text-xl font-semibold mt-4">Nenhum perfil encontrado</h3>
-            <p class="text-base-content/60 mt-2">
-              Nenhum perfil corresponde aos filtros aplicados.
-            </p>
-            {#if temFiltrosAtivos}
-              <button
-                class="btn btn-primary btn-sm mt-4"
-                onclick={limparFiltros}
-              >
-                Limpar Filtros
-              </button>
-            {/if}
-          </div>
-        </div>
-      </div>
-    {:else}
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        {#each rolesFiltradas as role}
-          <div
-            class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 cursor-pointer border border-base-300 {obterCorCardNivel(
-              role.nivel,
-            )} hover:scale-[1.02]"
-            onclick={() => abrirDetalhes(role)}
-          >
-            <div class="card-body">
-              <div class="flex items-start justify-between mb-4">
-                <div class="flex-1">
-                  <h2 class="card-title text-lg mb-1">{role.descricao}</h2>
-                  <div class="badge {obterCorNivel(role.nivel)} badge-sm">
-                    {obterTextoNivel(role.nivel)}
-                  </div>
-                </div>
-                <div class="p-2 bg-base-200 rounded-lg">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-6 w-6 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                    />
-                  </svg>
-                </div>
-              </div>
+		<!-- Lista de Perfis -->
+		{#if carregando}
+			<div class="flex items-center justify-center py-20">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+			</div>
+		{:else if roles.length === 0}
+			<div class="flex flex-col items-center justify-center py-16 text-center">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-base-content/30 h-16 w-16"
+					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>
+				<h3 class="mt-4 text-xl font-semibold">Nenhum perfil encontrado</h3>
+				<p class="text-base-content/60 mt-2">Não há perfis cadastrados no sistema.</p>
+			</div>
+		{:else if rolesFiltradas.length === 0}
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body">
+					<div class="flex flex-col items-center justify-center py-16 text-center">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-base-content/30 mb-4 h-16 w-16"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						<h3 class="mt-4 text-xl font-semibold">Nenhum perfil encontrado</h3>
+						<p class="text-base-content/60 mt-2">
+							Nenhum perfil corresponde aos filtros aplicados.
+						</p>
+						{#if temFiltrosAtivos}
+							<button class="btn btn-primary btn-sm mt-4" onclick={limparFiltros}>
+								Limpar Filtros
+							</button>
+						{/if}
+					</div>
+				</div>
+			</div>
+		{:else}
+			<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+				{#each rolesFiltradas as role}
+					<div
+						class="card bg-base-100 border-base-300 cursor-pointer border shadow-xl transition-all duration-300 hover:shadow-2xl {obterCorCardNivel(
+							role.nivel
+						)} hover:scale-[1.02]"
+						onclick={() => abrirDetalhes(role)}
+					>
+						<div class="card-body">
+							<div class="mb-4 flex items-start justify-between">
+								<div class="flex-1">
+									<h2 class="card-title mb-1 text-lg">{role.descricao}</h2>
+									<div class="badge {obterCorNivel(role.nivel)} badge-sm">
+										{obterTextoNivel(role.nivel)}
+									</div>
+								</div>
+								<div class="bg-base-200 rounded-lg p-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-6 w-6"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+										/>
+									</svg>
+								</div>
+							</div>
 
-              <div class="space-y-3 text-sm">
-                <div class="flex items-center gap-2 p-2 bg-base-200 rounded-lg">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4 text-base-content/40"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
-                    />
-                  </svg>
-                  <span class="font-medium text-base-content/60"
-                    >Nome técnico:</span
-                  >
-                  <code class="text-xs bg-base-100 px-2 py-1 rounded font-mono"
-                    >{role.nome}</code
-                  >
-                </div>
+							<div class="space-y-3 text-sm">
+								<div class="bg-base-200 flex items-center gap-2 rounded-lg p-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-base-content/40 h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+										/>
+									</svg>
+									<span class="text-base-content/60 font-medium">Nome técnico:</span>
+									<code class="bg-base-100 rounded px-2 py-1 font-mono text-xs">{role.nome}</code>
+								</div>
 
-                {#if role.setor}
-                  <div
-                    class="flex items-center gap-2 p-2 bg-base-200 rounded-lg"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-4 w-4 text-base-content/40"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
-                      />
-                    </svg>
-                    <span class="font-medium text-base-content/60">Setor:</span>
-                    <span class="font-medium">{role.setor}</span>
-                  </div>
-                {/if}
+								{#if role.setor}
+									<div class="bg-base-200 flex items-center gap-2 rounded-lg p-2">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="text-base-content/40 h-4 w-4"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+											/>
+										</svg>
+										<span class="text-base-content/60 font-medium">Setor:</span>
+										<span class="font-medium">{role.setor}</span>
+									</div>
+								{/if}
 
-                <div class="flex items-center gap-2 p-2 bg-base-200 rounded-lg">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4 text-base-content/40"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-                    />
-                  </svg>
-                  <span class="font-medium text-base-content/60">Nível:</span>
-                  <span class="font-bold text-lg">{role.nivel}</span>
-                </div>
-              </div>
+								<div class="bg-base-200 flex items-center gap-2 rounded-lg p-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-base-content/40 h-4 w-4"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+										/>
+									</svg>
+									<span class="text-base-content/60 font-medium">Nível:</span>
+									<span class="text-lg font-bold">{role.nivel}</span>
+								</div>
+							</div>
 
-              <div
-                class="card-actions justify-end mt-4 pt-4 border-t border-base-300"
-              >
-                <button
-                  class="btn btn-sm btn-primary btn-outline"
-                  onclick={(e) => {
-                    e.stopPropagation();
-                    abrirDetalhes(role);
-                  }}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-4 w-4 mr-1"
-                    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>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    {/if}
-  </div>
+							<div class="card-actions border-base-300 mt-4 justify-end border-t pt-4">
+								<button
+									class="btn btn-sm btn-primary btn-outline"
+									onclick={(e) => {
+										e.stopPropagation();
+										abrirDetalhes(role);
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="mr-1 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>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
 
-  <!-- Modal Detalhes -->
-  {#if modalDetalhesAberto && roleSelecionada}
-    <div class="modal modal-open">
-      <div class="modal-box max-w-3xl">
-        <div class="flex items-center justify-between mb-6">
-          <h3 class="font-bold text-2xl">Detalhes do Perfil</h3>
-          <button
-            type="button"
-            class="btn btn-sm btn-circle btn-ghost"
-            onclick={fecharDetalhes}
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
+	<!-- Modal Detalhes -->
+	{#if modalDetalhesAberto && roleSelecionada}
+		<div class="modal modal-open">
+			<div class="modal-box max-w-3xl">
+				<div class="mb-6 flex items-center justify-between">
+					<h3 class="text-2xl font-bold">Detalhes do Perfil</h3>
+					<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={fecharDetalhes}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</div>
 
-        <div class="space-y-6">
-          <!-- Header do Perfil -->
-          <div
-            class="card bg-linear-to-r from-primary/10 to-secondary/10 border border-primary/20"
-          >
-            <div class="card-body">
-              <div class="flex items-start justify-between">
-                <div class="flex-1">
-                  <h2 class="text-2xl font-bold mb-2">
-                    {roleSelecionada.descricao}
-                  </h2>
-                  <div class="flex items-center gap-3">
-                    <div
-                      class="badge {obterCorNivel(
-                        roleSelecionada.nivel,
-                      )} badge-lg"
-                    >
-                      {obterTextoNivel(roleSelecionada.nivel)}
-                    </div>
-                    <span class="text-sm text-base-content/60"
-                      >Nível {roleSelecionada.nivel}</span
-                    >
-                  </div>
-                </div>
-                <div class="p-3 bg-base-100 rounded-lg shadow-sm">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-8 w-8 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
+				<div class="space-y-6">
+					<!-- Header do Perfil -->
+					<div class="card from-primary/10 to-secondary/10 border-primary/20 border bg-linear-to-r">
+						<div class="card-body">
+							<div class="flex items-start justify-between">
+								<div class="flex-1">
+									<h2 class="mb-2 text-2xl font-bold">
+										{roleSelecionada.descricao}
+									</h2>
+									<div class="flex items-center gap-3">
+										<div class="badge {obterCorNivel(roleSelecionada.nivel)} badge-lg">
+											{obterTextoNivel(roleSelecionada.nivel)}
+										</div>
+										<span class="text-base-content/60 text-sm">Nível {roleSelecionada.nivel}</span>
+									</div>
+								</div>
+								<div class="bg-base-100 rounded-lg p-3 shadow-sm">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-8 w-8"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+										/>
+									</svg>
+								</div>
+							</div>
+						</div>
+					</div>
 
-          <!-- Informações Principais -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="card bg-base-100 border border-base-300">
-              <div class="card-body">
-                <label class="label">
-                  <span
-                    class="label-text font-semibold flex items-center gap-2"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5 text-primary"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
-                      />
-                    </svg>
-                    Nome Técnico
-                  </span>
-                </label>
-                <code
-                  class="block bg-base-200 px-4 py-3 rounded-lg text-sm font-mono mt-2"
-                  >{roleSelecionada.nome}</code
-                >
-              </div>
-            </div>
+					<!-- Informações Principais -->
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div class="card bg-base-100 border-base-300 border">
+							<div class="card-body">
+								<label class="label">
+									<span class="label-text flex items-center gap-2 font-semibold">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="text-primary h-5 w-5"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+											/>
+										</svg>
+										Nome Técnico
+									</span>
+								</label>
+								<code class="bg-base-200 mt-2 block rounded-lg px-4 py-3 font-mono text-sm"
+									>{roleSelecionada.nome}</code
+								>
+							</div>
+						</div>
 
-            <div class="card bg-base-100 border border-base-300">
-              <div class="card-body">
-                <label class="label">
-                  <span
-                    class="label-text font-semibold flex items-center gap-2"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="h-5 w-5 text-primary"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
-                      />
-                    </svg>
-                    Setor
-                  </span>
-                </label>
-                <p class="text-lg font-medium mt-2">
-                  {#if roleSelecionada.setor}
-                    {roleSelecionada.setor}
-                  {:else}
-                    <span class="text-base-content/40 italic"
-                      >Não especificado</span
-                    >
-                  {/if}
-                </p>
-              </div>
-            </div>
-          </div>
+						<div class="card bg-base-100 border-base-300 border">
+							<div class="card-body">
+								<label class="label">
+									<span class="label-text flex items-center gap-2 font-semibold">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="text-primary h-5 w-5"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+											/>
+										</svg>
+										Setor
+									</span>
+								</label>
+								<p class="mt-2 text-lg font-medium">
+									{#if roleSelecionada.setor}
+										{roleSelecionada.setor}
+									{:else}
+										<span class="text-base-content/40 italic">Não especificado</span>
+									{/if}
+								</p>
+							</div>
+						</div>
+					</div>
 
-          <!-- Nível de Acesso -->
-          <div class="card bg-base-100 border border-base-300">
-            <div class="card-body">
-              <label class="label">
-                <span class="label-text font-semibold flex items-center gap-2">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-                    />
-                  </svg>
-                  Nível de Acesso
-                </span>
-              </label>
-              <div class="mt-4">
-                <div class="flex items-center gap-4 mb-3">
-                  <span class="text-4xl font-bold">{roleSelecionada.nivel}</span
-                  >
-                  <div
-                    class="badge {obterCorNivel(
-                      roleSelecionada.nivel,
-                    )} badge-lg"
-                  >
-                    {obterTextoNivel(roleSelecionada.nivel)}
-                  </div>
-                </div>
-                <div class="alert alert-info">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    class="stroke-current shrink-0 w-6 h-6"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    ></path>
-                  </svg>
-                  <span class="text-sm">
-                    {roleSelecionada.nivel === 0 &&
-                      "Acesso total irrestrito ao sistema. Pode realizar todas as operações sem restrições."}
-                    {roleSelecionada.nivel === 1 &&
-                      "Acesso alto com algumas restrições. Pode realizar a maioria das operações administrativas."}
-                    {roleSelecionada.nivel === 2 &&
-                      "Acesso médio com permissões configuráveis. Pode realizar operações padrão do sistema."}
-                    {roleSelecionada.nivel >= 3 &&
-                      "Acesso limitado com permissões específicas. Operações restritas conforme configuração."}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+					<!-- Nível de Acesso -->
+					<div class="card bg-base-100 border-base-300 border">
+						<div class="card-body">
+							<label class="label">
+								<span class="label-text flex items-center gap-2 font-semibold">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-5 w-5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+										/>
+									</svg>
+									Nível de Acesso
+								</span>
+							</label>
+							<div class="mt-4">
+								<div class="mb-3 flex items-center gap-4">
+									<span class="text-4xl font-bold">{roleSelecionada.nivel}</span>
+									<div class="badge {obterCorNivel(roleSelecionada.nivel)} badge-lg">
+										{obterTextoNivel(roleSelecionada.nivel)}
+									</div>
+								</div>
+								<div class="alert alert-info">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										fill="none"
+										viewBox="0 0 24 24"
+										class="h-6 w-6 shrink-0 stroke-current"
+									>
+										<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 class="text-sm">
+										{roleSelecionada.nivel === 0 &&
+											'Acesso total irrestrito ao sistema. Pode realizar todas as operações sem restrições.'}
+										{roleSelecionada.nivel === 1 &&
+											'Acesso alto com algumas restrições. Pode realizar a maioria das operações administrativas.'}
+										{roleSelecionada.nivel === 2 &&
+											'Acesso médio com permissões configuráveis. Pode realizar operações padrão do sistema.'}
+										{roleSelecionada.nivel >= 3 &&
+											'Acesso limitado com permissões específicas. Operações restritas conforme configuração.'}
+									</span>
+								</div>
+							</div>
+						</div>
+					</div>
 
-          <!-- Data de Criação -->
-          <div class="card bg-base-100 border border-base-300">
-            <div class="card-body">
-              <label class="label">
-                <span class="label-text font-semibold flex items-center gap-2">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5 text-primary"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="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>
-                  Data de Criação
-                </span>
-              </label>
-              <p class="text-lg font-medium mt-2">
-                {formatarData(roleSelecionada._creationTime)}
-              </p>
-            </div>
-          </div>
+					<!-- Data de Criação -->
+					<div class="card bg-base-100 border-base-300 border">
+						<div class="card-body">
+							<label class="label">
+								<span class="label-text flex items-center gap-2 font-semibold">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="text-primary h-5 w-5"
+										fill="none"
+										viewBox="0 0 24 24"
+										stroke="currentColor"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+										/>
+									</svg>
+									Data de Criação
+								</span>
+							</label>
+							<p class="mt-2 text-lg font-medium">
+								{formatarData(roleSelecionada._creationTime)}
+							</p>
+						</div>
+					</div>
 
-          <!-- Informação sobre Permissões -->
-          <div class="alert alert-info">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              class="stroke-current shrink-0 w-6 h-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              ></path>
-            </svg>
-            <div>
-              <h4 class="font-semibold mb-1">Configuração de Permissões</h4>
-              <p class="text-sm">
-                Para configurar permissões específicas deste perfil, acesse o <a
-                  href="/ti/painel-permissoes"
-                  class="link link-primary font-semibold"
-                  >Painel de Permissões</a
-                >.
-              </p>
-            </div>
-          </div>
-        </div>
+					<!-- Informação sobre Permissões -->
+					<div class="alert alert-info">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="h-6 w-6 shrink-0 stroke-current"
+						>
+							<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>
+							<h4 class="mb-1 font-semibold">Configuração de Permissões</h4>
+							<p class="text-sm">
+								Para configurar permissões específicas deste perfil, acesse o <a
+									href="/ti/painel-permissoes"
+									class="link link-primary font-semibold">Painel de Permissões</a
+								>.
+							</p>
+						</div>
+					</div>
+				</div>
 
-        <div class="modal-action mt-6">
-          <button type="button" class="btn btn-ghost" onclick={fecharDetalhes}>
-            Fechar
-          </button>
-          <a href="/ti/painel-permissoes" class="btn btn-primary">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5 mr-2"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
-              />
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
-            </svg>
-            Configurar Permissões
-          </a>
-        </div>
-      </div>
-      <div class="modal-backdrop" onclick={fecharDetalhes}></div>
-    </div>
-  {/if}
+				<div class="modal-action mt-6">
+					<button type="button" class="btn" onclick={fecharDetalhes}> Fechar </button>
+					<a href="/ti/painel-permissoes" class="btn btn-primary">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="mr-2 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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+						</svg>
+						Configurar Permissões
+					</a>
+				</div>
+			</div>
+			<div class="modal-backdrop" onclick={fecharDetalhes}></div>
+		</div>
+	{/if}
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte b/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
index 8aaa195..5ec6985 100644
--- a/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
@@ -1,107 +1,100 @@
 <script lang="ts">
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import { goto } from "$app/navigation";
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import { goto } from '$app/navigation';
 </script>
 
-<ProtectedRoute allowedRoles={["admin", "ti"]} maxLevel={1}>
-  <!-- Breadcrumb -->
-  <div class="text-sm breadcrumbs mb-4">
-    <ul>
-      <li>
-        <a href="/" class="text-primary hover:text-primary-focus">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-4 w-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
-            />
-          </svg>
-          Dashboard
-        </a>
-      </li>
-      <li>
-        <a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
-      </li>
-      <li class="font-semibold">Personalizar Permissões</li>
-    </ul>
-  </div>
+<ProtectedRoute allowedRoles={['admin', 'ti']} maxLevel={1}>
+	<!-- Breadcrumb -->
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li>
+				<a href="/" class="text-primary hover:text-primary-focus">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+						/>
+					</svg>
+					Dashboard
+				</a>
+			</li>
+			<li>
+				<a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
+			</li>
+			<li class="font-semibold">Personalizar Permissões</li>
+		</ul>
+	</div>
 
-  <!-- Header -->
-  <div class="mb-6">
-    <div class="flex items-center gap-3 mb-2">
-      <div class="p-3 bg-info/10 rounded-xl">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8 text-info"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-          />
-        </svg>
-      </div>
-      <div class="flex-1">
-        <h1 class="text-3xl font-bold text-base-content">
-          Funcionalidade descontinuada
-        </h1>
-        <p class="text-base-content/60 mt-1">
-          Agora as permissões são configuradas por ação em cada perfil no painel
-          de permissões.
-        </p>
-      </div>
-      <button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
-        <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>
-  <div class="alert alert-info shadow-lg">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      class="stroke-current shrink-0 h-6 w-6"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-      />
-    </svg>
-    <span>
-      A personalização por usuário foi substituída por <strong
-        >permissões por ação</strong
-      >
-      por perfil. Utilize o
-      <a href="/ti/painel-permissoes" class="link link-primary"
-        >Painel de Permissões</a
-      > para configurar.
-    </span>
-  </div>
+	<!-- Header -->
+	<div class="mb-6">
+		<div class="mb-2 flex items-center gap-3">
+			<div class="bg-info/10 rounded-xl p-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-info h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+					/>
+				</svg>
+			</div>
+			<div class="flex-1">
+				<h1 class="text-base-content text-3xl font-bold">Funcionalidade descontinuada</h1>
+				<p class="text-base-content/60 mt-1">
+					Agora as permissões são configuradas por ação em cada perfil no painel de permissões.
+				</p>
+			</div>
+			<button class="btn gap-2" onclick={() => goto('/ti')}>
+				<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>
+	<div class="alert alert-info shadow-lg">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			class="h-6 w-6 shrink-0 stroke-current"
+			fill="none"
+			viewBox="0 0 24 24"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+		<span>
+			A personalização por usuário foi substituída por <strong>permissões por ação</strong>
+			por perfil. Utilize o
+			<a href="/ti/painel-permissoes" class="link link-primary">Painel de Permissões</a> para configurar.
+		</span>
+	</div>
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte b/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
index 43dfb7f..b63e18f 100644
--- a/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
@@ -1,694 +1,836 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import StatsCard from "$lib/components/ti/StatsCard.svelte";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-  import { FileText, Clock, CheckCircle2, XCircle } from "lucide-svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import StatsCard from '$lib/components/ti/StatsCard.svelte';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+	import { FileText, Clock, CheckCircle2, XCircle } from 'lucide-svelte';
 
-  type StatusSolicitacao = "pendente" | "aprovado" | "rejeitado";
+	type StatusSolicitacao = 'pendente' | 'aprovado' | 'rejeitado';
 
-  type SolicitacaoAcesso = {
-    _id: Id<"solicitacoesAcesso">;
-    _creationTime: number;
-    nome: string;
-    matricula: string;
-    email: string;
-    telefone: string;
-    status: StatusSolicitacao;
-    dataSolicitacao: number;
-    dataResposta: number | null;
-    observacoes: string | null;
-  };
+	type SolicitacaoAcesso = {
+		_id: Id<'solicitacoesAcesso'>;
+		_creationTime: number;
+		nome: string;
+		matricula: string;
+		email: string;
+		telefone: string;
+		status: StatusSolicitacao;
+		dataSolicitacao: number;
+		dataResposta: number | null;
+		observacoes: string | null;
+	};
 
-  type FiltroStatus = "todos" | "pendente" | "aprovado" | "rejeitado";
+	type FiltroStatus = 'todos' | 'pendente' | 'aprovado' | 'rejeitado';
 
-  type Mensagem = {
-    tipo: "success" | "error" | "info";
-    texto: string;
-  };
+	type Mensagem = {
+		tipo: 'success' | 'error' | 'info';
+		texto: string;
+	};
 
-  const client = useConvexClient();
-  
-  // Queries
-  const solicitacoesQuery = useQuery(api.solicitacoesAcesso.getAll, {});
-  
-  // Estados
-  let filtroStatus = $state<FiltroStatus>("todos");
-  let busca = $state("");
-  let solicitacaoSelecionada = $state<SolicitacaoAcesso | null>(null);
-  let modalDetalhesAberto = $state(false);
-  let modalAprovarAberto = $state(false);
-  let modalRejeitarAberto = $state(false);
-  let observacoes = $state("");
-  let mensagem = $state<Mensagem | null>(null);
-  let processando = $state(false);
+	const client = useConvexClient();
 
-  // Extrair dados das solicitações
-  const solicitacoes = $derived.by(() => {
-    if (solicitacoesQuery === undefined || solicitacoesQuery === null) {
-      return [];
-    }
-    
-    if ("data" in solicitacoesQuery && solicitacoesQuery.data !== undefined) {
-      return Array.isArray(solicitacoesQuery.data) ? solicitacoesQuery.data : [];
-    }
-    
-    if (Array.isArray(solicitacoesQuery)) {
-      return solicitacoesQuery;
-    }
-    
-    return [];
-  });
+	// Queries
+	const solicitacoesQuery = useQuery(api.solicitacoesAcesso.getAll, {});
 
-  const carregando = $derived.by(() => {
-    return solicitacoesQuery === undefined || solicitacoesQuery === null;
-  });
+	// Estados
+	let filtroStatus = $state<FiltroStatus>('todos');
+	let busca = $state('');
+	let solicitacaoSelecionada = $state<SolicitacaoAcesso | null>(null);
+	let modalDetalhesAberto = $state(false);
+	let modalAprovarAberto = $state(false);
+	let modalRejeitarAberto = $state(false);
+	let observacoes = $state('');
+	let mensagem = $state<Mensagem | null>(null);
+	let processando = $state(false);
 
-  // Estatísticas
-  const stats = $derived.by(() => {
-    if (carregando) return null;
-    
-    const total = solicitacoes.length;
-    const pendentes = solicitacoes.filter(s => s.status === "pendente").length;
-    const aprovadas = solicitacoes.filter(s => s.status === "aprovado").length;
-    const rejeitadas = solicitacoes.filter(s => s.status === "rejeitado").length;
-    
-    return {
-      total,
-      pendentes,
-      aprovadas,
-      rejeitadas
-    };
-  });
+	// Extrair dados das solicitações
+	const solicitacoes = $derived.by(() => {
+		if (solicitacoesQuery === undefined || solicitacoesQuery === null) {
+			return [];
+		}
 
-  // Filtrar e buscar solicitações
-  const solicitacoesFiltradas = $derived.by(() => {
-    let resultado = solicitacoes;
+		if ('data' in solicitacoesQuery && solicitacoesQuery.data !== undefined) {
+			return Array.isArray(solicitacoesQuery.data) ? solicitacoesQuery.data : [];
+		}
 
-    // Filtrar por status
-    if (filtroStatus !== "todos") {
-      resultado = resultado.filter(s => s.status === filtroStatus);
-    }
+		if (Array.isArray(solicitacoesQuery)) {
+			return solicitacoesQuery;
+		}
 
-    // Buscar por nome, matrícula ou email
-    if (busca.trim()) {
-      const termo = busca.toLowerCase().trim();
-      resultado = resultado.filter(s =>
-        s.nome.toLowerCase().includes(termo) ||
-        s.matricula.toLowerCase().includes(termo) ||
-        s.email.toLowerCase().includes(termo)
-      );
-    }
+		return [];
+	});
 
-    // Ordenar por data (mais recente primeiro)
-    return resultado.sort((a, b) => b.dataSolicitacao - a.dataSolicitacao);
-  });
+	const carregando = $derived.by(() => {
+		return solicitacoesQuery === undefined || solicitacoesQuery === null;
+	});
 
-  // Funções auxiliares
-  function formatarData(timestamp: number): string {
-    return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
-  }
+	// Estatísticas
+	const stats = $derived.by(() => {
+		if (carregando) return null;
 
-  function formatarDataRelativa(timestamp: number): string {
-    const agora = Date.now();
-    const diff = agora - timestamp;
-    const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
-    const horas = Math.floor(diff / (1000 * 60 * 60));
-    const minutos = Math.floor(diff / (1000 * 60));
+		const total = solicitacoes.length;
+		const pendentes = solicitacoes.filter((s) => s.status === 'pendente').length;
+		const aprovadas = solicitacoes.filter((s) => s.status === 'aprovado').length;
+		const rejeitadas = solicitacoes.filter((s) => s.status === 'rejeitado').length;
 
-    if (dias > 0) return `${dias} dia${dias > 1 ? 's' : ''} atrás`;
-    if (horas > 0) return `${horas} hora${horas > 1 ? 's' : ''} atrás`;
-    if (minutos > 0) return `${minutos} minuto${minutos > 1 ? 's' : ''} atrás`;
-    return "Agora";
-  }
+		return {
+			total,
+			pendentes,
+			aprovadas,
+			rejeitadas
+		};
+	});
 
-  function getStatusBadge(status: StatusSolicitacao): string {
-    switch (status) {
-      case "pendente":
-        return "badge-warning";
-      case "aprovado":
-        return "badge-success";
-      case "rejeitado":
-        return "badge-error";
-      default:
-        return "badge-neutral";
-    }
-  }
+	// Filtrar e buscar solicitações
+	const solicitacoesFiltradas = $derived.by(() => {
+		let resultado = solicitacoes;
 
-  function getStatusTexto(status: StatusSolicitacao): string {
-    switch (status) {
-      case "pendente":
-        return "Pendente";
-      case "aprovado":
-        return "Aprovado";
-      case "rejeitado":
-        return "Rejeitado";
-      default:
-        return status;
-    }
-  }
+		// Filtrar por status
+		if (filtroStatus !== 'todos') {
+			resultado = resultado.filter((s) => s.status === filtroStatus);
+		}
 
-  // Funções de modal
-  function abrirDetalhes(solicitacao: SolicitacaoAcesso) {
-    solicitacaoSelecionada = solicitacao;
-    modalDetalhesAberto = true;
-  }
+		// Buscar por nome, matrícula ou email
+		if (busca.trim()) {
+			const termo = busca.toLowerCase().trim();
+			resultado = resultado.filter(
+				(s) =>
+					s.nome.toLowerCase().includes(termo) ||
+					s.matricula.toLowerCase().includes(termo) ||
+					s.email.toLowerCase().includes(termo)
+			);
+		}
 
-  function fecharDetalhes() {
-    modalDetalhesAberto = false;
-    solicitacaoSelecionada = null;
-  }
+		// Ordenar por data (mais recente primeiro)
+		return resultado.sort((a, b) => b.dataSolicitacao - a.dataSolicitacao);
+	});
 
-  function abrirAprovar(solicitacao: SolicitacaoAcesso) {
-    solicitacaoSelecionada = solicitacao;
-    observacoes = "";
-    modalAprovarAberto = true;
-  }
+	// Funções auxiliares
+	function formatarData(timestamp: number): string {
+		return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
+	}
 
-  function fecharAprovar() {
-    modalAprovarAberto = false;
-    solicitacaoSelecionada = null;
-    observacoes = "";
-  }
+	function formatarDataRelativa(timestamp: number): string {
+		const agora = Date.now();
+		const diff = agora - timestamp;
+		const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
+		const horas = Math.floor(diff / (1000 * 60 * 60));
+		const minutos = Math.floor(diff / (1000 * 60));
 
-  function abrirRejeitar(solicitacao: SolicitacaoAcesso) {
-    solicitacaoSelecionada = solicitacao;
-    observacoes = "";
-    modalRejeitarAberto = true;
-  }
+		if (dias > 0) return `${dias} dia${dias > 1 ? 's' : ''} atrás`;
+		if (horas > 0) return `${horas} hora${horas > 1 ? 's' : ''} atrás`;
+		if (minutos > 0) return `${minutos} minuto${minutos > 1 ? 's' : ''} atrás`;
+		return 'Agora';
+	}
 
-  function fecharRejeitar() {
-    modalRejeitarAberto = false;
-    solicitacaoSelecionada = null;
-    observacoes = "";
-  }
+	function getStatusBadge(status: StatusSolicitacao): string {
+		switch (status) {
+			case 'pendente':
+				return 'badge-warning';
+			case 'aprovado':
+				return 'badge-success';
+			case 'rejeitado':
+				return 'badge-error';
+			default:
+				return 'badge-neutral';
+		}
+	}
 
-  // Funções de ação
-  async function aprovarSolicitacao() {
-    if (!solicitacaoSelecionada) return;
+	function getStatusTexto(status: StatusSolicitacao): string {
+		switch (status) {
+			case 'pendente':
+				return 'Pendente';
+			case 'aprovado':
+				return 'Aprovado';
+			case 'rejeitado':
+				return 'Rejeitado';
+			default:
+				return status;
+		}
+	}
 
-    processando = true;
-    mensagem = null;
+	// Funções de modal
+	function abrirDetalhes(solicitacao: SolicitacaoAcesso) {
+		solicitacaoSelecionada = solicitacao;
+		modalDetalhesAberto = true;
+	}
 
-    try {
-      await client.mutation(api.solicitacoesAcesso.aprovar, {
-        solicitacaoId: solicitacaoSelecionada._id,
-        observacoes: observacoes.trim() || undefined,
-      });
+	function fecharDetalhes() {
+		modalDetalhesAberto = false;
+		solicitacaoSelecionada = null;
+	}
 
-      mensagem = {
-        tipo: "success",
-        texto: "Solicitação aprovada com sucesso!",
-      };
+	function abrirAprovar(solicitacao: SolicitacaoAcesso) {
+		solicitacaoSelecionada = solicitacao;
+		observacoes = '';
+		modalAprovarAberto = true;
+	}
 
-      fecharAprovar();
-      
-      // Limpar mensagem após 3 segundos
-      setTimeout(() => {
-        mensagem = null;
-      }, 3000);
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Erro ao aprovar solicitação";
-      mensagem = {
-        tipo: "error",
-        texto: errorMessage,
-      };
-    } finally {
-      processando = false;
-    }
-  }
+	function fecharAprovar() {
+		modalAprovarAberto = false;
+		solicitacaoSelecionada = null;
+		observacoes = '';
+	}
 
-  async function rejeitarSolicitacao() {
-    if (!solicitacaoSelecionada) return;
+	function abrirRejeitar(solicitacao: SolicitacaoAcesso) {
+		solicitacaoSelecionada = solicitacao;
+		observacoes = '';
+		modalRejeitarAberto = true;
+	}
 
-    processando = true;
-    mensagem = null;
+	function fecharRejeitar() {
+		modalRejeitarAberto = false;
+		solicitacaoSelecionada = null;
+		observacoes = '';
+	}
 
-    try {
-      await client.mutation(api.solicitacoesAcesso.rejeitar, {
-        solicitacaoId: solicitacaoSelecionada._id,
-        observacoes: observacoes.trim() || undefined,
-      });
+	// Funções de ação
+	async function aprovarSolicitacao() {
+		if (!solicitacaoSelecionada) return;
 
-      mensagem = {
-        tipo: "success",
-        texto: "Solicitação rejeitada com sucesso!",
-      };
+		processando = true;
+		mensagem = null;
 
-      fecharRejeitar();
-      
-      // Limpar mensagem após 3 segundos
-      setTimeout(() => {
-        mensagem = null;
-      }, 3000);
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : "Erro ao rejeitar solicitação";
-      mensagem = {
-        tipo: "error",
-        texto: errorMessage,
-      };
-    } finally {
-      processando = false;
-    }
-  }
+		try {
+			await client.mutation(api.solicitacoesAcesso.aprovar, {
+				solicitacaoId: solicitacaoSelecionada._id,
+				observacoes: observacoes.trim() || undefined
+			});
+
+			mensagem = {
+				tipo: 'success',
+				texto: 'Solicitação aprovada com sucesso!'
+			};
+
+			fecharAprovar();
+
+			// Limpar mensagem após 3 segundos
+			setTimeout(() => {
+				mensagem = null;
+			}, 3000);
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Erro ao aprovar solicitação';
+			mensagem = {
+				tipo: 'error',
+				texto: errorMessage
+			};
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function rejeitarSolicitacao() {
+		if (!solicitacaoSelecionada) return;
+
+		processando = true;
+		mensagem = null;
+
+		try {
+			await client.mutation(api.solicitacoesAcesso.rejeitar, {
+				solicitacaoId: solicitacaoSelecionada._id,
+				observacoes: observacoes.trim() || undefined
+			});
+
+			mensagem = {
+				tipo: 'success',
+				texto: 'Solicitação rejeitada com sucesso!'
+			};
+
+			fecharRejeitar();
+
+			// Limpar mensagem após 3 segundos
+			setTimeout(() => {
+				mensagem = null;
+			}, 3000);
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : 'Erro ao rejeitar solicitação';
+			mensagem = {
+				tipo: 'error',
+				texto: errorMessage
+			};
+		} finally {
+			processando = false;
+		}
+	}
 </script>
 
-<ProtectedRoute allowedRoles={["ti_master", "admin", "ti_usuario"]} maxLevel={3}>
-  <div class="container mx-auto px-4 py-6 max-w-7xl">
-    <!-- Mensagem de Feedback -->
-    {#if mensagem}
-      <div class="alert alert-{mensagem.tipo} shadow-lg mb-6">
-        {#if mensagem.tipo === "success"}
-          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-        {:else if mensagem.tipo === "error"}
-          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-        {/if}
-        <span>{mensagem.texto}</span>
-      </div>
-    {/if}
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
+	<div class="container mx-auto max-w-7xl px-4 py-6">
+		<!-- Mensagem de Feedback -->
+		{#if mensagem}
+			<div class="alert alert-{mensagem.tipo} mb-6 shadow-lg">
+				{#if mensagem.tipo === 'success'}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6 shrink-0 stroke-current"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<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>
+				{:else if mensagem.tipo === 'error'}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6 shrink-0 stroke-current"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				{/if}
+				<span>{mensagem.texto}</span>
+			</div>
+		{/if}
 
-    <!-- Header -->
-    <div class="flex items-center justify-between mb-8">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-primary/10 rounded-xl">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-base-content">Solicitações de Acesso</h1>
-          <p class="text-base-content/60 mt-1">Gerencie e analise solicitações de acesso ao sistema</p>
-        </div>
-      </div>
-    </div>
+		<!-- Header -->
+		<div class="mb-8 flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="bg-primary/10 rounded-xl p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-8 w-8"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-base-content text-3xl font-bold">Solicitações de Acesso</h1>
+					<p class="text-base-content/60 mt-1">
+						Gerencie e analise solicitações de acesso ao sistema
+					</p>
+				</div>
+			</div>
+		</div>
 
-    <!-- Estatísticas -->
-    {#if stats}
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-        <StatsCard 
-          title="Total de Solicitações" 
-          value={stats.total} 
-          Icon={FileText}
-          color="primary"
-        />
-        
-        <StatsCard 
-          title="Pendentes" 
-          value={stats.pendentes} 
-          description="{stats.total > 0 ? ((stats.pendentes / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
-          Icon={Clock}
-          color="warning"
-        />
-        
-        <StatsCard 
-          title="Aprovadas" 
-          value={stats.aprovadas} 
-          description="{stats.total > 0 ? ((stats.aprovadas / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
-          Icon={CheckCircle2}
-          color="success"
-        />
-        
-        <StatsCard 
-          title="Rejeitadas" 
-          value={stats.rejeitadas} 
-          description="{stats.total > 0 ? ((stats.rejeitadas / stats.total) * 100).toFixed(1) + '% do total' : '0% do total'}"
-          Icon={XCircle}
-          color="error"
-        />
-      </div>
-    {:else}
-      <div class="flex justify-center items-center py-20">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-      </div>
-    {/if}
+		<!-- Estatísticas -->
+		{#if stats}
+			<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+				<StatsCard
+					title="Total de Solicitações"
+					value={stats.total}
+					Icon={FileText}
+					color="primary"
+				/>
 
-    <!-- Filtros e Busca -->
-    <div class="card bg-base-100 shadow-xl mb-6">
-      <div class="card-body">
-        <!-- Tabs de Status -->
-        <div class="tabs tabs-boxed mb-4 bg-base-200 p-2">
-          <button 
-            class="tab {filtroStatus === 'todos' ? 'tab-active' : ''}"
-            onclick={() => filtroStatus = "todos"}
-          >
-            Todas
-          </button>
-          <button 
-            class="tab {filtroStatus === 'pendente' ? 'tab-active' : ''}"
-            onclick={() => filtroStatus = "pendente"}
-          >
-            Pendentes
-          </button>
-          <button 
-            class="tab {filtroStatus === 'aprovado' ? 'tab-active' : ''}"
-            onclick={() => filtroStatus = "aprovado"}
-          >
-            Aprovadas
-          </button>
-          <button 
-            class="tab {filtroStatus === 'rejeitado' ? 'tab-active' : ''}"
-            onclick={() => filtroStatus = "rejeitado"}
-          >
-            Rejeitadas
-          </button>
-        </div>
+				<StatsCard
+					title="Pendentes"
+					value={stats.pendentes}
+					description={stats.total > 0
+						? ((stats.pendentes / stats.total) * 100).toFixed(1) + '% do total'
+						: '0% do total'}
+					Icon={Clock}
+					color="warning"
+				/>
 
-        <!-- Campo de Busca -->
-        <div class="form-control">
-          <label class="label">
-            <span class="label-text font-semibold">Buscar por nome, matrícula ou e-mail</span>
-          </label>
-          <div class="relative">
-            <input
-              type="text"
-              placeholder="Digite para buscar..."
-              class="input input-bordered w-full pl-10"
-              bind:value={busca}
-            />
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-base-content/50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-          </div>
-        </div>
-      </div>
-    </div>
+				<StatsCard
+					title="Aprovadas"
+					value={stats.aprovadas}
+					description={stats.total > 0
+						? ((stats.aprovadas / stats.total) * 100).toFixed(1) + '% do total'
+						: '0% do total'}
+					Icon={CheckCircle2}
+					color="success"
+				/>
 
-    <!-- Lista de Solicitações -->
-    {#if carregando}
-      <div class="flex justify-center items-center py-20">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-      </div>
-    {:else if solicitacoesFiltradas.length === 0}
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body text-center py-20">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-base-content/30 mb-4" 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>
-          <h3 class="text-xl font-semibold text-base-content/70 mb-2">Nenhuma solicitação encontrada</h3>
-          <p class="text-base-content/50">
-            {#if busca.trim() || filtroStatus !== "todos"}
-              Tente ajustar os filtros ou a busca.
-            {:else}
-              Ainda não há solicitações de acesso cadastradas.
-            {/if}
-          </p>
-        </div>
-      </div>
-    {:else}
-      <div class="grid grid-cols-1 gap-4">
-        {#each solicitacoesFiltradas as solicitacao}
-          <div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
-            <div class="card-body">
-              <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-                <div class="flex-1">
-                  <div class="flex items-center gap-3 mb-2">
-                    <h3 class="text-xl font-bold text-base-content">{solicitacao.nome}</h3>
-                    <span class="badge {getStatusBadge(solicitacao.status)} badge-lg">
-                      {getStatusTexto(solicitacao.status)}
-                    </span>
-                  </div>
-                  
-                  <div class="grid grid-cols-1 md:grid-cols-3 gap-2 text-sm text-base-content/70">
-                    <div class="flex items-center gap-2">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
-                      </svg>
-                      <span class="font-semibold">Matrícula:</span>
-                      <span>{solicitacao.matricula}</span>
-                    </div>
-                    
-                    <div class="flex items-center gap-2">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                      </svg>
-                      <span class="font-semibold">E-mail:</span>
-                      <span>{solicitacao.email}</span>
-                    </div>
-                    
-                    <div class="flex items-center gap-2">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
-                      </svg>
-                      <span class="font-semibold">Telefone:</span>
-                      <span>{solicitacao.telefone}</span>
-                    </div>
-                  </div>
-                  
-                  <div class="mt-3 text-xs text-base-content/50">
-                    <span class="font-semibold">Solicitado em:</span> {formatarData(solicitacao.dataSolicitacao)} ({formatarDataRelativa(solicitacao.dataSolicitacao)})
-                    {#if solicitacao.dataResposta}
-                      <span class="ml-4 font-semibold">Processado em:</span> {formatarData(solicitacao.dataResposta)}
-                    {/if}
-                  </div>
-                </div>
-                
-                <div class="flex flex-col gap-2">
-                  <button 
-                    class="btn btn-sm btn-outline btn-primary"
-                    onclick={() => abrirDetalhes(solicitacao)}
-                  >
-                    <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 solicitacao.status === "pendente"}
-                    <button 
-                      class="btn btn-sm btn-success"
-                      onclick={() => abrirAprovar(solicitacao)}
-                    >
-                      <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="M5 13l4 4L19 7" />
-                      </svg>
-                      Aprovar
-                    </button>
-                    
-                    <button 
-                      class="btn btn-sm btn-error"
-                      onclick={() => abrirRejeitar(solicitacao)}
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                      </svg>
-                      Rejeitar
-                    </button>
-                  {/if}
-                </div>
-              </div>
-            </div>
-          </div>
-        {/each}
-      </div>
-    {/if}
+				<StatsCard
+					title="Rejeitadas"
+					value={stats.rejeitadas}
+					description={stats.total > 0
+						? ((stats.rejeitadas / stats.total) * 100).toFixed(1) + '% do total'
+						: '0% do total'}
+					Icon={XCircle}
+					color="error"
+				/>
+			</div>
+		{:else}
+			<div class="flex items-center justify-center py-20">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+			</div>
+		{/if}
 
-    <!-- Modal de Detalhes -->
-    {#if modalDetalhesAberto && solicitacaoSelecionada}
-      <dialog class="modal modal-open">
-        <div class="modal-box max-w-2xl">
-          <h3 class="font-bold text-2xl mb-4">Detalhes da Solicitação</h3>
-          
-          <div class="space-y-4">
-            <div class="flex items-center gap-3 mb-4">
-              <span class="badge {getStatusBadge(solicitacaoSelecionada.status)} badge-lg">
-                {getStatusTexto(solicitacaoSelecionada.status)}
-              </span>
-            </div>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">Nome Completo</span>
-                </label>
-                <div class="input input-bordered">{solicitacaoSelecionada.nome}</div>
-              </div>
-              
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">Matrícula</span>
-                </label>
-                <div class="input input-bordered">{solicitacaoSelecionada.matricula}</div>
-              </div>
-              
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">E-mail</span>
-                </label>
-                <div class="input input-bordered">{solicitacaoSelecionada.email}</div>
-              </div>
-              
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">Telefone</span>
-                </label>
-                <div class="input input-bordered">{solicitacaoSelecionada.telefone}</div>
-              </div>
-              
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">Data da Solicitação</span>
-                </label>
-                <div class="input input-bordered">
-                  {formatarData(solicitacaoSelecionada.dataSolicitacao)}
-                </div>
-              </div>
-              
-              {#if solicitacaoSelecionada.dataResposta}
-                <div>
-                  <label class="label">
-                    <span class="label-text font-semibold">Data de Processamento</span>
-                  </label>
-                  <div class="input input-bordered">
-                    {formatarData(solicitacaoSelecionada.dataResposta)}
-                  </div>
-                </div>
-              {/if}
-            </div>
-            
-            {#if solicitacaoSelecionada.observacoes}
-              <div>
-                <label class="label">
-                  <span class="label-text font-semibold">Observações</span>
-                </label>
-                <div class="textarea textarea-bordered min-h-24">
-                  {solicitacaoSelecionada.observacoes}
-                </div>
-              </div>
-            {/if}
-          </div>
-          
-          <div class="modal-action">
-            <button class="btn" onclick={fecharDetalhes}>Fechar</button>
-          </div>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button onclick={fecharDetalhes}>fechar</button>
-        </form>
-      </dialog>
-    {/if}
+		<!-- Filtros e Busca -->
+		<div class="card bg-base-100 mb-6 shadow-xl">
+			<div class="card-body">
+				<!-- Tabs de Status -->
+				<div class="tabs tabs-boxed bg-base-200 mb-4 p-2">
+					<button
+						class="tab {filtroStatus === 'todos' ? 'tab-active' : ''}"
+						onclick={() => (filtroStatus = 'todos')}
+					>
+						Todas
+					</button>
+					<button
+						class="tab {filtroStatus === 'pendente' ? 'tab-active' : ''}"
+						onclick={() => (filtroStatus = 'pendente')}
+					>
+						Pendentes
+					</button>
+					<button
+						class="tab {filtroStatus === 'aprovado' ? 'tab-active' : ''}"
+						onclick={() => (filtroStatus = 'aprovado')}
+					>
+						Aprovadas
+					</button>
+					<button
+						class="tab {filtroStatus === 'rejeitado' ? 'tab-active' : ''}"
+						onclick={() => (filtroStatus = 'rejeitado')}
+					>
+						Rejeitadas
+					</button>
+				</div>
 
-    <!-- Modal de Aprovar -->
-    {#if modalAprovarAberto && solicitacaoSelecionada}
-      <dialog class="modal modal-open">
-        <div class="modal-box">
-          <h3 class="font-bold text-2xl mb-4">Aprovar Solicitação</h3>
-          
-          <div class="mb-4">
-            <p class="text-base-content/70 mb-2">
-              Você está prestes a aprovar a solicitação de acesso de <strong>{solicitacaoSelecionada.nome}</strong>.
-            </p>
-            <p class="text-sm text-base-content/60">
-              Após aprovar, o sistema permitirá que esta pessoa solicite acesso ao sistema.
-            </p>
-          </div>
-          
-          <div class="form-control mb-4">
-            <label class="label">
-              <span class="label-text font-semibold">Observações (opcional)</span>
-            </label>
-            <textarea
-              class="textarea textarea-bordered"
-              placeholder="Adicione observações sobre a aprovação..."
-              bind:value={observacoes}
-              rows="3"
-            ></textarea>
-          </div>
-          
-          <div class="modal-action">
-            <button 
-              class="btn btn-ghost" 
-              onclick={fecharAprovar}
-              disabled={processando}
-            >
-              Cancelar
-            </button>
-            <button 
-              class="btn btn-success" 
-              onclick={aprovarSolicitacao}
-              disabled={processando}
-            >
-              {#if processando}
-                <span class="loading loading-spinner loading-sm"></span>
-                Processando...
-              {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                </svg>
-                Confirmar Aprovação
-              {/if}
-            </button>
-          </div>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button onclick={fecharAprovar}>fechar</button>
-        </form>
-      </dialog>
-    {/if}
+				<!-- Campo de Busca -->
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-semibold">Buscar por nome, matrícula ou e-mail</span>
+					</label>
+					<div class="relative">
+						<input
+							type="text"
+							placeholder="Digite para buscar..."
+							class="input input-bordered w-full pl-10"
+							bind:value={busca}
+						/>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-base-content/50 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+							/>
+						</svg>
+					</div>
+				</div>
+			</div>
+		</div>
 
-    <!-- Modal de Rejeitar -->
-    {#if modalRejeitarAberto && solicitacaoSelecionada}
-      <dialog class="modal modal-open">
-        <div class="modal-box">
-          <h3 class="font-bold text-2xl mb-4">Rejeitar Solicitação</h3>
-          
-          <div class="mb-4">
-            <p class="text-base-content/70 mb-2">
-              Você está prestes a rejeitar a solicitação de acesso de <strong>{solicitacaoSelecionada.nome}</strong>.
-            </p>
-            <p class="text-sm text-base-content/60">
-              Esta ação não pode ser desfeita. Recomendamos adicionar um motivo para a rejeição.
-            </p>
-          </div>
-          
-          <div class="form-control mb-4">
-            <label class="label">
-              <span class="label-text font-semibold">Motivo da Rejeição (recomendado)</span>
-            </label>
-            <textarea
-              class="textarea textarea-bordered"
-              placeholder="Descreva o motivo da rejeição..."
-              bind:value={observacoes}
-              rows="3"
-            ></textarea>
-          </div>
-          
-          <div class="modal-action">
-            <button 
-              class="btn btn-ghost" 
-              onclick={fecharRejeitar}
-              disabled={processando}
-            >
-              Cancelar
-            </button>
-            <button 
-              class="btn btn-error" 
-              onclick={rejeitarSolicitacao}
-              disabled={processando}
-            >
-              {#if processando}
-                <span class="loading loading-spinner loading-sm"></span>
-                Processando...
-              {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-                Confirmar Rejeição
-              {/if}
-            </button>
-          </div>
-        </div>
-        <form method="dialog" class="modal-backdrop">
-          <button onclick={fecharRejeitar}>fechar</button>
-        </form>
-      </dialog>
-    {/if}
-  </div>
+		<!-- Lista de Solicitações -->
+		{#if carregando}
+			<div class="flex items-center justify-center py-20">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+			</div>
+		{:else if solicitacoesFiltradas.length === 0}
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body py-20 text-center">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-base-content/30 mx-auto mb-4 h-16 w-16"
+						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>
+					<h3 class="text-base-content/70 mb-2 text-xl font-semibold">
+						Nenhuma solicitação encontrada
+					</h3>
+					<p class="text-base-content/50">
+						{#if busca.trim() || filtroStatus !== 'todos'}
+							Tente ajustar os filtros ou a busca.
+						{:else}
+							Ainda não há solicitações de acesso cadastradas.
+						{/if}
+					</p>
+				</div>
+			</div>
+		{:else}
+			<div class="grid grid-cols-1 gap-4">
+				{#each solicitacoesFiltradas as solicitacao}
+					<div class="card bg-base-100 shadow-xl transition-shadow hover:shadow-2xl">
+						<div class="card-body">
+							<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+								<div class="flex-1">
+									<div class="mb-2 flex items-center gap-3">
+										<h3 class="text-base-content text-xl font-bold">{solicitacao.nome}</h3>
+										<span class="badge {getStatusBadge(solicitacao.status)} badge-lg">
+											{getStatusTexto(solicitacao.status)}
+										</span>
+									</div>
+
+									<div class="text-base-content/70 grid grid-cols-1 gap-2 text-sm md:grid-cols-3">
+										<div class="flex items-center gap-2">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
+												/>
+											</svg>
+											<span class="font-semibold">Matrícula:</span>
+											<span>{solicitacao.matricula}</span>
+										</div>
+
+										<div class="flex items-center gap-2">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+												/>
+											</svg>
+											<span class="font-semibold">E-mail:</span>
+											<span>{solicitacao.email}</span>
+										</div>
+
+										<div class="flex items-center gap-2">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+												/>
+											</svg>
+											<span class="font-semibold">Telefone:</span>
+											<span>{solicitacao.telefone}</span>
+										</div>
+									</div>
+
+									<div class="text-base-content/50 mt-3 text-xs">
+										<span class="font-semibold">Solicitado em:</span>
+										{formatarData(solicitacao.dataSolicitacao)} ({formatarDataRelativa(
+											solicitacao.dataSolicitacao
+										)})
+										{#if solicitacao.dataResposta}
+											<span class="ml-4 font-semibold">Processado em:</span>
+											{formatarData(solicitacao.dataResposta)}
+										{/if}
+									</div>
+								</div>
+
+								<div class="flex flex-col gap-2">
+									<button
+										class="btn btn-sm btn-outline btn-primary"
+										onclick={() => abrirDetalhes(solicitacao)}
+									>
+										<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 solicitacao.status === 'pendente'}
+										<button
+											class="btn btn-sm btn-success"
+											onclick={() => abrirAprovar(solicitacao)}
+										>
+											<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="M5 13l4 4L19 7"
+												/>
+											</svg>
+											Aprovar
+										</button>
+
+										<button class="btn btn-sm btn-error" onclick={() => abrirRejeitar(solicitacao)}>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M6 18L18 6M6 6l12 12"
+												/>
+											</svg>
+											Rejeitar
+										</button>
+									{/if}
+								</div>
+							</div>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+
+		<!-- Modal de Detalhes -->
+		{#if modalDetalhesAberto && solicitacaoSelecionada}
+			<dialog class="modal modal-open">
+				<div class="modal-box max-w-2xl">
+					<h3 class="mb-4 text-2xl font-bold">Detalhes da Solicitação</h3>
+
+					<div class="space-y-4">
+						<div class="mb-4 flex items-center gap-3">
+							<span class="badge {getStatusBadge(solicitacaoSelecionada.status)} badge-lg">
+								{getStatusTexto(solicitacaoSelecionada.status)}
+							</span>
+						</div>
+
+						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">Nome Completo</span>
+								</label>
+								<div class="input input-bordered">{solicitacaoSelecionada.nome}</div>
+							</div>
+
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">Matrícula</span>
+								</label>
+								<div class="input input-bordered">{solicitacaoSelecionada.matricula}</div>
+							</div>
+
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">E-mail</span>
+								</label>
+								<div class="input input-bordered">{solicitacaoSelecionada.email}</div>
+							</div>
+
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">Telefone</span>
+								</label>
+								<div class="input input-bordered">{solicitacaoSelecionada.telefone}</div>
+							</div>
+
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">Data da Solicitação</span>
+								</label>
+								<div class="input input-bordered">
+									{formatarData(solicitacaoSelecionada.dataSolicitacao)}
+								</div>
+							</div>
+
+							{#if solicitacaoSelecionada.dataResposta}
+								<div>
+									<label class="label">
+										<span class="label-text font-semibold">Data de Processamento</span>
+									</label>
+									<div class="input input-bordered">
+										{formatarData(solicitacaoSelecionada.dataResposta)}
+									</div>
+								</div>
+							{/if}
+						</div>
+
+						{#if solicitacaoSelecionada.observacoes}
+							<div>
+								<label class="label">
+									<span class="label-text font-semibold">Observações</span>
+								</label>
+								<div class="textarea textarea-bordered min-h-24">
+									{solicitacaoSelecionada.observacoes}
+								</div>
+							</div>
+						{/if}
+					</div>
+
+					<div class="modal-action">
+						<button class="btn" onclick={fecharDetalhes}>Fechar</button>
+					</div>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button onclick={fecharDetalhes}>fechar</button>
+				</form>
+			</dialog>
+		{/if}
+
+		<!-- Modal de Aprovar -->
+		{#if modalAprovarAberto && solicitacaoSelecionada}
+			<dialog class="modal modal-open">
+				<div class="modal-box">
+					<h3 class="mb-4 text-2xl font-bold">Aprovar Solicitação</h3>
+
+					<div class="mb-4">
+						<p class="text-base-content/70 mb-2">
+							Você está prestes a aprovar a solicitação de acesso de <strong
+								>{solicitacaoSelecionada.nome}</strong
+							>.
+						</p>
+						<p class="text-base-content/60 text-sm">
+							Após aprovar, o sistema permitirá que esta pessoa solicite acesso ao sistema.
+						</p>
+					</div>
+
+					<div class="form-control mb-4">
+						<label class="label">
+							<span class="label-text font-semibold">Observações (opcional)</span>
+						</label>
+						<textarea
+							class="textarea textarea-bordered"
+							placeholder="Adicione observações sobre a aprovação..."
+							bind:value={observacoes}
+							rows="3"
+						></textarea>
+					</div>
+
+					<div class="modal-action">
+						<button class="btn" onclick={fecharAprovar} disabled={processando}> Cancelar </button>
+						<button class="btn btn-success" onclick={aprovarSolicitacao} disabled={processando}>
+							{#if processando}
+								<span class="loading loading-spinner loading-sm"></span>
+								Processando...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M5 13l4 4L19 7"
+									/>
+								</svg>
+								Confirmar Aprovação
+							{/if}
+						</button>
+					</div>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button onclick={fecharAprovar}>fechar</button>
+				</form>
+			</dialog>
+		{/if}
+
+		<!-- Modal de Rejeitar -->
+		{#if modalRejeitarAberto && solicitacaoSelecionada}
+			<dialog class="modal modal-open">
+				<div class="modal-box">
+					<h3 class="mb-4 text-2xl font-bold">Rejeitar Solicitação</h3>
+
+					<div class="mb-4">
+						<p class="text-base-content/70 mb-2">
+							Você está prestes a rejeitar a solicitação de acesso de <strong
+								>{solicitacaoSelecionada.nome}</strong
+							>.
+						</p>
+						<p class="text-base-content/60 text-sm">
+							Esta ação não pode ser desfeita. Recomendamos adicionar um motivo para a rejeição.
+						</p>
+					</div>
+
+					<div class="form-control mb-4">
+						<label class="label">
+							<span class="label-text font-semibold">Motivo da Rejeição (recomendado)</span>
+						</label>
+						<textarea
+							class="textarea textarea-bordered"
+							placeholder="Descreva o motivo da rejeição..."
+							bind:value={observacoes}
+							rows="3"
+						></textarea>
+					</div>
+
+					<div class="modal-action">
+						<button class="btn" onclick={fecharRejeitar} disabled={processando}> Cancelar </button>
+						<button class="btn btn-error" onclick={rejeitarSolicitacao} disabled={processando}>
+							{#if processando}
+								<span class="loading loading-spinner loading-sm"></span>
+								Processando...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+								Confirmar Rejeição
+							{/if}
+						</button>
+					</div>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button onclick={fecharRejeitar}>fechar</button>
+				</form>
+			</dialog>
+		{/if}
+	</div>
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/times/+page.svelte b/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
index 17ae303..668f23b 100644
--- a/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
@@ -318,7 +318,7 @@
 					</div>
 				</div>
 				<div class="flex gap-2">
-					<button class="btn btn-ghost gap-2" onclick={() => goto(resolve('/ti'))}>
+					<button class="btn gap-2" onclick={() => goto(resolve('/ti'))}>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							class="h-5 w-5"
@@ -424,9 +424,7 @@
 					</div>
 
 					<div class="card-actions mt-6 justify-end">
-						<button class="btn btn-ghost" onclick={cancelarEdicao} disabled={processando}>
-							Cancelar
-						</button>
+						<button class="btn" onclick={cancelarEdicao} disabled={processando}> Cancelar </button>
 						<button class="btn btn-primary" onclick={salvarTime} disabled={processando}>
 							{processando ? 'Salvando...' : 'Salvar'}
 						</button>
@@ -457,7 +455,7 @@
 									<h2 class="card-title text-lg">{time.nome}</h2>
 								</div>
 								<div class="dropdown dropdown-end">
-									<button type="button" class="btn btn-ghost btn-sm" aria-label="Menu do time">
+									<button type="button" class="btn btn-sm" aria-label="Menu do time">
 										<svg
 											xmlns="http://www.w3.org/2000/svg"
 											class="h-5 w-5"
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
index c2974d8..f93c768 100644
--- a/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
@@ -1,1403 +1,1310 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
-  import UserStatusBadge from "$lib/components/ti/UserStatusBadge.svelte";
-  import { format } from "date-fns";
-  import { ptBR } from "date-fns/locale";
-
-  type AvisoUsuario = {
-    tipo: "erro" | "aviso" | "info";
-    mensagem: string;
-  };
-
-  type RoleUsuario = {
-    _id: Id<"roles">;
-    nome: string;
-    nivel: number;
-    descricao: string;
-    setor?: string;
-    erro?: boolean;
-  };
-
-  type Usuario = {
-    _id: Id<"usuarios">;
-    matricula: string;
-    nome: string;
-    email: string;
-    ativo: boolean;
-    bloqueado?: boolean;
-    motivoBloqueio?: string;
-    primeiroAcesso: boolean;
-    ultimoAcesso?: number;
-    criadoEm: number;
-    role: RoleUsuario;
-    funcionario?: {
-      _id: Id<"funcionarios">;
-      nome: string;
-      matricula?: string;
-      descricaoCargo?: string;
-      simboloTipo: "cargo_comissionado" | "funcao_gratificada";
-    };
-    avisos?: AvisoUsuario[];
-  };
-
-  type Funcionario = {
-    _id: Id<"funcionarios">;
-    nome: string;
-    matricula?: string;
-    cpf?: string;
-    descricaoCargo?: string;
-  };
-
-  type Mensagem = {
-    tipo: "success" | "error" | "info";
-    texto: string;
-  };
-
-  const client = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
-
-  // Usar useQuery reativo - seguindo padrão usado em ti/times/+page.svelte
-  const usuariosQuery = useQuery(api.usuarios.listar, {});
-
-  // Extrair dados e determinar estado de carregamento
-  const usuarios = $derived.by(() => {
-    // Se usuariosQuery é undefined ou null, está carregando
-    if (usuariosQuery === undefined || usuariosQuery === null) {
-      return [];
-    }
-
-    // Se usuariosQuery é um objeto vazio {}, está carregando
-    if (
-      typeof usuariosQuery === "object" &&
-      Object.keys(usuariosQuery).length === 0
-    ) {
-      return [];
-    }
-
-    // Se tem propriedade data, usar os dados
-    if ("data" in usuariosQuery && usuariosQuery.data !== undefined) {
-      return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
-    }
-
-    // Se usuariosQuery é diretamente um array (caso não tenha .data)
-    if (Array.isArray(usuariosQuery)) {
-      return usuariosQuery;
-    }
-
-    // Caso padrão: ainda carregando ou sem dados
-    return [];
-  });
-
-  const carregandoUsuarios = $derived.by(() => {
-    // Se é undefined/null, está carregando
-    if (usuariosQuery === undefined || usuariosQuery === null) {
-      return true;
-    }
-
-    // Se é um objeto vazio {}, está carregando
-    if (
-      typeof usuariosQuery === "object" &&
-      Object.keys(usuariosQuery).length === 0
-    ) {
-      return true;
-    }
-
-    // Se não tem propriedade data, está carregando
-    if (!("data" in usuariosQuery)) {
-      return true;
-    }
-
-    // Se data é undefined, está carregando
-    if (usuariosQuery.data === undefined) {
-      return true;
-    }
-
-    // Caso contrário, dados estão prontos
-    return false;
-  });
-
-  let erroUsuarios = $state<string | null>(null);
-
-  // Monitorar erros e estado da query
-  $effect(() => {
-    try {
-      // Detectar se há erro na query
-      if (usuariosQuery && typeof usuariosQuery === "object") {
-        // Verificar se há propriedade de erro
-        if ("error" in usuariosQuery) {
-          const error = (usuariosQuery as { error?: unknown }).error;
-          if (error !== undefined && error !== null) {
-            erroUsuarios =
-              error instanceof Error ? error.message : String(error);
-            console.error("❌ [ERROR] Erro na query de usuários:", error);
-          } else {
-            // Se error existe mas é undefined/null, limpar erro
-            erroUsuarios = null;
-          }
-        } else if ("data" in usuariosQuery) {
-          const queryData = usuariosQuery as { data?: Usuario[] };
-          if (queryData.data !== undefined) {
-            // Se tem dados, limpar erro
-            erroUsuarios = null;
-          }
-        }
-      }
-
-      // Debug para identificar problemas (apenas em desenvolvimento)
-      if (
-        typeof window !== "undefined" &&
-        window.location.hostname === "localhost"
-      ) {
-        console.log("🔍 [DEBUG] usuariosQuery:", usuariosQuery);
-        console.log("🔍 [DEBUG] typeof usuariosQuery:", typeof usuariosQuery);
-        if (usuariosQuery && typeof usuariosQuery === "object") {
-          console.log(
-            "🔍 [DEBUG] Object.keys(usuariosQuery):",
-            Object.keys(usuariosQuery),
-          );
-          console.log(
-            "🔍 [DEBUG] usuariosQuery?.data:",
-            (usuariosQuery as { data?: unknown }).data,
-          );
-          console.log(
-            "🔍 [DEBUG] 'data' in usuariosQuery:",
-            "data" in usuariosQuery,
-          );
-          console.log(
-            "🔍 [DEBUG] 'error' in usuariosQuery:",
-            "error" in usuariosQuery,
-          );
-        }
-        console.log("🔍 [DEBUG] usuarios (extraídos):", usuarios);
-        console.log("🔍 [DEBUG] quantidade:", usuarios.length);
-        console.log("🔍 [DEBUG] carregandoUsuarios:", carregandoUsuarios);
-        console.log("🔍 [DEBUG] erroUsuarios:", erroUsuarios);
-      }
-    } catch (error) {
-      // Tratamento de erro no próprio effect
-      console.error("❌ [ERROR] Erro ao processar estado da query:", error);
-      if (error instanceof Error) {
-        erroUsuarios = `Erro inesperado: ${error.message}`;
-      }
-    }
-  });
-
-  let funcionarios = $state<Funcionario[]>([]);
-  let carregandoFuncionarios = $state(false);
-
-  let usuarioSelecionado = $state<Usuario | null>(null);
-  let modalAssociarAberto = $state(false);
-  let funcionarioSelecionadoId = $state<Id<"funcionarios"> | "">("");
-  let buscaFuncionario = $state("");
-
-  let modalExcluirAberto = $state(false);
-  let processando = $state(false);
-  let mensagem = $state<Mensagem | null>(null);
-
-  // Filtros
-  let filtroNome = $state("");
-  let filtroMatricula = $state("");
-  let filtroSetor = $state("");
-  let filtroStatus = $state<"todos" | "ativo" | "inativo" | "bloqueado">(
-    "todos",
-  );
-  let filtroDataCriacaoInicio = $state("");
-  let filtroDataCriacaoFim = $state("");
-  let filtroUltimoAcessoInicio = $state("");
-  let filtroUltimoAcessoFim = $state("");
-
-  // Função para recarregar usuários (mantida para compatibilidade com mutações)
-  async function carregarUsuarios() {
-    // Como estamos usando useQuery reativo, os dados serão atualizados automaticamente
-    // Esta função pode ser chamada após mutações, mas não precisa fazer nada
-    // O useQuery já atualizará automaticamente
-  }
-
-  async function carregarFuncionarios() {
-    if (carregandoFuncionarios) return;
-    carregandoFuncionarios = true;
-
-    try {
-      const resposta = await client.query(api.funcionarios.getAll, {});
-      // Suportar ambos formatos (array direto ou objeto com .data), dependendo do hook/cliente
-      const lista = Array.isArray(resposta)
-        ? resposta
-        : resposta &&
-            typeof resposta === "object" &&
-            Array.isArray((resposta as { data?: unknown }).data)
-          ? (resposta as { data: unknown[] }).data
-          : [];
-
-      funcionarios = lista as Funcionario[];
-    } catch (error: unknown) {
-      console.error("Erro ao carregar funcionários:", error);
-      funcionarios = [];
-    } finally {
-      carregandoFuncionarios = false;
-    }
-  }
-
-  function mostrarMensagem(tipo: Mensagem["tipo"], texto: string) {
-    mensagem = { tipo, texto };
-    setTimeout(() => {
-      mensagem = null;
-    }, 4000);
-  }
-
-  const funcionariosFiltrados = $derived.by(() => {
-    if (!buscaFuncionario) {
-      return [...funcionarios].sort((a, b) => a.nome.localeCompare(b.nome));
-    }
-
-    const buscaNormalizada = buscaFuncionario.toLowerCase();
-    return funcionarios
-      .filter((f) => {
-        return (
-          f.nome.toLowerCase().includes(buscaNormalizada) ||
-          f.cpf?.toLowerCase().includes(buscaNormalizada) ||
-          f.matricula?.toLowerCase().includes(buscaNormalizada)
-        );
-      })
-      .sort((a, b) => a.nome.localeCompare(b.nome));
-  });
-
-  // Verificar se há usuários com problemas
-  const usuariosComProblemas = $derived.by(() => {
-    return usuarios.filter(
-      (u) => u.role?.erro === true || (u.avisos && u.avisos.length > 0),
-    );
-  });
-
-  // Lógica de filtros reativos
-  const usuariosFiltrados = $derived.by(() => {
-    let resultado = usuarios;
-
-    // Filtro por nome
-    if (filtroNome.trim()) {
-      const buscaNome = filtroNome.toLowerCase();
-      resultado = resultado.filter((u) =>
-        u.nome.toLowerCase().includes(buscaNome),
-      );
-    }
-
-    // Filtro por matrícula
-    if (filtroMatricula.trim()) {
-      const buscaMatricula = filtroMatricula.toLowerCase();
-      resultado = resultado.filter((u) =>
-        u.matricula.toLowerCase().includes(buscaMatricula),
-      );
-    }
-
-    // Filtro por setor
-    if (filtroSetor) {
-      resultado = resultado.filter((u) => u.role.setor === filtroSetor);
-    }
-
-    // Filtro por status
-    if (filtroStatus !== "todos") {
-      if (filtroStatus === "ativo") {
-        resultado = resultado.filter((u) => u.ativo && !u.bloqueado);
-      } else if (filtroStatus === "inativo") {
-        resultado = resultado.filter((u) => !u.ativo);
-      } else if (filtroStatus === "bloqueado") {
-        resultado = resultado.filter((u) => u.bloqueado);
-      }
-    }
-
-    // Filtro por data de criação
-    if (filtroDataCriacaoInicio) {
-      const dataInicio = new Date(filtroDataCriacaoInicio);
-      dataInicio.setHours(0, 0, 0, 0);
-      resultado = resultado.filter((u) => u.criadoEm >= dataInicio.getTime());
-    }
-    if (filtroDataCriacaoFim) {
-      const dataFim = new Date(filtroDataCriacaoFim);
-      dataFim.setHours(23, 59, 59, 999);
-      resultado = resultado.filter((u) => u.criadoEm <= dataFim.getTime());
-    }
-
-    // Filtro por último acesso
-    if (filtroUltimoAcessoInicio) {
-      const dataInicio = new Date(filtroUltimoAcessoInicio);
-      dataInicio.setHours(0, 0, 0, 0);
-      resultado = resultado.filter((u) => {
-        if (!u.ultimoAcesso) return false;
-        return u.ultimoAcesso >= dataInicio.getTime();
-      });
-    }
-    if (filtroUltimoAcessoFim) {
-      const dataFim = new Date(filtroUltimoAcessoFim);
-      dataFim.setHours(23, 59, 59, 999);
-      resultado = resultado.filter((u) => {
-        if (!u.ultimoAcesso) return false;
-        return u.ultimoAcesso <= dataFim.getTime();
-      });
-    }
-
-    return resultado;
-  });
-
-  function formatarData(timestamp: number | undefined): string {
-    if (!timestamp) return "Nunca";
-    try {
-      return format(new Date(timestamp), "dd/MM/yyyy HH:mm", { locale: ptBR });
-    } catch {
-      return "Data inválida";
-    }
-  }
-
-  function limparFiltros() {
-    filtroNome = "";
-    filtroMatricula = "";
-    filtroSetor = "";
-    filtroStatus = "todos";
-    filtroDataCriacaoInicio = "";
-    filtroDataCriacaoFim = "";
-    filtroUltimoAcessoInicio = "";
-    filtroUltimoAcessoFim = "";
-  }
-
-  function obterSetoresDisponiveis(): string[] {
-    const setoresSet = new Set<string>();
-    usuarios.forEach((u) => {
-      if (u.role.setor) {
-        setoresSet.add(u.role.setor);
-      }
-    });
-    return Array.from(setoresSet).sort();
-  }
-
-  async function ativarDesativarUsuario(usuario: Usuario) {
-    const confirmar = window.confirm(
-      `Deseja realmente ${usuario.ativo ? "desativar" : "ativar"} o usuário ${usuario.nome}?`,
-    );
-    if (!confirmar) return;
-
-    processando = true;
-    try {
-      await client.mutation(api.usuarios.alterarStatus, {
-        usuarioId: usuario._id,
-        ativo: !usuario.ativo,
-      });
-
-      mostrarMensagem(
-        "success",
-        `Usuário ${usuario.ativo ? "desativado" : "ativado"} com sucesso!`,
-      );
-      await carregarUsuarios();
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Erro ao alterar status do usuário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
-
-  function abrirModalAssociar(usuario: Usuario) {
-    usuarioSelecionado = usuario;
-    funcionarioSelecionadoId = usuario.funcionario?._id ?? "";
-    buscaFuncionario = "";
-    modalAssociarAberto = true;
-
-    if (funcionarios.length === 0 && !carregandoFuncionarios) {
-      void carregarFuncionarios();
-    }
-  }
-
-  function fecharModalAssociar() {
-    modalAssociarAberto = false;
-    usuarioSelecionado = null;
-    funcionarioSelecionadoId = "";
-    buscaFuncionario = "";
-  }
-
-  async function associarFuncionario() {
-    if (
-      !usuarioSelecionado ||
-      !funcionarioSelecionadoId ||
-      funcionarioSelecionadoId === ""
-    ) {
-      return;
-    }
-
-    processando = true;
-    try {
-      await client.mutation(api.usuarios.associarFuncionario, {
-        usuarioId: usuarioSelecionado._id,
-        funcionarioId: funcionarioSelecionadoId,
-      });
-
-      mostrarMensagem("success", "Funcionário associado com sucesso!");
-      fecharModalAssociar();
-      await carregarUsuarios();
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Não foi possível associar o funcionário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
-
-  async function desassociarFuncionario() {
-    if (!usuarioSelecionado) {
-      return;
-    }
-
-    const confirmar = window.confirm(
-      "Deseja realmente desassociar o funcionário deste usuário?",
-    );
-    if (!confirmar) return;
-
-    processando = true;
-    try {
-      await client.mutation(api.usuarios.desassociarFuncionario, {
-        usuarioId: usuarioSelecionado._id,
-      });
-
-      mostrarMensagem("success", "Funcionário desassociado com sucesso!");
-      fecharModalAssociar();
-      await carregarUsuarios();
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Não foi possível desassociar o funcionário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
-
-  async function bloquearUsuario(usuario: Usuario) {
-    const motivo = window.prompt(
-      "Digite o motivo do bloqueio:",
-      usuario.motivoBloqueio || "",
-    );
-
-    if (!motivo || motivo.trim() === "") {
-      return;
-    }
-
-    if (!currentUser?.data) {
-      mostrarMensagem("error", "Usuário não autenticado");
-      return;
-    }
-
-    processando = true;
-    try {
-      const resultado = await client.mutation(api.usuarios.bloquearUsuario, {
-        usuarioId: usuario._id,
-        motivo: motivo.trim(),
-        bloqueadoPorId: currentUser.data._id as Id<"usuarios">,
-      });
-
-      if (resultado.sucesso) {
-        mostrarMensagem("success", "Usuário bloqueado com sucesso!");
-        await carregarUsuarios();
-      } else {
-        mostrarMensagem("error", resultado.erro);
-      }
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error ? error.message : "Erro ao bloquear usuário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
-
-  async function desbloquearUsuario(usuario: Usuario) {
-    if (!currentUser?.data) {
-      mostrarMensagem("error", "Usuário não autenticado");
-      return;
-    }
-
-    const confirmar = window.confirm(
-      `Deseja realmente desbloquear o usuário ${usuario.nome}?`,
-    );
-    if (!confirmar) return;
-
-    processando = true;
-    try {
-      const resultado = await client.mutation(api.usuarios.desbloquearUsuario, {
-        usuarioId: usuario._id,
-        desbloqueadoPorId: currentUser.data._id as Id<"usuarios">,
-      });
-
-      if (resultado.sucesso) {
-        mostrarMensagem("success", "Usuário desbloqueado com sucesso!");
-        await carregarUsuarios();
-      } else {
-        mostrarMensagem("error", resultado.erro);
-      }
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error ? error.message : "Erro ao desbloquear usuário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
-
-  function abrirModalExcluir(usuario: Usuario) {
-    usuarioSelecionado = usuario;
-    modalExcluirAberto = true;
-  }
-
-  function fecharModalExcluir() {
-    modalExcluirAberto = false;
-    usuarioSelecionado = null;
-  }
-
-  async function excluirUsuario() {
-    if (!usuarioSelecionado) {
-      return;
-    }
-
-    processando = true;
-    try {
-      await client.mutation(api.usuarios.excluir, {
-        usuarioId: usuarioSelecionado._id,
-      });
-
-      mostrarMensagem("success", "Usuário excluído com sucesso!");
-      fecharModalExcluir();
-      await carregarUsuarios();
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error ? error.message : "Erro ao excluir usuário.";
-      mostrarMensagem("error", message);
-    } finally {
-      processando = false;
-    }
-  }
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import UserStatusBadge from '$lib/components/ti/UserStatusBadge.svelte';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+
+	type AvisoUsuario = {
+		tipo: 'erro' | 'aviso' | 'info';
+		mensagem: string;
+	};
+
+	type RoleUsuario = {
+		_id: Id<'roles'>;
+		nome: string;
+		nivel: number;
+		descricao: string;
+		setor?: string;
+		erro?: boolean;
+	};
+
+	type Usuario = {
+		_id: Id<'usuarios'>;
+		matricula: string;
+		nome: string;
+		email: string;
+		ativo: boolean;
+		bloqueado?: boolean;
+		motivoBloqueio?: string;
+		primeiroAcesso: boolean;
+		ultimoAcesso?: number;
+		criadoEm: number;
+		role: RoleUsuario;
+		funcionario?: {
+			_id: Id<'funcionarios'>;
+			nome: string;
+			matricula?: string;
+			descricaoCargo?: string;
+			simboloTipo: 'cargo_comissionado' | 'funcao_gratificada';
+		};
+		avisos?: AvisoUsuario[];
+	};
+
+	type Funcionario = {
+		_id: Id<'funcionarios'>;
+		nome: string;
+		matricula?: string;
+		cpf?: string;
+		descricaoCargo?: string;
+	};
+
+	type Mensagem = {
+		tipo: 'success' | 'error' | 'info';
+		texto: string;
+	};
+
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
+
+	// Usar useQuery reativo - seguindo padrão usado em ti/times/+page.svelte
+	const usuariosQuery = useQuery(api.usuarios.listar, {});
+
+	// Extrair dados e determinar estado de carregamento
+	const usuarios = $derived.by(() => {
+		// Se usuariosQuery é undefined ou null, está carregando
+		if (usuariosQuery === undefined || usuariosQuery === null) {
+			return [];
+		}
+
+		// Se usuariosQuery é um objeto vazio {}, está carregando
+		if (typeof usuariosQuery === 'object' && Object.keys(usuariosQuery).length === 0) {
+			return [];
+		}
+
+		// Se tem propriedade data, usar os dados
+		if ('data' in usuariosQuery && usuariosQuery.data !== undefined) {
+			return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
+		}
+
+		// Se usuariosQuery é diretamente um array (caso não tenha .data)
+		if (Array.isArray(usuariosQuery)) {
+			return usuariosQuery;
+		}
+
+		// Caso padrão: ainda carregando ou sem dados
+		return [];
+	});
+
+	const carregandoUsuarios = $derived.by(() => {
+		// Se é undefined/null, está carregando
+		if (usuariosQuery === undefined || usuariosQuery === null) {
+			return true;
+		}
+
+		// Se é um objeto vazio {}, está carregando
+		if (typeof usuariosQuery === 'object' && Object.keys(usuariosQuery).length === 0) {
+			return true;
+		}
+
+		// Se não tem propriedade data, está carregando
+		if (!('data' in usuariosQuery)) {
+			return true;
+		}
+
+		// Se data é undefined, está carregando
+		if (usuariosQuery.data === undefined) {
+			return true;
+		}
+
+		// Caso contrário, dados estão prontos
+		return false;
+	});
+
+	let erroUsuarios = $state<string | null>(null);
+
+	// Monitorar erros e estado da query
+	$effect(() => {
+		try {
+			// Detectar se há erro na query
+			if (usuariosQuery && typeof usuariosQuery === 'object') {
+				// Verificar se há propriedade de erro
+				if ('error' in usuariosQuery) {
+					const error = (usuariosQuery as { error?: unknown }).error;
+					if (error !== undefined && error !== null) {
+						erroUsuarios = error instanceof Error ? error.message : String(error);
+						console.error('❌ [ERROR] Erro na query de usuários:', error);
+					} else {
+						// Se error existe mas é undefined/null, limpar erro
+						erroUsuarios = null;
+					}
+				} else if ('data' in usuariosQuery) {
+					const queryData = usuariosQuery as { data?: Usuario[] };
+					if (queryData.data !== undefined) {
+						// Se tem dados, limpar erro
+						erroUsuarios = null;
+					}
+				}
+			}
+
+			// Debug para identificar problemas (apenas em desenvolvimento)
+			if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
+				console.log('🔍 [DEBUG] usuariosQuery:', usuariosQuery);
+				console.log('🔍 [DEBUG] typeof usuariosQuery:', typeof usuariosQuery);
+				if (usuariosQuery && typeof usuariosQuery === 'object') {
+					console.log('🔍 [DEBUG] Object.keys(usuariosQuery):', Object.keys(usuariosQuery));
+					console.log(
+						'🔍 [DEBUG] usuariosQuery?.data:',
+						(usuariosQuery as { data?: unknown }).data
+					);
+					console.log("🔍 [DEBUG] 'data' in usuariosQuery:", 'data' in usuariosQuery);
+					console.log("🔍 [DEBUG] 'error' in usuariosQuery:", 'error' in usuariosQuery);
+				}
+				console.log('🔍 [DEBUG] usuarios (extraídos):', usuarios);
+				console.log('🔍 [DEBUG] quantidade:', usuarios.length);
+				console.log('🔍 [DEBUG] carregandoUsuarios:', carregandoUsuarios);
+				console.log('🔍 [DEBUG] erroUsuarios:', erroUsuarios);
+			}
+		} catch (error) {
+			// Tratamento de erro no próprio effect
+			console.error('❌ [ERROR] Erro ao processar estado da query:', error);
+			if (error instanceof Error) {
+				erroUsuarios = `Erro inesperado: ${error.message}`;
+			}
+		}
+	});
+
+	let funcionarios = $state<Funcionario[]>([]);
+	let carregandoFuncionarios = $state(false);
+
+	let usuarioSelecionado = $state<Usuario | null>(null);
+	let modalAssociarAberto = $state(false);
+	let funcionarioSelecionadoId = $state<Id<'funcionarios'> | ''>('');
+	let buscaFuncionario = $state('');
+
+	let modalExcluirAberto = $state(false);
+	let processando = $state(false);
+	let mensagem = $state<Mensagem | null>(null);
+
+	// Filtros
+	let filtroNome = $state('');
+	let filtroMatricula = $state('');
+	let filtroSetor = $state('');
+	let filtroStatus = $state<'todos' | 'ativo' | 'inativo' | 'bloqueado'>('todos');
+	let filtroDataCriacaoInicio = $state('');
+	let filtroDataCriacaoFim = $state('');
+	let filtroUltimoAcessoInicio = $state('');
+	let filtroUltimoAcessoFim = $state('');
+
+	// Função para recarregar usuários (mantida para compatibilidade com mutações)
+	async function carregarUsuarios() {
+		// Como estamos usando useQuery reativo, os dados serão atualizados automaticamente
+		// Esta função pode ser chamada após mutações, mas não precisa fazer nada
+		// O useQuery já atualizará automaticamente
+	}
+
+	async function carregarFuncionarios() {
+		if (carregandoFuncionarios) return;
+		carregandoFuncionarios = true;
+
+		try {
+			const resposta = await client.query(api.funcionarios.getAll, {});
+			// Suportar ambos formatos (array direto ou objeto com .data), dependendo do hook/cliente
+			const lista = Array.isArray(resposta)
+				? resposta
+				: resposta &&
+					  typeof resposta === 'object' &&
+					  Array.isArray((resposta as { data?: unknown }).data)
+					? (resposta as { data: unknown[] }).data
+					: [];
+
+			funcionarios = lista as Funcionario[];
+		} catch (error: unknown) {
+			console.error('Erro ao carregar funcionários:', error);
+			funcionarios = [];
+		} finally {
+			carregandoFuncionarios = false;
+		}
+	}
+
+	function mostrarMensagem(tipo: Mensagem['tipo'], texto: string) {
+		mensagem = { tipo, texto };
+		setTimeout(() => {
+			mensagem = null;
+		}, 4000);
+	}
+
+	const funcionariosFiltrados = $derived.by(() => {
+		if (!buscaFuncionario) {
+			return [...funcionarios].sort((a, b) => a.nome.localeCompare(b.nome));
+		}
+
+		const buscaNormalizada = buscaFuncionario.toLowerCase();
+		return funcionarios
+			.filter((f) => {
+				return (
+					f.nome.toLowerCase().includes(buscaNormalizada) ||
+					f.cpf?.toLowerCase().includes(buscaNormalizada) ||
+					f.matricula?.toLowerCase().includes(buscaNormalizada)
+				);
+			})
+			.sort((a, b) => a.nome.localeCompare(b.nome));
+	});
+
+	// Verificar se há usuários com problemas
+	const usuariosComProblemas = $derived.by(() => {
+		return usuarios.filter((u) => u.role?.erro === true || (u.avisos && u.avisos.length > 0));
+	});
+
+	// Lógica de filtros reativos
+	const usuariosFiltrados = $derived.by(() => {
+		let resultado = usuarios;
+
+		// Filtro por nome
+		if (filtroNome.trim()) {
+			const buscaNome = filtroNome.toLowerCase();
+			resultado = resultado.filter((u) => u.nome.toLowerCase().includes(buscaNome));
+		}
+
+		// Filtro por matrícula
+		if (filtroMatricula.trim()) {
+			const buscaMatricula = filtroMatricula.toLowerCase();
+			resultado = resultado.filter((u) => u.matricula.toLowerCase().includes(buscaMatricula));
+		}
+
+		// Filtro por setor
+		if (filtroSetor) {
+			resultado = resultado.filter((u) => u.role.setor === filtroSetor);
+		}
+
+		// Filtro por status
+		if (filtroStatus !== 'todos') {
+			if (filtroStatus === 'ativo') {
+				resultado = resultado.filter((u) => u.ativo && !u.bloqueado);
+			} else if (filtroStatus === 'inativo') {
+				resultado = resultado.filter((u) => !u.ativo);
+			} else if (filtroStatus === 'bloqueado') {
+				resultado = resultado.filter((u) => u.bloqueado);
+			}
+		}
+
+		// Filtro por data de criação
+		if (filtroDataCriacaoInicio) {
+			const dataInicio = new Date(filtroDataCriacaoInicio);
+			dataInicio.setHours(0, 0, 0, 0);
+			resultado = resultado.filter((u) => u.criadoEm >= dataInicio.getTime());
+		}
+		if (filtroDataCriacaoFim) {
+			const dataFim = new Date(filtroDataCriacaoFim);
+			dataFim.setHours(23, 59, 59, 999);
+			resultado = resultado.filter((u) => u.criadoEm <= dataFim.getTime());
+		}
+
+		// Filtro por último acesso
+		if (filtroUltimoAcessoInicio) {
+			const dataInicio = new Date(filtroUltimoAcessoInicio);
+			dataInicio.setHours(0, 0, 0, 0);
+			resultado = resultado.filter((u) => {
+				if (!u.ultimoAcesso) return false;
+				return u.ultimoAcesso >= dataInicio.getTime();
+			});
+		}
+		if (filtroUltimoAcessoFim) {
+			const dataFim = new Date(filtroUltimoAcessoFim);
+			dataFim.setHours(23, 59, 59, 999);
+			resultado = resultado.filter((u) => {
+				if (!u.ultimoAcesso) return false;
+				return u.ultimoAcesso <= dataFim.getTime();
+			});
+		}
+
+		return resultado;
+	});
+
+	function formatarData(timestamp: number | undefined): string {
+		if (!timestamp) return 'Nunca';
+		try {
+			return format(new Date(timestamp), 'dd/MM/yyyy HH:mm', { locale: ptBR });
+		} catch {
+			return 'Data inválida';
+		}
+	}
+
+	function limparFiltros() {
+		filtroNome = '';
+		filtroMatricula = '';
+		filtroSetor = '';
+		filtroStatus = 'todos';
+		filtroDataCriacaoInicio = '';
+		filtroDataCriacaoFim = '';
+		filtroUltimoAcessoInicio = '';
+		filtroUltimoAcessoFim = '';
+	}
+
+	function obterSetoresDisponiveis(): string[] {
+		const setoresSet = new Set<string>();
+		usuarios.forEach((u) => {
+			if (u.role.setor) {
+				setoresSet.add(u.role.setor);
+			}
+		});
+		return Array.from(setoresSet).sort();
+	}
+
+	async function ativarDesativarUsuario(usuario: Usuario) {
+		const confirmar = window.confirm(
+			`Deseja realmente ${usuario.ativo ? 'desativar' : 'ativar'} o usuário ${usuario.nome}?`
+		);
+		if (!confirmar) return;
+
+		processando = true;
+		try {
+			await client.mutation(api.usuarios.alterarStatus, {
+				usuarioId: usuario._id,
+				ativo: !usuario.ativo
+			});
+
+			mostrarMensagem(
+				'success',
+				`Usuário ${usuario.ativo ? 'desativado' : 'ativado'} com sucesso!`
+			);
+			await carregarUsuarios();
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : 'Erro ao alterar status do usuário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
+
+	function abrirModalAssociar(usuario: Usuario) {
+		usuarioSelecionado = usuario;
+		funcionarioSelecionadoId = usuario.funcionario?._id ?? '';
+		buscaFuncionario = '';
+		modalAssociarAberto = true;
+
+		if (funcionarios.length === 0 && !carregandoFuncionarios) {
+			void carregarFuncionarios();
+		}
+	}
+
+	function fecharModalAssociar() {
+		modalAssociarAberto = false;
+		usuarioSelecionado = null;
+		funcionarioSelecionadoId = '';
+		buscaFuncionario = '';
+	}
+
+	async function associarFuncionario() {
+		if (!usuarioSelecionado || !funcionarioSelecionadoId || funcionarioSelecionadoId === '') {
+			return;
+		}
+
+		processando = true;
+		try {
+			await client.mutation(api.usuarios.associarFuncionario, {
+				usuarioId: usuarioSelecionado._id,
+				funcionarioId: funcionarioSelecionadoId
+			});
+
+			mostrarMensagem('success', 'Funcionário associado com sucesso!');
+			fecharModalAssociar();
+			await carregarUsuarios();
+		} catch (error: unknown) {
+			const message =
+				error instanceof Error ? error.message : 'Não foi possível associar o funcionário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function desassociarFuncionario() {
+		if (!usuarioSelecionado) {
+			return;
+		}
+
+		const confirmar = window.confirm('Deseja realmente desassociar o funcionário deste usuário?');
+		if (!confirmar) return;
+
+		processando = true;
+		try {
+			await client.mutation(api.usuarios.desassociarFuncionario, {
+				usuarioId: usuarioSelecionado._id
+			});
+
+			mostrarMensagem('success', 'Funcionário desassociado com sucesso!');
+			fecharModalAssociar();
+			await carregarUsuarios();
+		} catch (error: unknown) {
+			const message =
+				error instanceof Error ? error.message : 'Não foi possível desassociar o funcionário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function bloquearUsuario(usuario: Usuario) {
+		const motivo = window.prompt('Digite o motivo do bloqueio:', usuario.motivoBloqueio || '');
+
+		if (!motivo || motivo.trim() === '') {
+			return;
+		}
+
+		if (!currentUser?.data) {
+			mostrarMensagem('error', 'Usuário não autenticado');
+			return;
+		}
+
+		processando = true;
+		try {
+			const resultado = await client.mutation(api.usuarios.bloquearUsuario, {
+				usuarioId: usuario._id,
+				motivo: motivo.trim(),
+				bloqueadoPorId: currentUser.data._id as Id<'usuarios'>
+			});
+
+			if (resultado.sucesso) {
+				mostrarMensagem('success', 'Usuário bloqueado com sucesso!');
+				await carregarUsuarios();
+			} else {
+				mostrarMensagem('error', resultado.erro);
+			}
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : 'Erro ao bloquear usuário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
+
+	async function desbloquearUsuario(usuario: Usuario) {
+		if (!currentUser?.data) {
+			mostrarMensagem('error', 'Usuário não autenticado');
+			return;
+		}
+
+		const confirmar = window.confirm(`Deseja realmente desbloquear o usuário ${usuario.nome}?`);
+		if (!confirmar) return;
+
+		processando = true;
+		try {
+			const resultado = await client.mutation(api.usuarios.desbloquearUsuario, {
+				usuarioId: usuario._id,
+				desbloqueadoPorId: currentUser.data._id as Id<'usuarios'>
+			});
+
+			if (resultado.sucesso) {
+				mostrarMensagem('success', 'Usuário desbloqueado com sucesso!');
+				await carregarUsuarios();
+			} else {
+				mostrarMensagem('error', resultado.erro);
+			}
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : 'Erro ao desbloquear usuário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
+
+	function abrirModalExcluir(usuario: Usuario) {
+		usuarioSelecionado = usuario;
+		modalExcluirAberto = true;
+	}
+
+	function fecharModalExcluir() {
+		modalExcluirAberto = false;
+		usuarioSelecionado = null;
+	}
+
+	async function excluirUsuario() {
+		if (!usuarioSelecionado) {
+			return;
+		}
+
+		processando = true;
+		try {
+			await client.mutation(api.usuarios.excluir, {
+				usuarioId: usuarioSelecionado._id
+			});
+
+			mostrarMensagem('success', 'Usuário excluído com sucesso!');
+			fecharModalExcluir();
+			await carregarUsuarios();
+		} catch (error: unknown) {
+			const message = error instanceof Error ? error.message : 'Erro ao excluir usuário.';
+			mostrarMensagem('error', message);
+		} finally {
+			processando = false;
+		}
+	}
 </script>
 
-<ProtectedRoute
-  allowedRoles={["ti_master", "admin", "ti_usuario"]}
-  maxLevel={3}
->
-  <div class="container mx-auto px-4 py-6 max-w-7xl">
-    <!-- Header -->
-    <div class="flex items-center justify-between mb-6">
-      <div class="flex items-center gap-4">
-        <div class="p-3 bg-primary/10 rounded-xl">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-8 w-8 text-primary"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-            />
-          </svg>
-        </div>
-        <div>
-          <h1 class="text-3xl font-bold text-base-content">
-            Gestão de Usuários
-          </h1>
-          <p class="text-base-content/60 mt-1">
-            Administre os usuários do sistema
-          </p>
-        </div>
-      </div>
-      <div class="flex gap-3">
-        <a href="/ti/usuarios/criar" class="btn btn-primary">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 4v16m8-8H4"
-            />
-          </svg>
-          Criar Usuário
-        </a>
-      </div>
-    </div>
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
+	<div class="container mx-auto max-w-7xl px-4 py-6">
+		<!-- Header -->
+		<div class="mb-6 flex items-center justify-between">
+			<div class="flex items-center gap-4">
+				<div class="bg-primary/10 rounded-xl p-3">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="text-primary h-8 w-8"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+						/>
+					</svg>
+				</div>
+				<div>
+					<h1 class="text-base-content text-3xl font-bold">Gestão de Usuários</h1>
+					<p class="text-base-content/60 mt-1">Administre os usuários do sistema</p>
+				</div>
+			</div>
+			<div class="flex gap-3">
+				<a href="/ti/usuarios/criar" class="btn btn-primary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 4v16m8-8H4"
+						/>
+					</svg>
+					Criar Usuário
+				</a>
+			</div>
+		</div>
 
-    <!-- Alerta de Usuários com Problemas -->
-    {#if !carregandoUsuarios && usuariosComProblemas.length > 0}
-      <div class="alert alert-warning shadow-lg mb-6">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          />
-        </svg>
-        <div>
-          <h3 class="font-bold">Atenção: Usuários com Problemas Detectados</h3>
-          <div class="text-sm mt-2">
-            <p>
-              {usuariosComProblemas.length} usuário(s) possui(em) problemas que requerem
-              atenção:
-            </p>
-            <ul class="list-disc list-inside mt-2 space-y-1">
-              {#each usuariosComProblemas.slice(0, 3) as usuario}
-                <li>
-                  <strong>{usuario.nome}</strong> ({usuario.matricula})
-                  {#if usuario.avisos && usuario.avisos.length > 0}
-                    - {usuario.avisos[0].mensagem}
-                  {/if}
-                </li>
-              {/each}
-              {#if usuariosComProblemas.length > 3}
-                <li class="text-base-content/60">
-                  ... e mais {usuariosComProblemas.length - 3} usuário(s)
-                </li>
-              {/if}
-            </ul>
-            <p class="mt-2 font-semibold">
-              Por favor, corrija os perfis desses usuários para garantir acesso
-              adequado ao sistema.
-            </p>
-          </div>
-        </div>
-      </div>
-    {/if}
+		<!-- Alerta de Usuários com Problemas -->
+		{#if !carregandoUsuarios && usuariosComProblemas.length > 0}
+			<div class="alert alert-warning mb-6 shadow-lg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+					/>
+				</svg>
+				<div>
+					<h3 class="font-bold">Atenção: Usuários com Problemas Detectados</h3>
+					<div class="mt-2 text-sm">
+						<p>
+							{usuariosComProblemas.length} usuário(s) possui(em) problemas que requerem atenção:
+						</p>
+						<ul class="mt-2 list-inside list-disc space-y-1">
+							{#each usuariosComProblemas.slice(0, 3) as usuario}
+								<li>
+									<strong>{usuario.nome}</strong> ({usuario.matricula})
+									{#if usuario.avisos && usuario.avisos.length > 0}
+										- {usuario.avisos[0].mensagem}
+									{/if}
+								</li>
+							{/each}
+							{#if usuariosComProblemas.length > 3}
+								<li class="text-base-content/60">
+									... e mais {usuariosComProblemas.length - 3} usuário(s)
+								</li>
+							{/if}
+						</ul>
+						<p class="mt-2 font-semibold">
+							Por favor, corrija os perfis desses usuários para garantir acesso adequado ao sistema.
+						</p>
+					</div>
+				</div>
+			</div>
+		{/if}
 
-    <!-- Mensagens -->
-    {#if mensagem}
-      <div
-        class="alert shadow-lg"
-        class:alert-success={mensagem.tipo === "success"}
-        class:alert-error={mensagem.tipo === "error"}
-        class:alert-info={mensagem.tipo === "info"}
-      >
-        {#if mensagem.tipo === "success"}
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-        {:else if mensagem.tipo === "error"}
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-        {:else}
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-        {/if}
-        <span class="font-semibold">{mensagem.texto}</span>
-      </div>
-    {/if}
+		<!-- Mensagens -->
+		{#if mensagem}
+			<div
+				class="alert shadow-lg"
+				class:alert-success={mensagem.tipo === 'success'}
+				class:alert-error={mensagem.tipo === 'error'}
+				class:alert-info={mensagem.tipo === 'info'}
+			>
+				{#if mensagem.tipo === 'success'}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6 shrink-0 stroke-current"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<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>
+				{:else if mensagem.tipo === 'error'}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6 shrink-0 stroke-current"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				{:else}
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6 shrink-0 stroke-current"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				{/if}
+				<span class="font-semibold">{mensagem.texto}</span>
+			</div>
+		{/if}
 
-    <!-- Filtros -->
-    {#if !carregandoUsuarios && usuarios.length > 0}
-      <div class="card bg-base-100 shadow-xl mb-6">
-        <div class="card-body">
-          <div class="flex items-center justify-between mb-4">
-            <h2 class="card-title">Filtros de Busca</h2>
-            <button
-              type="button"
-              class="btn btn-sm btn-outline"
-              onclick={limparFiltros}
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-4 w-4"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-              Limpar Filtros
-            </button>
-          </div>
+		<!-- Filtros -->
+		{#if !carregandoUsuarios && usuarios.length > 0}
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<div class="mb-4 flex items-center justify-between">
+						<h2 class="card-title">Filtros de Busca</h2>
+						<button type="button" class="btn btn-sm btn-outline" onclick={limparFiltros}>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-4 w-4"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+							Limpar Filtros
+						</button>
+					</div>
 
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            <!-- Nome -->
-            <div class="form-control">
-              <label class="label" for="filtro-nome">
-                <span class="label-text font-medium">Nome</span>
-              </label>
-              <input
-                id="filtro-nome"
-                type="text"
-                bind:value={filtroNome}
-                placeholder="Buscar por nome..."
-                class="input input-bordered input-sm"
-              />
-            </div>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+						<!-- Nome -->
+						<div class="form-control">
+							<label class="label" for="filtro-nome">
+								<span class="label-text font-medium">Nome</span>
+							</label>
+							<input
+								id="filtro-nome"
+								type="text"
+								bind:value={filtroNome}
+								placeholder="Buscar por nome..."
+								class="input input-bordered input-sm"
+							/>
+						</div>
 
-            <!-- Matrícula -->
-            <div class="form-control">
-              <label class="label" for="filtro-matricula">
-                <span class="label-text font-medium">Matrícula</span>
-              </label>
-              <input
-                id="filtro-matricula"
-                type="text"
-                bind:value={filtroMatricula}
-                placeholder="Buscar por matrícula..."
-                class="input input-bordered input-sm"
-              />
-            </div>
+						<!-- Matrícula -->
+						<div class="form-control">
+							<label class="label" for="filtro-matricula">
+								<span class="label-text font-medium">Matrícula</span>
+							</label>
+							<input
+								id="filtro-matricula"
+								type="text"
+								bind:value={filtroMatricula}
+								placeholder="Buscar por matrícula..."
+								class="input input-bordered input-sm"
+							/>
+						</div>
 
-            <!-- Setor -->
-            <div class="form-control">
-              <label class="label" for="filtro-setor">
-                <span class="label-text font-medium">Setor</span>
-              </label>
-              <select
-                id="filtro-setor"
-                bind:value={filtroSetor}
-                class="select select-bordered select-sm"
-              >
-                <option value="">Todos os setores</option>
-                {#each obterSetoresDisponiveis() as setor}
-                  <option value={setor}>{setor}</option>
-                {/each}
-              </select>
-            </div>
+						<!-- Setor -->
+						<div class="form-control">
+							<label class="label" for="filtro-setor">
+								<span class="label-text font-medium">Setor</span>
+							</label>
+							<select
+								id="filtro-setor"
+								bind:value={filtroSetor}
+								class="select select-bordered select-sm"
+							>
+								<option value="">Todos os setores</option>
+								{#each obterSetoresDisponiveis() as setor}
+									<option value={setor}>{setor}</option>
+								{/each}
+							</select>
+						</div>
 
-            <!-- Status -->
-            <div class="form-control">
-              <label class="label" for="filtro-status">
-                <span class="label-text font-medium">Status</span>
-              </label>
-              <select
-                id="filtro-status"
-                bind:value={filtroStatus}
-                class="select select-bordered select-sm"
-              >
-                <option value="todos">Todos</option>
-                <option value="ativo">Ativo</option>
-                <option value="inativo">Inativo</option>
-                <option value="bloqueado">Bloqueado</option>
-              </select>
-            </div>
+						<!-- Status -->
+						<div class="form-control">
+							<label class="label" for="filtro-status">
+								<span class="label-text font-medium">Status</span>
+							</label>
+							<select
+								id="filtro-status"
+								bind:value={filtroStatus}
+								class="select select-bordered select-sm"
+							>
+								<option value="todos">Todos</option>
+								<option value="ativo">Ativo</option>
+								<option value="inativo">Inativo</option>
+								<option value="bloqueado">Bloqueado</option>
+							</select>
+						</div>
 
-            <!-- Data de Criação Início -->
-            <div class="form-control">
-              <label class="label" for="filtro-data-criacao-inicio">
-                <span class="label-text font-medium"
-                  >Data de Criação (Início)</span
-                >
-              </label>
-              <input
-                id="filtro-data-criacao-inicio"
-                type="date"
-                bind:value={filtroDataCriacaoInicio}
-                class="input input-bordered input-sm"
-              />
-            </div>
+						<!-- Data de Criação Início -->
+						<div class="form-control">
+							<label class="label" for="filtro-data-criacao-inicio">
+								<span class="label-text font-medium">Data de Criação (Início)</span>
+							</label>
+							<input
+								id="filtro-data-criacao-inicio"
+								type="date"
+								bind:value={filtroDataCriacaoInicio}
+								class="input input-bordered input-sm"
+							/>
+						</div>
 
-            <!-- Data de Criação Fim -->
-            <div class="form-control">
-              <label class="label" for="filtro-data-criacao-fim">
-                <span class="label-text font-medium">Data de Criação (Fim)</span
-                >
-              </label>
-              <input
-                id="filtro-data-criacao-fim"
-                type="date"
-                bind:value={filtroDataCriacaoFim}
-                class="input input-bordered input-sm"
-              />
-            </div>
+						<!-- Data de Criação Fim -->
+						<div class="form-control">
+							<label class="label" for="filtro-data-criacao-fim">
+								<span class="label-text font-medium">Data de Criação (Fim)</span>
+							</label>
+							<input
+								id="filtro-data-criacao-fim"
+								type="date"
+								bind:value={filtroDataCriacaoFim}
+								class="input input-bordered input-sm"
+							/>
+						</div>
 
-            <!-- Último Acesso Início -->
-            <div class="form-control">
-              <label class="label" for="filtro-ultimo-acesso-inicio">
-                <span class="label-text font-medium"
-                  >Último Acesso (Início)</span
-                >
-              </label>
-              <input
-                id="filtro-ultimo-acesso-inicio"
-                type="date"
-                bind:value={filtroUltimoAcessoInicio}
-                class="input input-bordered input-sm"
-              />
-            </div>
+						<!-- Último Acesso Início -->
+						<div class="form-control">
+							<label class="label" for="filtro-ultimo-acesso-inicio">
+								<span class="label-text font-medium">Último Acesso (Início)</span>
+							</label>
+							<input
+								id="filtro-ultimo-acesso-inicio"
+								type="date"
+								bind:value={filtroUltimoAcessoInicio}
+								class="input input-bordered input-sm"
+							/>
+						</div>
 
-            <!-- Último Acesso Fim -->
-            <div class="form-control">
-              <label class="label" for="filtro-ultimo-acesso-fim">
-                <span class="label-text font-medium">Último Acesso (Fim)</span>
-              </label>
-              <input
-                id="filtro-ultimo-acesso-fim"
-                type="date"
-                bind:value={filtroUltimoAcessoFim}
-                class="input input-bordered input-sm"
-              />
-            </div>
-          </div>
+						<!-- Último Acesso Fim -->
+						<div class="form-control">
+							<label class="label" for="filtro-ultimo-acesso-fim">
+								<span class="label-text font-medium">Último Acesso (Fim)</span>
+							</label>
+							<input
+								id="filtro-ultimo-acesso-fim"
+								type="date"
+								bind:value={filtroUltimoAcessoFim}
+								class="input input-bordered input-sm"
+							/>
+						</div>
+					</div>
 
-          <div class="mt-4 text-sm text-base-content/60">
-            Mostrando {usuariosFiltrados.length} de {usuarios.length} usuário(s)
-          </div>
-        </div>
-      </div>
-    {/if}
+					<div class="text-base-content/60 mt-4 text-sm">
+						Mostrando {usuariosFiltrados.length} de {usuarios.length} usuário(s)
+					</div>
+				</div>
+			</div>
+		{/if}
 
-    <!-- Lista de Usuários -->
-    {#if carregandoUsuarios}
-      <div class="flex flex-col justify-center items-center py-20">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-        <p class="mt-4 text-base-content/60">Carregando usuários...</p>
-      </div>
-    {:else if erroUsuarios}
-      <div class="alert alert-error shadow-lg">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <div>
-          <h3 class="font-bold">Erro ao carregar usuários</h3>
-          <div class="text-sm mt-1">{erroUsuarios}</div>
-          <div class="text-xs mt-2">
-            Por favor, recarregue a página ou entre em contato com o suporte
-            técnico se o problema persistir.
-          </div>
-        </div>
-      </div>
-    {:else if usuarios.length === 0}
-      <div class="flex flex-col items-center justify-center py-16 text-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-16 w-16 text-base-content/30"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-          />
-        </svg>
-        <h3 class="text-xl font-semibold mt-4">Nenhum usuário encontrado</h3>
-        <p class="text-base-content/60 mt-2">
-          Cadastre um usuário para começar a gestão de acessos.
-        </p>
-      </div>
-    {:else}
-      <div class="card bg-base-100 shadow-xl">
-        <div class="card-body">
-          <h2 class="card-title text-2xl mb-4">Usuários ({usuarios.length})</h2>
+		<!-- Lista de Usuários -->
+		{#if carregandoUsuarios}
+			<div class="flex flex-col items-center justify-center py-20">
+				<span class="loading loading-spinner loading-lg text-primary"></span>
+				<p class="text-base-content/60 mt-4">Carregando usuários...</p>
+			</div>
+		{:else if erroUsuarios}
+			<div class="alert alert-error shadow-lg">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<div>
+					<h3 class="font-bold">Erro ao carregar usuários</h3>
+					<div class="mt-1 text-sm">{erroUsuarios}</div>
+					<div class="mt-2 text-xs">
+						Por favor, recarregue a página ou entre em contato com o suporte técnico se o problema
+						persistir.
+					</div>
+				</div>
+			</div>
+		{:else if usuarios.length === 0}
+			<div class="flex flex-col items-center justify-center py-16 text-center">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-base-content/30 h-16 w-16"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+					/>
+				</svg>
+				<h3 class="mt-4 text-xl font-semibold">Nenhum usuário encontrado</h3>
+				<p class="text-base-content/60 mt-2">
+					Cadastre um usuário para começar a gestão de acessos.
+				</p>
+			</div>
+		{:else}
+			<div class="card bg-base-100 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4 text-2xl">Usuários ({usuarios.length})</h2>
 
-          <div class="overflow-x-auto">
-            <table class="table table-zebra">
-              <thead>
-                <tr>
-                  <th>Matrícula</th>
-                  <th>Nome</th>
-                  <th>Email</th>
-                  <th>Role/Perfil</th>
-                  <th>Setor</th>
-                  <th>Funcionário Vinculado</th>
-                  <th>Status</th>
-                  <th>Primeiro Acesso</th>
-                  <th>Último Acesso</th>
-                  <th>Data de Criação</th>
-                  <th>Ações</th>
-                </tr>
-              </thead>
-              <tbody>
-                {#each usuariosFiltrados as usuario}
-                  <tr>
-                    <td class="font-mono font-semibold">{usuario.matricula}</td>
-                    <td class="font-semibold">{usuario.nome}</td>
-                    <td>{usuario.email}</td>
-                    <td>
-                      <div class="space-y-1">
-                        {#if usuario.role.erro}
-                          <div class="badge badge-error gap-1">
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              class="h-3 w-3"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                              />
-                            </svg>
-                            {usuario.role.descricao}
-                          </div>
-                          {#if usuario.avisos && usuario.avisos.length > 0}
-                            <div
-                              class="tooltip tooltip-error"
-                              data-tip={usuario.avisos[0].mensagem}
-                            >
-                              <button
-                                type="button"
-                                class="btn btn-xs btn-error btn-circle"
-                                onclick={(e) => {
-                                  e.stopPropagation();
-                                  mostrarMensagem(
-                                    "error",
-                                    usuario.avisos![0].mensagem,
-                                  );
-                                }}
-                              >
-                                !
-                              </button>
-                            </div>
-                          {/if}
-                        {:else}
-                          <div class="badge badge-outline">
-                            {usuario.role.nome}
-                          </div>
-                        {/if}
-                      </div>
-                    </td>
-                    <td>{usuario.role.setor || "-"}</td>
-                    <td>
-                      {#if usuario.funcionario}
-                        <div class="space-y-1">
-                          <div class="badge badge-success gap-2">
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              class="h-3 w-3"
-                              fill="none"
-                              viewBox="0 0 24 24"
-                              stroke="currentColor"
-                            >
-                              <path
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M5 13l4 4L19 7"
-                              />
-                            </svg>
-                            Associado
-                          </div>
-                          <div class="text-sm font-medium">
-                            {usuario.funcionario.nome}
-                          </div>
-                          {#if usuario.funcionario.matricula}
-                            <div class="text-xs text-base-content/60">
-                              Mat: {usuario.funcionario.matricula}
-                            </div>
-                          {/if}
-                        </div>
-                      {:else}
-                        <div class="badge badge-warning gap-2">
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            class="h-3 w-3"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                          >
-                            <path
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                              stroke-width="2"
-                              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                            />
-                          </svg>
-                          Não associado
-                        </div>
-                      {/if}
-                    </td>
-                    <td>
-                      <UserStatusBadge
-                        ativo={usuario.ativo}
-                        bloqueado={usuario.bloqueado}
-                      />
-                    </td>
-                    <td>
-                      {#if usuario.primeiroAcesso}
-                        <div class="badge badge-warning">Sim</div>
-                      {:else}
-                        <div class="badge badge-success">Não</div>
-                      {/if}
-                    </td>
-                    <td>
-                      <span class="text-sm"
-                        >{formatarData(usuario.ultimoAcesso)}</span
-                      >
-                    </td>
-                    <td>
-                      <span class="text-sm"
-                        >{formatarData(usuario.criadoEm)}</span
-                      >
-                    </td>
-                    <td>
-                      <div class="dropdown dropdown-end">
-                        <button
-                          type="button"
-                          class="btn btn-sm btn-ghost"
-                          aria-label="Menu de ações"
-                        >
-                          <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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-                            />
-                          </svg>
-                        </button>
-                        <ul
-                          role="menu"
-                          class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-48 z-[1]"
-                        >
-                          <li>
-                            <button
-                              type="button"
-                              onclick={() => ativarDesativarUsuario(usuario)}
-                              disabled={processando}
-                            >
-                              {usuario.ativo ? "Desativar" : "Ativar"}
-                            </button>
-                          </li>
-                          <li>
-                            <button
-                              type="button"
-                              onclick={() => abrirModalAssociar(usuario)}
-                              disabled={processando}
-                            >
-                              {usuario.funcionario
-                                ? "Alterar Funcionário"
-                                : "Associar Funcionário"}
-                            </button>
-                          </li>
-                          <li>
-                            {#if usuario.bloqueado}
-                              <button
-                                type="button"
-                                onclick={() => desbloquearUsuario(usuario)}
-                                disabled={processando}
-                                class="text-success"
-                              >
-                                Desbloquear
-                              </button>
-                            {:else}
-                              <button
-                                type="button"
-                                onclick={() => bloquearUsuario(usuario)}
-                                disabled={processando}
-                                class="text-error"
-                              >
-                                Bloquear
-                              </button>
-                            {/if}
-                          </li>
-                          <div class="divider my-0"></div>
-                          <li>
-                            <button
-                              type="button"
-                              onclick={() => abrirModalExcluir(usuario)}
-                              disabled={processando}
-                              class="text-error"
-                            >
-                              Excluir
-                            </button>
-                          </li>
-                        </ul>
-                      </div>
-                    </td>
-                  </tr>
-                {/each}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    {/if}
-  </div>
+					<div class="overflow-x-auto">
+						<table class="table-zebra table">
+							<thead>
+								<tr>
+									<th>Matrícula</th>
+									<th>Nome</th>
+									<th>Email</th>
+									<th>Role/Perfil</th>
+									<th>Setor</th>
+									<th>Funcionário Vinculado</th>
+									<th>Status</th>
+									<th>Primeiro Acesso</th>
+									<th>Último Acesso</th>
+									<th>Data de Criação</th>
+									<th>Ações</th>
+								</tr>
+							</thead>
+							<tbody>
+								{#each usuariosFiltrados as usuario}
+									<tr>
+										<td class="font-mono font-semibold">{usuario.matricula}</td>
+										<td class="font-semibold">{usuario.nome}</td>
+										<td>{usuario.email}</td>
+										<td>
+											<div class="space-y-1">
+												{#if usuario.role.erro}
+													<div class="badge badge-error gap-1">
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															class="h-3 w-3"
+															fill="none"
+															viewBox="0 0 24 24"
+															stroke="currentColor"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																stroke-width="2"
+																d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+															/>
+														</svg>
+														{usuario.role.descricao}
+													</div>
+													{#if usuario.avisos && usuario.avisos.length > 0}
+														<div
+															class="tooltip tooltip-error"
+															data-tip={usuario.avisos[0].mensagem}
+														>
+															<button
+																type="button"
+																class="btn btn-xs btn-error btn-circle"
+																onclick={(e) => {
+																	e.stopPropagation();
+																	mostrarMensagem('error', usuario.avisos![0].mensagem);
+																}}
+															>
+																!
+															</button>
+														</div>
+													{/if}
+												{:else}
+													<div class="badge badge-outline">
+														{usuario.role.nome}
+													</div>
+												{/if}
+											</div>
+										</td>
+										<td>{usuario.role.setor || '-'}</td>
+										<td>
+											{#if usuario.funcionario}
+												<div class="space-y-1">
+													<div class="badge badge-success gap-2">
+														<svg
+															xmlns="http://www.w3.org/2000/svg"
+															class="h-3 w-3"
+															fill="none"
+															viewBox="0 0 24 24"
+															stroke="currentColor"
+														>
+															<path
+																stroke-linecap="round"
+																stroke-linejoin="round"
+																stroke-width="2"
+																d="M5 13l4 4L19 7"
+															/>
+														</svg>
+														Associado
+													</div>
+													<div class="text-sm font-medium">
+														{usuario.funcionario.nome}
+													</div>
+													{#if usuario.funcionario.matricula}
+														<div class="text-base-content/60 text-xs">
+															Mat: {usuario.funcionario.matricula}
+														</div>
+													{/if}
+												</div>
+											{:else}
+												<div class="badge badge-warning gap-2">
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														class="h-3 w-3"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke="currentColor"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															stroke-width="2"
+															d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+														/>
+													</svg>
+													Não associado
+												</div>
+											{/if}
+										</td>
+										<td>
+											<UserStatusBadge ativo={usuario.ativo} bloqueado={usuario.bloqueado} />
+										</td>
+										<td>
+											{#if usuario.primeiroAcesso}
+												<div class="badge badge-warning">Sim</div>
+											{:else}
+												<div class="badge badge-success">Não</div>
+											{/if}
+										</td>
+										<td>
+											<span class="text-sm">{formatarData(usuario.ultimoAcesso)}</span>
+										</td>
+										<td>
+											<span class="text-sm">{formatarData(usuario.criadoEm)}</span>
+										</td>
+										<td>
+											<div class="dropdown dropdown-end">
+												<button
+													type="button"
+													class="btn btn-sm btn-ghost"
+													aria-label="Menu de ações"
+												>
+													<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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
+														/>
+													</svg>
+												</button>
+												<ul
+													role="menu"
+													class="dropdown-content menu bg-base-100 rounded-box z-[1] w-48 p-2 shadow"
+												>
+													<li>
+														<button
+															type="button"
+															onclick={() => ativarDesativarUsuario(usuario)}
+															disabled={processando}
+														>
+															{usuario.ativo ? 'Desativar' : 'Ativar'}
+														</button>
+													</li>
+													<li>
+														<button
+															type="button"
+															onclick={() => abrirModalAssociar(usuario)}
+															disabled={processando}
+														>
+															{usuario.funcionario ? 'Alterar Funcionário' : 'Associar Funcionário'}
+														</button>
+													</li>
+													<li>
+														{#if usuario.bloqueado}
+															<button
+																type="button"
+																onclick={() => desbloquearUsuario(usuario)}
+																disabled={processando}
+																class="text-success"
+															>
+																Desbloquear
+															</button>
+														{:else}
+															<button
+																type="button"
+																onclick={() => bloquearUsuario(usuario)}
+																disabled={processando}
+																class="text-error"
+															>
+																Bloquear
+															</button>
+														{/if}
+													</li>
+													<div class="divider my-0"></div>
+													<li>
+														<button
+															type="button"
+															onclick={() => abrirModalExcluir(usuario)}
+															disabled={processando}
+															class="text-error"
+														>
+															Excluir
+														</button>
+													</li>
+												</ul>
+											</div>
+										</td>
+									</tr>
+								{/each}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		{/if}
+	</div>
 
-  <!-- Modal Associar Funcionário -->
-  {#if modalAssociarAberto && usuarioSelecionado}
-    <div class="modal modal-open">
-      <div class="modal-box max-w-2xl">
-        <h3 class="font-bold text-lg mb-4">Associar Funcionário ao Usuário</h3>
+	<!-- Modal Associar Funcionário -->
+	{#if modalAssociarAberto && usuarioSelecionado}
+		<div class="modal modal-open">
+			<div class="modal-box max-w-2xl">
+				<h3 class="mb-4 text-lg font-bold">Associar Funcionário ao Usuário</h3>
 
-        <div class="mb-6">
-          <p class="text-base-content/80 mb-2">
-            <strong>Usuário:</strong>
-            {usuarioSelecionado.nome} ({usuarioSelecionado.matricula})
-          </p>
+				<div class="mb-6">
+					<p class="text-base-content/80 mb-2">
+						<strong>Usuário:</strong>
+						{usuarioSelecionado.nome} ({usuarioSelecionado.matricula})
+					</p>
 
-          {#if usuarioSelecionado.funcionario}
-            <div class="alert alert-info">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                class="stroke-current shrink-0 w-6 h-6"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                ></path>
-              </svg>
-              <span>
-                Este usuário já possui um funcionário associado. Você pode
-                alterá-lo ou desassociá-lo.
-              </span>
-            </div>
-          {/if}
-        </div>
+					{#if usuarioSelecionado.funcionario}
+						<div class="alert alert-info">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								class="h-6 w-6 shrink-0 stroke-current"
+							>
+								<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>
+								Este usuário já possui um funcionário associado. Você pode alterá-lo ou
+								desassociá-lo.
+							</span>
+						</div>
+					{/if}
+				</div>
 
-        <div class="form-control mb-4">
-          <label for="busca-funcionario" class="label">
-            <span class="label-text">Buscar Funcionário</span>
-          </label>
-          <input
-            id="busca-funcionario"
-            type="text"
-            bind:value={buscaFuncionario}
-            placeholder="Digite nome, CPF ou matrícula..."
-            class="input input-bordered"
-          />
-        </div>
+				<div class="form-control mb-4">
+					<label for="busca-funcionario" class="label">
+						<span class="label-text">Buscar Funcionário</span>
+					</label>
+					<input
+						id="busca-funcionario"
+						type="text"
+						bind:value={buscaFuncionario}
+						placeholder="Digite nome, CPF ou matrícula..."
+						class="input input-bordered"
+					/>
+				</div>
 
-        <div class="form-control mb-6">
-          <div class="label">
-            <span class="label-text">Selecione o Funcionário *</span>
-          </div>
+				<div class="form-control mb-6">
+					<div class="label">
+						<span class="label-text">Selecione o Funcionário *</span>
+					</div>
 
-          <div class="border rounded-lg max-h-96 overflow-y-auto">
-            {#if carregandoFuncionarios}
-              <div
-                class="p-4 flex items-center justify-center gap-3 text-base-content/60"
-              >
-                <span class="loading loading-spinner loading-sm"></span>
-                Carregando funcionários disponíveis...
-              </div>
-            {:else if funcionariosFiltrados.length === 0}
-              <div class="p-4 text-center text-base-content/60">
-                {buscaFuncionario
-                  ? "Nenhum funcionário encontrado com esse critério"
-                  : "Nenhum funcionário disponível para associação."}
-              </div>
-            {:else}
-              {#each funcionariosFiltrados as func}
-                <label
-                  class="flex items-center gap-3 p-3 hover:bg-base-200 cursor-pointer border-b last:border-b-0"
-                >
-                  <input
-                    type="radio"
-                    name="funcionario"
-                    value={func._id}
-                    bind:group={funcionarioSelecionadoId}
-                    class="radio radio-primary"
-                  />
-                  <div class="flex-1">
-                    <div class="font-semibold">{func.nome}</div>
-                    <div class="text-sm text-base-content/70">
-                      CPF: {func.cpf || "N/A"}
-                      {#if func.matricula}
-                        | Matrícula: {func.matricula}
-                      {/if}
-                    </div>
-                    {#if func.descricaoCargo}
-                      <div class="text-xs text-base-content/60">
-                        {func.descricaoCargo}
-                      </div>
-                    {/if}
-                  </div>
-                </label>
-              {/each}
-            {/if}
-          </div>
-        </div>
+					<div class="max-h-96 overflow-y-auto rounded-lg border">
+						{#if carregandoFuncionarios}
+							<div class="text-base-content/60 flex items-center justify-center gap-3 p-4">
+								<span class="loading loading-spinner loading-sm"></span>
+								Carregando funcionários disponíveis...
+							</div>
+						{:else if funcionariosFiltrados.length === 0}
+							<div class="text-base-content/60 p-4 text-center">
+								{buscaFuncionario
+									? 'Nenhum funcionário encontrado com esse critério'
+									: 'Nenhum funcionário disponível para associação.'}
+							</div>
+						{:else}
+							{#each funcionariosFiltrados as func}
+								<label
+									class="hover:bg-base-200 flex cursor-pointer items-center gap-3 border-b p-3 last:border-b-0"
+								>
+									<input
+										type="radio"
+										name="funcionario"
+										value={func._id}
+										bind:group={funcionarioSelecionadoId}
+										class="radio radio-primary"
+									/>
+									<div class="flex-1">
+										<div class="font-semibold">{func.nome}</div>
+										<div class="text-base-content/70 text-sm">
+											CPF: {func.cpf || 'N/A'}
+											{#if func.matricula}
+												| Matrícula: {func.matricula}
+											{/if}
+										</div>
+										{#if func.descricaoCargo}
+											<div class="text-base-content/60 text-xs">
+												{func.descricaoCargo}
+											</div>
+										{/if}
+									</div>
+								</label>
+							{/each}
+						{/if}
+					</div>
+				</div>
 
-        <div class="modal-action">
-          <button
-            type="button"
-            class="btn btn-ghost"
-            onclick={fecharModalAssociar}
-            disabled={processando}
-          >
-            Cancelar
-          </button>
+				<div class="modal-action">
+					<button type="button" class="btn" onclick={fecharModalAssociar} disabled={processando}>
+						Cancelar
+					</button>
 
-          {#if usuarioSelecionado.funcionario}
-            <button
-              type="button"
-              class="btn btn-error"
-              onclick={desassociarFuncionario}
-              disabled={processando}
-            >
-              {#if processando}
-                <span class="loading loading-spinner loading-sm"></span>
-              {/if}
-              Desassociar
-            </button>
-          {/if}
+					{#if usuarioSelecionado.funcionario}
+						<button
+							type="button"
+							class="btn btn-error"
+							onclick={desassociarFuncionario}
+							disabled={processando}
+						>
+							{#if processando}
+								<span class="loading loading-spinner loading-sm"></span>
+							{/if}
+							Desassociar
+						</button>
+					{/if}
 
-          <button
-            type="button"
-            class="btn btn-primary"
-            onclick={associarFuncionario}
-            disabled={processando ||
-              !funcionarioSelecionadoId ||
-              funcionarioSelecionadoId === ""}
-          >
-            {#if processando}
-              <span class="loading loading-spinner loading-sm"></span>
-            {/if}
-            {usuarioSelecionado.funcionario ? "Alterar" : "Associar"}
-          </button>
-        </div>
-      </div>
-      <div class="modal-backdrop">
-        <button
-          type="button"
-          onclick={fecharModalAssociar}
-          onkeydown={(e) => e.key === "Escape" && fecharModalAssociar()}
-          aria-label="Fechar modal"
-          class="sr-only">Fechar</button
-        >
-      </div>
-    </div>
-  {/if}
+					<button
+						type="button"
+						class="btn btn-primary"
+						onclick={associarFuncionario}
+						disabled={processando || !funcionarioSelecionadoId || funcionarioSelecionadoId === ''}
+					>
+						{#if processando}
+							<span class="loading loading-spinner loading-sm"></span>
+						{/if}
+						{usuarioSelecionado.funcionario ? 'Alterar' : 'Associar'}
+					</button>
+				</div>
+			</div>
+			<div class="modal-backdrop">
+				<button
+					type="button"
+					onclick={fecharModalAssociar}
+					onkeydown={(e) => e.key === 'Escape' && fecharModalAssociar()}
+					aria-label="Fechar modal"
+					class="sr-only">Fechar</button
+				>
+			</div>
+		</div>
+	{/if}
 
-  <!-- Modal Excluir Usuário -->
-  {#if modalExcluirAberto && usuarioSelecionado}
-    <div class="modal modal-open">
-      <div class="modal-box">
-        <h3 class="font-bold text-lg mb-4 text-error">Excluir Usuário</h3>
+	<!-- Modal Excluir Usuário -->
+	{#if modalExcluirAberto && usuarioSelecionado}
+		<div class="modal modal-open">
+			<div class="modal-box">
+				<h3 class="text-error mb-4 text-lg font-bold">Excluir Usuário</h3>
 
-        <div class="mb-4">
-          <p class="text-base-content/80 mb-2">
-            <strong>Usuário:</strong>
-            {usuarioSelecionado.nome} ({usuarioSelecionado.matricula})
-          </p>
-          <div class="alert alert-error">
-            <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-              ></path>
-            </svg>
-            <span>
-              Esta ação não pode ser desfeita. O usuário será permanentemente
-              excluído do sistema.
-            </span>
-          </div>
-        </div>
+				<div class="mb-4">
+					<p class="text-base-content/80 mb-2">
+						<strong>Usuário:</strong>
+						{usuarioSelecionado.nome} ({usuarioSelecionado.matricula})
+					</p>
+					<div class="alert alert-error">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="h-6 w-6 shrink-0 stroke-current"
+						>
+							<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"
+							></path>
+						</svg>
+						<span>
+							Esta ação não pode ser desfeita. O usuário será permanentemente excluído do sistema.
+						</span>
+					</div>
+				</div>
 
-        <div class="modal-action">
-          <button
-            type="button"
-            class="btn btn-ghost"
-            onclick={fecharModalExcluir}
-            disabled={processando}
-          >
-            Cancelar
-          </button>
-          <button
-            type="button"
-            class="btn btn-error"
-            onclick={excluirUsuario}
-            disabled={processando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner loading-sm"></span>
-            {/if}
-            Excluir
-          </button>
-        </div>
-      </div>
-      <div class="modal-backdrop">
-        <button
-          type="button"
-          onclick={fecharModalExcluir}
-          onkeydown={(e) => e.key === "Escape" && fecharModalExcluir()}
-          aria-label="Fechar modal"
-          class="sr-only">Fechar</button
-        >
-      </div>
-    </div>
-  {/if}
+				<div class="modal-action">
+					<button type="button" class="btn" onclick={fecharModalExcluir} disabled={processando}>
+						Cancelar
+					</button>
+					<button
+						type="button"
+						class="btn btn-error"
+						onclick={excluirUsuario}
+						disabled={processando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner loading-sm"></span>
+						{/if}
+						Excluir
+					</button>
+				</div>
+			</div>
+			<div class="modal-backdrop">
+				<button
+					type="button"
+					onclick={fecharModalExcluir}
+					onkeydown={(e) => e.key === 'Escape' && fecharModalExcluir()}
+					aria-label="Fechar modal"
+					class="sr-only">Fechar</button
+				>
+			</div>
+		</div>
+	{/if}
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/criar/+page.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/criar/+page.svelte
index e36a233..de91390 100644
--- a/apps/web/src/routes/(dashboard)/ti/usuarios/criar/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/criar/+page.svelte
@@ -1,574 +1,540 @@
 <script lang="ts">
-  import { useQuery, useConvexClient } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { goto } from "$app/navigation";
-  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
-  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { goto } from '$app/navigation';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
 
-  const client = useConvexClient();
-  const roles = useQuery(api.roles.listar, {});
-  const funcionarios = useQuery(api.funcionarios.getAll, {});
+	const client = useConvexClient();
+	const roles = useQuery(api.roles.listar, {});
+	const funcionarios = useQuery(api.funcionarios.getAll, {});
 
-  // Debug - Remover após teste
-  $effect(() => {
-    console.log("=== DEBUG PERFIS ===");
-    console.log("roles:", roles);
-    console.log("roles?.data:", roles?.data);
-    console.log("É array?", Array.isArray(roles?.data));
-    if (roles?.data) {
-      console.log("Quantidade de perfis:", roles.data.length);
-      console.log("Perfis:", roles.data);
-    }
-  });
+	// Debug - Remover após teste
+	$effect(() => {
+		console.log('=== DEBUG PERFIS ===');
+		console.log('roles:', roles);
+		console.log('roles?.data:', roles?.data);
+		console.log('É array?', Array.isArray(roles?.data));
+		if (roles?.data) {
+			console.log('Quantidade de perfis:', roles.data.length);
+			console.log('Perfis:', roles.data);
+		}
+	});
 
-  // Estados do formulário
-  let nome = $state("");
-  let email = $state("");
-  let roleId = $state("");
-  let funcionarioId = $state("");
-  let senhaInicial = $state("");
-  let confirmarSenha = $state("");
-  let processando = $state(false);
-  let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(
-    null,
-  );
+	// Estados do formulário
+	let nome = $state('');
+	let email = $state('');
+	let roleId = $state('');
+	let funcionarioId = $state('');
+	let senhaInicial = $state('');
+	let confirmarSenha = $state('');
+	let processando = $state(false);
+	let mensagem = $state<{ tipo: 'success' | 'error'; texto: string } | null>(null);
 
-  function mostrarMensagem(tipo: "success" | "error", texto: string) {
-    mensagem = { tipo, texto };
-    setTimeout(() => {
-      mensagem = null;
-    }, 5000);
-  }
+	function mostrarMensagem(tipo: 'success' | 'error', texto: string) {
+		mensagem = { tipo, texto };
+		setTimeout(() => {
+			mensagem = null;
+		}, 5000);
+	}
 
-  async function handleSubmit(e: Event) {
-    e.preventDefault();
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
 
-    // Validações
-    if (!nome.trim() || !email.trim() || !roleId || !senhaInicial) {
-      mostrarMensagem("error", "Preencha todos os campos obrigatórios");
-      return;
-    }
+		// Validações
+		if (!nome.trim() || !email.trim() || !roleId || !senhaInicial) {
+			mostrarMensagem('error', 'Preencha todos os campos obrigatórios');
+			return;
+		}
 
-    if (senhaInicial !== confirmarSenha) {
-      mostrarMensagem("error", "As senhas não conferem");
-      return;
-    }
+		if (senhaInicial !== confirmarSenha) {
+			mostrarMensagem('error', 'As senhas não conferem');
+			return;
+		}
 
-    if (senhaInicial.length < 8) {
-      mostrarMensagem("error", "A senha deve ter no mínimo 8 caracteres");
-      return;
-    }
+		if (senhaInicial.length < 8) {
+			mostrarMensagem('error', 'A senha deve ter no mínimo 8 caracteres');
+			return;
+		}
 
-    processando = true;
+		processando = true;
 
-    try {
-      const resultado = await client.mutation(api.usuarios.criar, {
-        nome: nome.trim(),
-        email: email.trim(),
-        roleId: roleId as Id<"roles">,
-        funcionarioId: funcionarioId
-          ? (funcionarioId as Id<"funcionarios">)
-          : undefined,
-        senhaInicial: senhaInicial,
-      });
+		try {
+			const resultado = await client.mutation(api.usuarios.criar, {
+				nome: nome.trim(),
+				email: email.trim(),
+				roleId: roleId as Id<'roles'>,
+				funcionarioId: funcionarioId ? (funcionarioId as Id<'funcionarios'>) : undefined,
+				senhaInicial: senhaInicial
+			});
 
-      if (resultado.sucesso) {
-        if (senhaGerada) {
-          mostrarMensagem(
-            "success",
-            `Usuário criado! SENHA TEMPORÁRIA: ${senhaGerada} - Anote esta senha, ela não será exibida novamente!`,
-          );
-          setTimeout(() => {
-            goto("/ti/usuarios");
-          }, 5000);
-        } else {
-          mostrarMensagem("success", "Usuário criado com sucesso!");
-          setTimeout(() => {
-            goto("/ti/usuarios");
-          }, 2000);
-        }
-      } else {
-        mostrarMensagem("error", resultado.erro);
-      }
-    } catch (error: any) {
-      mostrarMensagem("error", error.message || "Erro ao criar usuário");
-    } finally {
-      processando = false;
-    }
-  }
+			if (resultado.sucesso) {
+				if (senhaGerada) {
+					mostrarMensagem(
+						'success',
+						`Usuário criado! SENHA TEMPORÁRIA: ${senhaGerada} - Anote esta senha, ela não será exibida novamente!`
+					);
+					setTimeout(() => {
+						goto('/ti/usuarios');
+					}, 5000);
+				} else {
+					mostrarMensagem('success', 'Usuário criado com sucesso!');
+					setTimeout(() => {
+						goto('/ti/usuarios');
+					}, 2000);
+				}
+			} else {
+				mostrarMensagem('error', resultado.erro);
+			}
+		} catch (error: any) {
+			mostrarMensagem('error', error.message || 'Erro ao criar usuário');
+		} finally {
+			processando = false;
+		}
+	}
 
-  let senhaGerada = $state("");
-  let mostrarSenha = $state(false);
+	let senhaGerada = $state('');
+	let mostrarSenha = $state(false);
 
-  // Auto-completar ao selecionar funcionário
-  $effect(() => {
-    if (funcionarioId && funcionarios?.data) {
-      const funcSelecionado = funcionarios.data.find(
-        (f: any) => f._id === funcionarioId,
-      );
-      if (funcSelecionado) {
-        email = funcSelecionado.email || email;
-        nome = funcSelecionado.nome || nome;
-      }
-    }
-  });
+	// Auto-completar ao selecionar funcionário
+	$effect(() => {
+		if (funcionarioId && funcionarios?.data) {
+			const funcSelecionado = funcionarios.data.find((f: any) => f._id === funcionarioId);
+			if (funcSelecionado) {
+				email = funcSelecionado.email || email;
+				nome = funcSelecionado.nome || nome;
+			}
+		}
+	});
 
-  function gerarSenhaAleatoria() {
-    const chars =
-      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!";
-    let senha = "";
-    for (let i = 0; i < 12; i++) {
-      senha += chars.charAt(Math.floor(Math.random() * chars.length));
-    }
-    senhaInicial = senha;
-    confirmarSenha = senha;
-    senhaGerada = senha;
-    mostrarSenha = true;
-  }
+	function gerarSenhaAleatoria() {
+		const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$!';
+		let senha = '';
+		for (let i = 0; i < 12; i++) {
+			senha += chars.charAt(Math.floor(Math.random() * chars.length));
+		}
+		senhaInicial = senha;
+		confirmarSenha = senha;
+		senhaGerada = senha;
+		mostrarSenha = true;
+	}
 
-  function copiarSenha() {
-    if (senhaGerada) {
-      navigator.clipboard.writeText(senhaGerada);
-      mostrarMensagem("success", "Senha copiada para área de transferência!");
-    }
-  }
+	function copiarSenha() {
+		if (senhaGerada) {
+			navigator.clipboard.writeText(senhaGerada);
+			mostrarMensagem('success', 'Senha copiada para área de transferência!');
+		}
+	}
 </script>
 
-<ProtectedRoute allowedRoles={["ti_master", "admin"]} maxLevel={1}>
-  <div class="container mx-auto px-4 py-6 max-w-4xl">
-    <!-- Header -->
-    <div class="mb-8">
-      <div class="flex items-center justify-between mb-4">
-        <div class="flex items-center gap-4">
-          <div class="p-3 bg-primary/10 rounded-xl">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-10 w-10 text-primary"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
-              />
-            </svg>
-          </div>
-          <div>
-            <h1 class="text-3xl font-bold text-base-content">
-              Criar Novo Usuário
-            </h1>
-            <p class="text-base-content/60 mt-1">
-              Cadastre um novo usuário no sistema
-            </p>
-          </div>
-        </div>
-        <a href="/ti/usuarios" class="btn btn-outline btn-primary gap-2">
-          <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 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>
-          Voltar para Usuários
-        </a>
-      </div>
-    </div>
+<ProtectedRoute allowedRoles={['ti_master', 'admin']} maxLevel={1}>
+	<div class="container mx-auto max-w-4xl px-4 py-6">
+		<!-- Header -->
+		<div class="mb-8">
+			<div class="mb-4 flex items-center justify-between">
+				<div class="flex items-center gap-4">
+					<div class="bg-primary/10 rounded-xl p-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-10 w-10"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h1 class="text-base-content text-3xl font-bold">Criar Novo Usuário</h1>
+						<p class="text-base-content/60 mt-1">Cadastre um novo usuário no sistema</p>
+					</div>
+				</div>
+				<a href="/ti/usuarios" class="btn btn-outline btn-primary gap-2">
+					<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 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>
+					Voltar para Usuários
+				</a>
+			</div>
+		</div>
 
-    <!-- Breadcrumbs -->
-    <div class="text-sm breadcrumbs mb-6">
-      <ul>
-        <li><a href="/ti/painel-administrativo">Dashboard TI</a></li>
-        <li><a href="/ti/usuarios">Usuários</a></li>
-        <li>Criar Usuário</li>
-      </ul>
-    </div>
+		<!-- Breadcrumbs -->
+		<div class="breadcrumbs mb-6 text-sm">
+			<ul>
+				<li><a href="/ti/painel-administrativo">Dashboard TI</a></li>
+				<li><a href="/ti/usuarios">Usuários</a></li>
+				<li>Criar Usuário</li>
+			</ul>
+		</div>
 
-    <!-- Mensagens -->
-    {#if mensagem}
-      <div
-        class="alert mb-6"
-        class:alert-success={mensagem.tipo === "success"}
-        class:alert-error={mensagem.tipo === "error"}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          {#if mensagem.tipo === "success"}
-            <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"
-            />
-          {:else}
-            <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"
-            />
-          {/if}
-        </svg>
-        <span>{mensagem.texto}</span>
-      </div>
-    {/if}
+		<!-- Mensagens -->
+		{#if mensagem}
+			<div
+				class="alert mb-6"
+				class:alert-success={mensagem.tipo === 'success'}
+				class:alert-error={mensagem.tipo === 'error'}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					{#if mensagem.tipo === 'success'}
+						<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"
+						/>
+					{:else}
+						<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"
+						/>
+					{/if}
+				</svg>
+				<span>{mensagem.texto}</span>
+			</div>
+		{/if}
 
-    <!-- Formulário -->
-    <div class="card bg-base-100 shadow-2xl border border-base-300">
-      <div class="card-body">
-        <div class="flex items-center gap-3 mb-6">
-          <div class="p-2 bg-primary/10 rounded-lg">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6 text-primary"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-              />
-            </svg>
-          </div>
-          <h2 class="card-title text-2xl">Informações do Usuário</h2>
-        </div>
+		<!-- Formulário -->
+		<div class="card bg-base-100 border-base-300 border shadow-2xl">
+			<div class="card-body">
+				<div class="mb-6 flex items-center gap-3">
+					<div class="bg-primary/10 rounded-lg p-2">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+							/>
+						</svg>
+					</div>
+					<h2 class="card-title text-2xl">Informações do Usuário</h2>
+				</div>
 
-        <form onsubmit={handleSubmit}>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Funcionário (primeiro) -->
-            <div class="form-control md:col-span-2">
-              <label class="label" for="funcionario">
-                <span class="label-text font-semibold"
-                  >Vincular Funcionário (Opcional)</span
-                >
-              </label>
-              <select
-                id="funcionario"
-                class="select select-bordered"
-                bind:value={funcionarioId}
-                disabled={processando || !funcionarios?.data}
-              >
-                <option value=""
-                  >Selecione um funcionário para auto-completar dados</option
-                >
-                {#if funcionarios?.data}
-                  {#each funcionarios.data as func}
-                    <option value={func._id}
-                      >{func.nome} - Mat: {func.matricula}</option
-                    >
-                  {/each}
-                {/if}
-              </select>
-              <div class="label">
-                <span class="label-text-alt"
-                  >Ao selecionar, os campos serão preenchidos automaticamente</span
-                >
-              </div>
-            </div>
+				<form onsubmit={handleSubmit}>
+					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+						<!-- Funcionário (primeiro) -->
+						<div class="form-control md:col-span-2">
+							<label class="label" for="funcionario">
+								<span class="label-text font-semibold">Vincular Funcionário (Opcional)</span>
+							</label>
+							<select
+								id="funcionario"
+								class="select select-bordered"
+								bind:value={funcionarioId}
+								disabled={processando || !funcionarios?.data}
+							>
+								<option value="">Selecione um funcionário para auto-completar dados</option>
+								{#if funcionarios?.data}
+									{#each funcionarios.data as func}
+										<option value={func._id}>{func.nome} - Mat: {func.matricula}</option>
+									{/each}
+								{/if}
+							</select>
+							<div class="label">
+								<span class="label-text-alt"
+									>Ao selecionar, os campos serão preenchidos automaticamente</span
+								>
+							</div>
+						</div>
 
-            <!-- Nome -->
-            <div class="form-control">
-              <label class="label" for="nome">
-                <span class="label-text font-semibold">Nome Completo *</span>
-              </label>
-              <input
-                id="nome"
-                type="text"
-                placeholder="Ex: João da Silva"
-                class="input input-bordered"
-                bind:value={nome}
-                required
-                disabled={processando}
-              />
-            </div>
+						<!-- Nome -->
+						<div class="form-control">
+							<label class="label" for="nome">
+								<span class="label-text font-semibold">Nome Completo *</span>
+							</label>
+							<input
+								id="nome"
+								type="text"
+								placeholder="Ex: João da Silva"
+								class="input input-bordered"
+								bind:value={nome}
+								required
+								disabled={processando}
+							/>
+						</div>
 
-            <!-- Email -->
-            <div class="form-control">
-              <label class="label" for="email">
-                <span class="label-text font-semibold">E-mail *</span>
-              </label>
-              <input
-                id="email"
-                type="email"
-                placeholder="usuario@sgse.pe.gov.br"
-                class="input input-bordered"
-                bind:value={email}
-                required
-                disabled={processando}
-              />
-            </div>
+						<!-- Email -->
+						<div class="form-control">
+							<label class="label" for="email">
+								<span class="label-text font-semibold">E-mail *</span>
+							</label>
+							<input
+								id="email"
+								type="email"
+								placeholder="usuario@sgse.pe.gov.br"
+								class="input input-bordered"
+								bind:value={email}
+								required
+								disabled={processando}
+							/>
+						</div>
 
-            <!-- Perfil/Role -->
-            <div class="form-control">
-              <label class="label" for="role">
-                <span class="label-text font-semibold">Perfil de Acesso *</span>
-              </label>
-              <select
-                id="role"
-                class="select select-bordered"
-                bind:value={roleId}
-                required
-                disabled={processando || !roles?.data}
-              >
-                <option value="">Selecione um perfil</option>
-                {#if roles?.data && Array.isArray(roles.data)}
-                  {#each roles.data as role}
-                    <option value={role._id}>
-                      {role.descricao} ({role.nome})
-                    </option>
-                  {/each}
-                {:else}
-                  <option disabled>Carregando perfis...</option>
-                {/if}
-              </select>
-              {#if !roles?.data || !Array.isArray(roles.data)}
-                <div class="label">
-                  <span class="label-text-alt text-warning"
-                    >Carregando perfis disponíveis...</span
-                  >
-                </div>
-              {/if}
-            </div>
+						<!-- Perfil/Role -->
+						<div class="form-control">
+							<label class="label" for="role">
+								<span class="label-text font-semibold">Perfil de Acesso *</span>
+							</label>
+							<select
+								id="role"
+								class="select select-bordered"
+								bind:value={roleId}
+								required
+								disabled={processando || !roles?.data}
+							>
+								<option value="">Selecione um perfil</option>
+								{#if roles?.data && Array.isArray(roles.data)}
+									{#each roles.data as role}
+										<option value={role._id}>
+											{role.descricao} ({role.nome})
+										</option>
+									{/each}
+								{:else}
+									<option disabled>Carregando perfis...</option>
+								{/if}
+							</select>
+							{#if !roles?.data || !Array.isArray(roles.data)}
+								<div class="label">
+									<span class="label-text-alt text-warning">Carregando perfis disponíveis...</span>
+								</div>
+							{/if}
+						</div>
 
-            <div class="divider md:col-span-2 mt-4">
-              <div class="flex items-center gap-2">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5 text-primary"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                  />
-                </svg>
-                Senha Inicial
-              </div>
-            </div>
+						<div class="divider mt-4 md:col-span-2">
+							<div class="flex items-center gap-2">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="text-primary 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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+									/>
+								</svg>
+								Senha Inicial
+							</div>
+						</div>
 
-            <!-- Senha -->
-            <div class="form-control">
-              <label class="label" for="senha">
-                <span class="label-text font-semibold">Senha Inicial *</span>
-              </label>
-              <input
-                id="senha"
-                type="password"
-                placeholder="Mínimo 8 caracteres"
-                class="input input-bordered"
-                bind:value={senhaInicial}
-                required
-                minlength="8"
-                disabled={processando}
-              />
-              <div class="label">
-                <span class="label-text-alt">Mínimo 8 caracteres</span>
-              </div>
-            </div>
+						<!-- Senha -->
+						<div class="form-control">
+							<label class="label" for="senha">
+								<span class="label-text font-semibold">Senha Inicial *</span>
+							</label>
+							<input
+								id="senha"
+								type="password"
+								placeholder="Mínimo 8 caracteres"
+								class="input input-bordered"
+								bind:value={senhaInicial}
+								required
+								minlength="8"
+								disabled={processando}
+							/>
+							<div class="label">
+								<span class="label-text-alt">Mínimo 8 caracteres</span>
+							</div>
+						</div>
 
-            <!-- Confirmar Senha -->
-            <div class="form-control">
-              <label class="label" for="confirmar-senha">
-                <span class="label-text font-semibold">Confirmar Senha *</span>
-              </label>
-              <input
-                id="confirmar-senha"
-                type="password"
-                placeholder="Digite novamente"
-                class="input input-bordered"
-                bind:value={confirmarSenha}
-                required
-                minlength="8"
-                disabled={processando}
-              />
-            </div>
+						<!-- Confirmar Senha -->
+						<div class="form-control">
+							<label class="label" for="confirmar-senha">
+								<span class="label-text font-semibold">Confirmar Senha *</span>
+							</label>
+							<input
+								id="confirmar-senha"
+								type="password"
+								placeholder="Digite novamente"
+								class="input input-bordered"
+								bind:value={confirmarSenha}
+								required
+								minlength="8"
+								disabled={processando}
+							/>
+						</div>
 
-            <!-- Botão Gerar Senha e Visualização -->
-            <div class="md:col-span-2">
-              <button
-                type="button"
-                class="btn btn-sm btn-outline btn-info"
-                onclick={gerarSenhaAleatoria}
-                disabled={processando}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-4 w-4"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                  />
-                </svg>
-                Gerar Senha Forte Aleatória
-              </button>
+						<!-- Botão Gerar Senha e Visualização -->
+						<div class="md:col-span-2">
+							<button
+								type="button"
+								class="btn btn-sm btn-outline btn-info"
+								onclick={gerarSenhaAleatoria}
+								disabled={processando}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-4 w-4"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+									/>
+								</svg>
+								Gerar Senha Forte Aleatória
+							</button>
 
-              {#if mostrarSenha && senhaGerada}
-                <div class="alert alert-warning mt-4">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="stroke-current shrink-0 h-6 w-6"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                    />
-                  </svg>
-                  <div class="flex-1">
-                    <h3 class="font-bold">Senha Gerada:</h3>
-                    <div class="flex items-center gap-2 mt-2">
-                      <code
-                        class="bg-base-300 px-3 py-2 rounded text-lg font-mono select-all"
-                      >
-                        {senhaGerada}
-                      </code>
-                      <button
-                        type="button"
-                        class="btn btn-sm btn-ghost"
-                        onclick={copiarSenha}
-                        title="Copiar senha"
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          class="h-5 w-5"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                          />
-                        </svg>
-                        Copiar
-                      </button>
-                    </div>
-                    <p class="text-sm mt-2">
-                      ⚠️ <strong>IMPORTANTE:</strong> Anote esta senha! Você precisará
-                      repassá-la manualmente ao usuário até que o SMTP seja configurado.
-                    </p>
-                  </div>
-                </div>
-              {/if}
-            </div>
-          </div>
+							{#if mostrarSenha && senhaGerada}
+								<div class="alert alert-warning mt-4">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-6 w-6 shrink-0 stroke-current"
+										fill="none"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+										/>
+									</svg>
+									<div class="flex-1">
+										<h3 class="font-bold">Senha Gerada:</h3>
+										<div class="mt-2 flex items-center gap-2">
+											<code class="bg-base-300 rounded px-3 py-2 font-mono text-lg select-all">
+												{senhaGerada}
+											</code>
+											<button
+												type="button"
+												class="btn btn-sm btn-ghost"
+												onclick={copiarSenha}
+												title="Copiar senha"
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													class="h-5 w-5"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke="currentColor"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+													/>
+												</svg>
+												Copiar
+											</button>
+										</div>
+										<p class="mt-2 text-sm">
+											⚠️ <strong>IMPORTANTE:</strong> Anote esta senha! Você precisará repassá-la manualmente
+											ao usuário até que o SMTP seja configurado.
+										</p>
+									</div>
+								</div>
+							{/if}
+						</div>
+					</div>
 
-          <div class="alert alert-info mt-6">
-            <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">Informações Importantes</h3>
-              <ul class="text-sm list-disc list-inside mt-2 space-y-1">
-                <li>O usuário deverá alterar a senha no primeiro acesso</li>
-                <li>
-                  As credenciais devem ser repassadas manualmente (por enquanto)
-                </li>
-                <li>
-                  Configure o SMTP em <a
-                    href="/ti/configuracoes-email"
-                    class="link">Configurações de Email</a
-                  > para envio automático
-                </li>
-              </ul>
-            </div>
-          </div>
+					<div class="alert alert-info mt-6">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							class="h-6 w-6 shrink-0 stroke-current"
+						>
+							<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">Informações Importantes</h3>
+							<ul class="mt-2 list-inside list-disc space-y-1 text-sm">
+								<li>O usuário deverá alterar a senha no primeiro acesso</li>
+								<li>As credenciais devem ser repassadas manualmente (por enquanto)</li>
+								<li>
+									Configure o SMTP em <a href="/ti/configuracoes-email" class="link"
+										>Configurações de Email</a
+									> para envio automático
+								</li>
+							</ul>
+						</div>
+					</div>
 
-          <div
-            class="card-actions justify-end mt-8 pt-6 border-t border-base-300"
-          >
-            <a
-              href="/ti/usuarios"
-              class="btn btn-ghost gap-2"
-              class:btn-disabled={processando}
-            >
-              <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="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-              Cancelar
-            </a>
-            <button
-              type="submit"
-              class="btn btn-primary gap-2"
-              disabled={processando}
-            >
-              {#if processando}
-                <span class="loading loading-spinner loading-sm"></span>
-                Criando Usuário...
-              {:else}
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M5 13l4 4L19 7"
-                  />
-                </svg>
-                Criar Usuário
-              {/if}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
+					<div class="card-actions border-base-300 mt-8 justify-end border-t pt-6">
+						<a href="/ti/usuarios" class="btn gap-2" class:btn-disabled={processando}>
+							<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="M6 18L18 6M6 6l12 12"
+								/>
+							</svg>
+							Cancelar
+						</a>
+						<button type="submit" class="btn btn-primary gap-2" disabled={processando}>
+							{#if processando}
+								<span class="loading loading-spinner loading-sm"></span>
+								Criando Usuário...
+							{:else}
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M5 13l4 4L19 7"
+									/>
+								</svg>
+								Criar Usuário
+							{/if}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
 </ProtectedRoute>