diff --git a/apps/web/package.json b/apps/web/package.json
index fb6349c..61cc60c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -28,6 +28,7 @@
     "vite": "^7.1.2"
   },
   "dependencies": {
+    "eslint": "catalog:",
     "@convex-dev/better-auth": "^0.9.7",
     "@dicebear/collection": "^9.2.4",
     "@dicebear/core": "^9.2.4",
@@ -43,10 +44,9 @@
     "@types/papaparse": "^5.3.14",
     "better-auth": "catalog:",
     "convex": "catalog:",
-    "convex-svelte": "^0.0.12",
+    "convex-svelte": "^0.0.11",
     "date-fns": "^4.1.0",
     "emoji-picker-element": "^1.27.0",
-    "eslint": "catalog:",
     "is-network-error": "^1.3.0",
     "jspdf": "^3.0.3",
     "jspdf-autotable": "^5.0.2",
diff --git a/apps/web/src/lib/components/AprovarAusencias.svelte b/apps/web/src/lib/components/AprovarAusencias.svelte
index 7dc5b55..49b6072 100644
--- a/apps/web/src/lib/components/AprovarAusencias.svelte
+++ b/apps/web/src/lib/components/AprovarAusencias.svelte
@@ -1,414 +1,426 @@
 <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-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>
+  <!-- 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>
 
-	<!-- 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>
+  <!-- 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>
 
-			<div class="divider"></div>
+      <div class="divider"></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>
+      <!-- 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>
 
-			<div class="divider"></div>
+      <div class="divider"></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>
+      <!-- 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>
 
-			<!-- 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="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}
+      <!-- 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}
 
-			<!-- 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>
+      <!-- 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>
 
-				<!-- 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}
+        <!-- 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}
 
-			<!-- 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>
+      <!-- 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>
 </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 7dc924e..f15afe9 100644
--- a/apps/web/src/lib/components/AprovarFerias.svelte
+++ b/apps/web/src/lib/components/AprovarFerias.svelte
@@ -1,462 +1,384 @@
 <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="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 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>
+
diff --git a/apps/web/src/lib/components/ErrorModal.svelte b/apps/web/src/lib/components/ErrorModal.svelte
index 5ccc653..ba035d8 100644
--- a/apps/web/src/lib/components/ErrorModal.svelte
+++ b/apps/web/src/lib/components/ErrorModal.svelte
@@ -1,73 +1,82 @@
 <script lang="ts">
-	import { AlertCircle, X } from 'lucide-svelte';
+  import { AlertCircle, X } from "lucide-svelte";
+  
+  interface Props {
+    open: boolean;
+    title?: string;
+    message: string;
+    details?: string;
+    onClose: () => void;
+  }
 
-	interface Props {
-		open: boolean;
-		title?: string;
-		message: string;
-		details?: string;
-		onClose: () => void;
-	}
+  let {
+    open = $bindable(false),
+    title = "Erro",
+    message,
+    details,
+    onClose,
+  }: Props = $props();
 
-	let { open = $bindable(false), title = 'Erro', message, details, onClose }: Props = $props();
+  let modalRef: HTMLDialogElement;
 
-	let modalRef: HTMLDialogElement;
+  function handleClose() {
+    open = false;
+    onClose();
+  }
 
-	function handleClose() {
-		open = false;
-		onClose();
-	}
-
-	$effect(() => {
-		if (open && modalRef) {
-			modalRef.showModal();
-		} else if (!open && modalRef) {
-			modalRef.close();
-		}
-	});
+  $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="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>
+  <dialog 
+    bind:this={modalRef} 
+    class="modal" 
+    onclick={(e) => e.target === e.currentTarget && handleClose()}
+  >
+    <div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
+      <!-- Header -->
+      <div class="flex items-center justify-between px-6 py-4 border-b border-base-300">
+        <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2 text-error">
+          <AlertCircle class="w-5 h-5" strokeWidth={2} />
+          {title}
+        </h2>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm btn-circle"
+          onclick={handleClose}
+          aria-label="Fechar"
+        >
+          <X class="w-5 h-5" />
+        </button>
+      </div>
 
-			<!-- Content -->
-			<div class="px-6 py-6">
-				<p class="text-base-content mb-4">{message}</p>
-				{#if details}
-					<div class="bg-base-200 mb-4 rounded-lg p-4">
-						<p class="text-base-content/70 text-sm 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 rounded-lg p-4 mb-4">
+            <p class="text-sm text-base-content/70 whitespace-pre-line">{details}</p>
+          </div>
+        {/if}
+      </div>
 
-			<!-- Footer -->
-			<div class="modal-action px-6 pb-6">
-				<button class="btn btn-primary" onclick={handleClose}> Fechar </button>
-			</div>
-		</div>
+      <!-- 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 7355f18..544dcd4 100644
--- a/apps/web/src/lib/components/FuncionarioSelect.svelte
+++ b/apps/web/src/lib/components/FuncionarioSelect.svelte
@@ -1,187 +1,189 @@
 <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 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="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="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="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 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 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 && 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 && 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 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 funcionarioSelecionado}
-		<div class="text-base-content/60 mt-1 text-xs">
-			Selecionado: {funcionarioSelecionado.nome}
-			{#if funcionarioSelecionado.matricula}
-				- {funcionarioSelecionado.matricula}
-			{/if}
-		</div>
-	{/if}
+  {#if funcionarioSelecionado}
+    <div class="text-xs text-base-content/60 mt-1">
+      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 0995b0f..0811111 100644
--- a/apps/web/src/lib/components/PrintModal.svelte
+++ b/apps/web/src/lib/components/PrintModal.svelte
@@ -1,27 +1,23 @@
 <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({
@@ -61,98 +57,127 @@
     });
   }
 
-	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 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 proporcional: largura 25mm, altura ajustada automaticamente
-				const logoWidth = 25;
-				const aspectRatio = logoImg.height / logoImg.width;
-				const logoHeight = logoWidth * aspectRatio;
+      // 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;
 
-				doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
+      // 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],
+        ];
 
-				// 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);
-			}
+        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]);
 
-			// 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);
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['DADOS PESSOAIS', '']],
+          body: dadosPessoais,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
 
-			yPosition = Math.max(45, yPosition + 25);
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
 
-			// Título da ficha
-			doc.setFontSize(18);
-			doc.setFont('helvetica', 'bold');
-			doc.text('FICHA CADASTRAL DE FUNCIONÁRIO', 105, yPosition, { align: 'center' });
+      // 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 += 8;
-			doc.setFontSize(10);
-			doc.setFont('helvetica', 'normal');
-			doc.text(`Gerado em: ${new Date().toLocaleString('pt-BR')}`, 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 += 12;
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
 
-			// 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]
-				];
+      // 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]);
 
-				if (funcionario.rgOrgaoExpedidor)
-					dadosPessoais.push(['Órgão Expedidor RG', funcionario.rgOrgaoExpedidor]);
-				if (funcionario.rgDataEmissao)
-					dadosPessoais.push(['Data Emissão RG', funcionario.rgDataEmissao]);
-				if (funcionario.sexo)
-					dadosPessoais.push(['Sexo', getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)]);
-				if (funcionario.estadoCivil)
-					dadosPessoais.push([
-						'Estado Civil',
-						getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)
-					]);
-				if (funcionario.nacionalidade)
-					dadosPessoais.push(['Nacionalidade', funcionario.nacionalidade]);
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['NATURALIDADE', '']],
+          body: naturalidade,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
 
-				autoTable(doc, {
-					startY: yPosition,
-					head: [['DADOS PESSOAIS', '']],
-					body: dadosPessoais,
-					theme: 'grid',
-					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-					styles: { fontSize: 9 }
-				});
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
 
       // Documentos
       if (sections.documentos) {
@@ -175,124 +200,108 @@
         }
         if (funcionario.pisNumero) documentosData.push(['PIS/PASEP', funcionario.pisNumero]);
 
-			// 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]);
+        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: [['FILIAÇÃO', '']],
-					body: filiacao,
-					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]);
 
-			// Naturalidade
-			if (sections.naturalidade && (funcionario.naturalidade || funcionario.naturalidadeUF)) {
-				const naturalidade: any[] = [];
-				if (funcionario.naturalidade) naturalidade.push(['Cidade', funcionario.naturalidade]);
-				if (funcionario.naturalidadeUF) naturalidade.push(['UF', funcionario.naturalidadeUF]);
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['FORMAÇÃO', '']],
+          body: formacaoData,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
 
-				autoTable(doc, {
-					startY: yPosition,
-					head: [['NATURALIDADE', '']],
-					body: naturalidade,
-					theme: 'grid',
-					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-					styles: { fontSize: 9 }
-				});
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
 
-				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)]);
 
-			// Documentos
-			if (sections.documentos) {
-				const documentosData: any[] = [];
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['SAÚDE', '']],
+          body: saudeData,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
 
-				if (funcionario.carteiraProfissionalNumero) {
-					documentosData.push([
-						'Cart. Profissional',
-						`Nº ${funcionario.carteiraProfissionalNumero}${funcionario.carteiraProfissionalSerie ? ' - Série: ' + funcionario.carteiraProfissionalSerie : ''}`
-					]);
-				}
-				if (funcionario.reservistaNumero) {
-					documentosData.push([
-						'Reservista',
-						`Nº ${funcionario.reservistaNumero}${funcionario.reservistaSerie ? ' - Série: ' + funcionario.reservistaSerie : ''}`
-					]);
-				}
-				if (funcionario.tituloEleitorNumero) {
-					let titulo = `Nº ${funcionario.tituloEleitorNumero}`;
-					if (funcionario.tituloEleitorZona) titulo += ` - Zona: ${funcionario.tituloEleitorZona}`;
-					if (funcionario.tituloEleitorSecao)
-						titulo += ` - Seção: ${funcionario.tituloEleitorSecao}`;
-					documentosData.push(['Título Eleitor', titulo]);
-				}
-				if (funcionario.pisNumero) documentosData.push(['PIS/PASEP', funcionario.pisNumero]);
+        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 }
-					});
+      // Endereço
+      if (sections.endereco) {
+        const enderecoData: any[] = [
+          ['Endereço', funcionario.endereco],
+          ['Cidade', funcionario.cidade],
+          ['UF', funcionario.uf],
+          ['CEP', maskCEP(funcionario.cep)],
+        ];
 
-					yPosition = (doc as any).lastAutoTable.finalY + 10;
-				}
-			}
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['ENDEREÇO', '']],
+          body: enderecoData,
+          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 }
-				});
+      // Contato
+      if (sections.contato) {
+        const contatoData: any[] = [
+          ['E-mail', funcionario.email],
+          ['Telefone', maskPhone(funcionario.telefone)],
+        ];
 
-				yPosition = (doc as any).lastAutoTable.finalY + 10;
-			}
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['CONTATO', '']],
+          body: contatoData,
+          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 }
-				});
+      // Nova página para cargo
+      if (yPosition > 200) {
+        doc.addPage();
+        yPosition = 20;
+      }
 
-				yPosition = (doc as any).lastAutoTable.finalY + 10;
-			}
+      // Cargo e Vínculo
+      if (sections.cargo) {
+        const cargoData: any[] = [
+          ['Tipo', funcionario.simboloTipo === 'cargo_comissionado' ? 'Cargo Comissionado' : 'Função Gratificada'],
+        ];
 
         const simboloInfo = funcionario.simbolo ?? funcionario.simboloDetalhes ?? funcionario.simboloDados;
         if (simboloInfo) {
@@ -311,17 +320,17 @@
           cargoData.push(['Aposentado', getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)]);
         }
 
-				autoTable(doc, {
-					startY: yPosition,
-					head: [['ENDEREÇO', '']],
-					body: enderecoData,
-					theme: 'grid',
-					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-					styles: { fontSize: 9 }
-				});
+        autoTable(doc, {
+          startY: yPosition,
+          head: [['CARGO E VÍNCULO', '']],
+          body: cargoData,
+          theme: 'grid',
+          headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+          styles: { fontSize: 9 },
+        });
 
-				yPosition = (doc as any).lastAutoTable.finalY + 10;
-			}
+        yPosition = (doc as any).lastAutoTable.finalY + 10;
+      }
 
       // Dados Financeiros
       if (sections.financeiro && funcionario.simbolo) {
@@ -360,199 +369,111 @@
         ];
         if (funcionario.contaBradescoAgencia) bancarioData.push(['Agência', funcionario.contaBradescoAgencia]);
 
-				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 BANCÁRIOS - BRADESCO', '']],
+          body: bancarioData,
+          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;
-			}
+      // 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' });
+      }
 
-			// Cargo e Vínculo
-			if (sections.cargo) {
-				const cargoData: any[] = [
-					[
-						'Tipo',
-						funcionario.simboloTipo === 'cargo_comissionado'
-							? 'Cargo Comissionado'
-							: 'Função Gratificada'
-					]
-				];
+      // Salvar PDF
+      doc.save(`Ficha_${funcionario.nome.replace(/ /g, '_')}_${new Date().getTime()}.pdf`);
 
-				if (funcionario.simbolo) {
-					cargoData.push(['Símbolo', funcionario.simbolo.nome]);
-				}
-				if (funcionario.descricaoCargo) cargoData.push(['Descrição', funcionario.descricaoCargo]);
-				if (funcionario.admissaoData) cargoData.push(['Data Admissão', funcionario.admissaoData]);
-				if (funcionario.nomeacaoPortaria)
-					cargoData.push(['Portaria', funcionario.nomeacaoPortaria]);
-				if (funcionario.nomeacaoData) cargoData.push(['Data Nomeação', funcionario.nomeacaoData]);
-				if (funcionario.nomeacaoDOE) cargoData.push(['DOE', funcionario.nomeacaoDOE]);
-				if (funcionario.pertenceOrgaoPublico) {
-					cargoData.push(['Pertence Órgão Público', 'Sim']);
-					if (funcionario.orgaoOrigem) cargoData.push(['Órgão Origem', funcionario.orgaoOrigem]);
-				}
-				if (funcionario.aposentado && funcionario.aposentado !== 'nao') {
-					cargoData.push([
-						'Aposentado',
-						getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)
-					]);
-				}
+      onClose();
+    } catch (error) {
+      console.error('Erro ao gerar PDF:', error);
+      alert('Erro ao gerar PDF. Verifique o console para mais detalhes.');
+    } finally {
+      generating = false;
+    }
+  }
 
-				autoTable(doc, {
-					startY: yPosition,
-					head: [['CARGO E VÍNCULO', '']],
-					body: cargoData,
-					theme: 'grid',
-					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-					styles: { fontSize: 9 }
-				});
-
-				yPosition = (doc as any).lastAutoTable.finalY + 10;
-			}
-
-			// Dados Bancários
-			if (sections.bancario && funcionario.contaBradescoNumero) {
-				const bancarioData: any[] = [
-					[
-						'Conta',
-						`${funcionario.contaBradescoNumero}${funcionario.contaBradescoDV ? '-' + funcionario.contaBradescoDV : ''}`
-					]
-				];
-				if (funcionario.contaBradescoAgencia)
-					bancarioData.push(['Agência', funcionario.contaBradescoAgencia]);
-
-				autoTable(doc, {
-					startY: yPosition,
-					head: [['DADOS BANCÁRIOS - BRADESCO', '']],
-					body: bancarioData,
-					theme: 'grid',
-					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
-					styles: { fontSize: 9 }
-				});
-
-				yPosition = (doc as any).lastAutoTable.finalY + 10;
-			}
-
-			// Adicionar rodapé em todas as páginas
-			const pageCount = (doc as any).internal.getNumberOfPages();
-			for (let i = 1; i <= pageCount; i++) {
-				doc.setPage(i);
-				doc.setFontSize(9);
-				doc.setFont('helvetica', 'normal');
-				doc.setTextColor(128, 128, 128);
-				doc.text('SGSE - Sistema de Gerenciamento da Secretaria de Esportes', 105, 285, {
-					align: 'center'
-				});
-				doc.text(`Página ${i} de ${pageCount}`, 195, 285, { align: 'right' });
-			}
-
-			// Salvar PDF
-			doc.save(`Ficha_${funcionario.nome.replace(/ /g, '_')}_${new Date().getTime()}.pdf`);
-
-			onClose();
-		} catch (error) {
-			console.error('Erro ao gerar PDF:', error);
-			alert('Erro ao gerar PDF. Verifique o console para mais detalhes.');
-		} finally {
-			generating = false;
-		}
-	}
-
-	$effect(() => {
-		if (modalRef) {
-			modalRef.showModal();
-		}
-	});
+  $effect(() => {
+    if (modalRef) {
+      modalRef.showModal();
+    }
+  });
 </script>
 
 <dialog bind:this={modalRef} class="modal">
-	<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>
+  <div class="modal-box max-w-4xl">
+    <h3 class="font-bold text-2xl mb-4">Imprimir Ficha Cadastral</h3>
+    <p class="text-sm text-base-content/70 mb-6">Selecione as seções que deseja incluir no PDF</p>
 
-		<!-- Botões de seleção -->
-		<div class="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>
+    <!-- Botões de seleção -->
+    <div class="flex gap-2 mb-6">
+      <button type="button" class="btn btn-sm btn-outline" onclick={selectAll}>
+        <CheckCircle2 class="h-4 w-4" strokeWidth={2} />
+        Selecionar Todos
+      </button>
+      <button type="button" class="btn btn-sm btn-outline" onclick={deselectAll}>
+        <X class="h-4 w-4" strokeWidth={2} />
+        Desmarcar Todos
+      </button>
+    </div>
 
-		<!-- Grid de checkboxes -->
-		<div
-			class="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>
+    <!-- Grid de checkboxes -->
+    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6 max-h-96 overflow-y-auto p-2 border rounded-lg bg-base-200">
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.dadosPessoais} />
+        <span class="label-text">Dados Pessoais</span>
+      </label>
 
-			<label class="label cursor-pointer justify-start gap-3">
-				<input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.filiacao} />
-				<span class="label-text">Filiação</span>
-			</label>
+      <label class="label cursor-pointer justify-start gap-3">
+        <input type="checkbox" class="checkbox checkbox-primary" bind:checked={sections.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} />
@@ -565,22 +486,25 @@
       </label>
     </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>
+    <!-- Ações -->
+    <div class="modal-action">
+      <button type="button" class="btn btn-ghost" onclick={onClose} disabled={generating}>
+        Cancelar
+      </button>
+      <button type="button" class="btn btn-primary gap-2" onclick={gerarPDF} disabled={generating}>
+        {#if generating}
+          <span class="loading loading-spinner loading-sm"></span>
+          Gerando PDF...
+        {:else}
+          <Printer class="h-5 w-5" strokeWidth={2} />
+          Gerar PDF
+        {/if}
+      </button>
+    </div>
+  </div>
 
-	<form method="dialog" class="modal-backdrop">
-		<button type="button" onclick={onClose}>fechar</button>
-	</form>
+  <form method="dialog" class="modal-backdrop">
+    <button type="button" onclick={onClose}>fechar</button>
+  </form>
 </dialog>
+
diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index b1d7e01..f184db7 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -1,622 +1,661 @@
 <script lang="ts">
-	import { page } from '$app/state';
-	import { goto } from '$app/navigation';
-	import logo from '$lib/assets/logo_governo_PE.png';
-	import type { Snippet } from 'svelte';
-	import { loginModalStore } from '$lib/stores/loginModal.svelte';
-	import { useQuery } from 'convex-svelte';
-	import { api } from '@sgse-app/backend/convex/_generated/api';
-	import NotificationBell from '$lib/components/chat/NotificationBell.svelte';
-	import ChatWidget from '$lib/components/chat/ChatWidget.svelte';
-	import PresenceManager from '$lib/components/chat/PresenceManager.svelte';
-	import { getAvatarUrl } from '$lib/utils/avatarGenerator';
-	import { Menu, User, Home, UserPlus, XCircle, LogIn, Tag, Plus, Check } from 'lucide-svelte';
-	import { authClient } from '$lib/auth';
-	import { resolve } from '$app/paths';
+  import { page } from "$app/state";
+  import { goto } from "$app/navigation";
+  import logo from "$lib/assets/logo_governo_PE.png";
+  import type { Snippet } from "svelte";
+  import { loginModalStore } from "$lib/stores/loginModal.svelte";
+  import { useQuery } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import NotificationBell from "$lib/components/chat/NotificationBell.svelte";
+  import ChatWidget from "$lib/components/chat/ChatWidget.svelte";
+  import PresenceManager from "$lib/components/chat/PresenceManager.svelte";
+  import { getAvatarUrl } from "$lib/utils/avatarGenerator";
+  import {
+    Menu,
+    User,
+    Home,
+    UserPlus,
+    XCircle,
+    LogIn,
+    Tag,
+    Plus,
+    Check,
+  } from "lucide-svelte";
+  import { authClient } from "$lib/auth";
 
-	let { children }: { children: Snippet } = $props();
+  let { children }: { children: Snippet } = $props();
 
-	const currentPath = $derived(page.url.pathname);
+  const currentPath = $derived(page.url.pathname);
 
-	const currentUser = useQuery(api.auth.getCurrentUser, {});
+  const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-	// Função para obter a URL do avatar/foto do usuário
-	const avatarUrlDoUsuario = $derived(() => {
-		if (!currentUser.data) return null;
+  // Função para obter a URL do avatar/foto do usuário
+  const avatarUrlDoUsuario = $derived(() => {
+    if (!currentUser.data) return null;
 
-		// Prioridade: fotoPerfilUrl > avatar > fallback com nome
-		if (currentUser.data.fotoPerfilUrl) {
-			return currentUser.data.fotoPerfilUrl;
-		}
+    // Prioridade: fotoPerfilUrl > avatar > fallback com nome
+    if (currentUser.data.fotoPerfil) {
+      return currentUser.data.fotoPerfil;
+    }
 
-		if (currentUser.data.avatar) {
-			return currentUser.data.avatar;
-		}
+    // Fallback: gerar avatar baseado no nome
+    return getAvatarUrl(currentUser.data.nome);
+  });
 
-		// Fallback: gerar avatar baseado no nome
-		return getAvatarUrl(currentUser.data.nome);
-	});
+  // Função para gerar classes do menu ativo
+  function getMenuClasses(isActive: boolean) {
+    const baseClasses =
+      "group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
 
-	// Função para gerar classes do menu ativo
-	function getMenuClasses(isActive: boolean) {
-		const baseClasses =
-			'group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105';
+    if (isActive) {
+      return `${baseClasses} border-primary bg-primary text-white shadow-lg scale-105`;
+    }
 
-		if (isActive) {
-			return `${baseClasses} border-primary bg-primary text-white shadow-lg scale-105`;
-		}
+    return `${baseClasses} border-primary/30 bg-linear-to-br from-base-100 to-base-200 text-base-content hover:from-primary hover:to-primary/80 hover:text-white`;
+  }
 
-		return `${baseClasses} border-primary/30 bg-linear-to-br from-base-100 to-base-200 text-base-content hover:from-primary hover:to-primary/80 hover:text-white`;
-	}
+  // Função para gerar classes do botão "Solicitar Acesso"
+  function getSolicitarClasses(isActive: boolean) {
+    const baseClasses =
+      "group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
 
-	// Função para gerar classes do botão "Solicitar Acesso"
-	function getSolicitarClasses(isActive: boolean) {
-		const baseClasses =
-			'group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105';
+    if (isActive) {
+      return `${baseClasses} border-success bg-success text-white shadow-lg scale-105`;
+    }
 
-		if (isActive) {
-			return `${baseClasses} border-success bg-success text-white shadow-lg scale-105`;
-		}
+    return `${baseClasses} border-success/30 bg-linear-to-br from-success/10 to-success/20 text-base-content hover:from-success hover:to-success/80 hover:text-white`;
+  }
 
-		return `${baseClasses} border-success/30 bg-linear-to-br from-success/10 to-success/20 text-base-content hover:from-success hover:to-success/80 hover:text-white`;
-	}
+  const setores = [
+    { nome: "Recursos Humanos", link: "/recursos-humanos" },
+    { nome: "Financeiro", link: "/financeiro" },
+    { nome: "Controladoria", link: "/controladoria" },
+    { nome: "Licitações", link: "/licitacoes" },
+    { nome: "Compras", link: "/compras" },
+    { nome: "Jurídico", link: "/juridico" },
+    { nome: "Comunicação", link: "/comunicacao" },
+    { nome: "Programas Esportivos", link: "/programas-esportivos" },
+    { nome: "Secretaria Executiva", link: "/secretaria-executiva" },
+    {
+      nome: "Secretaria de Gestão de Pessoas",
+      link: "/gestao-pessoas",
+    },
+    { nome: "Tecnologia da Informação", link: "/ti" },
+  ];
 
-	const setores = [
-		{ nome: 'Recursos Humanos', link: '/recursos-humanos' as const },
-		{ nome: 'Financeiro', link: '/financeiro' as const },
-		{ nome: 'Controladoria', link: '/controladoria' as const },
-		{ nome: 'Licitações', link: '/licitacoes' as const },
-		{ nome: 'Compras', link: '/compras' as const },
-		{ nome: 'Jurídico', link: '/juridico' as const },
-		{ nome: 'Comunicação', link: '/comunicacao' as const },
-		{ nome: 'Programas Esportivos', link: '/programas-esportivos' as const },
-		{ nome: 'Secretaria Executiva', link: '/secretaria-executiva' as const },
-		{
-			nome: 'Secretaria de Gestão de Pessoas',
-			link: '/gestao-pessoas' as const
-		},
-		{ nome: 'Tecnologia da Informação', link: '/ti' as const }
-	];
+  let showAboutModal = $state(false);
+  let matricula = $state("");
+  let senha = $state("");
+  let erroLogin = $state("");
+  let carregandoLogin = $state(false);
 
-	let showAboutModal = $state(false);
-	let matricula = $state('');
-	let senha = $state('');
-	let erroLogin = $state('');
-	let carregandoLogin = $state(false);
+  // Sincronizar com o store global
+  $effect(() => {
+    if (loginModalStore.showModal && !matricula && !senha) {
+      matricula = "";
+      senha = "";
+      erroLogin = "";
+    }
+  });
 
-	// Sincronizar com o store global
-	$effect(() => {
-		if (loginModalStore.showModal && !matricula && !senha) {
-			matricula = '';
-			senha = '';
-			erroLogin = '';
-		}
-	});
+  function openLoginModal() {
+    loginModalStore.open();
+    matricula = "";
+    senha = "";
+    erroLogin = "";
+  }
 
-	function openLoginModal() {
-		loginModalStore.open();
-		matricula = '';
-		senha = '';
-		erroLogin = '';
-	}
+  function closeLoginModal() {
+    loginModalStore.close();
+    matricula = "";
+    senha = "";
+    erroLogin = "";
+  }
 
-	function closeLoginModal() {
-		loginModalStore.close();
-		matricula = '';
-		senha = '';
-		erroLogin = '';
-	}
+  function openAboutModal() {
+    showAboutModal = true;
+  }
 
-	function openAboutModal() {
-		showAboutModal = true;
-	}
+  function closeAboutModal() {
+    showAboutModal = false;
+  }
 
-	function closeAboutModal() {
-		showAboutModal = false;
-	}
+  async function handleLogin(e: Event) {
+    e.preventDefault();
+    erroLogin = "";
+    carregandoLogin = true;
 
-	async function handleLogin(e: Event) {
-		e.preventDefault();
-		erroLogin = '';
-		carregandoLogin = true;
+    // const browserInfo = await getBrowserInfo();
 
-		// const browserInfo = await getBrowserInfo();
+    const result = await authClient.signIn.email(
+      { email: matricula.trim(), password: senha },
+      {
+        onError: (ctx) => {
+          alert(ctx.error.message);
+        },
+      },
+    );
 
-		const result = await authClient.signIn.email(
-			{ email: matricula.trim(), password: senha },
-			{
-				onError: (ctx) => {
-					alert(ctx.error.message);
-				}
-			}
-		);
+    if (result.data) {
+      closeLoginModal();
+      goto("/");
+    } else {
+      erroLogin = "Erro ao fazer login";
+    }
+  }
 
-		if (result.data) {
-			closeLoginModal();
-			goto(resolve('/'));
-		} else {
-			erroLogin = 'Erro ao fazer login';
-		}
-		carregandoLogin = false;
-	}
-
-	async function handleLogout() {
-		const result = await authClient.signOut();
-		if (result.error) {
-			console.error('Sign out error:', result.error);
-		}
-		goto(resolve('/'));
-	}
+  async function handleLogout() {
+    const result = await authClient.signOut();
+    if (result.error) {
+      console.error("Sign out error:", result.error);
+    }
+    goto("/");
+  }
 </script>
 
 <!-- Header Fixo acima de tudo -->
 <div
-	class="navbar from-primary/30 via-primary/20 to-primary/30 border-primary/10 fixed top-0 right-0 left-0 z-50 min-h-24 border-b bg-linear-to-r px-6 shadow-lg backdrop-blur-sm lg:px-8"
+  class="navbar bg-linear-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm shadow-lg border-b border-primary/10 px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-24"
 >
-	<div class="flex-none lg:hidden">
-		<label
-			for="my-drawer-3"
-			class="group relative flex h-14 w-14 cursor-pointer items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
-			style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
-			aria-label="Abrir menu"
-		>
-			<!-- Efeito de brilho no hover -->
-			<div
-				class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-			></div>
+  <div class="flex-none lg:hidden">
+    <label
+      for="my-drawer-3"
+      class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden cursor-pointer group transition-all duration-300 hover:scale-105"
+      style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
+      aria-label="Abrir menu"
+    >
+      <!-- Efeito de brilho no hover -->
+      <div
+        class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+      ></div>
 
-			<!-- Ícone de menu hambúrguer -->
-			<Menu
-				class="relative z-10 h-7 w-7 text-white transition-transform duration-300 group-hover:scale-110"
-				style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
-				strokeWidth={2.5}
-			/>
-		</label>
-	</div>
-	<div class="flex flex-1 items-center gap-4 lg:gap-6">
-		<!-- Logo MODERNO do Governo -->
-		<div class="avatar">
-			<div
-				class="group relative w-16 overflow-hidden rounded-2xl p-2 shadow-xl transition-all duration-300 hover:scale-105 lg:w-20"
-				style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid rgba(102, 126, 234, 0.1);"
-			>
-				<!-- Efeito de brilho no hover -->
-				<div
-					class="from-primary/5 absolute inset-0 bg-linear-to-br to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-				></div>
+      <!-- Ícone de menu hambúrguer -->
+      <Menu
+        class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
+        style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
+        strokeWidth={2.5}
+      />
+    </label>
+  </div>
+  <div class="flex-1 flex items-center gap-4 lg:gap-6">
+    <!-- Logo MODERNO do Governo -->
+    <div class="avatar">
+      <div
+        class="w-16 lg:w-20 rounded-2xl shadow-xl p-2 relative overflow-hidden group transition-all duration-300 hover:scale-105"
+        style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid rgba(102, 126, 234, 0.1);"
+      >
+        <!-- Efeito de brilho no hover -->
+        <div
+          class="absolute inset-0 bg-linear-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+        ></div>
 
-				<!-- Logo -->
-				<img
-					src={logo}
-					alt="Logo do Governo de PE"
-					class="relative z-10 h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
-					style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));"
-				/>
+        <!-- Logo -->
+        <img
+          src={logo}
+          alt="Logo do Governo de PE"
+          class="w-full h-full object-contain relative z-10 transition-transform duration-300 group-hover:scale-105"
+          style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));"
+        />
 
-				<!-- Brilho sutil no canto -->
-				<div
-					class="absolute top-0 right-0 h-8 w-8 rounded-bl-full bg-linear-to-br from-white/40 to-transparent opacity-70"
-				></div>
-			</div>
-		</div>
-		<div class="flex flex-col">
-			<h1 class="text-primary text-xl font-bold tracking-tight lg:text-3xl">SGSE</h1>
-			<p
-				class="text-base-content/80 hidden text-xs leading-tight font-medium sm:block lg:text-base"
-			>
-				Sistema de Gerenciamento da<br class="lg:hidden" /> Secretaria de Esportes
-			</p>
-		</div>
-	</div>
-	<div class="ml-auto flex flex-none items-center gap-4">
-		{#if currentUser.data}
-			<!-- Sino de notificações no canto superior direito -->
-			<div class="relative">
-				<NotificationBell />
-			</div>
+        <!-- Brilho sutil no canto -->
+        <div
+          class="absolute top-0 right-0 w-8 h-8 bg-linear-to-br from-white/40 to-transparent rounded-bl-full opacity-70"
+        ></div>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <h1 class="text-xl lg:text-3xl font-bold text-primary tracking-tight">
+        SGSE
+      </h1>
+      <p
+        class="text-xs lg:text-base text-base-content/80 hidden sm:block font-medium leading-tight"
+      >
+        Sistema de Gerenciamento da<br class="lg:hidden" /> Secretaria de Esportes
+      </p>
+    </div>
+  </div>
+  <div class="flex-none flex items-center gap-4 ml-auto">
+    {#if currentUser.data}
+      <!-- Sino de notificações no canto superior direito -->
+      <div class="relative">
+        <NotificationBell />
+      </div>
 
-			<div class="mr-2 hidden flex-col items-end lg:flex">
-				<span class="text-primary text-sm font-semibold">{currentUser.data.nome}</span>
-				<span class="text-base-content/60 text-xs">{currentUser.data.role?.nome}</span>
-			</div>
-			<div class="dropdown dropdown-end">
-				<!-- Botão de Perfil ULTRA MODERNO -->
-				<button
-					type="button"
-					tabindex="0"
-					class="group relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
-					style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
-					aria-label="Menu do usuário"
-				>
-					<!-- Efeito de brilho no hover -->
-					<div
-						class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-					></div>
+      <div class="hidden lg:flex flex-col items-end mr-2">
+        <span class="text-sm font-semibold text-primary"
+          >{currentUser.data.nome}</span
+        >
+        <span class="text-xs text-base-content/60"
+          >{currentUser.data.role?.nome}</span
+        >
+      </div>
+      <div class="dropdown dropdown-end">
+        <!-- Botão de Perfil ULTRA MODERNO -->
+        <button
+          type="button"
+          tabindex="0"
+          class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden group transition-all duration-300 hover:scale-105"
+          style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
+          aria-label="Menu do usuário"
+        >
+          <!-- Efeito de brilho no hover -->
+          <div
+            class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+          ></div>
 
-					<!-- Anel de pulso sutil -->
-					<div
-						class="absolute inset-0 rounded-2xl"
-						style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
-					></div>
+          <!-- Anel de pulso sutil -->
+          <div
+            class="absolute inset-0 rounded-2xl"
+            style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
+          ></div>
 
-					<!-- Avatar/Foto do usuário ou ícone padrão -->
-					{#if avatarUrlDoUsuario()}
-						<img
-							src={avatarUrlDoUsuario()}
-							alt={currentUser.data?.nome || 'Usuário'}
-							class="relative z-10 h-full w-full object-cover"
-						/>
-					{:else}
-						<!-- Ícone de usuário moderno (fallback) -->
-						<User
-							class="relative z-10 h-7 w-7 text-white transition-transform duration-300 group-hover:scale-110"
-							style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
-						/>
-					{/if}
+          <!-- Avatar/Foto do usuário ou ícone padrão -->
+          {#if avatarUrlDoUsuario()}
+            <img
+              src={avatarUrlDoUsuario()}
+              alt={currentUser.data?.nome || "Usuário"}
+              class="w-full h-full object-cover relative z-10"
+            />
+          {:else}
+            <!-- Ícone de usuário moderno (fallback) -->
+            <User
+              class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
+              style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
+            />
+          {/if}
 
-					<!-- Badge de status online -->
-					<div
-						class="bg-success absolute top-1 right-1 z-20 h-3 w-3 rounded-full border-2 border-white shadow-lg"
-						style="animation: pulse-dot 2s ease-in-out infinite;"
-					></div>
-				</button>
-				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-				<ul
-					tabindex="0"
-					class="dropdown-content menu bg-base-100 rounded-box border-primary/20 z-1 mt-4 w-52 border p-2 shadow-xl"
-				>
-					<li class="menu-title">
-						<span class="text-primary font-bold">{currentUser.data?.nome}</span>
-					</li>
-					<li><a href={resolve('/perfil')}>Meu Perfil</a></li>
-					<li><a href={resolve('/alterar-senha')}>Alterar Senha</a></li>
-					<div class="divider my-0"></div>
-					<li>
-						<button type="button" onclick={handleLogout} class="text-error">Sair</button>
-					</li>
-				</ul>
-			</div>
-		{:else}
-			<button
-				type="button"
-				class="btn btn-lg hover:shadow-primary/30 group from-primary via-primary to-primary/80 hover:from-primary/90 hover:via-primary/80 hover:to-primary/70 relative overflow-hidden border-0 bg-linear-to-br shadow-2xl transition-all duration-500 hover:scale-110"
-				style="width: 4rem; height: 4rem; border-radius: 9999px;"
-				onclick={() => openLoginModal()}
-				aria-label="Login"
-			>
-				<!-- Efeito de brilho animado -->
-				<div
-					class="absolute inset-0 -translate-x-full bg-linear-to-r from-transparent via-white/30 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
-				></div>
+          <!-- Badge de status online -->
+          <div
+            class="absolute top-1 right-1 w-3 h-3 bg-success rounded-full border-2 border-white shadow-lg z-20"
+            style="animation: pulse-dot 2s ease-in-out infinite;"
+          ></div>
+        </button>
+        <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+        <ul
+          tabindex="0"
+          class="dropdown-content z-1 menu p-2 shadow-xl bg-base-100 rounded-box w-52 mt-4 border border-primary/20"
+        >
+          <li class="menu-title">
+            <span class="text-primary font-bold">{currentUser.data?.nome}</span>
+          </li>
+          <li><a href="/perfil">Meu Perfil</a></li>
+          <li><a href="/alterar-senha">Alterar Senha</a></li>
+          <div class="divider my-0"></div>
+          <li>
+            <button type="button" onclick={handleLogout} class="text-error"
+              >Sair</button
+            >
+          </li>
+        </ul>
+      </div>
+    {:else}
+      <button
+        type="button"
+        class="btn btn-lg shadow-2xl hover:shadow-primary/30 transition-all duration-500 hover:scale-110 group relative overflow-hidden border-0 bg-linear-to-br from-primary via-primary to-primary/80 hover:from-primary/90 hover:via-primary/80 hover:to-primary/70"
+        style="width: 4rem; height: 4rem; border-radius: 9999px;"
+        onclick={() => openLoginModal()}
+        aria-label="Login"
+      >
+        <!-- Efeito de brilho animado -->
+        <div
+          class="absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"
+        ></div>
 
-				<!-- Anel pulsante de fundo -->
-				<div class="absolute inset-0 rounded-full bg-white/10 group-hover:animate-ping"></div>
+        <!-- Anel pulsante de fundo -->
+        <div
+          class="absolute inset-0 rounded-full bg-white/10 group-hover:animate-ping"
+        ></div>
 
-				<!-- Ícone de login premium -->
-				<User
-					class="relative z-10 h-8 w-8 text-white transition-all duration-500 group-hover:scale-110"
-					style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
-					strokeWidth={2.5}
-				/>
-			</button>
-		{/if}
-	</div>
+        <!-- Ícone de login premium -->
+        <User
+          class="h-8 w-8 relative z-10 text-white group-hover:scale-110 transition-all duration-500"
+          style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
+          strokeWidth={2.5}
+        />
+      </button>
+    {/if}
+  </div>
 </div>
 
 <div class="drawer lg:drawer-open" style="margin-top: 96px;">
-	<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
-	<div class="drawer-content flex flex-col lg:ml-72" style="min-height: calc(100vh - 96px);">
-		<!-- Page content -->
-		<div class="flex-1 overflow-y-auto">
-			{@render children?.()}
-		</div>
+  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+  <div
+    class="drawer-content flex flex-col lg:ml-72"
+    style="min-height: calc(100vh - 96px);"
+  >
+    <!-- Page content -->
+    <div class="flex-1 overflow-y-auto">
+      {@render children?.()}
+    </div>
 
-		<!-- Footer -->
-		<footer
-			class="footer footer-center from-primary/30 via-primary/20 to-primary/30 text-base-content border-primary/20 shrink-0 border-t-2 bg-linear-to-r p-6 shadow-inner backdrop-blur-sm"
-		>
-			<div class="grid grid-flow-col gap-6 text-sm font-medium">
-				<button
-					type="button"
-					class="link link-hover hover:text-primary transition-colors"
-					onclick={() => openAboutModal()}>Sobre</button
-				>
-				<span class="text-base-content/30">•</span>
-				<a href={resolve('/')} class="link link-hover hover:text-primary transition-colors"
-					>Contato</a
-				>
-				<span class="text-base-content/30">•</span>
-				<a href={resolve('/')} class="link link-hover hover:text-primary transition-colors"
-					>Suporte</a
-				>
-				<span class="text-base-content/30">•</span>
-				<a href={resolve('/')} class="link link-hover hover:text-primary transition-colors"
-					>Privacidade</a
-				>
-			</div>
-			<div class="mt-2 flex items-center gap-3">
-				<div class="avatar">
-					<div class="w-10 rounded-lg bg-white p-1.5 shadow-md">
-						<img src={logo} alt="Logo" class="h-full w-full object-contain" />
-					</div>
-				</div>
-				<div class="text-left">
-					<p class="text-primary text-xs font-bold">Governo do Estado de Pernambuco</p>
-					<p class="text-base-content/70 text-xs">Secretaria de Esportes</p>
-				</div>
-			</div>
-			<p class="text-base-content/60 mt-2 text-xs">
-				© {new Date().getFullYear()} - Todos os direitos reservados
-			</p>
-		</footer>
-	</div>
-	<div class="drawer-side fixed z-40" style="margin-top: 96px;">
-		<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
-		<div
-			class="menu from-primary/25 to-primary/15 border-primary/20 flex h-[calc(100vh-96px)] w-72 flex-col gap-2 overflow-y-auto border-r-2 bg-linear-to-b p-4 shadow-xl backdrop-blur-sm"
-		>
-			<!-- Sidebar menu items -->
-			<ul class="flex flex-col gap-2">
-				<li class="rounded-xl">
-					<a href={resolve('/')} class={getMenuClasses(currentPath === '/')}>
-						<Home class="h-5 w-5 transition-transform group-hover:scale-110" strokeWidth={2} />
-						<span>Dashboard</span>
-					</a>
-				</li>
-				{#each setores as s (s.link)}
-					{@const isActive = currentPath.startsWith(s.link)}
-					<li class="rounded-xl">
-						<a
-							href={resolve(s.link)}
-							aria-current={isActive ? 'page' : undefined}
-							class={getMenuClasses(isActive)}
-						>
-							<span>{s.nome}</span>
-						</a>
-					</li>
-				{/each}
-				<li class="mt-auto rounded-xl">
-					<a
-						href={resolve('/solicitar-acesso')}
-						class={getSolicitarClasses(currentPath === '/solicitar-acesso')}
-					>
-						<UserPlus class="h-5 w-5" strokeWidth={2} />
-						<span>Solicitar acesso</span>
-					</a>
-				</li>
-			</ul>
-		</div>
-	</div>
+    <!-- Footer -->
+    <footer
+      class="footer footer-center bg-linear-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm text-base-content p-6 border-t-2 border-primary/20 shadow-inner shrink-0"
+    >
+      <div class="grid grid-flow-col gap-6 text-sm font-medium">
+        <button
+          type="button"
+          class="link link-hover hover:text-primary transition-colors"
+          onclick={() => openAboutModal()}>Sobre</button
+        >
+        <span class="text-base-content/30">•</span>
+        <a href="/" class="link link-hover hover:text-primary transition-colors"
+          >Contato</a
+        >
+        <span class="text-base-content/30">•</span>
+        <a href="/" class="link link-hover hover:text-primary transition-colors"
+          >Suporte</a
+        >
+        <span class="text-base-content/30">•</span>
+        <a href="/" class="link link-hover hover:text-primary transition-colors"
+          >Privacidade</a
+        >
+      </div>
+      <div class="flex items-center gap-3 mt-2">
+        <div class="avatar">
+          <div class="w-10 rounded-lg bg-white p-1.5 shadow-md">
+            <img src={logo} alt="Logo" class="w-full h-full object-contain" />
+          </div>
+        </div>
+        <div class="text-left">
+          <p class="text-xs font-bold text-primary">
+            Governo do Estado de Pernambuco
+          </p>
+          <p class="text-xs text-base-content/70">Secretaria de Esportes</p>
+        </div>
+      </div>
+      <p class="text-xs text-base-content/60 mt-2">
+        © {new Date().getFullYear()} - Todos os direitos reservados
+      </p>
+    </footer>
+  </div>
+  <div class="drawer-side z-40 fixed" style="margin-top: 96px;">
+    <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
+    ></label>
+    <div
+      class="menu bg-linear-to-b from-primary/25 to-primary/15 backdrop-blur-sm w-72 p-4 flex flex-col gap-2 h-[calc(100vh-96px)] overflow-y-auto border-r-2 border-primary/20 shadow-xl"
+    >
+      <!-- Sidebar menu items -->
+      <ul class="flex flex-col gap-2">
+        <li class="rounded-xl">
+          <a href="/" class={getMenuClasses(currentPath === "/")}>
+            <Home
+              class="h-5 w-5 group-hover:scale-110 transition-transform"
+              strokeWidth={2}
+            />
+            <span>Dashboard</span>
+          </a>
+        </li>
+        {#each setores as s}
+          {@const isActive = currentPath.startsWith(s.link)}
+          <li class="rounded-xl">
+            <a
+              href={s.link}
+              aria-current={isActive ? "page" : undefined}
+              class={getMenuClasses(isActive)}
+            >
+              <span>{s.nome}</span>
+            </a>
+          </li>
+        {/each}
+        <li class="rounded-xl mt-auto">
+          <a
+            href="/solicitar-acesso"
+            class={getSolicitarClasses(currentPath === "/solicitar-acesso")}
+          >
+            <UserPlus class="h-5 w-5" strokeWidth={2} />
+            <span>Solicitar acesso</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
 </div>
 
 <!-- Modal de Login -->
 {#if loginModalStore.showModal}
-	<dialog class="modal modal-open">
-		<div class="modal-box bg-base-100 relative max-w-md overflow-hidden">
-			<button
-				type="button"
-				class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
-				onclick={closeLoginModal}
-			>
-				✕
-			</button>
+  <dialog class="modal modal-open">
+    <div class="modal-box relative overflow-hidden bg-base-100 max-w-md">
+      <button
+        type="button"
+        class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+        onclick={closeLoginModal}
+      >
+        ✕
+      </button>
 
-			<div class="p-4">
-				<div class="mb-6 text-center">
-					<div class="avatar mb-4">
-						<div class="bg-primary/10 w-20 rounded-lg p-3">
-							<img src={logo} alt="Logo" class="h-full w-full object-contain" />
-						</div>
-					</div>
-					<h3 class="text-primary text-3xl font-bold">Login</h3>
-					<p class="text-base-content/60 mt-2 text-sm">Acesse o sistema com suas credenciais</p>
-				</div>
+      <div class="p-4">
+        <div class="text-center mb-6">
+          <div class="avatar mb-4">
+            <div class="w-20 rounded-lg bg-primary/10 p-3">
+              <img src={logo} alt="Logo" class="w-full h-full object-contain" />
+            </div>
+          </div>
+          <h3 class="font-bold text-3xl text-primary">Login</h3>
+          <p class="text-sm text-base-content/60 mt-2">
+            Acesse o sistema com suas credenciais
+          </p>
+        </div>
 
-				{#if erroLogin}
-					<div class="alert alert-error mb-4">
-						<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
-						<span>{erroLogin}</span>
-					</div>
-				{/if}
+        {#if erroLogin}
+          <div class="alert alert-error mb-4">
+            <XCircle class="stroke-current shrink-0 h-6 w-6" strokeWidth={2} />
+            <span>{erroLogin}</span>
+          </div>
+        {/if}
 
-				<form class="space-y-4" onsubmit={handleLogin}>
-					<div class="form-control">
-						<label class="label" for="login-matricula">
-							<span class="label-text font-semibold">Matrícula ou E-mail</span>
-						</label>
-						<input
-							id="login-matricula"
-							type="text"
-							placeholder="Digite sua matrícula ou e-mail"
-							class="input input-bordered input-primary w-full"
-							bind:value={matricula}
-							required
-							disabled={carregandoLogin}
-						/>
-					</div>
-					<div class="form-control">
-						<label class="label" for="login-password">
-							<span class="label-text font-semibold">Senha</span>
-						</label>
-						<input
-							id="login-password"
-							type="password"
-							placeholder="Digite sua senha"
-							class="input input-bordered input-primary w-full"
-							bind:value={senha}
-							required
-							disabled={carregandoLogin}
-						/>
-					</div>
-					<div class="form-control mt-6">
-						<button type="submit" class="btn btn-primary w-full" disabled={carregandoLogin}>
-							{#if carregandoLogin}
-								<span class="loading loading-spinner loading-sm"></span>
-								Entrando...
-							{:else}
-								<LogIn class="h-5 w-5" strokeWidth={2} />
-								Entrar
-							{/if}
-						</button>
-					</div>
-					<div class="mt-4 space-y-2 text-center">
-						<a
-							href={resolve('/solicitar-acesso')}
-							class="link link-primary block text-sm"
-							onclick={closeLoginModal}
-						>
-							Não tem acesso? Solicite aqui
-						</a>
-						<a
-							href={resolve('/esqueci-senha')}
-							class="link link-secondary block text-sm"
-							onclick={closeLoginModal}
-						>
-							Esqueceu sua senha?
-						</a>
-					</div>
-				</form>
+        <form class="space-y-4" onsubmit={handleLogin}>
+          <div class="form-control">
+            <label class="label" for="login-matricula">
+              <span class="label-text font-semibold">Matrícula ou E-mail</span>
+            </label>
+            <input
+              id="login-matricula"
+              type="text"
+              placeholder="Digite sua matrícula ou e-mail"
+              class="input input-bordered input-primary w-full"
+              bind:value={matricula}
+              required
+              disabled={carregandoLogin}
+            />
+          </div>
+          <div class="form-control">
+            <label class="label" for="login-password">
+              <span class="label-text font-semibold">Senha</span>
+            </label>
+            <input
+              id="login-password"
+              type="password"
+              placeholder="Digite sua senha"
+              class="input input-bordered input-primary w-full"
+              bind:value={senha}
+              required
+              disabled={carregandoLogin}
+            />
+          </div>
+          <div class="form-control mt-6">
+            <button
+              type="submit"
+              class="btn btn-primary w-full"
+              disabled={carregandoLogin}
+            >
+              {#if carregandoLogin}
+                <span class="loading loading-spinner loading-sm"></span>
+                Entrando...
+              {:else}
+                <LogIn class="h-5 w-5" strokeWidth={2} />
+                Entrar
+              {/if}
+            </button>
+          </div>
+          <div class="text-center mt-4 space-y-2">
+            <a
+              href="/solicitar-acesso"
+              class="link link-primary text-sm block"
+              onclick={closeLoginModal}
+            >
+              Não tem acesso? Solicite aqui
+            </a>
+            <a
+              href="/esqueci-senha"
+              class="link link-secondary text-sm block"
+              onclick={closeLoginModal}
+            >
+              Esqueceu sua senha?
+            </a>
+          </div>
+        </form>
 
-				<div class="divider text-base-content/40 text-xs">Credenciais de teste</div>
-				<div class="bg-base-200 rounded-lg p-3 text-xs">
-					<p class="mb-1 font-semibold">Admin:</p>
-					<p>
-						Matrícula: <code class="bg-base-300 rounded px-2 py-1">0000</code>
-					</p>
-					<p>
-						Senha: <code class="bg-base-300 rounded px-2 py-1">Admin@123</code>
-					</p>
-				</div>
-			</div>
-		</div>
-		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<form method="dialog" class="modal-backdrop" onclick={closeLoginModal}>
-			<button type="button">close</button>
-		</form>
-	</dialog>
+        <div class="divider text-xs text-base-content/40">
+          Credenciais de teste
+        </div>
+        <div class="bg-base-200 p-3 rounded-lg text-xs">
+          <p class="font-semibold mb-1">Admin:</p>
+          <p>
+            Matrícula: <code class="bg-base-300 px-2 py-1 rounded">0000</code>
+          </p>
+          <p>
+            Senha: <code class="bg-base-300 px-2 py-1 rounded">Admin@123</code>
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <form method="dialog" class="modal-backdrop" onclick={closeLoginModal}>
+      <button type="button">close</button>
+    </form>
+  </dialog>
 {/if}
 
 <!-- Modal Sobre -->
 {#if showAboutModal}
-	<dialog class="modal modal-open">
-		<div
-			class="modal-box from-base-100 to-base-200 relative max-w-2xl overflow-hidden bg-linear-to-br"
-		>
-			<button
-				type="button"
-				class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
-				onclick={closeAboutModal}
-			>
-				✕
-			</button>
+  <dialog class="modal modal-open">
+    <div
+      class="modal-box max-w-2xl relative overflow-hidden 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={closeAboutModal}
+      >
+        ✕
+      </button>
 
-			<div class="space-y-6 py-4 text-center">
-				<!-- Logo e Título -->
-				<div class="flex flex-col items-center gap-4">
-					<div class="avatar">
-						<div class="w-24 rounded-xl bg-white p-3 shadow-lg">
-							<img src={logo} alt="Logo SGSE" class="h-full w-full object-contain" />
-						</div>
-					</div>
-					<div>
-						<h3 class="text-primary mb-2 text-3xl font-bold">SGSE</h3>
-						<p class="text-base-content/80 text-lg font-semibold">
-							Sistema de Gerenciamento da<br />Secretaria de Esportes
-						</p>
-					</div>
-				</div>
+      <div class="text-center space-y-6 py-4">
+        <!-- Logo e Título -->
+        <div class="flex flex-col items-center gap-4">
+          <div class="avatar">
+            <div class="w-24 rounded-xl bg-white p-3 shadow-lg">
+              <img
+                src={logo}
+                alt="Logo SGSE"
+                class="w-full h-full object-contain"
+              />
+            </div>
+          </div>
+          <div>
+            <h3 class="text-3xl font-bold text-primary mb-2">SGSE</h3>
+            <p class="text-lg font-semibold text-base-content/80">
+              Sistema de Gerenciamento da<br />Secretaria de Esportes
+            </p>
+          </div>
+        </div>
 
-				<!-- Divider -->
-				<div class="divider"></div>
+        <!-- Divider -->
+        <div class="divider"></div>
 
-				<!-- Informações de Versão -->
-				<div class="bg-primary/10 space-y-3 rounded-xl p-6">
-					<div class="flex items-center justify-center gap-2">
-						<Tag class="text-primary h-5 w-5" strokeWidth={2} />
-						<p class="text-base-content/70 text-sm font-medium">Versão</p>
-					</div>
-					<p class="text-primary text-2xl font-bold">1.0 26_2025</p>
-					<div class="badge badge-warning badge-lg gap-2">
-						<Plus class="h-4 w-4" strokeWidth={2} />
-						Em Desenvolvimento
-					</div>
-				</div>
+        <!-- Informações de Versão -->
+        <div class="bg-primary/10 rounded-xl p-6 space-y-3">
+          <div class="flex items-center justify-center gap-2">
+            <Tag class="h-5 w-5 text-primary" strokeWidth={2} />
+            <p class="text-sm font-medium text-base-content/70">Versão</p>
+          </div>
+          <p class="text-2xl font-bold text-primary">1.0 26_2025</p>
+          <div class="badge badge-warning badge-lg gap-2">
+            <Plus class="h-4 w-4" strokeWidth={2} />
+            Em Desenvolvimento
+          </div>
+        </div>
 
-				<!-- Desenvolvido por -->
-				<div class="space-y-2">
-					<p class="text-base-content/60 text-sm font-medium">Desenvolvido por</p>
-					<p class="text-primary text-lg font-bold">Secretaria de Esportes de Pernambuco</p>
-				</div>
+        <!-- Desenvolvido por -->
+        <div class="space-y-2">
+          <p class="text-sm font-medium text-base-content/60">
+            Desenvolvido por
+          </p>
+          <p class="text-lg font-bold text-primary">
+            Secretaria de Esportes de Pernambuco
+          </p>
+        </div>
 
-				<!-- Divider -->
-				<div class="divider"></div>
+        <!-- Divider -->
+        <div class="divider"></div>
 
-				<!-- Informações Adicionais -->
-				<div class="grid grid-cols-2 gap-4 text-sm">
-					<div class="bg-base-200 rounded-lg p-3">
-						<p class="text-primary font-semibold">Governo</p>
-						<p class="text-base-content/70 text-xs">Estado de Pernambuco</p>
-					</div>
-					<div class="bg-base-200 rounded-lg p-3">
-						<p class="text-primary font-semibold">Ano</p>
-						<p class="text-base-content/70 text-xs">2025</p>
-					</div>
-				</div>
+        <!-- Informações Adicionais -->
+        <div class="grid grid-cols-2 gap-4 text-sm">
+          <div class="bg-base-200 rounded-lg p-3">
+            <p class="font-semibold text-primary">Governo</p>
+            <p class="text-xs text-base-content/70">Estado de Pernambuco</p>
+          </div>
+          <div class="bg-base-200 rounded-lg p-3">
+            <p class="font-semibold text-primary">Ano</p>
+            <p class="text-xs text-base-content/70">2025</p>
+          </div>
+        </div>
 
-				<!-- Botão OK -->
-				<div class="pt-4">
-					<button
-						type="button"
-						class="btn btn-primary btn-lg mx-auto w-full max-w-xs shadow-lg transition-all duration-300 hover:shadow-xl"
-						onclick={closeAboutModal}
-					>
-						<Check class="h-6 w-6" strokeWidth={2} />
-						OK
-					</button>
-				</div>
-			</div>
-		</div>
-		<div
-			class="modal-backdrop"
-			onclick={closeAboutModal}
-			role="button"
-			tabindex="0"
-			onkeydown={(e) => e.key === 'Escape' && closeAboutModal()}
-		></div>
-	</dialog>
+        <!-- Botão OK -->
+        <div class="pt-4">
+          <button
+            type="button"
+            class="btn btn-primary btn-lg w-full max-w-xs mx-auto shadow-lg hover:shadow-xl transition-all duration-300"
+            onclick={closeAboutModal}
+          >
+            <Check class="h-6 w-6" strokeWidth={2} />
+            OK
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="modal-backdrop"
+      onclick={closeAboutModal}
+      role="button"
+      tabindex="0"
+      onkeydown={(e) => e.key === "Escape" && closeAboutModal()}
+    ></div>
+  </dialog>
 {/if}
 
 <!-- Componentes de Chat (apenas se autenticado) -->
 {#if currentUser.data}
-	<PresenceManager />
-	<ChatWidget />
+  <PresenceManager />
+  <ChatWidget />
 {/if}
 
 <style>
-	/* Animação de pulso sutil para o anel do botão de perfil */
-	@keyframes pulse-ring-subtle {
-		0%,
-		100% {
-			opacity: 0.1;
-			transform: scale(1);
-		}
-		50% {
-			opacity: 0.3;
-			transform: scale(1.05);
-		}
-	}
+  /* Animação de pulso sutil para o anel do botão de perfil */
+  @keyframes pulse-ring-subtle {
+    0%,
+    100% {
+      opacity: 0.1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.3;
+      transform: scale(1.05);
+    }
+  }
 
-	/* Animação de pulso para o badge de status online */
-	@keyframes pulse-dot {
-		0%,
-		100% {
-			opacity: 1;
-			transform: scale(1);
-		}
-		50% {
-			opacity: 0.8;
-			transform: scale(1.1);
-		}
-	}
+  /* Animação de pulso para o badge de status online */
+  @keyframes pulse-dot {
+    0%,
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.8;
+      transform: scale(1.1);
+    }
+  }
 </style>
diff --git a/apps/web/src/lib/components/SolicitarFerias.svelte b/apps/web/src/lib/components/SolicitarFerias.svelte
index 4da0ddb..c61f7bc 100644
--- a/apps/web/src/lib/components/SolicitarFerias.svelte
+++ b/apps/web/src/lib/components/SolicitarFerias.svelte
@@ -1,353 +1,304 @@
 <script lang="ts">
-	import { useConvexClient } from 'convex-svelte';
-	import { api } from '@sgse-app/backend/convex/_generated/api';
-
-	interface Periodo {
-		id: string;
-		dataInicio: string;
-		dataFim: string;
-		diasCorridos: number;
-	}
-
-	interface Props {
-		funcionarioId: string;
-		onSucesso?: () => void;
-		onCancelar?: () => void;
-	}
-
-	let { funcionarioId, onSucesso, onCancelar }: Props = $props();
-
-	const client = useConvexClient();
-
-	let anoReferencia = $state(new Date().getFullYear());
-	let observacao = $state('');
-	let periodos = $state<Periodo[]>([]);
-	let processando = $state(false);
-	let erro = $state('');
-
-	// Adicionar primeiro período ao carregar
-	$effect(() => {
-		if (periodos.length === 0) {
-			adicionarPeriodo();
-		}
-	});
-
-	function adicionarPeriodo() {
-		if (periodos.length >= 3) {
-			erro = 'Máximo de 3 períodos permitidos';
-			return;
-		}
-
-		periodos.push({
-			id: crypto.randomUUID(),
-			dataInicio: '',
-			dataFim: '',
-			diasCorridos: 0
-		});
-	}
-
-	function removerPeriodo(id: string) {
-		periodos = periodos.filter((p) => p.id !== id);
-	}
-
-	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 = '';
-	}
-
-	function validarPeriodos(): boolean {
-		if (periodos.length === 0) {
-			erro = 'Adicione pelo menos 1 período';
-			return false;
-		}
-
-		for (const periodo of periodos) {
-			if (!periodo.dataInicio || !periodo.dataFim) {
-				erro = 'Preencha as datas de todos os períodos';
-				return false;
-			}
-
-			if (periodo.diasCorridos <= 0) {
-				erro = 'Todos os períodos devem ter pelo menos 1 dia';
-				return false;
-			}
-		}
-
-		// Verificar sobreposição de períodos
-		for (let i = 0; i < periodos.length; i++) {
-			for (let j = i + 1; j < periodos.length; j++) {
-				const p1Inicio = new Date(periodos[i].dataInicio);
-				const p1Fim = new Date(periodos[i].dataFim);
-				const p2Inicio = new Date(periodos[j].dataInicio);
-				const p2Fim = new Date(periodos[j].dataFim);
-
-				if (
-					(p2Inicio >= p1Inicio && p2Inicio <= p1Fim) ||
-					(p2Fim >= p1Inicio && p2Fim <= p1Fim) ||
-					(p1Inicio >= p2Inicio && p1Inicio <= p2Fim)
-				) {
-					erro = 'Os períodos não podem se sobrepor';
-					return false;
-				}
-			}
-		}
-
-		return true;
-	}
-
-	async function enviarSolicitacao() {
-		if (!validarPeriodos()) return;
-
-		try {
-			processando = true;
-			erro = '';
-
-			await client.mutation(api.ferias.criarSolicitacao, {
-				funcionarioId: funcionarioId as any,
-				anoReferencia,
-				periodos: periodos.map((p) => ({
-					dataInicio: p.dataInicio,
-					dataFim: p.dataFim,
-					diasCorridos: p.diasCorridos
-				})),
-				observacao: observacao || undefined
-			});
-
-			if (onSucesso) onSucesso();
-		} catch (e: any) {
-			erro = e.message || 'Erro ao enviar solicitação';
-		} finally {
-			processando = false;
-		}
-	}
-
-	$effect(() => {
-		periodos.forEach((p) => calcularDias(p));
-	});
+  import { useConvexClient } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  
+  interface Periodo {
+    id: string;
+    dataInicio: string;
+    dataFim: string;
+    diasCorridos: number;
+  }
+  
+  interface Props {
+    funcionarioId: string;
+    onSucesso?: () => void;
+    onCancelar?: () => void;
+  }
+  
+  let { funcionarioId, onSucesso, onCancelar }: Props = $props();
+  
+  const client = useConvexClient();
+  
+  let anoReferencia = $state(new Date().getFullYear());
+  let observacao = $state("");
+  let periodos = $state<Periodo[]>([]);
+  let processando = $state(false);
+  let erro = $state("");
+  
+  // Adicionar primeiro período ao carregar
+  $effect(() => {
+    if (periodos.length === 0) {
+      adicionarPeriodo();
+    }
+  });
+  
+  function adicionarPeriodo() {
+    if (periodos.length >= 3) {
+      erro = "Máximo de 3 períodos permitidos";
+      return;
+    }
+    
+    periodos.push({
+      id: crypto.randomUUID(),
+      dataInicio: "",
+      dataFim: "",
+      diasCorridos: 0,
+    });
+  }
+  
+  function removerPeriodo(id: string) {
+    periodos = periodos.filter(p => p.id !== id);
+  }
+  
+  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 = "";
+  }
+  
+  function validarPeriodos(): boolean {
+    if (periodos.length === 0) {
+      erro = "Adicione pelo menos 1 período";
+      return false;
+    }
+    
+    for (const periodo of periodos) {
+      if (!periodo.dataInicio || !periodo.dataFim) {
+        erro = "Preencha as datas de todos os períodos";
+        return false;
+      }
+      
+      if (periodo.diasCorridos <= 0) {
+        erro = "Todos os períodos devem ter pelo menos 1 dia";
+        return false;
+      }
+    }
+    
+    // Verificar sobreposição de períodos
+    for (let i = 0; i < periodos.length; i++) {
+      for (let j = i + 1; j < periodos.length; j++) {
+        const p1Inicio = new Date(periodos[i].dataInicio);
+        const p1Fim = new Date(periodos[i].dataFim);
+        const p2Inicio = new Date(periodos[j].dataInicio);
+        const p2Fim = new Date(periodos[j].dataFim);
+        
+        if (
+          (p2Inicio >= p1Inicio && p2Inicio <= p1Fim) ||
+          (p2Fim >= p1Inicio && p2Fim <= p1Fim) ||
+          (p1Inicio >= p2Inicio && p1Inicio <= p2Fim)
+        ) {
+          erro = "Os períodos não podem se sobrepor";
+          return false;
+        }
+      }
+    }
+    
+    return true;
+  }
+  
+  async function enviarSolicitacao() {
+    if (!validarPeriodos()) return;
+    
+    try {
+      processando = true;
+      erro = "";
+      
+      await client.mutation(api.ferias.criarSolicitacao, {
+        funcionarioId: funcionarioId as any,
+        anoReferencia,
+        periodos: periodos.map(p => ({
+          dataInicio: p.dataInicio,
+          dataFim: p.dataFim,
+          diasCorridos: p.diasCorridos,
+        })),
+        observacao: observacao || undefined,
+      });
+      
+      if (onSucesso) onSucesso();
+    } catch (e: any) {
+      erro = e.message || "Erro ao enviar solicitação";
+    } finally {
+      processando = false;
+    }
+  }
+  
+  $effect(() => {
+    periodos.forEach(p => calcularDias(p));
+  });
 </script>
 
 <div class="card bg-base-100 shadow-xl">
-	<div class="card-body">
-		<h2 class="card-title mb-4 text-2xl">
-			<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="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>
-			Solicitar Férias
-		</h2>
-
-		<!-- Ano de Referência -->
-		<div class="form-control">
-			<label class="label" for="ano-referencia">
-				<span class="label-text font-semibold">Ano de Referência</span>
-			</label>
-			<input
-				id="ano-referencia"
-				type="number"
-				class="input input-bordered w-full max-w-xs"
-				bind:value={anoReferencia}
-				min={new Date().getFullYear()}
-				max={new Date().getFullYear() + 2}
-			/>
-		</div>
-
-		<!-- Períodos -->
-		<div class="mt-6">
-			<div class="mb-3 flex items-center justify-between">
-				<h3 class="text-lg font-semibold">Períodos ({periodos.length}/3)</h3>
-				{#if periodos.length < 3}
-					<button type="button" class="btn btn-sm btn-primary gap-2" onclick={adicionarPeriodo}>
-						<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>
-						Adicionar Período
-					</button>
-				{/if}
-			</div>
-
-			<div class="space-y-4">
-				{#each periodos as periodo, index}
-					<div class="card bg-base-200 border-base-300 border">
-						<div class="card-body p-4">
-							<div class="mb-3 flex items-center justify-between">
-								<h4 class="font-medium">Período {index + 1}</h4>
-								{#if periodos.length > 1}
-									<button
-										type="button"
-										class="btn btn-xs btn-error"
-										aria-label="Remover período"
-										onclick={() => removerPeriodo(periodo.id)}
-									>
-										<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="M6 18L18 6M6 6l12 12"
-											/>
-										</svg>
-									</button>
-								{/if}
-							</div>
-
-							<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-								<div class="form-control">
-									<label class="label" for={`inicio-${periodo.id}`}>
-										<span class="label-text">Data Início</span>
-									</label>
-									<input
-										id={`inicio-${periodo.id}`}
-										type="date"
-										class="input input-bordered input-sm"
-										bind:value={periodo.dataInicio}
-										onchange={() => calcularDias(periodo)}
-									/>
-								</div>
-
-								<div class="form-control">
-									<label class="label" for={`fim-${periodo.id}`}>
-										<span class="label-text">Data Fim</span>
-									</label>
-									<input
-										id={`fim-${periodo.id}`}
-										type="date"
-										class="input input-bordered input-sm"
-										bind:value={periodo.dataFim}
-										onchange={() => calcularDias(periodo)}
-									/>
-								</div>
-
-								<div class="form-control">
-									<label class="label" for={`dias-${periodo.id}`}>
-										<span class="label-text">Dias Corridos</span>
-									</label>
-									<div
-										id={`dias-${periodo.id}`}
-										class="bg-base-300 flex h-9 items-center rounded-lg px-3"
-										role="textbox"
-										aria-readonly="true"
-									>
-										<span class="text-lg font-bold">{periodo.diasCorridos}</span>
-										<span class="ml-1 text-sm">dias</span>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				{/each}
-			</div>
-		</div>
-
-		<!-- Observações -->
-		<div class="form-control mt-6">
-			<label class="label" for="observacao">
-				<span class="label-text font-semibold">Observações (opcional)</span>
-			</label>
-			<textarea
-				id="observacao"
-				class="textarea textarea-bordered h-24"
-				placeholder="Adicione observações sobre sua solicitação..."
-				bind:value={observacao}
-			></textarea>
-		</div>
-
-		<!-- 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}
-
-		<!-- Ações -->
-		<div class="card-actions mt-6 justify-end">
-			{#if onCancelar}
-				<button type="button" class="btn" onclick={onCancelar} disabled={processando}>
-					Cancelar
-				</button>
-			{/if}
-			<button
-				type="button"
-				class="btn btn-primary gap-2"
-				onclick={enviarSolicitacao}
-				disabled={processando}
-			>
-				{#if processando}
-					<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="M5 13l4 4L19 7"
-						/>
-					</svg>
-					Enviar Solicitação
-				{/if}
-			</button>
-		</div>
-	</div>
+  <div class="card-body">
+    <h2 class="card-title text-2xl mb-4">
+      <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="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>
+      Solicitar Férias
+    </h2>
+    
+    <!-- Ano de Referência -->
+    <div class="form-control">
+      <label class="label" for="ano-referencia">
+        <span class="label-text font-semibold">Ano de Referência</span>
+      </label>
+      <input
+        id="ano-referencia"
+        type="number"
+        class="input input-bordered w-full max-w-xs"
+        bind:value={anoReferencia}
+        min={new Date().getFullYear()}
+        max={new Date().getFullYear() + 2}
+      />
+    </div>
+    
+    <!-- Períodos -->
+    <div class="mt-6">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="font-semibold text-lg">Períodos ({periodos.length}/3)</h3>
+        {#if periodos.length < 3}
+          <button
+            type="button"
+            class="btn btn-sm btn-primary gap-2"
+            onclick={adicionarPeriodo}
+          >
+            <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>
+            Adicionar Período
+          </button>
+        {/if}
+      </div>
+      
+      <div class="space-y-4">
+        {#each periodos as periodo, index}
+          <div class="card bg-base-200 border border-base-300">
+            <div class="card-body p-4">
+              <div class="flex items-center justify-between mb-3">
+                <h4 class="font-medium">Período {index + 1}</h4>
+                {#if periodos.length > 1}
+                  <button
+                    type="button"
+                    class="btn btn-xs btn-error btn-square"
+                    aria-label="Remover período"
+                    onclick={() => removerPeriodo(periodo.id)}
+                  >
+                    <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="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                {/if}
+              </div>
+              
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div class="form-control">
+                  <label class="label" for={`inicio-${periodo.id}`}>
+                    <span class="label-text">Data Início</span>
+                  </label>
+                  <input
+                    id={`inicio-${periodo.id}`}
+                    type="date"
+                    class="input input-bordered input-sm"
+                    bind:value={periodo.dataInicio}
+                    onchange={() => calcularDias(periodo)}
+                  />
+                </div>
+                
+                <div class="form-control">
+                  <label class="label" for={`fim-${periodo.id}`}>
+                    <span class="label-text">Data Fim</span>
+                  </label>
+                  <input
+                    id={`fim-${periodo.id}`}
+                    type="date"
+                    class="input input-bordered input-sm"
+                    bind:value={periodo.dataFim}
+                    onchange={() => calcularDias(periodo)}
+                  />
+                </div>
+                
+                <div class="form-control">
+                  <label class="label" for={`dias-${periodo.id}`}>
+                    <span class="label-text">Dias Corridos</span>
+                  </label>
+                  <div id={`dias-${periodo.id}`} class="flex items-center h-9 px-3 bg-base-300 rounded-lg" role="textbox" aria-readonly="true">
+                    <span class="font-bold text-lg">{periodo.diasCorridos}</span>
+                    <span class="ml-1 text-sm">dias</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+    
+    <!-- Observações -->
+    <div class="form-control mt-6">
+      <label class="label" for="observacao">
+        <span class="label-text font-semibold">Observações (opcional)</span>
+      </label>
+      <textarea
+        id="observacao"
+        class="textarea textarea-bordered h-24"
+        placeholder="Adicione observações sobre sua solicitação..."
+        bind:value={observacao}
+      ></textarea>
+    </div>
+    
+    <!-- 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}
+    
+    <!-- Ações -->
+    <div class="card-actions justify-end mt-6">
+      {#if onCancelar}
+        <button
+          type="button"
+          class="btn btn-ghost"
+          onclick={onCancelar}
+          disabled={processando}
+        >
+          Cancelar
+        </button>
+      {/if}
+      <button
+        type="button"
+        class="btn btn-primary gap-2"
+        onclick={enviarSolicitacao}
+        disabled={processando}
+      >
+        {#if processando}
+          <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="M5 13l4 4L19 7" />
+          </svg>
+          Enviar Solicitação
+        {/if}
+      </button>
+    </div>
+  </div>
 </div>
+
diff --git a/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte b/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
index 67a8b81..5ce13b6 100644
--- a/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
+++ b/apps/web/src/lib/components/ausencias/WizardSolicitacaoAusencia.svelte
@@ -1,486 +1,503 @@
 <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="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>
+  <!-- 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>
 
-					{#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 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 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>
+          {#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>
 
-					<!-- 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}
+          <!-- 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}
 
-					<!-- 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="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}
+          {#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}
 
-			<!-- 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>
+      <!-- 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>
 
-				{#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>
+        {#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>
 
-			<!-- 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>
+      <!-- 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>
 </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/ChatList.svelte b/apps/web/src/lib/components/chat/ChatList.svelte
index 61fe005..4468fe3 100644
--- a/apps/web/src/lib/components/chat/ChatList.svelte
+++ b/apps/web/src/lib/components/chat/ChatList.svelte
@@ -1,448 +1,514 @@
 <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 NewConversationModal from './NewConversationModal.svelte';
-	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
+  import { useQuery, useConvexClient } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import { abrirConversa } from "$lib/stores/chatStore";
+  import { formatDistanceToNow } from "date-fns";
+  import { ptBR } from "date-fns/locale";
+  import UserStatusBadge from "./UserStatusBadge.svelte";
+  import UserAvatar from "./UserAvatar.svelte";
+  import NewConversationModal from "./NewConversationModal.svelte";
 
-	const client = useConvexClient();
+  const client = useConvexClient();
 
-	// Buscar todos os usuários para o chat
-	const usuarios = useQuery(api.usuarios.listarParaChat, {});
+  // Buscar todos os usuários para o chat
+  const usuarios = useQuery(api.usuarios.listarParaChat, {});
 
-	// Buscar o perfil do usuário logado
-	const meuPerfil = useQuery(api.usuarios.obterPerfil, {});
+  // Buscar o perfil do usuário logado
+  const meuPerfil = useQuery(api.usuarios.obterPerfil, {});
 
-	// Buscar conversas (grupos e salas de reunião)
-	const conversas = useQuery(api.chat.listarConversas, {});
+  // Buscar conversas (grupos e salas de reunião)
+  const conversas = useQuery(api.chat.listarConversas, {});
 
-	let searchQuery = $state('');
-	let activeTab = $state<'usuarios' | 'conversas'>('usuarios');
+  let searchQuery = $state("");
+  let activeTab = $state<"usuarios" | "conversas">("usuarios");
 
-	const usuariosFiltrados = $derived.by(() => {
-		if (!usuarios?.data || !Array.isArray(usuarios.data)) return [];
+  // Debug: monitorar carregamento de dados
+  $effect(() => {
+    console.log(
+      "📊 [ChatList] Usuários carregados:",
+      usuarios?.data?.length || 0,
+    );
+    console.log(
+      "👤 [ChatList] Meu perfil:",
+      meuPerfil?.data?.nome || "Carregando...",
+    );
+    console.log(
+      "🆔 [ChatList] Meu ID:",
+      meuPerfil?.data?._id || "Não encontrado",
+    );
+    if (usuarios?.data) {
+      const meuId = meuPerfil?.data?._id;
+      const meusDadosNaLista = usuarios.data.find((u: any) => u._id === meuId);
+      if (meusDadosNaLista) {
+        console.warn(
+          "⚠️ [ChatList] ATENÇÃO: Meu usuário está na lista do backend!",
+          meusDadosNaLista.nome,
+        );
+      }
+    }
+  });
 
-		// Se não temos o perfil ainda, retornar lista vazia para evitar mostrar usuários incorretos
-		if (!meuPerfil?.data) {
-			console.log('⏳ [ChatList] Aguardando perfil do usuário...');
-			return [];
-		}
+  const usuariosFiltrados = $derived.by(() => {
+    if (!usuarios?.data || !Array.isArray(usuarios.data)) return [];
 
-		const meuId = meuPerfil.data._id;
+    // Se não temos o perfil ainda, retornar lista vazia para evitar mostrar usuários incorretos
+    if (!meuPerfil?.data) {
+      console.log("⏳ [ChatList] Aguardando perfil do usuário...");
+      return [];
+    }
 
-		// Filtrar o próprio usuário da lista (filtro de segurança no frontend)
-		let listaFiltrada = usuarios.data.filter((u) => u._id !== meuId);
+    const meuId = meuPerfil.data._id;
 
-		// Log se ainda estiver na lista após filtro (não deveria acontecer)
-		const aindaNaLista = listaFiltrada.find((u) => u._id === meuId);
-		if (aindaNaLista) {
-			console.error('❌ [ChatList] ERRO: Meu usuário ainda está na lista após filtro!');
-		}
+    // Filtrar o próprio usuário da lista (filtro de segurança no frontend)
+    let listaFiltrada = usuarios.data.filter((u: any) => u._id !== meuId);
 
-		// Aplicar busca por nome/email/matrícula
-		if (searchQuery.trim()) {
-			const query = searchQuery.toLowerCase();
-			listaFiltrada = listaFiltrada.filter(
-				(u) =>
-					u.nome?.toLowerCase().includes(query) ||
-					u.email?.toLowerCase().includes(query) ||
-					u.matricula?.toLowerCase().includes(query)
-			);
-		}
+    // Log se ainda estiver na lista após filtro (não deveria acontecer)
+    const aindaNaLista = listaFiltrada.find((u: any) => u._id === meuId);
+    if (aindaNaLista) {
+      console.error(
+        "❌ [ChatList] ERRO: Meu usuário ainda está na lista após filtro!",
+      );
+    }
 
-		// Ordenar: Online primeiro, depois por nome
-		return listaFiltrada.sort((a, b) => {
-			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;
+    // Aplicar busca por nome/email/matrícula
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      listaFiltrada = listaFiltrada.filter(
+        (u: any) =>
+          u.nome?.toLowerCase().includes(query) ||
+          u.email?.toLowerCase().includes(query) ||
+          u.matricula?.toLowerCase().includes(query),
+      );
+    }
 
-			if (statusA !== statusB) return statusA - statusB;
-			return a.nome.localeCompare(b.nome);
-		});
-	});
+    // Ordenar: Online primeiro, depois por nome
+    return listaFiltrada.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;
 
-	let processando = $state(false);
-	let showNewConversationModal = $state(false);
+      if (statusA !== statusB) return statusA - statusB;
+      return a.nome.localeCompare(b.nome);
+    });
+  });
 
-	async function handleClickUsuario(usuario: {
-		_id: Id<'usuarios'>;
-		nome: string;
-		email: string;
-		matricula: string | undefined;
-		avatar: string | undefined;
-		fotoPerfil: Id<'_storage'> | undefined;
-		fotoPerfilUrl: string | null;
-		statusPresenca: 'online' | 'offline' | 'ausente' | 'externo' | 'em_reuniao';
-		statusMensagem: string | undefined;
-		ultimaAtividade: number | undefined;
-	}) {
-		if (processando) {
-			console.log('⏳ Já está processando uma ação, aguarde...');
-			return;
-		}
+  function formatarTempo(timestamp: number | undefined): string {
+    if (!timestamp) return "";
+    try {
+      return formatDistanceToNow(new Date(timestamp), {
+        addSuffix: true,
+        locale: ptBR,
+      });
+    } catch {
+      return "";
+    }
+  }
 
-		try {
-			processando = true;
-			console.log('🔄 Clicou no usuário:', usuario.nome, 'ID:', usuario._id);
+  let processando = $state(false);
+  let showNewConversationModal = $state(false);
 
-			// Criar ou buscar conversa individual com este usuário
-			console.log('📞 Chamando mutation criarOuBuscarConversaIndividual...');
-			const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
-				outroUsuarioId: usuario._id
-			});
+  async function handleClickUsuario(usuario: any) {
+    if (processando) {
+      console.log("⏳ Já está processando uma ação, aguarde...");
+      return;
+    }
 
-			console.log('✅ Conversa criada/encontrada. ID:', conversaId);
+    try {
+      processando = true;
+      console.log("🔄 Clicou no usuário:", usuario.nome, "ID:", usuario._id);
 
-			// Abrir a conversa
-			console.log('📂 Abrindo conversa...');
-			abrirConversa(conversaId);
+      // Criar ou buscar conversa individual com este usuário
+      console.log("📞 Chamando mutation criarOuBuscarConversaIndividual...");
+      const conversaId = await client.mutation(
+        api.chat.criarOuBuscarConversaIndividual,
+        {
+          outroUsuarioId: usuario._id,
+        },
+      );
 
-			console.log('✅ Conversa aberta com sucesso!');
-		} catch (error) {
-			console.error('❌ Erro ao abrir conversa:', error);
-			console.error('Detalhes do erro:', {
-				message: error instanceof Error ? error.message : String(error),
-				stack: error instanceof Error ? error.stack : undefined,
-				usuario: usuario
-			});
-			alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
-		} finally {
-			processando = false;
-		}
-	}
+      console.log("✅ Conversa criada/encontrada. ID:", conversaId);
 
-	function getStatusLabel(status: string | undefined): string {
-		const labels: Record<string, string> = {
-			online: 'Online',
-			offline: 'Offline',
-			ausente: 'Ausente',
-			externo: 'Externo',
-			em_reuniao: 'Em Reunião'
-		};
-		return labels[status || 'offline'] || 'Offline';
-	}
+      // Abrir a conversa
+      console.log("📂 Abrindo conversa...");
+      abrirConversa(conversaId as any);
 
-	// Filtrar conversas por tipo e busca
-	const conversasFiltradas = $derived(() => {
-		if (!conversas?.data) return [];
+      console.log("✅ Conversa aberta com sucesso!");
+    } catch (error) {
+      console.error("❌ Erro ao abrir conversa:", error);
+      console.error("Detalhes do erro:", {
+        message: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+        usuario: usuario,
+      });
+      alert(
+        `Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    } finally {
+      processando = false;
+    }
+  }
 
-		let lista = conversas.data.filter((c) => c.tipo === 'grupo' || c.tipo === 'sala_reuniao');
+  function getStatusLabel(status: string | undefined): string {
+    const labels: Record<string, string> = {
+      online: "Online",
+      offline: "Offline",
+      ausente: "Ausente",
+      externo: "Externo",
+      em_reuniao: "Em Reunião",
+    };
+    return labels[status || "offline"] || "Offline";
+  }
 
-		// Aplicar busca
-		if (searchQuery.trim()) {
-			const query = searchQuery.toLowerCase();
-			lista = lista.filter((c) => c.nome?.toLowerCase().includes(query));
-		}
+  // Filtrar conversas por tipo e busca
+  const conversasFiltradas = $derived(() => {
+    if (!conversas?.data) return [];
 
-		return lista;
-	});
+    let lista = conversas.data.filter(
+      (c: any) => c.tipo === "grupo" || c.tipo === "sala_reuniao",
+    );
 
-	function handleClickConversa(conversa: Doc<'conversas'>) {
-		if (processando) return;
-		try {
-			processando = true;
-			abrirConversa(conversa._id);
-		} catch (error) {
-			console.error('Erro ao abrir conversa:', error);
-			alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
-		} finally {
-			processando = false;
-		}
-	}
+    // Aplicar busca
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      lista = lista.filter((c: any) => c.nome?.toLowerCase().includes(query));
+    }
+
+    return lista;
+  });
+
+  function handleClickConversa(conversa: any) {
+    if (processando) return;
+    try {
+      processando = true;
+      abrirConversa(conversa._id);
+    } catch (error) {
+      console.error("Erro ao abrir conversa:", error);
+      alert(
+        `Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    } finally {
+      processando = false;
+    }
+  }
 </script>
 
-<div class="flex h-full flex-col">
-	<!-- Search bar -->
-	<div class="border-base-300 border-b p-4">
-		<div class="relative">
-			<input
-				type="text"
-				placeholder="Buscar usuários (nome, email, matrícula)..."
-				class="input input-bordered w-full pl-10"
-				bind:value={searchQuery}
-			/>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				class="text-base-content/50 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-				/>
-			</svg>
-		</div>
-	</div>
+<div class="flex flex-col h-full">
+  <!-- Search bar -->
+  <div class="p-4 border-b border-base-300">
+    <div class="relative">
+      <input
+        type="text"
+        placeholder="Buscar usuários (nome, email, matrícula)..."
+        class="input input-bordered w-full pl-10"
+        bind:value={searchQuery}
+      />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+        />
+      </svg>
+    </div>
+  </div>
 
-	<!-- Tabs e Título -->
-	<div class="border-base-300 bg-base-200 border-b">
-		<!-- Tabs -->
-		<div class="tabs tabs-boxed p-2">
-			<button
-				type="button"
-				class={`tab flex-1 ${activeTab === 'usuarios' ? 'tab-active' : ''}`}
-				onclick={() => (activeTab = 'usuarios')}
-			>
-				👥 Usuários ({usuariosFiltrados.length})
-			</button>
-			<button
-				type="button"
-				class={`tab flex-1 ${activeTab === 'conversas' ? 'tab-active' : ''}`}
-				onclick={() => (activeTab = 'conversas')}
-			>
-				💬 Conversas ({conversasFiltradas().length})
-			</button>
-		</div>
+  <!-- Tabs e Título -->
+  <div class="border-b border-base-300 bg-base-200">
+    <!-- Tabs -->
+    <div class="tabs tabs-boxed p-2">
+      <button
+        type="button"
+        class={`tab flex-1 ${activeTab === "usuarios" ? "tab-active" : ""}`}
+        onclick={() => (activeTab = "usuarios")}
+      >
+        👥 Usuários ({usuariosFiltrados.length})
+      </button>
+      <button
+        type="button"
+        class={`tab flex-1 ${activeTab === "conversas" ? "tab-active" : ""}`}
+        onclick={() => (activeTab = "conversas")}
+      >
+        💬 Conversas ({conversasFiltradas().length})
+      </button>
+    </div>
 
-		<!-- Botão Nova Conversa -->
-		<div class="flex justify-end px-4 pb-2">
-			<button
-				type="button"
-				class="btn btn-primary btn-sm"
-				onclick={() => (showNewConversationModal = true)}
-				title="Nova conversa (grupo ou sala de reunião)"
-				aria-label="Nova conversa"
-			>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="2"
-					stroke="currentColor"
-					class="mr-1 h-4 w-4"
-				>
-					<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-				</svg>
-				Nova Conversa
-			</button>
-		</div>
-	</div>
+    <!-- Botão Nova Conversa -->
+    <div class="px-4 pb-2 flex justify-end">
+      <button
+        type="button"
+        class="btn btn-primary btn-sm"
+        onclick={() => (showNewConversationModal = true)}
+        title="Nova conversa (grupo ou sala de reunião)"
+        aria-label="Nova conversa"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          class="w-4 h-4 mr-1"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M12 4.5v15m7.5-7.5h-15"
+          />
+        </svg>
+        Nova Conversa
+      </button>
+    </div>
+  </div>
 
-	<!-- Lista de conteúdo -->
-	<div class="flex-1 overflow-y-auto">
-		{#if activeTab === 'usuarios'}
-			<!-- Lista de usuários -->
-			{#if usuarios?.data && usuariosFiltrados.length > 0}
-				{#each usuariosFiltrados as usuario (usuario._id)}
-					<button
-						type="button"
-						class="hover:bg-base-200 border-base-300 flex w-full items-center gap-3 border-b px-4 py-3 text-left transition-colors {processando
-							? 'cursor-wait opacity-50'
-							: 'cursor-pointer'}"
-						onclick={() => handleClickUsuario(usuario)}
-						disabled={processando}
-					>
-						<!-- Ícone de mensagem -->
-						<div
-							class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-all duration-300 hover:scale-110"
-							style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border: 1px solid rgba(102, 126, 234, 0.2);"
-						>
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								class="text-primary h-5 w-5"
-							>
-								<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-								<path d="M9 10h.01M15 10h.01" />
-							</svg>
-						</div>
+  <!-- Lista de conteúdo -->
+  <div class="flex-1 overflow-y-auto">
+    {#if activeTab === "usuarios"}
+      <!-- Lista de usuários -->
+      {#if usuarios?.data && usuariosFiltrados.length > 0}
+        {#each usuariosFiltrados as usuario (usuario._id)}
+          <button
+            type="button"
+            class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando
+              ? 'opacity-50 cursor-wait'
+              : 'cursor-pointer'}"
+            onclick={() => handleClickUsuario(usuario)}
+            disabled={processando}
+          >
+            <!-- Ícone de mensagem -->
+            <div
+              class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110"
+              style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border: 1px solid rgba(102, 126, 234, 0.2);"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="w-5 h-5 text-primary"
+              >
+                <path
+                  d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+                />
+                <path d="M9 10h.01M15 10h.01" />
+              </svg>
+            </div>
 
-						<!-- Avatar -->
-						<div class="relative shrink-0">
-							<UserAvatar
-								avatar={usuario.avatar}
-								fotoPerfilUrl={usuario.fotoPerfilUrl}
-								nome={usuario.nome}
-								size="md"
-							/>
-							<!-- Status badge -->
-							<div class="absolute right-0 bottom-0">
-								<UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
-							</div>
-						</div>
+            <!-- Avatar -->
+            <div class="relative shrink-0">
+              <UserAvatar
+                avatar={usuario.avatar}
+                fotoPerfilUrl={usuario.fotoPerfilUrl}
+                nome={usuario.nome}
+                size="md"
+              />
+              <!-- Status badge -->
+              <div class="absolute bottom-0 right-0">
+                <UserStatusBadge
+                  status={usuario.statusPresenca || "offline"}
+                  size="sm"
+                />
+              </div>
+            </div>
 
-						<!-- Conteúdo -->
-						<div class="min-w-0 flex-1">
-							<div class="mb-1 flex items-center justify-between">
-								<p class="text-base-content truncate font-semibold">
-									{usuario.nome}
-								</p>
-								<span
-									class="rounded-full px-2 py-0.5 text-xs {usuario.statusPresenca === 'online'
-										? 'bg-success/20 text-success'
-										: usuario.statusPresenca === 'ausente'
-											? 'bg-warning/20 text-warning'
-											: usuario.statusPresenca === 'em_reuniao'
-												? 'bg-error/20 text-error'
-												: 'bg-base-300 text-base-content/50'}"
-								>
-									{getStatusLabel(usuario.statusPresenca)}
-								</span>
-							</div>
-							<div class="flex items-center gap-2">
-								<p class="text-base-content/70 truncate text-sm">
-									{usuario.statusMensagem || usuario.email}
-								</p>
-							</div>
-						</div>
-					</button>
-				{/each}
-			{:else if !usuarios?.data}
-				<!-- Loading -->
-				<div class="flex h-full items-center justify-center">
-					<span class="loading loading-spinner loading-lg"></span>
-				</div>
-			{:else}
-				<!-- Nenhum usuário encontrado -->
-				<div class="flex h-full flex-col items-center justify-center px-4 text-center">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="text-base-content/30 mb-4 h-16 w-16"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
-						/>
-					</svg>
-					<p class="text-base-content/70">Nenhum usuário encontrado</p>
-				</div>
-			{/if}
-		{:else}
-			<!-- Lista de conversas (grupos e salas) -->
-			{#if conversas?.data && conversasFiltradas().length > 0}
-				{#each conversasFiltradas() as conversa (conversa._id)}
-					<button
-						type="button"
-						class="hover:bg-base-200 border-base-300 flex w-full items-center gap-3 border-b px-4 py-3 text-left transition-colors {processando
-							? 'cursor-wait opacity-50'
-							: 'cursor-pointer'}"
-						onclick={() => handleClickConversa(conversa)}
-						disabled={processando}
-					>
-						<!-- Ícone de grupo/sala -->
-						<div
-							class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-all duration-300 hover:scale-110 {conversa.tipo ===
-							'sala_reuniao'
-								? 'border border-blue-300/30 bg-linear-to-br from-blue-500/20 to-purple-500/20'
-								: 'from-primary/20 to-secondary/20 border-primary/30 border bg-linear-to-br'}"
-						>
-							{#if conversa.tipo === 'sala_reuniao'}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="2"
-									stroke="currentColor"
-									class="h-5 w-5 text-blue-500"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
-									/>
-								</svg>
-							{:else}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="2"
-									stroke="currentColor"
-									class="text-primary h-5 w-5"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
-									/>
-								</svg>
-							{/if}
-						</div>
+            <!-- Conteúdo -->
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center justify-between mb-1">
+                <p class="font-semibold text-base-content truncate">
+                  {usuario.nome}
+                </p>
+                <span
+                  class="text-xs px-2 py-0.5 rounded-full {usuario.statusPresenca ===
+                  'online'
+                    ? 'bg-success/20 text-success'
+                    : usuario.statusPresenca === 'ausente'
+                      ? 'bg-warning/20 text-warning'
+                      : usuario.statusPresenca === 'em_reuniao'
+                        ? 'bg-error/20 text-error'
+                        : 'bg-base-300 text-base-content/50'}"
+                >
+                  {getStatusLabel(usuario.statusPresenca)}
+                </span>
+              </div>
+              <div class="flex items-center gap-2">
+                <p class="text-sm text-base-content/70 truncate">
+                  {usuario.statusMensagem || usuario.email}
+                </p>
+              </div>
+            </div>
+          </button>
+        {/each}
+      {:else if !usuarios?.data}
+        <!-- Loading -->
+        <div class="flex items-center justify-center h-full">
+          <span class="loading loading-spinner loading-lg"></span>
+        </div>
+      {:else}
+        <!-- Nenhum usuário encontrado -->
+        <div
+          class="flex flex-col items-center justify-center h-full text-center px-4"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-16 h-16 text-base-content/30 mb-4"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+            />
+          </svg>
+          <p class="text-base-content/70">Nenhum usuário encontrado</p>
+        </div>
+      {/if}
+    {:else}
+      <!-- Lista de conversas (grupos e salas) -->
+      {#if conversas?.data && conversasFiltradas().length > 0}
+        {#each conversasFiltradas() as conversa (conversa._id)}
+          <button
+            type="button"
+            class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando
+              ? 'opacity-50 cursor-wait'
+              : 'cursor-pointer'}"
+            onclick={() => handleClickConversa(conversa)}
+            disabled={processando}
+          >
+            <!-- Ícone de grupo/sala -->
+            <div
+              class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 {conversa.tipo ===
+              'sala_reuniao'
+                ? 'bg-linear-to-br from-blue-500/20 to-purple-500/20 border border-blue-300/30'
+                : 'bg-linear-to-br from-primary/20 to-secondary/20 border border-primary/30'}"
+            >
+              {#if conversa.tipo === "sala_reuniao"}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  class="w-5 h-5 text-blue-500"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+                  />
+                </svg>
+              {:else}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                  class="w-5 h-5 text-primary"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
+                  />
+                </svg>
+              {/if}
+            </div>
 
-						<!-- Conteúdo -->
-						<div class="min-w-0 flex-1">
-							<div class="mb-1 flex items-center justify-between">
-								<p class="text-base-content truncate font-semibold">
-									{conversa.nome ||
-										(conversa.tipo === 'sala_reuniao' ? 'Sala sem nome' : 'Grupo sem nome')}
-								</p>
-								{#if conversa.naoLidas > 0}
-									<span class="badge badge-primary badge-sm">{conversa.naoLidas}</span>
-								{/if}
-							</div>
-							<div class="flex items-center gap-2">
-								<span
-									class="rounded-full px-2 py-0.5 text-xs {conversa.tipo === 'sala_reuniao'
-										? 'bg-blue-500/20 text-blue-500'
-										: 'bg-primary/20 text-primary'}"
-								>
-									{conversa.tipo === 'sala_reuniao' ? '👑 Sala de Reunião' : '👥 Grupo'}
-								</span>
-								{#if conversa.participantesInfo}
-									<span class="text-base-content/50 text-xs">
-										{conversa.participantesInfo.length} participante{conversa.participantesInfo
-											.length !== 1
-											? 's'
-											: ''}
-									</span>
-								{/if}
-							</div>
-						</div>
-					</button>
-				{/each}
-			{:else if !conversas?.data}
-				<!-- Loading -->
-				<div class="flex h-full items-center justify-center">
-					<span class="loading loading-spinner loading-lg"></span>
-				</div>
-			{:else}
-				<!-- Nenhuma conversa encontrada -->
-				<div class="flex h-full flex-col items-center justify-center px-4 text-center">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke-width="1.5"
-						stroke="currentColor"
-						class="text-base-content/30 mb-4 h-16 w-16"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
-						/>
-					</svg>
-					<p class="text-base-content/70 mb-2 font-medium">Nenhuma conversa encontrada</p>
-					<p class="text-base-content/50 text-sm">Crie um grupo ou sala de reunião para começar</p>
-				</div>
-			{/if}
-		{/if}
-	</div>
+            <!-- Conteúdo -->
+            <div class="flex-1 min-w-0">
+              <div class="flex items-center justify-between mb-1">
+                <p class="font-semibold text-base-content truncate">
+                  {conversa.nome ||
+                    (conversa.tipo === "sala_reuniao"
+                      ? "Sala sem nome"
+                      : "Grupo sem nome")}
+                </p>
+                {#if conversa.naoLidas > 0}
+                  <span class="badge badge-primary badge-sm"
+                    >{conversa.naoLidas}</span
+                  >
+                {/if}
+              </div>
+              <div class="flex items-center gap-2">
+                <span
+                  class="text-xs px-2 py-0.5 rounded-full {conversa.tipo ===
+                  'sala_reuniao'
+                    ? 'bg-blue-500/20 text-blue-500'
+                    : 'bg-primary/20 text-primary'}"
+                >
+                  {conversa.tipo === "sala_reuniao"
+                    ? "👑 Sala de Reunião"
+                    : "👥 Grupo"}
+                </span>
+                {#if conversa.participantesInfo}
+                  <span class="text-xs text-base-content/50">
+                    {conversa.participantesInfo.length} participante{conversa
+                      .participantesInfo.length !== 1
+                      ? "s"
+                      : ""}
+                  </span>
+                {/if}
+              </div>
+            </div>
+          </button>
+        {/each}
+      {:else if !conversas?.data}
+        <!-- Loading -->
+        <div class="flex items-center justify-center h-full">
+          <span class="loading loading-spinner loading-lg"></span>
+        </div>
+      {:else}
+        <!-- Nenhuma conversa encontrada -->
+        <div
+          class="flex flex-col items-center justify-center h-full text-center px-4"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-16 h-16 text-base-content/30 mb-4"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
+            />
+          </svg>
+          <p class="text-base-content/70 font-medium mb-2">
+            Nenhuma conversa encontrada
+          </p>
+          <p class="text-sm text-base-content/50">
+            Crie um grupo ou sala de reunião para começar
+          </p>
+        </div>
+      {/if}
+    {/if}
+  </div>
 </div>
 
 <!-- Modal de Nova Conversa -->
 {#if showNewConversationModal}
-	<NewConversationModal onClose={() => (showNewConversationModal = false)} />
+  <NewConversationModal onClose={() => (showNewConversationModal = false)} />
 {/if}
diff --git a/apps/web/src/lib/components/chat/ChatWidget.svelte b/apps/web/src/lib/components/chat/ChatWidget.svelte
index ecda3cf..9180f2b 100644
--- a/apps/web/src/lib/components/chat/ChatWidget.svelte
+++ b/apps/web/src/lib/components/chat/ChatWidget.svelte
@@ -34,8 +34,8 @@
 		if (!usuario) return null;
 
 		// Prioridade: fotoPerfilUrl > avatar > fallback com nome
-		if (usuario.fotoPerfilUrl) {
-			return usuario.fotoPerfilUrl;
+		if (usuario.fotoPerfil) {
+			return usuario.fotoPerfil;
 		}
 		if (usuario.avatar) {
 			return getAvatarUrl(usuario.avatar);
@@ -768,14 +768,14 @@
 		type="button"
 		class="group fixed border-0 backdrop-blur-xl"
 		style="
-      z-index: 99999 !important;
-      width: 4.5rem;
-      height: 4.5rem;
+      z-index: 99999 !important; 
+      width: 4.5rem; 
+      height: 4.5rem; 
       bottom: {bottomPos};
       right: {rightPos};
       position: fixed !important;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-      box-shadow:
+      box-shadow: 
         0 20px 60px -10px rgba(102, 126, 234, 0.5),
         0 10px 30px -5px rgba(118, 75, 162, 0.4),
         0 0 0 1px rgba(255, 255, 255, 0.1) inset;
@@ -839,7 +839,7 @@
 				class="absolute -top-1 -right-1 z-20 flex h-8 w-8 items-center justify-center rounded-full text-xs font-black text-white"
 				style="
           background: linear-gradient(135deg, #ff416c, #ff4b2b);
-          box-shadow:
+          box-shadow: 
             0 8px 24px -4px rgba(255, 65, 108, 0.6),
             0 4px 12px -2px rgba(255, 75, 43, 0.4),
             0 0 0 3px rgba(255, 255, 255, 0.3),
@@ -883,7 +883,7 @@
       position: fixed !important;
       background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(249,250,251,0.98) 100%);
       border-radius: 24px;
-      box-shadow:
+      box-shadow: 
         0 32px 64px -12px rgba(0, 0, 0, 0.15),
         0 16px 32px -8px rgba(0, 0, 0, 0.1),
         0 0 0 1px rgba(0, 0, 0, 0.05),
diff --git a/apps/web/src/lib/components/chat/ChatWindow.svelte b/apps/web/src/lib/components/chat/ChatWindow.svelte
index 14da539..9cecb9d 100644
--- a/apps/web/src/lib/components/chat/ChatWindow.svelte
+++ b/apps/web/src/lib/components/chat/ChatWindow.svelte
@@ -1,495 +1,545 @@
 <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);
-		}
-	}
-
-	function handleDocumentClick() {
-		if (showAdminMenu) showAdminMenu = false;
-	}
+      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>
 
-<svelte:window onclick={handleDocumentClick} />
+<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">
-	<!-- Header -->
-	<div class="border-base-300 bg-base-200 flex items-center gap-3 border-b px-4 py-3">
-		<!-- Botão Voltar -->
-		<button
-			type="button"
-			class="btn 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" />
-		</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"
-						>
-							<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-base-300 shrink-0 border-t">
-		<MessageInput conversaId={conversaId as Id<'conversas'>} />
-	</div>
+  <!-- Input -->
+  <div class="border-t border-base-300 shrink-0">
+    <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="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 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 (!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 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 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}
diff --git a/apps/web/src/lib/components/chat/NewConversationModal.svelte b/apps/web/src/lib/components/chat/NewConversationModal.svelte
index 6adb2cc..3489113 100644
--- a/apps/web/src/lib/components/chat/NewConversationModal.svelte
+++ b/apps/web/src/lib/components/chat/NewConversationModal.svelte
@@ -1,423 +1,454 @@
 <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 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 { 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<Id<'usuarios'>[]>([]);
-	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) => 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) =>
-					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, b) => {
-			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: Id<'usuarios'>) {
-		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: Id<'usuarios'>) {
-		try {
-			loading = true;
-			const conversaId = await client.mutation(api.chat.criarConversa, {
-				tipo: 'individual',
-				participantes: [userId]
-			});
-			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() {
-		console.log('selectedUsers', selectedUsers);
+  async function handleCriarGrupo() {
+    if (selectedUsers.length < 2) {
+      alert("Selecione pelo menos 2 participantes");
+      return;
+    }
 
-		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,
-				nome: groupName.trim()
-			});
-			abrirConversa(conversaId);
-			onClose();
-		} catch (error) {
-			console.error('Erro ao criar grupo:', error);
-			alert('Erro ao criar grupo');
-		} 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
-			});
-			abrirConversa(conversaId);
-			onClose();
-		} catch (error) {
-			console.error('Erro ao criar sala de reunião:', error);
-			alert('Erro ao criar sala de reunião');
-		} 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">
-	<div class="modal-box flex max-h-[85vh] max-w-2xl flex-col p-0">
-		<!-- 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>
+<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>
 
-		<!-- 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>
+    <!-- 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>
 
-		<!-- Content -->
-		<div class="flex-1 overflow-y-auto px-6 py-4">
-			{#if activeTab === 'grupo'}
-				<!-- Criar Grupo -->
-				<div class="mb-4">
-					<div class="label pb-2">
-						<span class="label-text font-semibold">Nome do Grupo</span>
-					</div>
-					<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>
+    <!-- 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>
 
-				<div class="mb-3">
-					<div class="label pb-2">
-						<span class="label-text font-semibold">
-							Participantes {selectedUsers.length > 0
-								? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})`
-								: ''}
-						</span>
-					</div>
-				</div>
-			{:else if activeTab === 'sala_reuniao'}
-				<!-- Criar Sala de Reunião -->
-				<div class="mb-4">
-					<div 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
-						>
-					</div>
-					<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>
+      {: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">
-					<div class="label pb-2">
-						<span class="label-text font-semibold">
-							Participantes {selectedUsers.length > 0
-								? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})`
-								: ''}
-						</span>
-					</div>
-				</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="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>
+      <!-- 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>
 
-			<!-- 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>
+      <!-- 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>
 
-							<!-- 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.email || usuario.matricula || 'Sem informações'}
-								</p>
-							</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>
 
-							<!-- 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}
-										tabindex="-1"
-										onclick={(e) => {
-											e.stopPropagation();
-											if (!loading) toggleUserSelection(usuario._id);
-										}}
-									/>
-								</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>
+              <!-- 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>
 
-		<!-- 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>
+    <!-- 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>
 </dialog>
diff --git a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
index b813bdc..fed2242 100644
--- a/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
+++ b/apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
@@ -1,435 +1,487 @@
 <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 UserAvatar from './UserAvatar.svelte';
-	import UserStatusBadge from './UserStatusBadge.svelte';
-	import { X, Users, UserPlus, ArrowUp, ArrowDown, Trash2, Search } 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 UserAvatar from "./UserAvatar.svelte";
+  import UserStatusBadge from "./UserStatusBadge.svelte";
+  import {
+    X,
+    Users,
+    UserPlus,
+    ArrowUp,
+    ArrowDown,
+    Trash2,
+    Search,
+  } from "lucide-svelte";
 
-	interface Props {
-		conversaId: Id<'conversas'>;
-		isAdmin: boolean;
-		onClose: () => void;
-	}
+  interface Props {
+    conversaId: Id<"conversas">;
+    isAdmin: boolean;
+    onClose: () => void;
+  }
 
-	let { conversaId, isAdmin, onClose }: Props = $props();
+  let { conversaId, isAdmin, onClose }: Props = $props();
 
-	const client = useConvexClient();
-	const conversas = useQuery(api.chat.listarConversas, {});
-	const todosUsuariosQuery = useQuery(api.chat.listarTodosUsuarios, {});
+  const client = useConvexClient();
+  const conversas = useQuery(api.chat.listarConversas, {});
+  const todosUsuariosQuery = useQuery(api.chat.listarTodosUsuarios, {});
 
-	let activeTab = $state<'participantes' | 'adicionar'>('participantes');
-	let searchQuery = $state('');
-	let loading = $state<string | null>(null);
-	let error = $state<string | null>(null);
+  let activeTab = $state<"participantes" | "adicionar">("participantes");
+  let searchQuery = $state("");
+  let loading = $state<string | null>(null);
+  let error = $state<string | null>(null);
 
-	const conversa = $derived(() => {
-		if (!conversas?.data) return null;
-		return conversas.data.find((c: any) => c._id === conversaId);
-	});
+  const conversa = $derived(() => {
+    if (!conversas?.data) return null;
+    return conversas.data.find((c: any) => c._id === conversaId);
+  });
 
-	const todosUsuarios = $derived(() => {
-		return todosUsuariosQuery?.data || [];
-	});
+  const todosUsuarios = $derived(() => {
+    return todosUsuariosQuery?.data || [];
+  });
 
-	const participantes = $derived(() => {
-		try {
-			const conv = conversa();
-			const usuarios = todosUsuarios();
-			if (!conv || !usuarios || usuarios.length === 0) return [];
+  const participantes = $derived(() => {
+    try {
+      const conv = conversa();
+      const usuarios = todosUsuarios();
+      if (!conv || !usuarios || usuarios.length === 0) return [];
 
-			const participantesInfo = conv.participantesInfo || [];
-			if (!Array.isArray(participantesInfo) || participantesInfo.length === 0) return [];
+      const participantesInfo = conv.participantesInfo || [];
+      if (!Array.isArray(participantesInfo) || participantesInfo.length === 0)
+        return [];
 
-			return participantesInfo
-				.map((p: any) => {
-					try {
-						// p pode ser um objeto com _id ou apenas um ID
-						const participanteId = p?._id || p;
-						if (!participanteId) return null;
+      return participantesInfo
+        .map((p: any) => {
+          try {
+            // p pode ser um objeto com _id ou apenas um ID
+            const participanteId = p?._id || p;
+            if (!participanteId) return null;
 
-						const usuario = usuarios.find((u: any) => {
-							try {
-								return String(u?._id) === String(participanteId);
-							} catch {
-								return false;
-							}
-						});
-						if (!usuario) return null;
+            const usuario = usuarios.find((u: any) => {
+              try {
+                return String(u?._id) === String(participanteId);
+              } catch {
+                return false;
+              }
+            });
+            if (!usuario) return null;
 
-						// Combinar dados do usuário com dados do participante (se p for objeto)
-						return {
-							...usuario,
-							...(typeof p === 'object' && p !== null && p !== undefined ? p : {}),
-							// Garantir que _id existe e priorizar o do usuario
-							_id: usuario._id
-						};
-					} catch (err) {
-						console.error('Erro ao processar participante:', err, p);
-						return null;
-					}
-				})
-				.filter((p: any) => p !== null && p._id);
-		} catch (err) {
-			console.error('Erro ao calcular participantes:', err);
-			return [];
-		}
-	});
+            // Combinar dados do usuário com dados do participante (se p for objeto)
+            return {
+              ...usuario,
+              ...(typeof p === "object" && p !== null && p !== undefined
+                ? p
+                : {}),
+              // Garantir que _id existe e priorizar o do usuario
+              _id: usuario._id,
+            };
+          } catch (err) {
+            console.error("Erro ao processar participante:", err, p);
+            return null;
+          }
+        })
+        .filter((p: any) => p !== null && p._id);
+    } catch (err) {
+      console.error("Erro ao calcular participantes:", err);
+      return [];
+    }
+  });
 
-	const administradoresIds = $derived(() => {
-		return conversa()?.administradores || [];
-	});
+  const administradoresIds = $derived(() => {
+    return conversa()?.administradores || [];
+  });
 
-	const usuariosDisponiveis = $derived(() => {
-		const usuarios = todosUsuarios();
-		if (!usuarios || usuarios.length === 0) return [];
-		const participantesIds = conversa()?.participantes || [];
-		return usuarios.filter(
-			(u: any) => !participantesIds.some((pid: any) => String(pid) === String(u._id))
-		);
-	});
+  const usuariosDisponiveis = $derived(() => {
+    const usuarios = todosUsuarios();
+    if (!usuarios || usuarios.length === 0) return [];
+    const participantesIds = conversa()?.participantes || [];
+    return usuarios.filter(
+      (u: any) =>
+        !participantesIds.some((pid: any) => String(pid) === String(u._id)),
+    );
+  });
 
-	const usuariosFiltrados = $derived(() => {
-		const disponiveis = usuariosDisponiveis();
-		if (!searchQuery.trim()) return disponiveis;
-		const query = searchQuery.toLowerCase();
-		return disponiveis.filter(
-			(u: any) =>
-				(u.nome || '').toLowerCase().includes(query) ||
-				(u.email || '').toLowerCase().includes(query) ||
-				(u.matricula || '').toLowerCase().includes(query)
-		);
-	});
+  const usuariosFiltrados = $derived(() => {
+    const disponiveis = usuariosDisponiveis();
+    if (!searchQuery.trim()) return disponiveis;
+    const query = searchQuery.toLowerCase();
+    return disponiveis.filter(
+      (u: any) =>
+        (u.nome || "").toLowerCase().includes(query) ||
+        (u.email || "").toLowerCase().includes(query) ||
+        (u.matricula || "").toLowerCase().includes(query),
+    );
+  });
 
-	function isParticipanteAdmin(usuarioId: string): boolean {
-		const admins = administradoresIds();
-		return admins.some((adminId: any) => String(adminId) === String(usuarioId));
-	}
+  function isParticipanteAdmin(usuarioId: string): boolean {
+    const admins = administradoresIds();
+    return admins.some((adminId: any) => String(adminId) === String(usuarioId));
+  }
 
-	function isCriador(usuarioId: string): boolean {
-		const criadoPor = conversa()?.criadoPor;
-		return criadoPor ? String(criadoPor) === String(usuarioId) : false;
-	}
+  function isCriador(usuarioId: string): boolean {
+    const criadoPor = conversa()?.criadoPor;
+    return criadoPor ? String(criadoPor) === String(usuarioId) : false;
+  }
 
-	async function removerParticipante(participanteId: string) {
-		if (!confirm('Tem certeza que deseja remover este participante?')) return;
+  async function removerParticipante(participanteId: string) {
+    if (!confirm("Tem certeza que deseja remover este participante?")) return;
 
-		try {
-			loading = `remover-${participanteId}`;
-			error = null;
-			const resultado = await client.mutation(api.chat.removerParticipanteSala, {
-				conversaId,
-				participanteId: participanteId as any
-			});
+    try {
+      loading = `remover-${participanteId}`;
+      error = null;
+      const resultado = await client.mutation(
+        api.chat.removerParticipanteSala,
+        {
+          conversaId,
+          participanteId: participanteId as any,
+        },
+      );
 
-			if (!resultado.sucesso) {
-				error = resultado.erro || 'Erro ao remover participante';
-			}
-		} catch (err: any) {
-			error = err.message || 'Erro ao remover participante';
-		} finally {
-			loading = null;
-		}
-	}
+      if (!resultado.sucesso) {
+        error = resultado.erro || "Erro ao remover participante";
+      }
+    } catch (err: any) {
+      error = err.message || "Erro ao remover participante";
+    } finally {
+      loading = null;
+    }
+  }
 
-	async function promoverAdmin(participanteId: string) {
-		if (!confirm('Promover este participante a administrador?')) return;
+  async function promoverAdmin(participanteId: string) {
+    if (!confirm("Promover este participante a administrador?")) return;
 
-		try {
-			loading = `promover-${participanteId}`;
-			error = null;
-			const resultado = await client.mutation(api.chat.promoverAdministrador, {
-				conversaId,
-				participanteId: participanteId as any
-			});
+    try {
+      loading = `promover-${participanteId}`;
+      error = null;
+      const resultado = await client.mutation(api.chat.promoverAdministrador, {
+        conversaId,
+        participanteId: participanteId as any,
+      });
 
-			if (!resultado.sucesso) {
-				error = resultado.erro || 'Erro ao promover administrador';
-			}
-		} catch (err: any) {
-			error = err.message || 'Erro ao promover administrador';
-		} finally {
-			loading = null;
-		}
-	}
+      if (!resultado.sucesso) {
+        error = resultado.erro || "Erro ao promover administrador";
+      }
+    } catch (err: any) {
+      error = err.message || "Erro ao promover administrador";
+    } finally {
+      loading = null;
+    }
+  }
 
-	async function rebaixarAdmin(participanteId: string) {
-		if (!confirm('Rebaixar este administrador a participante?')) return;
+  async function rebaixarAdmin(participanteId: string) {
+    if (!confirm("Rebaixar este administrador a participante?")) return;
 
-		try {
-			loading = `rebaixar-${participanteId}`;
-			error = null;
-			const resultado = await client.mutation(api.chat.rebaixarAdministrador, {
-				conversaId,
-				participanteId: participanteId as any
-			});
+    try {
+      loading = `rebaixar-${participanteId}`;
+      error = null;
+      const resultado = await client.mutation(api.chat.rebaixarAdministrador, {
+        conversaId,
+        participanteId: participanteId as any,
+      });
 
-			if (!resultado.sucesso) {
-				error = resultado.erro || 'Erro ao rebaixar administrador';
-			}
-		} catch (err: any) {
-			error = err.message || 'Erro ao rebaixar administrador';
-		} finally {
-			loading = null;
-		}
-	}
+      if (!resultado.sucesso) {
+        error = resultado.erro || "Erro ao rebaixar administrador";
+      }
+    } catch (err: any) {
+      error = err.message || "Erro ao rebaixar administrador";
+    } finally {
+      loading = null;
+    }
+  }
 
-	async function adicionarParticipante(usuarioId: string) {
-		try {
-			loading = `adicionar-${usuarioId}`;
-			error = null;
-			const resultado = await client.mutation(api.chat.adicionarParticipanteSala, {
-				conversaId,
-				participanteId: usuarioId as any
-			});
+  async function adicionarParticipante(usuarioId: string) {
+    try {
+      loading = `adicionar-${usuarioId}`;
+      error = null;
+      const resultado = await client.mutation(
+        api.chat.adicionarParticipanteSala,
+        {
+          conversaId,
+          participanteId: usuarioId as any,
+        },
+      );
 
-			if (!resultado.sucesso) {
-				error = resultado.erro || 'Erro ao adicionar participante';
-			} else {
-				searchQuery = '';
-			}
-		} catch (err: any) {
-			error = err.message || 'Erro ao adicionar participante';
-		} finally {
-			loading = null;
-		}
-	}
+      if (!resultado.sucesso) {
+        error = resultado.erro || "Erro ao adicionar participante";
+      } else {
+        searchQuery = "";
+      }
+    } catch (err: any) {
+      error = err.message || "Erro ao adicionar participante";
+    } finally {
+      loading = null;
+    }
+  }
 </script>
 
-<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
-	<div
-		class="modal-box flex max-h-[80vh] 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">
-			<div>
-				<h2 class="flex items-center gap-2 text-xl font-semibold">
-					<Users class="text-primary h-5 w-5" />
-					Gerenciar Sala de Reunião
-				</h2>
-				<p class="text-base-content/60 text-sm">
-					{conversa()?.nome || 'Sem nome'}
-				</p>
-			</div>
-			<button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
-				<X class="h-5 w-5" />
-			</button>
-		</div>
+<dialog
+  class="modal modal-open"
+  onclick={(e) => e.target === e.currentTarget && onClose()}
+>
+  <div
+    class="modal-box max-w-2xl max-h-[80vh] flex flex-col p-0"
+    onclick={(e) => e.stopPropagation()}
+  >
+    <!-- Header -->
+    <div
+      class="flex items-center justify-between px-6 py-4 border-b border-base-300"
+    >
+      <div>
+        <h2 class="text-xl font-semibold flex items-center gap-2">
+          <Users class="w-5 h-5 text-primary" />
+          Gerenciar Sala de Reunião
+        </h2>
+        <p class="text-sm text-base-content/60">
+          {conversa()?.nome || "Sem nome"}
+        </p>
+      </div>
+      <button
+        type="button"
+        class="btn btn-ghost btn-sm btn-circle"
+        onclick={onClose}
+        aria-label="Fechar"
+      >
+        <X class="w-5 h-5" />
+      </button>
+    </div>
 
-		<!-- Tabs -->
-		{#if isAdmin}
-			<div class="tabs tabs-boxed p-4">
-				<button
-					type="button"
-					class={`tab flex items-center gap-2 ${activeTab === 'participantes' ? 'tab-active' : ''}`}
-					onclick={() => (activeTab = 'participantes')}
-				>
-					<Users class="h-4 w-4" />
-					Participantes
-				</button>
-				<button
-					type="button"
-					class={`tab flex items-center gap-2 ${activeTab === 'adicionar' ? 'tab-active' : ''}`}
-					onclick={() => (activeTab = 'adicionar')}
-				>
-					<UserPlus class="h-4 w-4" />
-					Adicionar Participante
-				</button>
-			</div>
-		{/if}
+    <!-- Tabs -->
+    {#if isAdmin}
+      <div class="tabs tabs-boxed p-4">
+        <button
+          type="button"
+          class={`tab flex items-center gap-2 ${activeTab === "participantes" ? "tab-active" : ""}`}
+          onclick={() => (activeTab = "participantes")}
+        >
+          <Users class="w-4 h-4" />
+          Participantes
+        </button>
+        <button
+          type="button"
+          class={`tab flex items-center gap-2 ${activeTab === "adicionar" ? "tab-active" : ""}`}
+          onclick={() => (activeTab = "adicionar")}
+        >
+          <UserPlus class="w-4 h-4" />
+          Adicionar Participante
+        </button>
+      </div>
+    {/if}
 
-		<!-- Error Message -->
-		{#if error}
-			<div class="alert alert-error mx-6 mt-2">
-				<span>{error}</span>
-				<button type="button" class="btn btn-sm btn-ghost" onclick={() => (error = null)}>
-					<X class="h-4 w-4" />
-				</button>
-			</div>
-		{/if}
+    <!-- Error Message -->
+    {#if error}
+      <div class="mx-6 mt-2 alert alert-error">
+        <span>{error}</span>
+        <button
+          type="button"
+          class="btn btn-sm btn-ghost"
+          onclick={() => (error = null)}
+        >
+          <X class="w-4 h-4" />
+        </button>
+      </div>
+    {/if}
 
-		<!-- Content -->
-		<div class="flex-1 overflow-y-auto px-6">
-			{#if !conversas?.data}
-				<!-- Loading conversas -->
-				<div class="flex items-center justify-center py-8">
-					<span class="loading loading-spinner loading-lg"></span>
-					<span class="text-base-content/60 ml-2 text-sm">Carregando conversa...</span>
-				</div>
-			{:else if !todosUsuariosQuery?.data}
-				<!-- Loading usuários -->
-				<div class="flex items-center justify-center py-8">
-					<span class="loading loading-spinner loading-lg"></span>
-					<span class="text-base-content/60 ml-2 text-sm">Carregando usuários...</span>
-				</div>
-			{:else if activeTab === 'participantes'}
-				<!-- Lista de Participantes -->
-				<div class="space-y-2 py-2">
-					{#if participantes().length > 0}
-						{#each participantes() as participante (String(participante._id))}
-							{@const participanteId = String(participante._id)}
-							{@const ehAdmin = isParticipanteAdmin(participanteId)}
-							{@const ehCriador = isCriador(participanteId)}
-							{@const isLoading = loading?.includes(participanteId)}
-							<div
-								class="border-base-300 hover:bg-base-200 flex items-center gap-3 rounded-lg border p-3 transition-colors"
-							>
-								<!-- Avatar -->
-								<div class="relative shrink-0">
-									<UserAvatar
-										avatar={participante.avatar}
-										fotoPerfilUrl={participante.fotoPerfilUrl || participante.fotoPerfil}
-										nome={participante.nome || 'Usuário'}
-										size="sm"
-									/>
-									<div class="absolute right-0 bottom-0">
-										<UserStatusBadge status={participante.statusPresenca || 'offline'} size="sm" />
-									</div>
-								</div>
+    <!-- Content -->
+    <div class="flex-1 overflow-y-auto px-6">
+      {#if !conversas?.data}
+        <!-- Loading conversas -->
+        <div class="flex items-center justify-center py-8">
+          <span class="loading loading-spinner loading-lg"></span>
+          <span class="ml-2 text-sm text-base-content/60"
+            >Carregando conversa...</span
+          >
+        </div>
+      {:else if !todosUsuariosQuery?.data}
+        <!-- Loading usuários -->
+        <div class="flex items-center justify-center py-8">
+          <span class="loading loading-spinner loading-lg"></span>
+          <span class="ml-2 text-sm text-base-content/60"
+            >Carregando usuários...</span
+          >
+        </div>
+      {:else if activeTab === "participantes"}
+        <!-- Lista de Participantes -->
+        <div class="space-y-2 py-2">
+          {#if participantes().length > 0}
+            {#each participantes() as participante (String(participante._id))}
+              {@const participanteId = String(participante._id)}
+              {@const ehAdmin = isParticipanteAdmin(participanteId)}
+              {@const ehCriador = isCriador(participanteId)}
+              {@const isLoading = loading?.includes(participanteId)}
+              <div
+                class="flex items-center gap-3 p-3 rounded-lg border border-base-300 hover:bg-base-200 transition-colors"
+              >
+                <!-- Avatar -->
+                <div class="relative shrink-0">
+                  <UserAvatar
+                    avatar={participante.avatar}
+                    fotoPerfilUrl={participante.fotoPerfilUrl ||
+                      participante.fotoPerfil}
+                    nome={participante.nome || "Usuário"}
+                    size="sm"
+                  />
+                  <div class="absolute bottom-0 right-0">
+                    <UserStatusBadge
+                      status={participante.statusPresenca || "offline"}
+                      size="sm"
+                    />
+                  </div>
+                </div>
 
-								<!-- Info -->
-								<div class="min-w-0 flex-1">
-									<div class="flex items-center gap-2">
-										<p class="text-base-content truncate font-medium">
-											{participante.nome || 'Usuário'}
-										</p>
-										{#if ehAdmin}
-											<span class="badge badge-primary badge-sm">Admin</span>
-										{/if}
-										{#if ehCriador}
-											<span class="badge badge-secondary badge-sm">Criador</span>
-										{/if}
-									</div>
-									<p class="text-base-content/60 truncate text-sm">
-										{participante.setor || participante.email || ''}
-									</p>
-								</div>
+                <!-- Info -->
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2">
+                    <p class="font-medium text-base-content truncate">
+                      {participante.nome || "Usuário"}
+                    </p>
+                    {#if ehAdmin}
+                      <span class="badge badge-primary badge-sm">Admin</span>
+                    {/if}
+                    {#if ehCriador}
+                      <span class="badge badge-secondary badge-sm">Criador</span
+                      >
+                    {/if}
+                  </div>
+                  <p class="text-sm text-base-content/60 truncate">
+                    {participante.setor || participante.email || ""}
+                  </p>
+                </div>
 
-								<!-- Ações (apenas para admins) -->
-								{#if isAdmin && !ehCriador}
-									<div class="flex items-center gap-1">
-										{#if ehAdmin}
-											<button
-												type="button"
-												class="btn btn-xs btn-ghost"
-												onclick={() => rebaixarAdmin(participanteId)}
-												disabled={isLoading}
-												title="Rebaixar administrador"
-											>
-												{#if isLoading && loading?.includes('rebaixar')}
-													<span class="loading loading-spinner loading-xs"></span>
-												{:else}
-													<ArrowDown class="h-4 w-4" />
-												{/if}
-											</button>
-										{:else}
-											<button
-												type="button"
-												class="btn btn-xs btn-ghost"
-												onclick={() => promoverAdmin(participanteId)}
-												disabled={isLoading}
-												title="Promover a administrador"
-											>
-												{#if isLoading && loading?.includes('promover')}
-													<span class="loading loading-spinner loading-xs"></span>
-												{:else}
-													<ArrowUp class="h-4 w-4" />
-												{/if}
-											</button>
-										{/if}
-										<button
-											type="button"
-											class="btn btn-xs btn-error btn-ghost"
-											onclick={() => removerParticipante(participanteId)}
-											disabled={isLoading}
-											title="Remover participante"
-										>
-											{#if isLoading && loading?.includes('remover')}
-												<span class="loading loading-spinner loading-xs"></span>
-											{:else}
-												<Trash2 class="h-4 w-4" />
-											{/if}
-										</button>
-									</div>
-								{/if}
-							</div>
-						{/each}
-					{:else}
-						<div class="text-base-content/50 py-8 text-center">Nenhum participante encontrado</div>
-					{/if}
-				</div>
-			{:else if activeTab === 'adicionar' && isAdmin}
-				<!-- Adicionar Participante -->
-				<div class="relative mb-4">
-					<input
-						type="text"
-						placeholder="Buscar usuários..."
-						class="input input-bordered w-full pl-10"
-						bind:value={searchQuery}
-					/>
-					<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
-				</div>
+                <!-- Ações (apenas para admins) -->
+                {#if isAdmin && !ehCriador}
+                  <div class="flex items-center gap-1">
+                    {#if ehAdmin}
+                      <button
+                        type="button"
+                        class="btn btn-xs btn-ghost"
+                        onclick={() => rebaixarAdmin(participanteId)}
+                        disabled={isLoading}
+                        title="Rebaixar administrador"
+                      >
+                        {#if isLoading && loading?.includes("rebaixar")}
+                          <span class="loading loading-spinner loading-xs"
+                          ></span>
+                        {:else}
+                          <ArrowDown class="w-4 h-4" />
+                        {/if}
+                      </button>
+                    {:else}
+                      <button
+                        type="button"
+                        class="btn btn-xs btn-ghost"
+                        onclick={() => promoverAdmin(participanteId)}
+                        disabled={isLoading}
+                        title="Promover a administrador"
+                      >
+                        {#if isLoading && loading?.includes("promover")}
+                          <span class="loading loading-spinner loading-xs"
+                          ></span>
+                        {:else}
+                          <ArrowUp class="w-4 h-4" />
+                        {/if}
+                      </button>
+                    {/if}
+                    <button
+                      type="button"
+                      class="btn btn-xs btn-error btn-ghost"
+                      onclick={() => removerParticipante(participanteId)}
+                      disabled={isLoading}
+                      title="Remover participante"
+                    >
+                      {#if isLoading && loading?.includes("remover")}
+                        <span class="loading loading-spinner loading-xs"></span>
+                      {:else}
+                        <Trash2 class="w-4 h-4" />
+                      {/if}
+                    </button>
+                  </div>
+                {/if}
+              </div>
+            {/each}
+          {:else}
+            <div class="text-center py-8 text-base-content/50">
+              Nenhum participante encontrado
+            </div>
+          {/if}
+        </div>
+      {:else if activeTab === "adicionar" && isAdmin}
+        <!-- Adicionar Participante -->
+        <div class="mb-4 relative">
+          <input
+            type="text"
+            placeholder="Buscar usuários..."
+            class="input input-bordered w-full pl-10"
+            bind:value={searchQuery}
+          />
+          <Search
+            class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40"
+          />
+        </div>
 
-				<div class="space-y-2">
-					{#if usuariosFiltrados().length > 0}
-						{#each usuariosFiltrados() as usuario (String(usuario._id))}
-							{@const usuarioId = String(usuario._id)}
-							{@const isLoading = loading?.includes(usuarioId)}
-							<button
-								type="button"
-								class="border-base-300 hover:bg-base-200 flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors"
-								onclick={() => adicionarParticipante(usuarioId)}
-								disabled={isLoading}
-							>
-								<!-- Avatar -->
-								<div class="relative shrink-0">
-									<UserAvatar
-										avatar={usuario.avatar}
-										fotoPerfilUrl={usuario.fotoPerfilUrl || usuario.fotoPerfil}
-										nome={usuario.nome || 'Usuário'}
-										size="sm"
-									/>
-									<div class="absolute right-0 bottom-0">
-										<UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
-									</div>
-								</div>
+        <div class="space-y-2">
+          {#if usuariosFiltrados().length > 0}
+            {#each usuariosFiltrados() as usuario (String(usuario._id))}
+              {@const usuarioId = String(usuario._id)}
+              {@const isLoading = loading?.includes(usuarioId)}
+              <button
+                type="button"
+                class="w-full text-left px-4 py-3 rounded-lg border border-base-300 hover:bg-base-200 transition-colors flex items-center gap-3"
+                onclick={() => adicionarParticipante(usuarioId)}
+                disabled={isLoading}
+              >
+                <!-- Avatar -->
+                <div class="relative shrink-0">
+                  <UserAvatar
+                    avatar={usuario.avatar}
+                    fotoPerfilUrl={usuario.fotoPerfilUrl || usuario.fotoPerfil}
+                    nome={usuario.nome || "Usuário"}
+                    size="sm"
+                  />
+                  <div class="absolute bottom-0 right-0">
+                    <UserStatusBadge
+                      status={usuario.statusPresenca || "offline"}
+                      size="sm"
+                    />
+                  </div>
+                </div>
 
-								<!-- Info -->
-								<div class="min-w-0 flex-1">
-									<p class="text-base-content truncate font-medium">
-										{usuario.nome || 'Usuário'}
-									</p>
-									<p class="text-base-content/60 truncate text-sm">
-										{usuario.setor || usuario.email || ''}
-									</p>
-								</div>
+                <!-- Info -->
+                <div class="flex-1 min-w-0">
+                  <p class="font-medium text-base-content truncate">
+                    {usuario.nome || "Usuário"}
+                  </p>
+                  <p class="text-sm text-base-content/60 truncate">
+                    {usuario.setor || usuario.email || ""}
+                  </p>
+                </div>
 
-								<!-- Botão Adicionar -->
-								{#if isLoading}
-									<span class="loading loading-spinner loading-sm"></span>
-								{:else}
-									<UserPlus class="text-primary h-5 w-5" />
-								{/if}
-							</button>
-						{/each}
-					{:else}
-						<div class="text-base-content/50 py-8 text-center">
-							{searchQuery.trim()
-								? 'Nenhum usuário encontrado'
-								: 'Todos os usuários já são participantes'}
-						</div>
-					{/if}
-				</div>
-			{/if}
-		</div>
+                <!-- Botão Adicionar -->
+                {#if isLoading}
+                  <span class="loading loading-spinner loading-sm"></span>
+                {:else}
+                  <UserPlus class="w-5 h-5 text-primary" />
+                {/if}
+              </button>
+            {/each}
+          {:else}
+            <div class="text-center py-8 text-base-content/50">
+              {searchQuery.trim()
+                ? "Nenhum usuário encontrado"
+                : "Todos os usuários já são participantes"}
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
 
-		<!-- Footer -->
-		<div class="border-base-300 border-t px-6 py-4">
-			<button type="button" class="btn btn-block" onclick={onClose}> Fechar </button>
-		</div>
-	</div>
-	<form method="dialog" class="modal-backdrop">
-		<button type="button" onclick={onClose}>fechar</button>
-	</form>
+    <!-- Footer -->
+    <div class="px-6 py-4 border-t border-base-300">
+      <button type="button" class="btn btn-block" onclick={onClose}>
+        Fechar
+      </button>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button type="button" onclick={onClose}>fechar</button>
+  </form>
 </dialog>
diff --git a/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte b/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
index 8a9363b..0ceddd2 100644
--- a/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
+++ b/apps/web/src/lib/components/chat/ScheduleMessageModal.svelte
@@ -1,269 +1,288 @@
 <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 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>
+<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>
 
-		<!-- 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>
+    <!-- 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>
 
-					<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 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="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="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="h-6 w-6" />
-							<span>{getPreviewText()}</span>
-						</div>
-					{/if}
+          {#if getPreviewText()}
+            <div class="alert alert-info">
+              <Clock class="w-6 h-6" />
+              <span>{getPreviewText()}</span>
+            </div>
+          {/if}
 
-					<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="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="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>
+              <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>
 
-			<!-- 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="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>
+          {#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>
 
-									<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>
+                  <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>
 
-									<!-- 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>
+                  <!-- 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>
 </dialog>
diff --git a/apps/web/src/lib/components/chat/UserAvatar.svelte b/apps/web/src/lib/components/chat/UserAvatar.svelte
index 1d880ec..7a09a69 100644
--- a/apps/web/src/lib/components/chat/UserAvatar.svelte
+++ b/apps/web/src/lib/components/chat/UserAvatar.svelte
@@ -1,36 +1,41 @@
 <script lang="ts">
-	import { getAvatarUrl as generateAvatarUrl } from '$lib/utils/avatarGenerator';
+  import { getAvatarUrl as generateAvatarUrl } from "$lib/utils/avatarGenerator";
+  
+  interface Props {
+    avatar?: string;
+    fotoPerfilUrl?: string | null;
+    nome: string;
+    size?: "xs" | "sm" | "md" | "lg";
+  }
 
-	interface Props {
-		avatar?: string;
-		fotoPerfilUrl?: string | null;
-		nome: string;
-		size?: 'xs' | 'sm' | 'md' | 'lg';
-	}
+  let { avatar, fotoPerfilUrl, nome, size = "md" }: Props = $props();
 
-	let { avatar, fotoPerfilUrl, nome, size = 'md' }: Props = $props();
+  const sizeClasses = {
+    xs: "w-8 h-8",
+    sm: "w-10 h-10",
+    md: "w-12 h-12",
+    lg: "w-16 h-16",
+  };
 
-	const sizeClasses = {
-		xs: 'w-8 h-8',
-		sm: 'w-10 h-10',
-		md: 'w-12 h-12',
-		lg: 'w-16 h-16'
-	};
+  function getAvatarUrl(avatarId: string): string {
+    // Usar gerador local ao invés da API externa
+    return generateAvatarUrl(avatarId);
+  }
 
-	function getAvatarUrl(avatarId: string): string {
-		// Usar gerador local ao invés da API externa
-		return generateAvatarUrl(avatarId);
-	}
-
-	const avatarUrlToShow = $derived(() => {
-		if (fotoPerfilUrl) return fotoPerfilUrl;
-		if (avatar) return getAvatarUrl(avatar);
-		return getAvatarUrl(nome); // Fallback usando o nome
-	});
+  const avatarUrlToShow = $derived(() => {
+    if (fotoPerfilUrl) return fotoPerfilUrl;
+    if (avatar) return getAvatarUrl(avatar);
+    return getAvatarUrl(nome); // Fallback usando o nome
+  });
 </script>
 
 <div class="avatar">
-	<div class={`${sizeClasses[size]} bg-base-200 overflow-hidden rounded-full`}>
-		<img src={avatarUrlToShow()} alt={`Avatar de ${nome}`} class="h-full w-full object-cover" />
-	</div>
+  <div class={`${sizeClasses[size]} rounded-full bg-base-200 overflow-hidden`}>
+    <img 
+      src={avatarUrlToShow()} 
+      alt={`Avatar de ${nome}`}
+      class="w-full h-full object-cover"
+    />
+  </div>
 </div>
+
diff --git a/apps/web/src/lib/components/ti/AlertConfigModal.svelte b/apps/web/src/lib/components/ti/AlertConfigModal.svelte
index db33da4..0551e90 100644
--- a/apps/web/src/lib/components/ti/AlertConfigModal.svelte
+++ b/apps/web/src/lib/components/ti/AlertConfigModal.svelte
@@ -1,481 +1,502 @@
 <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 alertas = useQuery(api.monitoramento.listarAlertas, {});
+  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 ?? [];
+  });
 
-	$inspect(alertas);
+  // 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 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>
+  <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>
 
-		<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>
+    <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>
 
-		<!-- 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 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>
+    <!-- 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>
 
-					<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.value}>{option.label}</option>
-								{/each}
-							</select>
-						</div>
+          <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>
 
-						<!-- 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.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="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>
+          <!-- 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>
 
-						<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>
+            <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>
 
-					<!-- 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>
+          <!-- 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>
 
-					<!-- 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}
+          <!-- 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}
 
-		<!-- Lista de Alertas -->
-		<div class="divider">Alertas Configurados</div>
+    <!-- Lista de Alertas -->
+    <div class="divider">Alertas Configurados</div>
 
-		{#if alertas.data && alertas.data.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.data as alerta (alerta._id)}
-							<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
-											title="Editar Alerta"
-											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
-											title="Deletar Alerta"
-											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}
+    {#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}
 
-		<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 11ca82d..fde48a7 100644
--- a/apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/alterar-senha/+page.svelte
@@ -1,495 +1,512 @@
 <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 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>
+<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>
 
-	<!-- Breadcrumbs -->
-	<div class="breadcrumbs mb-6 text-sm">
-		<ul>
-			<li><a href="/">Dashboard</a></li>
-			<li>Alterar Senha</li>
-		</ul>
-	</div>
+  <!-- Breadcrumbs -->
+  <div class="text-sm breadcrumbs mb-6">
+    <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="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}
+  <!-- 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}
 
-	<!-- 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>
+  <!-- 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>
 
-				<!-- 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>
+        <!-- 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>
 
-				<!-- 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>
+        <!-- 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>
 
-				<!-- 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>
+        <!-- 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>
 
-				<!-- 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>
+        <!-- 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>
 
-	<!-- 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>
+  <!-- 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>
 </main>
diff --git a/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte b/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
index 9d85216..2cedee5 100644
--- a/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/esqueci-senha/+page.svelte
@@ -1,363 +1,264 @@
 <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 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>
+<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>
 
-	<!-- Breadcrumbs -->
-	<div class="breadcrumbs mb-6 text-sm">
-		<ul>
-			<li><a href="/">Dashboard</a></li>
-			<li>Esqueci Minha Senha</li>
-		</ul>
-	</div>
+  <!-- Breadcrumbs -->
+  <div class="text-sm breadcrumbs mb-6">
+    <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="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}
+  <!-- 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}
 
-	{#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>
+  {#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>
 
-				<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="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}
+          <!-- 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}
 
-	<!-- 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>
+  <!-- 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>
 </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 774da20..9f54d61 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,407 +1,419 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { useQuery, useConvexClient } from 'convex-svelte';
-	import { api } from '@sgse-app/backend/convex/_generated/api';
-	import 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 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>
+<main class="container mx-auto px-4 py-6 max-w-7xl">
+  <!-- Breadcrumb -->
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li>
+        <a href="/gestao-pessoas" class="text-primary hover:underline"
+          >Secretaria de Gestão de Pessoas</a
+        >
+      </li>
+      <li>Gestão de Ausências</li>
+    </ul>
+  </div>
 
-	<!-- Header -->
-	<div class="mb-6">
-		<div class="flex items-center justify-between">
-			<div class="flex items-center gap-4">
-				<div class="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>
+  <!-- Header -->
+  <div class="mb-6">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <div class="p-3 bg-orange-500/20 rounded-xl">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-8 w-8 text-orange-600"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </div>
+        <div>
+          <h1 class="text-3xl font-bold text-primary">Gestão de Ausências</h1>
+          <p class="text-base-content/70">
+            Visão geral de todas as solicitações de ausências
+          </p>
+        </div>
+      </div>
+      <button
+        class="btn btn-ghost gap-2"
+        onclick={() => goto("/gestao-pessoas")}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 19l-7-7m0 0l7-7m-7 7h18"
+          />
+        </svg>
+        Voltar
+      </button>
+    </div>
+  </div>
 
-	<!-- Estatísticas -->
-	<div class="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>
+  <!-- Estatísticas -->
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
+      <div class="stat-figure text-orange-500">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-8 w-8"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
+        </svg>
+      </div>
+      <div class="stat-title">Total</div>
+      <div class="stat-value text-orange-500">{stats.total}</div>
+      <div class="stat-desc">Solicitações</div>
+    </div>
 
-		<div class="stat bg-base-100 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-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-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-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-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>
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-error/30">
+      <div class="stat-figure text-error">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-8 w-8"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div class="stat-title">Reprovadas</div>
+      <div class="stat-value text-error">{stats.reprovadas}</div>
+      <div class="stat-desc">Indeferidas</div>
+    </div>
+  </div>
 
-	<!-- Filtros -->
-	<div class="card bg-base-100 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>
+  <!-- Filtros -->
+  <div class="card bg-base-100 shadow-lg mb-6">
+    <div class="card-body">
+      <h2 class="card-title text-lg mb-4">Filtros</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="form-control">
+          <label class="label" for="filtro-status">
+            <span class="label-text">Status</span>
+          </label>
+          <select
+            id="filtro-status"
+            class="select select-bordered"
+            bind:value={filtroStatus}
+          >
+            <option value="todos">Todos</option>
+            <option value="aguardando_aprovacao">Aguardando Aprovação</option>
+            <option value="aprovado">Aprovado</option>
+            <option value="reprovado">Reprovado</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
 
-	<!-- Lista de Solicitações -->
-	<div class="card bg-base-100 shadow-lg">
-		<div class="card-body">
-			<h2 class="card-title mb-4 text-lg">
-				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 text-lg mb-4">
+        Todas as Solicitações ({ausenciasFiltradas.length})
+      </h2>
 
-			{#if ausenciasFiltradas.length === 0}
-				<div class="alert">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						class="stroke-info 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>
+      {#if ausenciasFiltradas.length === 0}
+        <div class="alert">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="stroke-info shrink-0 w-6 h-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            ></path>
+          </svg>
+          <span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
+        </div>
+      {:else}
+        <div class="overflow-x-auto">
+          <table class="table table-zebra">
+            <thead>
+              <tr>
+                <th>Funcionário</th>
+                <th>Time</th>
+                <th>Período</th>
+                <th>Dias</th>
+                <th>Motivo</th>
+                <th>Status</th>
+                <th>Solicitado em</th>
+                <th>Ações</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each ausenciasFiltradas as ausencia}
+                <tr>
+                  <td class="font-semibold">
+                    {ausencia.funcionario?.nome || "N/A"}
+                  </td>
+                  <td>
+                    {#if ausencia.time}
+                      <div
+                        class="badge badge-sm font-semibold"
+                        style="background-color: {ausencia.time.cor}20; border-color: {ausencia.time.cor}; color: {ausencia.time.cor}"
+                      >
+                        {ausencia.time.nome}
+                      </div>
+                    {:else}
+                      <span class="text-base-content/50">Sem time</span>
+                    {/if}
+                  </td>
+                  <td>
+                    {new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
+                    {new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
+                  </td>
+                  <td class="font-bold">
+                    {calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
+                  </td>
+                  <td class="max-w-xs truncate" title={ausencia.motivo}>
+                    {ausencia.motivo}
+                  </td>
+                  <td>
+                    <div class={`badge ${getStatusBadge(ausencia.status)}`}>
+                      {getStatusTexto(ausencia.status)}
+                    </div>
+                  </td>
+                  <td class="text-xs">
+                    {new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
+                  </td>
+                  <td>
+                    {#if ausencia.status === "aguardando_aprovacao"}
+                      <button
+                        type="button"
+                        class="btn btn-primary btn-sm gap-2"
+                        onclick={() => selecionarSolicitacao(ausencia._id)}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          class="h-4 w-4"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                          />
+                        </svg>
+                        Ver Detalhes
+                      </button>
+                    {:else}
+                      <button
+                        type="button"
+                        class="btn btn-ghost btn-sm gap-2"
+                        onclick={() => selecionarSolicitacao(ausencia._id)}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          class="h-4 w-4"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                          />
+                        </svg>
+                        Ver Detalhes
+                      </button>
+                    {/if}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
+    </div>
+  </div>
 </main>
 
 <!-- Modal de Aprovação -->
 {#if solicitacaoSelecionada && 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 9028496..fddfd59 100644
--- a/apps/web/src/routes/(dashboard)/perfil/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
@@ -9,7 +9,6 @@
 	import { generateAvatarGallery } from '$lib/utils/avatars';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { X, Calendar } from 'lucide-svelte';
-	import type { FunctionReturnType } from 'convex/server';
 
 	const client = useConvexClient();
 	const currentUser = useQuery(api.auth.getCurrentUser, {});
@@ -29,6 +28,11 @@
 	let avatarSelecionado = $state<string>('');
 	let mostrarBotaoCamera = $state(false);
 
+	// Estados locais para atualização imediata
+	let fotoPerfilLocal = $state<string | null>(null);
+	let avatarLocal = $state<string | null>(null);
+	let perfilCarregado = $state(false);
+
 	// Estados para Minhas Férias
 	let mostrarWizard = $state(false);
 	let filtroStatusFerias = $state<string>('todos');
@@ -43,11 +47,39 @@
 	// Galeria de avatares (30 avatares profissionais 3D realistas)
 	const avatarGallery = generateAvatarGallery(30);
 
+	// Carregar perfil ao montar a página para garantir dados atualizados (apenas uma vez)
+	$effect(() => {
+		if (currentUser?.data && !perfilCarregado) {
+			perfilCarregado = true;
+		}
+	});
+
+	// Sincronizar com currentUser - atualiza automaticamente quando o usuário muda
+	$effect(() => {
+		const usuario = currentUser?.data;
+		if (usuario) {
+			// Atualizar foto de perfil (pode ser null ou string)
+			fotoPerfilLocal = usuario.fotoPerfil ?? null;
+			// Atualizar avatar (pode ser undefined ou string)
+			avatarLocal = usuario.avatar ?? null;
+		} else {
+			// Se não há usuário, limpar estados locais
+			fotoPerfilLocal = null;
+			avatarLocal = null;
+			perfilCarregado = false; // Reset para permitir recarregar quando houver usuário novamente
+		}
+	});
+
 	// FuncionarioId disponível diretamente do usuário atual
 	const funcionarioIdDisponivel = $derived(currentUser?.data?.funcionarioId ?? null);
 
-	const funcionarioQuery = useQuery(api.funcionarios.getCurrent, () =>
-		funcionarioIdDisponivel ? {} : 'skip'
+	// Queries
+	const funcionarioQuery = $derived(
+		currentUser?.data?.funcionarioId
+			? useQuery(api.funcionarios.getById, {
+					id: currentUser.data.funcionarioId
+				})
+			: { data: null }
 	);
 
 	const solicitacoesSubordinadosQuery = $derived(
@@ -157,9 +189,9 @@
 		solicitacaoSelecionada = null;
 	}
 
-	async function selecionarSolicitacao(solicitacaoId: Id<'solicitacoesFerias'>) {
+	async function selecionarSolicitacao(solicitacaoId: string) {
 		const detalhes = await client.query(api.ferias.obterDetalhes, {
-			solicitacaoId: solicitacaoId
+			solicitacaoId: solicitacaoId as Id<'solicitacoesFerias'>
 		});
 		solicitacaoSelecionada = detalhes;
 	}
@@ -206,6 +238,14 @@
 		erroUpload = '';
 
 		try {
+			// 1. Criar preview local IMEDIATAMENTE para feedback visual
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				fotoPerfilLocal = e.target?.result as string;
+				avatarLocal = null;
+			};
+			reader.readAsDataURL(file);
+
 			// 2. Gerar URL de upload
 			const uploadUrl = await client.mutation(api.usuarios.uploadFotoPerfil, {});
 
@@ -228,6 +268,15 @@
 				avatar: undefined // Remove avatar se colocar foto
 			});
 
+			// 5. Aguardar um pouco para garantir que o backend processou
+			await new Promise((resolve) => setTimeout(resolve, 300));
+
+			// 6. Atualizar localmente com a URL retornada pelo backend (ou pelo currentUser)
+			if (currentUser?.data?.fotoPerfil) {
+				fotoPerfilLocal = currentUser.data.fotoPerfil;
+				avatarLocal = null;
+			}
+
 			// 8. Limpar o input para permitir novo upload
 			input.value = '';
 
@@ -248,8 +297,11 @@
 			document.body.appendChild(toast);
 			setTimeout(() => toast.remove(), 3000);
 		} catch (e: unknown) {
-			const error = e as Error;
-			erroUpload = error.message || 'Erro ao fazer upload da foto';
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			erroUpload = errorMessage || 'Erro ao fazer upload da foto';
+			// Reverter mudança local se houver erro
+			fotoPerfilLocal = currentUser?.data?.fotoPerfil || null;
+			avatarLocal = currentUser?.data?.avatar || null;
 		} finally {
 			uploadandoFoto = false;
 		}
@@ -260,6 +312,10 @@
 		erroUpload = '';
 
 		try {
+			// 1. Atualizar localmente IMEDIATAMENTE para feedback visual instantâneo
+			avatarLocal = avatarUrl;
+			fotoPerfilLocal = null;
+
 			// 2. Salvar avatar selecionado no backend
 			await client.mutation(api.usuarios.atualizarPerfil, {
 				avatar: avatarUrl,
@@ -269,6 +325,12 @@
 			// 3. Aguardar um pouco para garantir que o backend processou
 			await new Promise((resolve) => setTimeout(resolve, 300));
 
+			// 4. Garantir que os estados locais estão sincronizados com o usuário atual
+			if (currentUser?.data?.avatar) {
+				avatarLocal = currentUser.data.avatar;
+				fotoPerfilLocal = null;
+			}
+
 			// 6. Fechar modal após sucesso
 			mostrarModalFoto = false;
 
@@ -286,8 +348,11 @@
 			document.body.appendChild(toast);
 			setTimeout(() => toast.remove(), 3000);
 		} catch (e: unknown) {
-			const error = e as Error;
-			erroUpload = error.message || 'Erro ao salvar avatar';
+			const errorMessage = e instanceof Error ? e.message : String(e);
+			erroUpload = errorMessage || 'Erro ao salvar avatar';
+			// Reverter mudança local se houver erro
+			avatarLocal = currentUser?.data?.avatar || null;
+			fotoPerfilLocal = currentUser?.data?.fotoPerfil || null;
 		} finally {
 			uploadandoFoto = false;
 		}
@@ -334,14 +399,10 @@
 						<div
 							class="animate-float h-40 w-40 rounded-full shadow-2xl ring-4 ring-white ring-offset-4 ring-offset-transparent transition-all duration-300 hover:scale-105 hover:ring-8"
 						>
-							{#if currentUser.data?.fotoPerfilUrl}
-								<img
-									src={currentUser.data.fotoPerfilUrl}
-									alt="Foto de perfil"
-									class="object-cover"
-								/>
-							{:else if currentUser.data?.avatar}
-								<img src={currentUser.data.avatar} alt="Foto de perfil" class="object-cover" />
+							{#if fotoPerfilLocal}
+								<img src={fotoPerfilLocal} alt="Foto de perfil" class="object-cover" />
+							{:else if avatarLocal}
+								<img src={avatarLocal} alt="Avatar" class="object-cover" />
 							{:else}
 								<div class="flex items-center justify-center bg-white text-purple-700">
 									<span class="text-5xl font-black"
@@ -1747,7 +1808,7 @@
 												{:else}
 													<button
 														type="button"
-														class="btn btn-sm gap-2"
+														class="btn btn-ghost btn-sm gap-2"
 														onclick={() => selecionarSolicitacao(solicitacao._id)}
 													>
 														<svg
@@ -1900,7 +1961,7 @@
 												{:else}
 													<button
 														type="button"
-														class="btn btn-sm gap-2"
+														class="btn btn-ghost btn-sm gap-2"
 														onclick={() => (solicitacaoAusenciaAprovar = ausencia._id)}
 													>
 														<svg
@@ -1977,8 +2038,10 @@
 						<div
 							class="ring-primary ring-offset-base-100 h-32 w-32 rounded-full shadow-2xl ring-4 ring-offset-4"
 						>
-							{#if currentUser.data?.fotoPerfilUrl}
-								<img src={currentUser.data.fotoPerfilUrl} alt="Foto atual" class="object-cover" />
+							{#if fotoPerfilLocal}
+								<img src={fotoPerfilLocal} alt="Foto atual" class="object-cover" />
+							{:else if avatarLocal}
+								<img src={avatarLocal} alt="Avatar atual" class="object-cover" />
 							{:else}
 								<div class="bg-primary text-primary-content flex items-center justify-center">
 									<span class="text-4xl font-bold"
@@ -2234,7 +2297,7 @@
 				</h2>
 				<button
 					type="button"
-					class="btn btn-sm btn-circle"
+					class="btn btn-ghost 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 a346d4b..a3ff1ad 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,1669 +1,1657 @@
 <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;
+    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,
+      });
 
-			// Garantir que licencaOriginalId seja undefined quando não é prorrogação
-			const licencaOriginalId =
-				licencaMaternidade.ehProrrogacao && licencaMaternidade.licencaOriginalId
-					? (licencaMaternidade.licencaOriginalId as Id<'licencas'>)
-					: undefined;
+      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;
+    }
+  }
 
-			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
-			});
+  // 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 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;
-		}
-	}
+    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;
+    }
 
-	// 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;
-		}
+    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">,
+      });
 
-		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 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;
+    }
+  }
 
-		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'>
-			});
+  // Resetar formulários
+  function resetarFormularioAtestado() {
+    atestadoMedico = {
+      funcionarioId: undefined,
+      dataInicio: "",
+      dataFim: "",
+      cid: "",
+      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 resetarFormularioDeclaracao() {
+    declaracao = {
+      funcionarioId: undefined,
+      dataInicio: "",
+      dataFim: "",
+      observacoes: "",
+      documentoId: undefined,
+    };
+  }
 
-	// Resetar formulários
-	function resetarFormularioAtestado() {
-		atestadoMedico = {
-			funcionarioId: undefined,
-			dataInicio: '',
-			dataFim: '',
-			cid: '',
-			observacoes: '',
-			documentoId: undefined
-		};
-	}
+  function resetarFormularioMaternidade() {
+    licencaMaternidade = {
+      funcionarioId: undefined,
+      dataInicio: "",
+      dataFim: "",
+      observacoes: "",
+      documentoId: undefined,
+      ehProrrogacao: false,
+      licencaOriginalId: undefined,
+    };
+  }
 
-	function resetarFormularioDeclaracao() {
-		declaracao = {
-			funcionarioId: undefined,
-			dataInicio: '',
-			dataFim: '',
-			observacoes: '',
-			documentoId: undefined
-		};
-	}
+  function resetarFormularioPaternidade() {
+    licencaPaternidade = {
+      funcionarioId: undefined,
+      dataInicio: "",
+      dataFim: "",
+      observacoes: "",
+      documentoId: undefined,
+    };
+  }
 
-	function resetarFormularioMaternidade() {
-		licencaMaternidade = {
-			funcionarioId: undefined,
-			dataInicio: '',
-			dataFim: '',
-			observacoes: '',
-			documentoId: undefined,
-			ehProrrogacao: false,
-			licencaOriginalId: undefined
-		};
-	}
+  // Limpar licencaOriginalId quando não é prorrogação
+  $effect(() => {
+    if (abaAtiva === "maternidade" && !licencaMaternidade.ehProrrogacao) {
+      licencaMaternidade.licencaOriginalId = undefined;
+    }
+  });
 
-	function resetarFormularioPaternidade() {
-		licencaPaternidade = {
-			funcionarioId: undefined,
-			dataInicio: '',
-			dataFim: '',
-			observacoes: '',
-			documentoId: 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];
+      }
+    }
+  });
 
-	// Limpar licencaOriginalId quando não é prorrogação
-	$effect(() => {
-		if (abaAtiva === 'maternidade' && !licencaMaternidade.ehProrrogacao) {
-			licencaMaternidade.licencaOriginalId = 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];
+      }
+    }
+  });
 
-	// 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];
-			}
-		}
-	});
+  // Excluir registro
+  async function excluirRegistro(tipo: "atestado" | "licenca", id: string) {
+    if (!confirm(`Tem certeza que deseja excluir este ${tipo}?`)) return;
 
-	$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];
-			}
-		}
-	});
+    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");
+    }
+  }
 
-	// Excluir registro
-	async function excluirRegistro(tipo: 'atestado' | 'licenca', id: string) {
-		if (!confirm(`Tem certeza que deseja excluir este ${tipo}?`)) return;
+  // Filtrar registros
+  const registrosFiltrados = $derived.by(() => {
+    const dados = dadosQuery?.data;
+    if (!dados) return { atestados: [], 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');
-		}
-	}
+    let atestados = dados.atestados;
+    let licencas = dados.licencas;
 
-	// Filtrar registros
-	const registrosFiltrados = $derived.by(() => {
-		const dados = dadosQuery?.data;
-		if (!dados) return { atestados: [], licencas: [] };
+    // 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);
+      }
+    }
 
-		let atestados = dados.atestados;
-		let licencas = dados.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)
+      );
+    }
 
-		// 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);
-			}
-		}
+    // 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 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));
-		}
+    return { atestados, 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)
-				);
-			});
-		}
-
-		return { atestados, licencas };
-	});
-
-	// Limpar filtros
-	function limparFiltros() {
-		filtroTipo = 'todos';
-		filtroFuncionario = '';
-		filtroDataInicio = '';
-		filtroDataFim = '';
-	}
+  // 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 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>
+<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>
 
-	<!-- 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>
+  <!-- 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>
 
-	<!-- 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>
+  <!-- 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>
 
-	<!-- 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>
+  <!-- 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>
 
-				<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-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-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-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-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 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}
 
-		<!-- 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>
+  <!-- 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>
 
-					<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-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-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-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-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 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="flex justify-end gap-2">
-						<button class="btn btn-outline" onclick={limparFiltros}>Limpar</button>
-					</div>
-				</div>
-			</div>
-		</div>
+        <div class="flex gap-2 justify-end">
+          <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 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}
+    <!-- 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">
 
-							<!-- 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"
-							/>
+            <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}
 
-							<!-- 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']}
+              <!-- 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"
+              />
 
-								<!-- 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>
+              <!-- 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"]}
 
-								<!-- Barra -->
-								<rect
-									{x}
-									{y}
-									width={barWidth}
-									{height}
-									fill="url(#gradient-{i})"
-									rx="4"
-									class="cursor-pointer transition-opacity hover:opacity-80"
-								/>
+                <!-- 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>
 
-								<!-- 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}
+                <!-- Barra -->
+                <rect
+                  x={x}
+                  y={y}
+                  width={barWidth}
+                  height={height}
+                  fill="url(#gradient-{i})"
+                  rx="4"
+                  class="hover:opacity-80 transition-opacity cursor-pointer"
+                />
 
-								<!-- 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>
+                <!-- 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}
 
-			<!-- 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}
+                <!-- 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>
 
-							<!-- 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"
-							/>
+      <!-- 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}
 
-							<!-- Linhas para cada tipo (em camadas) -->
-							{#each tipos as tipo, tipoIdx}
-								{@const cor = cores[tipoIdx]}
+              <!-- 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"
+              />
 
-								<!-- Á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>
+              <!-- 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>
 
-								{@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 cursor-pointer transition-all"
-									/>
-									<!-- 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 transition-all cursor-pointer"
+                  />
+                  <!-- 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-base-content/80 text-xs font-medium">
-											{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-xs font-medium text-base-content/80">
+                      {t.mes}
+                    </span>
+                  </div>
+                </foreignObject>
+              {/each}
+            </svg>
 
-						<!-- 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>
+            <!-- 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>
 
-			<!-- 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}
+      <!-- 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}
 
-		<!-- 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>
+    <!-- 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>
 
-				<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-					<FuncionarioSelect bind:value={atestadoMedico.funcionarioId} required={true} />
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <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 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="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="grid grid-cols-1 gap-6 md:grid-cols-2">
-					<FuncionarioSelect bind:value={declaracao.funcionarioId} required={true} />
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <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 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="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="grid grid-cols-1 gap-6 md:grid-cols-2">
-					<FuncionarioSelect bind:value={licencaMaternidade.funcionarioId} required={true} />
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <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 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="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="grid grid-cols-1 gap-6 md:grid-cols-2">
-					<FuncionarioSelect bind:value={licencaPaternidade.funcionarioId} required={true} />
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <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 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}
+        <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}
 </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 829ff89..cfd5744 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/ausencias/+page.svelte
@@ -1,405 +1,426 @@
 <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 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>
+<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>
 
-	<!-- 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>
+  <!-- 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>
 
-	<!-- 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>
+  <!-- Estatísticas -->
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
+      <div class="stat-figure text-orange-500">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-8 w-8"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
+        </svg>
+      </div>
+      <div class="stat-title">Total</div>
+      <div class="stat-value text-orange-500">{stats.total}</div>
+      <div class="stat-desc">Solicitações</div>
+    </div>
 
-		<div class="stat bg-base-100 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-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-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-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-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>
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-error/30">
+      <div class="stat-figure text-error">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-8 w-8"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div class="stat-title">Reprovadas</div>
+      <div class="stat-value text-error">{stats.reprovadas}</div>
+      <div class="stat-desc">Indeferidas</div>
+    </div>
+  </div>
 
-	<!-- Filtros -->
-	<div class="card bg-base-100 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>
+  <!-- Filtros -->
+  <div class="card bg-base-100 shadow-lg mb-6">
+    <div class="card-body">
+      <h2 class="card-title text-lg mb-4">Filtros</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="form-control">
+          <label class="label" for="filtro-status">
+            <span class="label-text">Status</span>
+          </label>
+          <select
+            id="filtro-status"
+            class="select select-bordered"
+            bind:value={filtroStatus}
+          >
+            <option value="todos">Todos</option>
+            <option value="aguardando_aprovacao">Aguardando Aprovação</option>
+            <option value="aprovado">Aprovado</option>
+            <option value="reprovado">Reprovado</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
 
-	<!-- Lista de Solicitações -->
-	<div class="card bg-base-100 shadow-lg">
-		<div class="card-body">
-			<h2 class="card-title mb-4 text-lg">
-				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 text-lg mb-4">
+        Todas as Solicitações ({ausenciasFiltradas.length})
+      </h2>
 
-			{#if ausenciasFiltradas.length === 0}
-				<div class="alert">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						class="stroke-info 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>
+      {#if ausenciasFiltradas.length === 0}
+        <div class="alert">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="stroke-info shrink-0 w-6 h-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            ></path>
+          </svg>
+          <span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
+        </div>
+      {:else}
+        <div class="overflow-x-auto">
+          <table class="table table-zebra">
+            <thead>
+              <tr>
+                <th>Funcionário</th>
+                <th>Time</th>
+                <th>Período</th>
+                <th>Dias</th>
+                <th>Motivo</th>
+                <th>Status</th>
+                <th>Solicitado em</th>
+                <th>Ações</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each ausenciasFiltradas as ausencia}
+                <tr>
+                  <td class="font-semibold">
+                    {ausencia.funcionario?.nome || "N/A"}
+                  </td>
+                  <td>
+                    {#if ausencia.time}
+                      <div
+                        class="badge badge-sm font-semibold"
+                        style="background-color: {ausencia.time
+                          .cor}20; border-color: {ausencia.time
+                          .cor}; color: {ausencia.time.cor}"
+                      >
+                        {ausencia.time.nome}
+                      </div>
+                    {:else}
+                      <span class="text-base-content/50">Sem time</span>
+                    {/if}
+                  </td>
+                  <td>
+                    {new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
+                    {new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
+                  </td>
+                  <td class="font-bold">
+                    {calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
+                  </td>
+                  <td class="max-w-xs truncate" title={ausencia.motivo}>
+                    {ausencia.motivo}
+                  </td>
+                  <td>
+                    <div class={`badge ${getStatusBadge(ausencia.status)}`}>
+                      {getStatusTexto(ausencia.status)}
+                    </div>
+                  </td>
+                  <td class="text-xs">
+                    {new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
+                  </td>
+                  <td>
+                    {#if ausencia.status === "aguardando_aprovacao"}
+                      <button
+                        type="button"
+                        class="btn btn-primary btn-sm gap-2"
+                        onclick={() => selecionarSolicitacao(ausencia._id)}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          class="h-4 w-4"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                          />
+                        </svg>
+                        Ver Detalhes
+                      </button>
+                    {:else}
+                      <button
+                        type="button"
+                        class="btn btn-ghost btn-sm gap-2"
+                        onclick={() => selecionarSolicitacao(ausencia._id)}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          class="h-4 w-4"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                          />
+                        </svg>
+                        Ver Detalhes
+                      </button>
+                    {/if}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
+    </div>
+  </div>
 </main>
 
 <!-- Modal de Aprovação -->
 {#if solicitacaoSelecionada && 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/funcionarios/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte
index 97abb91..54a14f0 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/+page.svelte
@@ -1,310 +1,236 @@
 <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="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>
+  <!-- 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>
 
-	<!-- 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>
+  <!-- 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>
 
-	<!-- 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>
+  <!-- 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>
 
-	<!-- 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>
+  <!-- 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>
 
-	<!-- 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>
+  <!-- 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>
 
-	<!-- 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]/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte
index 29d5c2b..4b98e09 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/+page.svelte
@@ -1,23 +1,23 @@
 <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 { maskCPF, maskCEP, maskPhone } from '$lib/utils/masks';
-	import { documentos, getDocumentoDefinicao } from '$lib/utils/documentos';
-	import {
-		SEXO_OPTIONS,
-		ESTADO_CIVIL_OPTIONS,
-		GRAU_INSTRUCAO_OPTIONS,
-		GRUPO_SANGUINEO_OPTIONS,
-		FATOR_RH_OPTIONS,
-		APOSENTADO_OPTIONS
-	} from '$lib/utils/constants';
-	import PrintModal from '$lib/components/PrintModal.svelte';
+  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 { maskCPF, maskCEP, maskPhone } from "$lib/utils/masks";
+  import { documentos, getDocumentoDefinicao } from "$lib/utils/documentos";
+  import {
+    SEXO_OPTIONS,
+    ESTADO_CIVIL_OPTIONS,
+    GRAU_INSTRUCAO_OPTIONS,
+    GRUPO_SANGUINEO_OPTIONS,
+    FATOR_RH_OPTIONS,
+    APOSENTADO_OPTIONS,
+  } from "$lib/utils/constants";
+  import PrintModal from "$lib/components/PrintModal.svelte";
 
-	const client = useConvexClient();
+  const client = useConvexClient();
 
-	let funcionarioId = $derived($page.params.funcionarioId as string);
+  let funcionarioId = $derived($page.params.funcionarioId as string);
 
   let funcionario = $state<any>(null);
   let simbolo = $state<any>(null);
@@ -26,17 +26,17 @@
   let loading = $state(true);
   let showPrintModal = $state(false);
 
-	async function load() {
-		try {
-			loading = true;
-			const data = await client.query(api.funcionarios.getFichaCompleta, {
-				id: funcionarioId as any
-			});
+  async function load() {
+    try {
+      loading = true;
+      const data = await client.query(api.funcionarios.getFichaCompleta, {
+        id: funcionarioId as any,
+      });
 
-			if (!data) {
-				goto('/recursos-humanos/funcionarios');
-				return;
-			}
+      if (!data) {
+        goto("/recursos-humanos/funcionarios");
+        return;
+      }
 
       funcionario = data;
       simbolo = data.simbolo;
@@ -45,92 +45,97 @@
       }
       cursos = data.cursos || [];
 
-			// Carregar URLs dos documentos
-			try {
-				documentosUrls = await client.query(api.documentos.getDocumentosUrls, {
-					funcionarioId: funcionarioId as any
-				});
-			} catch (err) {
-				console.error('Erro ao carregar documentos:', err);
-			}
-		} catch (err) {
-			console.error('Erro ao carregar funcionário:', err);
-			goto('/recursos-humanos/funcionarios');
-		} finally {
-			loading = false;
-		}
-	}
+      // Carregar URLs dos documentos
+      try {
+        documentosUrls = await client.query(api.documentos.getDocumentosUrls, {
+          funcionarioId: funcionarioId as any,
+        });
+      } catch (err) {
+        console.error("Erro ao carregar documentos:", err);
+      }
+    } catch (err) {
+      console.error("Erro ao carregar funcionário:", err);
+      goto("/recursos-humanos/funcionarios");
+    } finally {
+      loading = false;
+    }
+  }
 
-	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 downloadDocumento(url: string, nomeDoc: string) {
-		if (!url) return;
-		const link = document.createElement('a');
-		link.href = url;
-		link.download = nomeDoc;
-		link.target = '_blank';
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-	}
+  function downloadDocumento(url: string, nomeDoc: string) {
+    if (!url) return;
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = nomeDoc;
+    link.target = "_blank";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
 
-	load();
+  load();
 </script>
 
 {#if loading}
-	<div class="flex min-h-screen items-center justify-center">
-		<span class="loading loading-spinner loading-lg"></span>
-	</div>
+  <div class="flex items-center justify-center min-h-screen">
+    <span class="loading loading-spinner loading-lg"></span>
+  </div>
 {:else if funcionario}
-	<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>Detalhes</li>
-			</ul>
-		</div>
+  <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>Detalhes</li>
+      </ul>
+    </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="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>
-						<h1 class="text-primary text-3xl font-bold">{funcionario.nome}</h1>
-						<p class="text-base-content/70">
-							Matrícula: {funcionario.matricula}
-						</p>
-					</div>
-				</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="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>
+            <h1 class="text-3xl font-bold text-primary">{funcionario.nome}</h1>
+            <p class="text-base-content/70">
+              Matrícula: {funcionario.matricula}
+            </p>
+          </div>
+        </div>
 
         <div class="flex flex-wrap gap-2">
           <button
@@ -201,652 +206,685 @@
       </div>
     </div>
 
-		<!-- Dados Financeiros - Destaque -->
-		{#if simbolo}
-			<div
-				class="card from-success/10 to-success/20 border-success/30 mb-6 border bg-linear-to-br shadow-xl"
-			>
-				<div class="card-body">
-					<h3 class="card-title mb-4 border-b pb-3 text-xl">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="text-success 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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-							/>
-						</svg>
-						Dados Financeiros
-					</h3>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-						<div class="stat bg-base-100/50 rounded-lg p-4">
-							<div class="stat-title text-xs">Símbolo</div>
-							<div class="stat-value text-2xl">{simbolo.nome}</div>
-							<div class="stat-desc text-xs">
-								{simbolo.tipo === 'cargo_comissionado'
-									? 'Cargo Comissionado'
-									: 'Função Gratificada'}
-							</div>
-						</div>
-						{#if funcionario.simboloTipo === 'cargo_comissionado'}
-							<div class="stat bg-base-100/50 rounded-lg p-4">
-								<div class="stat-title text-xs">Vencimento</div>
-								<div class="stat-value text-info text-2xl">
-									R$ {simbolo.vencValor}
-								</div>
-								<div class="stat-desc text-xs">Valor base</div>
-							</div>
-							<div class="stat bg-base-100/50 rounded-lg p-4">
-								<div class="stat-title text-xs">Representação</div>
-								<div class="stat-value text-warning text-2xl">
-									R$ {simbolo.repValor}
-								</div>
-								<div class="stat-desc text-xs">Adicional</div>
-							</div>
-						{/if}
-						<div class="stat bg-success/20 border-success/40 rounded-lg border-2 p-4">
-							<div class="stat-title text-xs font-bold">Total</div>
-							<div class="stat-value text-success text-3xl">
-								R$ {simbolo.valor}
-							</div>
-							<div class="stat-desc text-xs">Remuneração total</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		{/if}
+    <!-- Dados Financeiros - Destaque -->
+    {#if simbolo}
+      <div
+        class="card bg-linear-to-br from-success/10 to-success/20 shadow-xl mb-6 border border-success/30"
+      >
+        <div class="card-body">
+          <h3 class="card-title text-xl border-b pb-3 mb-4">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6 text-success"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            Dados Financeiros
+          </h3>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="stat bg-base-100/50 rounded-lg p-4">
+              <div class="stat-title text-xs">Símbolo</div>
+              <div class="stat-value text-2xl">{simbolo.nome}</div>
+              <div class="stat-desc text-xs">
+                {simbolo.tipo === "cargo_comissionado"
+                  ? "Cargo Comissionado"
+                  : "Função Gratificada"}
+              </div>
+            </div>
+            {#if funcionario.simboloTipo === "cargo_comissionado"}
+              <div class="stat bg-base-100/50 rounded-lg p-4">
+                <div class="stat-title text-xs">Vencimento</div>
+                <div class="stat-value text-2xl text-info">
+                  R$ {simbolo.vencValor}
+                </div>
+                <div class="stat-desc text-xs">Valor base</div>
+              </div>
+              <div class="stat bg-base-100/50 rounded-lg p-4">
+                <div class="stat-title text-xs">Representação</div>
+                <div class="stat-value text-2xl text-warning">
+                  R$ {simbolo.repValor}
+                </div>
+                <div class="stat-desc text-xs">Adicional</div>
+              </div>
+            {/if}
+            <div
+              class="stat bg-success/20 rounded-lg p-4 border-2 border-success/40"
+            >
+              <div class="stat-title text-xs font-bold">Total</div>
+              <div class="stat-value text-3xl text-success">
+                R$ {simbolo.valor}
+              </div>
+              <div class="stat-desc text-xs">Remuneração total</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
 
-		<!-- Status de Férias -->
-		<div
-			class="card mb-6 border border-purple-500/30 bg-linear-to-br from-purple-500/10 to-purple-600/20 shadow-xl"
-		>
-			<div class="card-body">
-				<div class="flex items-center justify-between">
-					<div class="flex items-center gap-3">
-						<div class="rounded-xl bg-purple-500/20 p-3">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="h-6 w-6 text-purple-600"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-								/>
-							</svg>
-						</div>
-						<div>
-							<h3 class="text-lg font-bold">Status Atual</h3>
-							<div class="mt-1 flex items-center gap-2">
-								{#if funcionario.statusFerias === 'em_ferias'}
-									<div class="badge badge-warning badge-lg">🏖️ Em Férias</div>
-								{:else}
-									<div class="badge badge-success badge-lg">✅ Ativo</div>
-								{/if}
-							</div>
-						</div>
-					</div>
-					<a href="/recursos-humanos/ferias" class="btn btn-primary btn-sm gap-2">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-4 w-4"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M12 4v16m8-8H4"
-							/>
-						</svg>
-						Gerenciar Férias
-					</a>
-				</div>
-			</div>
-		</div>
+    <!-- Status de Férias -->
+    <div
+      class="card bg-linear-to-br from-purple-500/10 to-purple-600/20 shadow-xl mb-6 border border-purple-500/30"
+    >
+      <div class="card-body">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <div class="p-3 bg-purple-500/20 rounded-xl">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-purple-600"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+            </div>
+            <div>
+              <h3 class="font-bold text-lg">Status Atual</h3>
+              <div class="flex items-center gap-2 mt-1">
+                {#if funcionario.statusFerias === "em_ferias"}
+                  <div class="badge badge-warning badge-lg">🏖️ Em Férias</div>
+                {:else}
+                  <div class="badge badge-success badge-lg">✅ Ativo</div>
+                {/if}
+              </div>
+            </div>
+          </div>
+          <a
+            href="/recursos-humanos/ferias"
+            class="btn btn-primary btn-sm gap-2"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 4v16m8-8H4"
+              />
+            </svg>
+            Gerenciar Férias
+          </a>
+        </div>
+      </div>
+    </div>
 
-		<!-- Grid de Cards -->
-		<div class="mb-6 grid grid-cols-1 gap-6 lg:grid-cols-2">
-			<!-- Coluna 1: Dados Pessoais -->
-			<div class="space-y-6">
-				<!-- Informações Pessoais -->
-				<div class="card bg-base-100 shadow-xl">
-					<div class="card-body">
-						<h3 class="card-title mb-3 border-b pb-2 text-lg">Informações Pessoais</h3>
-						<div class="space-y-2 text-sm">
-							<div>
-								<span class="font-semibold">CPF:</span>
-								{maskCPF(funcionario.cpf)}
-							</div>
-							<div><span class="font-semibold">RG:</span> {funcionario.rg}</div>
-							{#if funcionario.rgOrgaoExpedidor}
-								<div>
-									<span class="font-semibold">Órgão Expedidor:</span>
-									{funcionario.rgOrgaoExpedidor}
-								</div>
-							{/if}
-							{#if funcionario.rgDataEmissao}
-								<div>
-									<span class="font-semibold">Data Emissão RG:</span>
-									{funcionario.rgDataEmissao}
-								</div>
-							{/if}
-							<div>
-								<span class="font-semibold">Data Nascimento:</span>
-								{funcionario.nascimento}
-							</div>
-							{#if funcionario.sexo}
-								<div>
-									<span class="font-semibold">Sexo:</span>
-									{getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)}
-								</div>
-							{/if}
-							{#if funcionario.estadoCivil}
-								<div>
-									<span class="font-semibold">Estado Civil:</span>
-									{getLabelFromOptions(funcionario.estadoCivil, ESTADO_CIVIL_OPTIONS)}
-								</div>
-							{/if}
-							{#if funcionario.nacionalidade}
-								<div>
-									<span class="font-semibold">Nacionalidade:</span>
-									{funcionario.nacionalidade}
-								</div>
-							{/if}
-						</div>
-					</div>
-				</div>
+    <!-- Grid de Cards -->
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+      <!-- Coluna 1: Dados Pessoais -->
+      <div class="space-y-6">
+        <!-- Informações Pessoais -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h3 class="card-title text-lg border-b pb-2 mb-3">
+              Informações Pessoais
+            </h3>
+            <div class="space-y-2 text-sm">
+              <div>
+                <span class="font-semibold">CPF:</span>
+                {maskCPF(funcionario.cpf)}
+              </div>
+              <div><span class="font-semibold">RG:</span> {funcionario.rg}</div>
+              {#if funcionario.rgOrgaoExpedidor}
+                <div>
+                  <span class="font-semibold">Órgão Expedidor:</span>
+                  {funcionario.rgOrgaoExpedidor}
+                </div>
+              {/if}
+              {#if funcionario.rgDataEmissao}
+                <div>
+                  <span class="font-semibold">Data Emissão RG:</span>
+                  {funcionario.rgDataEmissao}
+                </div>
+              {/if}
+              <div>
+                <span class="font-semibold">Data Nascimento:</span>
+                {funcionario.nascimento}
+              </div>
+              {#if funcionario.sexo}
+                <div>
+                  <span class="font-semibold">Sexo:</span>
+                  {getLabelFromOptions(funcionario.sexo, SEXO_OPTIONS)}
+                </div>
+              {/if}
+              {#if funcionario.estadoCivil}
+                <div>
+                  <span class="font-semibold">Estado Civil:</span>
+                  {getLabelFromOptions(
+                    funcionario.estadoCivil,
+                    ESTADO_CIVIL_OPTIONS,
+                  )}
+                </div>
+              {/if}
+              {#if funcionario.nacionalidade}
+                <div>
+                  <span class="font-semibold">Nacionalidade:</span>
+                  {funcionario.nacionalidade}
+                </div>
+              {/if}
+            </div>
+          </div>
+        </div>
 
-				<!-- Filiação -->
-				{#if funcionario.nomePai || funcionario.nomeMae}
-					<div class="card bg-base-100 shadow-xl">
-						<div class="card-body">
-							<h3 class="card-title mb-3 border-b pb-2 text-lg">Filiação</h3>
-							<div class="space-y-2 text-sm">
-								{#if funcionario.nomePai}
-									<div>
-										<span class="font-semibold">Pai:</span>
-										{funcionario.nomePai}
-									</div>
-								{/if}
-								{#if funcionario.nomeMae}
-									<div>
-										<span class="font-semibold">Mãe:</span>
-										{funcionario.nomeMae}
-									</div>
-								{/if}
-							</div>
-						</div>
-					</div>
-				{/if}
+        <!-- Filiação -->
+        {#if funcionario.nomePai || funcionario.nomeMae}
+          <div class="card bg-base-100 shadow-xl">
+            <div class="card-body">
+              <h3 class="card-title text-lg border-b pb-2 mb-3">Filiação</h3>
+              <div class="space-y-2 text-sm">
+                {#if funcionario.nomePai}
+                  <div>
+                    <span class="font-semibold">Pai:</span>
+                    {funcionario.nomePai}
+                  </div>
+                {/if}
+                {#if funcionario.nomeMae}
+                  <div>
+                    <span class="font-semibold">Mãe:</span>
+                    {funcionario.nomeMae}
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/if}
 
-				<!-- Naturalidade -->
-				{#if funcionario.naturalidade || funcionario.naturalidadeUF}
-					<div class="card bg-base-100 shadow-xl">
-						<div class="card-body">
-							<h3 class="card-title mb-3 border-b pb-2 text-lg">Naturalidade</h3>
-							<div class="space-y-2 text-sm">
-								{#if funcionario.naturalidade}
-									<div>
-										<span class="font-semibold">Cidade:</span>
-										{funcionario.naturalidade}
-									</div>
-								{/if}
-								{#if funcionario.naturalidadeUF}
-									<div>
-										<span class="font-semibold">UF:</span>
-										{funcionario.naturalidadeUF}
-									</div>
-								{/if}
-							</div>
-						</div>
-					</div>
-				{/if}
-			</div>
+        <!-- Naturalidade -->
+        {#if funcionario.naturalidade || funcionario.naturalidadeUF}
+          <div class="card bg-base-100 shadow-xl">
+            <div class="card-body">
+              <h3 class="card-title text-lg border-b pb-2 mb-3">
+                Naturalidade
+              </h3>
+              <div class="space-y-2 text-sm">
+                {#if funcionario.naturalidade}
+                  <div>
+                    <span class="font-semibold">Cidade:</span>
+                    {funcionario.naturalidade}
+                  </div>
+                {/if}
+                {#if funcionario.naturalidadeUF}
+                  <div>
+                    <span class="font-semibold">UF:</span>
+                    {funcionario.naturalidadeUF}
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/if}
+      </div>
 
-			<!-- Coluna 2: Cargo, Formação e Cursos -->
-			<div class="space-y-6">
-				<!-- Cargo e Vínculo -->
-				<div class="card bg-base-100 shadow-xl">
-					<div class="card-body">
-						<h3 class="card-title mb-3 border-b pb-2 text-lg">Cargo e Vínculo</h3>
-						<div class="space-y-2 text-sm">
-							<div>
-								<span class="font-semibold">Tipo:</span>
-								{funcionario.simboloTipo === 'cargo_comissionado'
-									? 'Cargo Comissionado'
-									: 'Função Gratificada'}
-							</div>
-							{#if simbolo}
-								<div>
-									<span class="font-semibold">Símbolo:</span>
-									{simbolo.nome}
-								</div>
-								<div class="text-base-content/70 text-xs">
-									{simbolo.descricao}
-								</div>
-							{/if}
-							{#if funcionario.descricaoCargo}
-								<div class="mt-2">
-									<span class="font-semibold">Descrição:</span>
-									{funcionario.descricaoCargo}
-								</div>
-							{/if}
-							{#if funcionario.admissaoData}
-								<div class="mt-2">
-									<span class="font-semibold">Data Admissão:</span>
-									{funcionario.admissaoData}
-								</div>
-							{/if}
-							{#if funcionario.nomeacaoPortaria}
-								<div>
-									<span class="font-semibold">Portaria:</span>
-									{funcionario.nomeacaoPortaria}
-								</div>
-							{/if}
-							{#if funcionario.nomeacaoData}
-								<div>
-									<span class="font-semibold">Data Nomeação:</span>
-									{funcionario.nomeacaoData}
-								</div>
-							{/if}
-							{#if funcionario.nomeacaoDOE}
-								<div>
-									<span class="font-semibold">DOE:</span>
-									{funcionario.nomeacaoDOE}
-								</div>
-							{/if}
-							{#if funcionario.pertenceOrgaoPublico}
-								<div class="mt-2">
-									<span class="font-semibold">Pertence Órgão Público:</span> Sim
-								</div>
-								{#if funcionario.orgaoOrigem}
-									<div>
-										<span class="font-semibold">Órgão Origem:</span>
-										{funcionario.orgaoOrigem}
-									</div>
-								{/if}
-							{/if}
-							{#if funcionario.aposentado && funcionario.aposentado !== 'nao'}
-								<div>
-									<span class="font-semibold">Aposentado:</span>
-									{getLabelFromOptions(funcionario.aposentado, APOSENTADO_OPTIONS)}
-								</div>
-							{/if}
-						</div>
-					</div>
-				</div>
-				<!-- Documentos Pessoais -->
-				<div class="card bg-base-100 shadow-xl">
-					<div class="card-body">
-						<h3 class="card-title mb-3 border-b pb-2 text-lg">Documentos Pessoais</h3>
-						<div class="space-y-2 text-sm">
-							{#if funcionario.carteiraProfissionalNumero}
-								<div>
-									<span class="font-semibold">Cart. Profissional:</span>
-									{funcionario.carteiraProfissionalNumero}
-									{#if funcionario.carteiraProfissionalSerie}
-										- Série: {funcionario.carteiraProfissionalSerie}
-									{/if}
-								</div>
-							{/if}
-							{#if funcionario.reservistaNumero}
-								<div>
-									<span class="font-semibold">Reservista:</span>
-									{funcionario.reservistaNumero}
-									{#if funcionario.reservistaSerie}
-										- Série: {funcionario.reservistaSerie}
-									{/if}
-								</div>
-							{/if}
-							{#if funcionario.tituloEleitorNumero}
-								<div>
-									<span class="font-semibold">Título Eleitor:</span>
-									{funcionario.tituloEleitorNumero}
-								</div>
-								{#if funcionario.tituloEleitorZona || funcionario.tituloEleitorSecao}
-									<div class="ml-4 text-xs">
-										{#if funcionario.tituloEleitorZona}Zona: {funcionario.tituloEleitorZona}{/if}
-										{#if funcionario.tituloEleitorSecao}
-											- Seção: {funcionario.tituloEleitorSecao}{/if}
-									</div>
-								{/if}
-							{/if}
-							{#if funcionario.pisNumero}
-								<div>
-									<span class="font-semibold">PIS/PASEP:</span>
-									{funcionario.pisNumero}
-								</div>
-							{/if}
-						</div>
-					</div>
-				</div>
+      <!-- Coluna 2: Cargo, Formação e Cursos -->
+      <div class="space-y-6">
+        <!-- Cargo e Vínculo -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h3 class="card-title text-lg border-b pb-2 mb-3">
+              Cargo e Vínculo
+            </h3>
+            <div class="space-y-2 text-sm">
+              <div>
+                <span class="font-semibold">Tipo:</span>
+                {funcionario.simboloTipo === "cargo_comissionado"
+                  ? "Cargo Comissionado"
+                  : "Função Gratificada"}
+              </div>
+              {#if simbolo}
+                <div>
+                  <span class="font-semibold">Símbolo:</span>
+                  {simbolo.nome}
+                </div>
+                <div class="text-xs text-base-content/70">
+                  {simbolo.descricao}
+                </div>
+              {/if}
+              {#if funcionario.descricaoCargo}
+                <div class="mt-2">
+                  <span class="font-semibold">Descrição:</span>
+                  {funcionario.descricaoCargo}
+                </div>
+              {/if}
+              {#if funcionario.admissaoData}
+                <div class="mt-2">
+                  <span class="font-semibold">Data Admissão:</span>
+                  {funcionario.admissaoData}
+                </div>
+              {/if}
+              {#if funcionario.nomeacaoPortaria}
+                <div>
+                  <span class="font-semibold">Portaria:</span>
+                  {funcionario.nomeacaoPortaria}
+                </div>
+              {/if}
+              {#if funcionario.nomeacaoData}
+                <div>
+                  <span class="font-semibold">Data Nomeação:</span>
+                  {funcionario.nomeacaoData}
+                </div>
+              {/if}
+              {#if funcionario.nomeacaoDOE}
+                <div>
+                  <span class="font-semibold">DOE:</span>
+                  {funcionario.nomeacaoDOE}
+                </div>
+              {/if}
+              {#if funcionario.pertenceOrgaoPublico}
+                <div class="mt-2">
+                  <span class="font-semibold">Pertence Órgão Público:</span> Sim
+                </div>
+                {#if funcionario.orgaoOrigem}
+                  <div>
+                    <span class="font-semibold">Órgão Origem:</span>
+                    {funcionario.orgaoOrigem}
+                  </div>
+                {/if}
+              {/if}
+              {#if funcionario.aposentado && funcionario.aposentado !== "nao"}
+                <div>
+                  <span class="font-semibold">Aposentado:</span>
+                  {getLabelFromOptions(
+                    funcionario.aposentado,
+                    APOSENTADO_OPTIONS,
+                  )}
+                </div>
+              {/if}
+            </div>
+          </div>
+        </div>
+        <!-- Documentos Pessoais -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h3 class="card-title text-lg border-b pb-2 mb-3">
+              Documentos Pessoais
+            </h3>
+            <div class="space-y-2 text-sm">
+              {#if funcionario.carteiraProfissionalNumero}
+                <div>
+                  <span class="font-semibold">Cart. Profissional:</span>
+                  {funcionario.carteiraProfissionalNumero}
+                  {#if funcionario.carteiraProfissionalSerie}
+                    - Série: {funcionario.carteiraProfissionalSerie}
+                  {/if}
+                </div>
+              {/if}
+              {#if funcionario.reservistaNumero}
+                <div>
+                  <span class="font-semibold">Reservista:</span>
+                  {funcionario.reservistaNumero}
+                  {#if funcionario.reservistaSerie}
+                    - Série: {funcionario.reservistaSerie}
+                  {/if}
+                </div>
+              {/if}
+              {#if funcionario.tituloEleitorNumero}
+                <div>
+                  <span class="font-semibold">Título Eleitor:</span>
+                  {funcionario.tituloEleitorNumero}
+                </div>
+                {#if funcionario.tituloEleitorZona || funcionario.tituloEleitorSecao}
+                  <div class="ml-4 text-xs">
+                    {#if funcionario.tituloEleitorZona}Zona: {funcionario.tituloEleitorZona}{/if}
+                    {#if funcionario.tituloEleitorSecao}
+                      - Seção: {funcionario.tituloEleitorSecao}{/if}
+                  </div>
+                {/if}
+              {/if}
+              {#if funcionario.pisNumero}
+                <div>
+                  <span class="font-semibold">PIS/PASEP:</span>
+                  {funcionario.pisNumero}
+                </div>
+              {/if}
+            </div>
+          </div>
+        </div>
 
-				<!-- Formação -->
-				{#if funcionario.grauInstrucao || funcionario.formacao}
-					<div class="card bg-base-100 shadow-xl">
-						<div class="card-body">
-							<h3 class="card-title mb-3 border-b pb-2 text-lg">Formação</h3>
-							<div class="space-y-2 text-sm">
-								{#if funcionario.grauInstrucao}
-									<div>
-										<span class="font-semibold">Grau Instrução:</span>
-										{getLabelFromOptions(funcionario.grauInstrucao, GRAU_INSTRUCAO_OPTIONS)}
-									</div>
-								{/if}
-								{#if funcionario.formacao}
-									<div>
-										<span class="font-semibold">Formação:</span>
-										{funcionario.formacao}
-									</div>
-								{/if}
-								{#if funcionario.formacaoRegistro}
-									<div>
-										<span class="font-semibold">Registro Nº:</span>
-										{funcionario.formacaoRegistro}
-									</div>
-								{/if}
-							</div>
-						</div>
-					</div>
-				{/if}
+        <!-- Formação -->
+        {#if funcionario.grauInstrucao || funcionario.formacao}
+          <div class="card bg-base-100 shadow-xl">
+            <div class="card-body">
+              <h3 class="card-title text-lg border-b pb-2 mb-3">Formação</h3>
+              <div class="space-y-2 text-sm">
+                {#if funcionario.grauInstrucao}
+                  <div>
+                    <span class="font-semibold">Grau Instrução:</span>
+                    {getLabelFromOptions(
+                      funcionario.grauInstrucao,
+                      GRAU_INSTRUCAO_OPTIONS,
+                    )}
+                  </div>
+                {/if}
+                {#if funcionario.formacao}
+                  <div>
+                    <span class="font-semibold">Formação:</span>
+                    {funcionario.formacao}
+                  </div>
+                {/if}
+                {#if funcionario.formacaoRegistro}
+                  <div>
+                    <span class="font-semibold">Registro Nº:</span>
+                    {funcionario.formacaoRegistro}
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/if}
 
-				<!-- Cursos e Treinamentos -->
-				{#if cursos && cursos.length > 0}
-					<div class="card bg-base-100 shadow-xl">
-						<div class="card-body">
-							<h3 class="card-title mb-3 border-b pb-2 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-									/>
-								</svg>
-								Cursos e Treinamentos
-							</h3>
-							<div class="space-y-3">
-								{#each cursos as curso}
-									<div class="bg-base-200 flex items-start gap-3 rounded-lg p-3">
-										<div class="flex-1">
-											<p class="text-sm font-semibold">{curso.descricao}</p>
-											<p class="text-base-content/70 mt-1 text-xs">
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													class="mr-1 inline h-3 w-3"
-													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>
-												{curso.data}
-											</p>
-										</div>
-										{#if curso.certificadoUrl}
-											<a
-												href={curso.certificadoUrl}
-												target="_blank"
-												rel="noopener noreferrer"
-												class="btn btn-xs btn-primary 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="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>
-												Certificado
-											</a>
-										{/if}
-									</div>
-								{/each}
-							</div>
-						</div>
-					</div>
-				{/if}
+        <!-- Cursos e Treinamentos -->
+        {#if cursos && cursos.length > 0}
+          <div class="card bg-base-100 shadow-xl">
+            <div class="card-body">
+              <h3 class="card-title text-lg border-b pb-2 mb-3">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+                  />
+                </svg>
+                Cursos e Treinamentos
+              </h3>
+              <div class="space-y-3">
+                {#each cursos as curso}
+                  <div
+                    class="flex items-start gap-3 p-3 bg-base-200 rounded-lg"
+                  >
+                    <div class="flex-1">
+                      <p class="font-semibold text-sm">{curso.descricao}</p>
+                      <p class="text-xs text-base-content/70 mt-1">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          class="h-3 w-3 inline mr-1"
+                          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>
+                        {curso.data}
+                      </p>
+                    </div>
+                    {#if curso.certificadoUrl}
+                      <a
+                        href={curso.certificadoUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="btn btn-xs btn-primary 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="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>
+                        Certificado
+                      </a>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+            </div>
+          </div>
+        {/if}
 
-				<!-- Saúde -->
-				{#if funcionario.grupoSanguineo || funcionario.fatorRH}
-					<div class="card bg-base-100 shadow-xl">
-						<div class="card-body">
-							<h3 class="card-title mb-3 border-b pb-2 text-lg">Saúde</h3>
-							<div class="space-y-2 text-sm">
-								{#if funcionario.grupoSanguineo}
-									<div>
-										<span class="font-semibold">Grupo Sanguíneo:</span>
-										{funcionario.grupoSanguineo}
-									</div>
-								{/if}
-								{#if funcionario.fatorRH}
-									<div>
-										<span class="font-semibold">Fator RH:</span>
-										{getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)}
-									</div>
-								{/if}
-							</div>
-						</div>
-					</div>
-				{/if}
+        <!-- Saúde -->
+        {#if funcionario.grupoSanguineo || funcionario.fatorRH}
+          <div class="card bg-base-100 shadow-xl">
+            <div class="card-body">
+              <h3 class="card-title text-lg border-b pb-2 mb-3">Saúde</h3>
+              <div class="space-y-2 text-sm">
+                {#if funcionario.grupoSanguineo}
+                  <div>
+                    <span class="font-semibold">Grupo Sanguíneo:</span>
+                    {funcionario.grupoSanguineo}
+                  </div>
+                {/if}
+                {#if funcionario.fatorRH}
+                  <div>
+                    <span class="font-semibold">Fator RH:</span>
+                    {getLabelFromOptions(funcionario.fatorRH, FATOR_RH_OPTIONS)}
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/if}
 
-				<!-- Contato -->
-				<div class="card bg-base-100 shadow-xl">
-					<div class="card-body">
-						<h3 class="card-title mb-3 border-b pb-2 text-lg">Contato</h3>
-						<div class="space-y-2 text-sm">
-							<div>
-								<span class="font-semibold">E-mail:</span>
-								{funcionario.email}
-							</div>
-							<div>
-								<span class="font-semibold">Telefone:</span>
-								{maskPhone(funcionario.telefone)}
-							</div>
-						</div>
-					</div>
-				</div>
+        <!-- Contato -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h3 class="card-title text-lg border-b pb-2 mb-3">Contato</h3>
+            <div class="space-y-2 text-sm">
+              <div>
+                <span class="font-semibold">E-mail:</span>
+                {funcionario.email}
+              </div>
+              <div>
+                <span class="font-semibold">Telefone:</span>
+                {maskPhone(funcionario.telefone)}
+              </div>
+            </div>
+          </div>
+        </div>
 
-				<!-- Endereço -->
-				<div class="card bg-base-100 shadow-xl">
-					<div class="card-body">
-						<h3 class="card-title mb-3 border-b pb-2 text-lg">Endereço</h3>
-						<div class="space-y-2 text-sm">
-							<div>{funcionario.endereco}</div>
-							<div>{funcionario.cidade} - {funcionario.uf}</div>
-							<div>
-								<span class="font-semibold">CEP:</span>
-								{maskCEP(funcionario.cep)}
-							</div>
-						</div>
-					</div>
-				</div>
+        <!-- Endereço -->
+        <div class="card bg-base-100 shadow-xl">
+          <div class="card-body">
+            <h3 class="card-title text-lg border-b pb-2 mb-3">Endereço</h3>
+            <div class="space-y-2 text-sm">
+              <div>{funcionario.endereco}</div>
+              <div>{funcionario.cidade} - {funcionario.uf}</div>
+              <div>
+                <span class="font-semibold">CEP:</span>
+                {maskCEP(funcionario.cep)}
+              </div>
+            </div>
+          </div>
+        </div>
 
-				<!-- Dados Bancários -->
-				{#if funcionario.contaBradescoNumero}
-					<div class="card bg-base-100 shadow-xl">
-						<div class="card-body">
-							<h3 class="card-title mb-3 border-b pb-2 text-lg">Dados Bancários - Bradesco</h3>
-							<div class="space-y-2 text-sm">
-								<div>
-									<span class="font-semibold">Conta:</span>
-									{funcionario.contaBradescoNumero}
-									{#if funcionario.contaBradescoDV}-{funcionario.contaBradescoDV}{/if}
-								</div>
-								{#if funcionario.contaBradescoAgencia}
-									<div>
-										<span class="font-semibold">Agência:</span>
-										{funcionario.contaBradescoAgencia}
-									</div>
-								{/if}
-							</div>
-						</div>
-					</div>
-				{/if}
-			</div>
-		</div>
+        <!-- Dados Bancários -->
+        {#if funcionario.contaBradescoNumero}
+          <div class="card bg-base-100 shadow-xl">
+            <div class="card-body">
+              <h3 class="card-title text-lg border-b pb-2 mb-3">
+                Dados Bancários - Bradesco
+              </h3>
+              <div class="space-y-2 text-sm">
+                <div>
+                  <span class="font-semibold">Conta:</span>
+                  {funcionario.contaBradescoNumero}
+                  {#if funcionario.contaBradescoDV}-{funcionario.contaBradescoDV}{/if}
+                </div>
+                {#if funcionario.contaBradescoAgencia}
+                  <div>
+                    <span class="font-semibold">Agência:</span>
+                    {funcionario.contaBradescoAgencia}
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
 
-		<!-- Documentos Anexados -->
-		<div class="card bg-base-100 shadow-xl">
-			<div class="card-body">
-				<h3 class="card-title mb-4 border-b pb-3 text-xl">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-						/>
-					</svg>
-					Documentos Anexados
-				</h3>
+    <!-- Documentos Anexados -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body">
+        <h3 class="card-title text-xl border-b pb-3 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="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>
+          Documentos Anexados
+        </h3>
 
-				<div class="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4">
-					{#each documentos as doc}
-						{@const temDocumento = documentosUrls[doc.campo]}
-						<div
-							class="card bg-base-200 border-2 shadow-sm"
-							class:border-success={temDocumento}
-							class:border-base-300={!temDocumento}
-						>
-							<div class="card-body p-3">
-								<div class="flex items-start gap-2">
-									<div
-										class={`flex h-8 w-8 shrink-0 items-center justify-center rounded ${temDocumento ? 'bg-success/20' : 'bg-base-300'}`}
-									>
-										{#if temDocumento}
-											<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="M5 13l4 4L19 7"
-												/>
-											</svg>
-										{:else}
-											<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="M12 4v16m8-8H4"
-												/>
-											</svg>
-										{/if}
-									</div>
-									<div class="min-w-0 flex-1">
-										<p class="line-clamp-2 text-xs font-medium">{doc.nome}</p>
-										<p class="text-base-content/60 mt-1 text-xs">
-											{temDocumento ? 'Enviado' : 'Pendente'}
-										</p>
-										{#if temDocumento}
-											<button
-												class="btn btn-xs btn-ghost mt-2 gap-1"
-												onclick={() => downloadDocumento(documentosUrls[doc.campo] || '', doc.nome)}
-											>
-												<svg
-													xmlns="http://www.w3.org/2000/svg"
-													class="h-3 w-3"
-													fill="none"
-													viewBox="0 0 24 24"
-													stroke="currentColor"
-												>
-													<path
-														stroke-linecap="round"
-														stroke-linejoin="round"
-														stroke-width="2"
-														d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-													/>
-												</svg>
-												Baixar
-											</button>
-										{/if}
-									</div>
-								</div>
-							</div>
-						</div>
-					{/each}
-				</div>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
+          {#each documentos as doc}
+            {@const temDocumento = documentosUrls[doc.campo]}
+            <div
+              class="card bg-base-200 shadow-sm border-2"
+              class:border-success={temDocumento}
+              class:border-base-300={!temDocumento}
+            >
+              <div class="card-body p-3">
+                <div class="flex items-start gap-2">
+                  <div
+                    class={`w-8 h-8 rounded flex items-center justify-center shrink-0 ${temDocumento ? "bg-success/20" : "bg-base-300"}`}
+                  >
+                    {#if temDocumento}
+                      <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="M5 13l4 4L19 7"
+                        />
+                      </svg>
+                    {:else}
+                      <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="M12 4v16m8-8H4"
+                        />
+                      </svg>
+                    {/if}
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-xs font-medium line-clamp-2">{doc.nome}</p>
+                    <p class="text-xs text-base-content/60 mt-1">
+                      {temDocumento ? "Enviado" : "Pendente"}
+                    </p>
+                    {#if temDocumento}
+                      <button
+                        class="btn btn-xs btn-ghost mt-2 gap-1"
+                        onclick={() =>
+                          downloadDocumento(
+                            documentosUrls[doc.campo] || "",
+                            doc.nome,
+                          )}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          class="h-3 w-3"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+                          />
+                        </svg>
+                        Baixar
+                      </button>
+                    {/if}
+                  </div>
+                </div>
+              </div>
+            </div>
+          {/each}
+        </div>
 
-				<div class="mt-4 text-center">
-					<button
-						class="btn btn-primary btn-sm gap-2"
-						onclick={() => goto(`/recursos-humanos/funcionarios/${funcionarioId}/documentos`)}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="h-4 w-4"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke="currentColor"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-							/>
-						</svg>
-						Gerenciar Documentos
-					</button>
-				</div>
-			</div>
-		</div>
-	</main>
+        <div class="mt-4 text-center">
+          <button
+            class="btn btn-primary btn-sm gap-2"
+            onclick={() =>
+              goto(
+                `/recursos-humanos/funcionarios/${funcionarioId}/documentos`,
+              )}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+              />
+            </svg>
+            Gerenciar Documentos
+          </button>
+        </div>
+      </div>
+    </div>
+  </main>
 
-	<!-- Modal de Impressão -->
-	{#if showPrintModal}
-		<PrintModal {funcionario} onClose={() => (showPrintModal = false)} />
-	{/if}
+  <!-- Modal de Impressão -->
+  {#if showPrintModal}
+    <PrintModal {funcionario} onClose={() => (showPrintModal = false)} />
+  {/if}
 
   <!-- Modal de Impressão Dados Financeiros removido -->
 {/if}
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 f96c08b..5e02825 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,358 +1,277 @@
 <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();
+  const client = useConvexClient();
+  
+  let funcionarioId = $derived($page.params.funcionarioId as string);
 
-	let funcionarioId = $derived($page.params.funcionarioId as string);
+  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 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 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;
+    }
+  }
 
-	async function load() {
-		try {
-			loading = true;
+  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");
+    }
+  }
 
-			// Carregar dados do funcionário
-			const data = await client.query(api.funcionarios.getById, {
-				id: funcionarioId as any
-			});
+  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 || ""));
+    }
+  }
 
-			if (!data) {
-				goto('/recursos-humanos/funcionarios');
-				return;
-			}
+  function documentosFiltrados() {
+    return documentos.filter(doc => {
+      const temDocumento = !!documentosStorage[doc.campo];
+      if (filtro === "enviados") return temDocumento;
+      if (filtro === "pendentes") return !temDocumento;
+      return true; // todos
+    });
+  }
 
-			funcionario = data;
+  function contarDocumentos() {
+    const total = documentos.length;
+    const enviados = documentos.filter(doc => !!documentosStorage[doc.campo]).length;
+    const pendentes = total - enviados;
+    return { total, enviados, pendentes };
+  }
 
-			// 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();
+  load();
 </script>
 
 {#if loading}
-	<div class="flex min-h-screen items-center justify-center">
-		<span class="loading loading-spinner loading-lg"></span>
-	</div>
+  <div class="flex items-center justify-center min-h-screen">
+    <span class="loading loading-spinner loading-lg"></span>
+  </div>
 {:else if funcionario}
-	<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>
+  <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>
 
-		<!-- 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>
+    <!-- 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>
 
-				<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>
+        <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>
 
-		<!-- 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>
+    <!-- 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>
 
-			<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} showPreencherButton={true} />
-		</div>
+    <!-- Modelos de Declarações -->
+    <div class="mb-6">
+      <ModelosDeclaracoes funcionario={funcionario} showPreencherButton={true} />
+    </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>
+    <!-- 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>
 
-		<!-- 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;
-			})}
+    <!-- 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>
 
-			{#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>
+            <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}
 
-						<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 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>
 {/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 785ddff..f38dca4 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
@@ -1,38 +1,31 @@
 <script lang="ts">
-	import { useConvexClient } from 'convex-svelte';
-	import { api } from '@sgse-app/backend/convex/_generated/api';
-	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
-	import type { SimboloTipo } from '@sgse-app/backend/convex/schema';
-	import FileUpload from '$lib/components/FileUpload.svelte';
-	import {
-		maskCPF,
-		maskCEP,
-		maskPhone,
-		maskDate,
-		onlyDigits,
-		validateCPF,
-		validateDate
-	} from '$lib/utils/masks';
-	import {
-		SEXO_OPTIONS,
-		ESTADO_CIVIL_OPTIONS,
-		GRAU_INSTRUCAO_OPTIONS,
-		GRUPO_SANGUINEO_OPTIONS,
-		FATOR_RH_OPTIONS,
-		APOSENTADO_OPTIONS,
-		UFS_BRASIL
-	} from '$lib/utils/constants';
-	import {
-		documentos,
-		categoriasDocumentos,
-		getDocumentosByCategoria
-	} from '$lib/utils/documentos';
-	import ModelosDeclaracoes from '$lib/components/ModelosDeclaracoes.svelte';
+  import { useConvexClient } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+  import type { SimboloTipo } from "@sgse-app/backend/convex/schema";
+  import FileUpload from "$lib/components/FileUpload.svelte";
+  import { 
+    maskCPF, maskCEP, maskPhone, maskDate, onlyDigits,
+    validateCPF, validateDate 
+  } from "$lib/utils/masks";
+  import { 
+    SEXO_OPTIONS, ESTADO_CIVIL_OPTIONS, GRAU_INSTRUCAO_OPTIONS,
+    GRUPO_SANGUINEO_OPTIONS, FATOR_RH_OPTIONS, APOSENTADO_OPTIONS, UFS_BRASIL
+  } from "$lib/utils/constants";
+  import { documentos, categoriasDocumentos, getDocumentosByCategoria } from "$lib/utils/documentos";
+  import ModelosDeclaracoes from "$lib/components/ModelosDeclaracoes.svelte";
 
-	const client = useConvexClient();
+  const client = useConvexClient();
+  
+  let funcionarioId = $derived($page.params.funcionarioId as string);
 
-	let funcionarioId = $derived($page.params.funcionarioId as string);
+  let simbolos: Array<{
+    _id: string;
+    nome: string;
+    tipo: SimboloTipo;
+    descricao: string;
+  }> = $state([]);
 
   let tipo = $state<SimboloTipo>("cargo_comissionado");
   let loading = $state(false);
@@ -127,10 +120,15 @@
     data: "",
   });
 
-	let tipo = $state<SimboloTipo>('cargo_comissionado');
-	let loading = $state(false);
-	let loadingData = $state(true);
-	let notice = $state<{ kind: 'success' | 'error'; text: string } | null>(null);
+  async function loadSimbolos() {
+    const list = await client.query(api.simbolos.getAll, {} as any);
+    simbolos = list.map((s: any) => ({ 
+      _id: s._id, 
+      nome: s.nome, 
+      tipo: s.tipo, 
+      descricao: s.descricao 
+    }));
+  }
 
   async function loadFuncionario() {
     try {
@@ -224,43 +222,108 @@
     }
   }
 
-	// Dados Pessoais Adicionais
-	let nomePai = $state('');
-	let nomeMae = $state('');
-	let naturalidade = $state('');
-	let naturalidadeUF = $state('');
-	let sexo = $state('');
-	let estadoCivil = $state('');
-	let nacionalidade = $state('Brasileira');
+  async function fillFromCEP(cepValue: string) {
+    const cepDigits = onlyDigits(cepValue);
+    if (cepDigits.length !== 8) return;
+    
+    try {
+      const res = await fetch(`https://viacep.com.br/ws/${cepDigits}/json/`);
+      const data = await res.json();
+      if (!data || data.erro) return;
+      
+      const enderecoFull = [data.logradouro, data.bairro].filter(Boolean).join(", ");
+      endereco = enderecoFull;
+      cidade = data.localidade || "";
+      uf = data.uf || "";
+    } catch {}
+  }
+  
+  // Funções de Cursos
+  function adicionarCurso() {
+    if (!cursoAtual.descricao.trim() || !cursoAtual.data.trim()) {
+      notice = { kind: "error", text: "Preencha a descrição e data do curso" };
+      return;
+    }
+    
+    if (cursos.filter(c => !c.marcadoParaExcluir).length >= 7) {
+      notice = { kind: "error", text: "Máximo de 7 cursos permitidos" };
+      return;
+    }
+    
+    cursos.push({ ...cursoAtual });
+    cursoAtual = {
+      id: crypto.randomUUID(),
+      descricao: "",
+      data: "",
+    };
+    mostrarFormularioCurso = false;
+  }
+  
+  function removerCurso(id: string) {
+    const curso = cursos.find(c => c.id === id);
+    if (curso && curso._id) {
+      // Marcar para excluir se já existe no banco
+      curso.marcadoParaExcluir = true;
+    } else {
+      // Remover diretamente se é novo
+      cursos = cursos.filter(c => c.id !== id);
+    }
+  }
+  
+  async function uploadCertificado(file: File): Promise<string> {
+    const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+    
+    const result = await fetch(uploadUrl, {
+      method: "POST",
+      headers: { "Content-Type": file.type },
+      body: file,
+    });
+    
+    const { storageId } = await result.json();
+    return storageId;
+  }
 
-	// Documentos Pessoais
-	let rgOrgaoExpedidor = $state('');
-	let rgDataEmissao = $state('');
-	let carteiraProfissionalNumero = $state('');
-	let carteiraProfissionalSerie = $state('');
-	let carteiraProfissionalDataEmissao = $state('');
-	let reservistaNumero = $state('');
-	let reservistaSerie = $state('');
-	let tituloEleitorNumero = $state('');
-	let tituloEleitorZona = $state('');
-	let tituloEleitorSecao = $state('');
-	let pisNumero = $state('');
+  async function handleDocumentoUpload(campo: string, file: File) {
+    try {
+      const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+      
+      const result = await fetch(uploadUrl, {
+        method: "POST",
+        headers: { "Content-Type": file.type },
+        body: file,
+      });
+      
+      const { storageId } = await result.json();
+      documentosStorage[campo] = storageId;
+    } catch (err: any) {
+      throw new Error(err?.message || "Erro ao fazer upload");
+    }
+  }
 
-	// Formação e Saúde
-	let grauInstrucao = $state('');
-	let formacao = $state('');
-	let formacaoRegistro = $state('');
-	let grupoSanguineo = $state('');
-	let fatorRH = $state('');
+  async function handleDocumentoRemove(campo: string) {
+    documentosStorage[campo] = undefined;
+  }
 
-	// Cargo e Vínculo
-	let descricaoCargo = $state('');
-	let nomeacaoPortaria = $state('');
-	let nomeacaoData = $state('');
-	let nomeacaoDOE = $state('');
-	let pertenceOrgaoPublico = $state(false);
-	let orgaoOrigem = $state('');
-	let aposentado = $state('nao');
+  async function handleSubmit() {
+    if (!nome || !matricula || !cpf || !rg || !nascimento || !email || !telefone) {
+      notice = { kind: "error", text: "Preencha todos os campos obrigatórios" };
+      return;
+    }
+    
+    if (!validateCPF(cpf)) {
+      notice = { kind: "error", text: "CPF inválido" };
+      return;
+    }
+    
+    if (!validateDate(nascimento)) {
+      notice = { kind: "error", text: "Data de nascimento inválida" };
+      return;
+    }
+    
+    if (!simboloId) {
+      notice = { kind: "error", text: "Selecione um símbolo" };
+      return;
+    }
 
     try {
       loading = true;
@@ -325,368 +388,77 @@
         ),
       };
 
-	// Documentos (Storage IDs)
-	let documentosStorage: Record<string, string | undefined> = $state({});
+      await client.mutation(api.funcionarios.update, { id: funcionarioId as any, ...payload as any });
+      
+      // Salvar cursos
+      try {
+        // Excluir cursos marcados
+        for (const curso of cursos.filter(c => c.marcadoParaExcluir && c._id)) {
+          await client.mutation(api.cursos.excluir, { id: curso._id as any });
+        }
+        
+        // Adicionar/atualizar cursos
+        for (const curso of cursos.filter(c => !c.marcadoParaExcluir)) {
+          let certificadoId = curso.certificadoId;
+          
+          // Upload de certificado se houver arquivo novo
+          if (curso.arquivo) {
+            certificadoId = await uploadCertificado(curso.arquivo);
+          }
+          
+          if (curso._id) {
+            // Atualizar curso existente
+            await client.mutation(api.cursos.atualizar, {
+              id: curso._id as any,
+              descricao: curso.descricao,
+              data: curso.data,
+              certificadoId: certificadoId as any,
+            });
+          } else {
+            // Criar novo curso
+            await client.mutation(api.cursos.criar, {
+              funcionarioId: funcionarioId as any,
+              descricao: curso.descricao,
+              data: curso.data,
+              certificadoId: certificadoId as any,
+            });
+          }
+        }
+      } catch (error) {
+        console.error("Erro ao salvar cursos:", error);
+      }
+      
+      notice = { kind: "success", text: "Funcionário atualizado com sucesso!" };
+      setTimeout(() => goto("/recursos-humanos/funcionarios"), 600);
+    } catch (e: any) {
+      notice = { kind: "error", text: "Erro ao atualizar funcionário." };
+    } finally {
+      loading = false;
+    }
+  }
 
-	// Cursos e Treinamentos
-	interface Curso {
-		_id?: string;
-		id: string;
-		descricao: string;
-		data: string;
-		certificadoId?: string;
-		arquivo?: File;
-		marcadoParaExcluir?: boolean;
-	}
+  async function init() {
+    await loadSimbolos();
+    await loadFuncionario();
+  }
 
-	let cursos = $state<Curso[]>([]);
-	let mostrarFormularioCurso = $state(false);
-	let cursoAtual = $state<Curso>({
-		id: crypto.randomUUID(),
-		descricao: '',
-		data: ''
-	});
+  $effect(() => {
+    if (funcionarioId) {
+      init();
+    }
+  });
 
-	async function loadSimbolos() {
-		const list = await client.query(api.simbolos.getAll, {} as any);
-		simbolos = list.map((s: any) => ({
-			_id: s._id,
-			nome: s.nome,
-			tipo: s.tipo,
-			descricao: s.descricao
-		}));
-	}
-
-	async function loadFuncionario() {
-		try {
-			const func = await client.query(api.funcionarios.getById, { id: funcionarioId as any });
-
-			// Preencher campos
-			nome = func.nome;
-			matricula = func.matricula;
-			cpf = maskCPF(func.cpf);
-			rg = func.rg;
-			nascimento = func.nascimento;
-			email = func.email;
-			telefone = maskPhone(func.telefone);
-			endereco = func.endereco;
-			cep = maskCEP(func.cep);
-			cidade = func.cidade;
-			uf = func.uf;
-			simboloId = func.simboloId;
-			tipo = func.simboloTipo;
-			admissaoData = func.admissaoData || '';
-
-			// Dados adicionais
-			nomePai = func.nomePai || '';
-			nomeMae = func.nomeMae || '';
-			naturalidade = func.naturalidade || '';
-			naturalidadeUF = func.naturalidadeUF || '';
-			sexo = func.sexo || '';
-			estadoCivil = func.estadoCivil || '';
-			nacionalidade = func.nacionalidade || 'Brasileira';
-
-			rgOrgaoExpedidor = func.rgOrgaoExpedidor || '';
-			rgDataEmissao = func.rgDataEmissao || '';
-			carteiraProfissionalNumero = func.carteiraProfissionalNumero || '';
-			carteiraProfissionalSerie = func.carteiraProfissionalSerie || '';
-			carteiraProfissionalDataEmissao = func.carteiraProfissionalDataEmissao || '';
-			reservistaNumero = func.reservistaNumero || '';
-			reservistaSerie = func.reservistaSerie || '';
-			tituloEleitorNumero = func.tituloEleitorNumero || '';
-			tituloEleitorZona = func.tituloEleitorZona || '';
-			tituloEleitorSecao = func.tituloEleitorSecao || '';
-			pisNumero = func.pisNumero || '';
-
-			grauInstrucao = func.grauInstrucao || '';
-			formacao = func.formacao || '';
-			formacaoRegistro = func.formacaoRegistro || '';
-			grupoSanguineo = func.grupoSanguineo || '';
-			fatorRH = func.fatorRH || '';
-
-			descricaoCargo = func.descricaoCargo || '';
-			nomeacaoPortaria = func.nomeacaoPortaria || '';
-			nomeacaoData = func.nomeacaoData || '';
-			nomeacaoDOE = func.nomeacaoDOE || '';
-			pertenceOrgaoPublico = func.pertenceOrgaoPublico || false;
-			orgaoOrigem = func.orgaoOrigem || '';
-			aposentado = func.aposentado || 'nao';
-
-			contaBradescoNumero = func.contaBradescoNumero || '';
-			contaBradescoDV = func.contaBradescoDV || '';
-			contaBradescoAgencia = func.contaBradescoAgencia || '';
-
-			// Documentos
-			documentosStorage = {};
-			documentos.forEach((doc) => {
-				const storageId = (func as any)[doc.campo];
-				if (storageId) {
-					documentosStorage[doc.campo] = storageId;
-				}
-			});
-
-			// Carregar cursos
-			try {
-				const cursosData = await client.query(api.cursos.listarPorFuncionario, {
-					funcionarioId: funcionarioId as any
-				});
-				cursos = cursosData.map((c: any) => ({
-					_id: c._id,
-					id: c._id,
-					descricao: c.descricao,
-					data: c.data,
-					certificadoId: c.certificadoId
-				}));
-			} catch (error) {
-				console.error('Erro ao carregar cursos:', error);
-			}
-		} catch (error) {
-			console.error('Erro ao carregar funcionário:', error);
-			notice = { kind: 'error', text: 'Erro ao carregar dados do funcionário' };
-		} finally {
-			loadingData = false;
-		}
-	}
-
-	async function fillFromCEP(cepValue: string) {
-		const cepDigits = onlyDigits(cepValue);
-		if (cepDigits.length !== 8) return;
-
-		try {
-			const res = await fetch(`https://viacep.com.br/ws/${cepDigits}/json/`);
-			const data = await res.json();
-			if (!data || data.erro) return;
-
-			const enderecoFull = [data.logradouro, data.bairro].filter(Boolean).join(', ');
-			endereco = enderecoFull;
-			cidade = data.localidade || '';
-			uf = data.uf || '';
-		} catch {}
-	}
-
-	// Funções de Cursos
-	function adicionarCurso() {
-		if (!cursoAtual.descricao.trim() || !cursoAtual.data.trim()) {
-			notice = { kind: 'error', text: 'Preencha a descrição e data do curso' };
-			return;
-		}
-
-		if (cursos.filter((c) => !c.marcadoParaExcluir).length >= 7) {
-			notice = { kind: 'error', text: 'Máximo de 7 cursos permitidos' };
-			return;
-		}
-
-		cursos.push({ ...cursoAtual });
-		cursoAtual = {
-			id: crypto.randomUUID(),
-			descricao: '',
-			data: ''
-		};
-		mostrarFormularioCurso = false;
-	}
-
-	function removerCurso(id: string) {
-		const curso = cursos.find((c) => c.id === id);
-		if (curso && curso._id) {
-			// Marcar para excluir se já existe no banco
-			curso.marcadoParaExcluir = true;
-		} else {
-			// Remover diretamente se é novo
-			cursos = cursos.filter((c) => c.id !== id);
-		}
-	}
-
-	async function uploadCertificado(file: File): Promise<string> {
-		const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-
-		const result = await fetch(uploadUrl, {
-			method: 'POST',
-			headers: { 'Content-Type': file.type },
-			body: file
-		});
-
-		const { storageId } = await result.json();
-		return storageId;
-	}
-
-	async function handleDocumentoUpload(campo: string, file: File) {
-		try {
-			const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-
-			const result = await fetch(uploadUrl, {
-				method: 'POST',
-				headers: { 'Content-Type': file.type },
-				body: file
-			});
-
-			const { storageId } = await result.json();
-			documentosStorage[campo] = storageId;
-		} catch (err: any) {
-			throw new Error(err?.message || 'Erro ao fazer upload');
-		}
-	}
-
-	async function handleDocumentoRemove(campo: string) {
-		documentosStorage[campo] = undefined;
-	}
-
-	async function handleSubmit() {
-		if (!nome || !matricula || !cpf || !rg || !nascimento || !email || !telefone) {
-			notice = { kind: 'error', text: 'Preencha todos os campos obrigatórios' };
-			return;
-		}
-
-		if (!validateCPF(cpf)) {
-			notice = { kind: 'error', text: 'CPF inválido' };
-			return;
-		}
-
-		if (!validateDate(nascimento)) {
-			notice = { kind: 'error', text: 'Data de nascimento inválida' };
-			return;
-		}
-
-		if (!simboloId) {
-			notice = { kind: 'error', text: 'Selecione um símbolo' };
-			return;
-		}
-
-		try {
-			loading = true;
-
-			const payload = {
-				nome,
-				matricula,
-				cpf: onlyDigits(cpf),
-				rg: onlyDigits(rg),
-				nascimento,
-				email,
-				telefone: onlyDigits(telefone),
-				endereco,
-				cep: onlyDigits(cep),
-				cidade,
-				uf: uf.toUpperCase(),
-				simboloId: simboloId as any,
-				simboloTipo: tipo,
-				admissaoData: admissaoData || undefined,
-
-				nomePai: nomePai || undefined,
-				nomeMae: nomeMae || undefined,
-				naturalidade: naturalidade || undefined,
-				naturalidadeUF: naturalidadeUF ? naturalidadeUF.toUpperCase() : undefined,
-				sexo: sexo || undefined,
-				estadoCivil: estadoCivil || undefined,
-				nacionalidade: nacionalidade || undefined,
-
-				rgOrgaoExpedidor: rgOrgaoExpedidor || undefined,
-				rgDataEmissao: rgDataEmissao || undefined,
-				carteiraProfissionalNumero: carteiraProfissionalNumero || undefined,
-				carteiraProfissionalSerie: carteiraProfissionalSerie || undefined,
-				carteiraProfissionalDataEmissao: carteiraProfissionalDataEmissao || undefined,
-				reservistaNumero: reservistaNumero || undefined,
-				reservistaSerie: reservistaSerie || undefined,
-				tituloEleitorNumero: tituloEleitorNumero || undefined,
-				tituloEleitorZona: tituloEleitorZona || undefined,
-				tituloEleitorSecao: tituloEleitorSecao || undefined,
-				pisNumero: pisNumero || undefined,
-
-				grauInstrucao: grauInstrucao || undefined,
-				formacao: formacao || undefined,
-				formacaoRegistro: formacaoRegistro || undefined,
-				grupoSanguineo: grupoSanguineo || undefined,
-				fatorRH: fatorRH || undefined,
-
-				descricaoCargo: descricaoCargo || undefined,
-				nomeacaoPortaria: nomeacaoPortaria || undefined,
-				nomeacaoData: nomeacaoData || undefined,
-				nomeacaoDOE: nomeacaoDOE || undefined,
-				pertenceOrgaoPublico: pertenceOrgaoPublico || undefined,
-				orgaoOrigem: orgaoOrigem || undefined,
-				aposentado: aposentado || undefined,
-
-				contaBradescoNumero: contaBradescoNumero || undefined,
-				contaBradescoDV: contaBradescoDV || undefined,
-				contaBradescoAgencia: contaBradescoAgencia || undefined,
-
-				...Object.fromEntries(
-					Object.entries(documentosStorage).map(([key, value]) => [key, value as any])
-				)
-			};
-
-			await client.mutation(api.funcionarios.update, {
-				id: funcionarioId as any,
-				...(payload as any)
-			});
-
-			// Salvar cursos
-			try {
-				// Excluir cursos marcados
-				for (const curso of cursos.filter((c) => c.marcadoParaExcluir && c._id)) {
-					await client.mutation(api.cursos.excluir, { id: curso._id as any });
-				}
-
-				// Adicionar/atualizar cursos
-				for (const curso of cursos.filter((c) => !c.marcadoParaExcluir)) {
-					let certificadoId = curso.certificadoId;
-
-					// Upload de certificado se houver arquivo novo
-					if (curso.arquivo) {
-						certificadoId = await uploadCertificado(curso.arquivo);
-					}
-
-					if (curso._id) {
-						// Atualizar curso existente
-						await client.mutation(api.cursos.atualizar, {
-							id: curso._id as any,
-							descricao: curso.descricao,
-							data: curso.data,
-							certificadoId: certificadoId as any
-						});
-					} else {
-						// Criar novo curso
-						await client.mutation(api.cursos.criar, {
-							funcionarioId: funcionarioId as any,
-							descricao: curso.descricao,
-							data: curso.data,
-							certificadoId: certificadoId as any
-						});
-					}
-				}
-			} catch (error) {
-				console.error('Erro ao salvar cursos:', error);
-			}
-
-			notice = { kind: 'success', text: 'Funcionário atualizado com sucesso!' };
-			setTimeout(() => goto('/recursos-humanos/funcionarios'), 600);
-		} catch (e: any) {
-			notice = { kind: 'error', text: 'Erro ao atualizar funcionário.' };
-		} finally {
-			loading = false;
-		}
-	}
-
-	async function init() {
-		await loadSimbolos();
-		await loadFuncionario();
-	}
-
-	$effect(() => {
-		if (funcionarioId) {
-			init();
-		}
-	});
-
-	// Resetar simboloId quando tipo mudar
-	$effect(() => {
-		tipo; // track tipo
-		simboloId = ''; // reset selection when tipo changes
-	});
+  // Resetar simboloId quando tipo mudar
+  $effect(() => {
+    tipo; // track tipo
+    simboloId = ""; // reset selection when tipo changes
+  });
 </script>
 
 {#if loadingData}
-	<div class="flex min-h-screen items-center justify-center">
-		<span class="loading loading-spinner loading-lg"></span>
-	</div>
+  <div class="flex items-center justify-center min-h-screen">
+    <span class="loading loading-spinner loading-lg"></span>
+  </div>
 {:else}
   <main class="container mx-auto px-4 py-4 max-w-7xl">
     <!-- Breadcrumb -->
@@ -1780,4 +1552,4 @@
     </div>
     </form>
   </main>
-{/if}
+{/if}
\ No newline at end of file
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 ff9fd38..e2d8851 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
@@ -1,198 +1,202 @@
 <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 FileUpload from '$lib/components/FileUpload.svelte';
-	import {
-		maskCPF,
-		maskCEP,
-		maskPhone,
-		maskDate,
-		onlyDigits,
-		validateCPF,
-		validateDate
-	} from '$lib/utils/masks';
-	import {
-		SEXO_OPTIONS,
-		ESTADO_CIVIL_OPTIONS,
-		GRAU_INSTRUCAO_OPTIONS,
-		GRUPO_SANGUINEO_OPTIONS,
-		FATOR_RH_OPTIONS,
-		APOSENTADO_OPTIONS,
-		UFS_BRASIL
-	} from '$lib/utils/constants';
-	import { categoriasDocumentos, getDocumentosByCategoria } from '$lib/utils/documentos';
-	import ModelosDeclaracoes from '$lib/components/ModelosDeclaracoes.svelte';
-	import { resolve } from '$app/paths';
+  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 FileUpload from "$lib/components/FileUpload.svelte";
+  import { 
+    maskCPF, maskCEP, maskPhone, maskDate, maskUF, onlyDigits,
+    validateCPF, validateDate 
+  } from "$lib/utils/masks";
+  import { 
+    SEXO_OPTIONS, ESTADO_CIVIL_OPTIONS, GRAU_INSTRUCAO_OPTIONS,
+    GRUPO_SANGUINEO_OPTIONS, FATOR_RH_OPTIONS, APOSENTADO_OPTIONS, UFS_BRASIL
+  } from "$lib/utils/constants";
+  import { documentos, categoriasDocumentos, getDocumentosByCategoria } from "$lib/utils/documentos";
+  import ModelosDeclaracoes from "$lib/components/ModelosDeclaracoes.svelte";
 
-	const client = useConvexClient();
+  const client = useConvexClient();
 
-	let simbolos: Array<{
-		_id: string;
-		nome: string;
-		tipo: SimboloTipo;
-		descricao: string;
-	}> = $state([]);
+  let simbolos: Array<{
+    _id: string;
+    nome: string;
+    tipo: SimboloTipo;
+    descricao: string;
+  }> = $state([]);
 
 	let tipo = $state<SimboloTipo>('cargo_comissionado');
 	let loading = $state(false);
 	let notice = $state<{ kind: 'success' | 'error'; text: string } | null>(null);
 
-	// Campos obrigatórios
-	let nome = $state('');
-	let matricula = $state('');
-	let cpf = $state('');
-	let rg = $state('');
-	let nascimento = $state('');
-	let email = $state('');
-	let telefone = $state('');
-	let endereco = $state('');
-	let cep = $state('');
-	let cidade = $state('');
-	let uf = $state('');
-	let simboloId = $state('');
-	let admissaoData = $state('');
+  // Cursos e Treinamentos
+  let cursos = $state<Array<{
+    id: string;
+    descricao: string;
+    data: string;
+    certificadoId?: string;
+  }>>([]);
+  let mostrarFormularioCurso = $state(false);
+  let cursoAtual = $state({ descricao: "", data: "", arquivo: null as File | null });
 
-	// Dados Pessoais Adicionais
-	let nomePai = $state('');
-	let nomeMae = $state('');
-	let naturalidade = $state('');
-	let naturalidadeUF = $state('');
-	let sexo = $state('');
-	let estadoCivil = $state('');
-	let nacionalidade = $state('Brasileira');
+  // Dependentes
+  let dependentes = $state<Array<{ id: string; parentesco: string; nome: string; cpf: string; nascimento: string; documentoId?: string; salarioFamilia?: boolean; impostoRenda?: boolean }>>([]);
+  let mostrarFormularioDependente = $state(false);
+  let dependenteAtual = $state<{ parentesco: string; nome: string; cpf: string; nascimento: string; arquivo: File | null; documentoId?: string; salarioFamilia?: boolean; impostoRenda?: boolean }>({
+    parentesco: "",
+    nome: "",
+    cpf: "",
+    nascimento: "",
+    arquivo: null,
+    documentoId: undefined,
+    salarioFamilia: false,
+    impostoRenda: false,
+  });
 
-	// Documentos Pessoais
-	let rgOrgaoExpedidor = $state('');
-	let rgDataEmissao = $state('');
-	let carteiraProfissionalNumero = $state('');
-	let carteiraProfissionalSerie = $state('');
-	let carteiraProfissionalDataEmissao = $state('');
-	let reservistaNumero = $state('');
-	let reservistaSerie = $state('');
-	let tituloEleitorNumero = $state('');
-	let tituloEleitorZona = $state('');
-	let tituloEleitorSecao = $state('');
-	let pisNumero = $state('');
+  function adicionarCurso() {
+    if (!cursoAtual.descricao.trim() || !cursoAtual.data.trim()) {
+      alert("Preencha a descrição e a data do curso");
+      return;
+    }
+    cursos.push({
+      id: crypto.randomUUID(),
+      descricao: cursoAtual.descricao,
+      data: cursoAtual.data,
+      certificadoId: undefined
+    });
+    cursoAtual = { descricao: "", data: "", arquivo: null };
+  }
 
-	// Formação e Saúde
-	let grauInstrucao = $state('');
-	let formacao = $state('');
-	let formacaoRegistro = $state('');
-	let grupoSanguineo = $state('');
-	let fatorRH = $state('');
+  function removerCurso(id: string) {
+    cursos = cursos.filter(c => c.id !== id);
+  }
 
-	// Cargo e Vínculo
-	let descricaoCargo = $state('');
-	let nomeacaoPortaria = $state('');
-	let nomeacaoData = $state('');
-	let nomeacaoDOE = $state('');
-	let pertenceOrgaoPublico = $state(false);
-	let orgaoOrigem = $state('');
-	let aposentado = $state('nao');
-	let regimeTrabalho = $state('estatutario_pe');
+  async function uploadCertificado(file: File): Promise<string> {
+    const storageId = await client.mutation(api.documentos.generateUploadUrl, {});
+    const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+    const response = await fetch(uploadUrl, {
+      method: "POST",
+      headers: { "Content-Type": file.type },
+      body: file,
+    });
+    const result = await response.json();
+    return result.storageId;
+  }
 
-	const REGIME_TRABALHO_OPTIONS = [
-		{ value: 'clt', label: 'CLT' },
-		{ value: 'estatutario_municipal', label: 'Estatutário Municipal' },
-		{ value: 'estatutario_pe', label: 'Estatutário PE' },
-		{ value: 'estatutario_federal', label: 'Estatutário Federal' }
-	] as const;
+  async function uploadDocumentoDependente(file: File): Promise<string> {
+    const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
+    const response = await fetch(uploadUrl, {
+      method: "POST",
+      headers: { "Content-Type": file.type },
+      body: file,
+    });
+    const result = await response.json();
+    return result.storageId as string;
+  }
 
-	// Dados Bancários
-	let contaBradescoNumero = $state('');
-	let contaBradescoDV = $state('');
-	let contaBradescoAgencia = $state('');
+  function adicionarDependente() {
+    if (dependentes.length >= 10) {
+      alert("Limite de 10 dependentes atingido");
+      return;
+    }
+    if (!dependenteAtual.parentesco || !dependenteAtual.nome.trim() || !dependenteAtual.cpf.trim() || !dependenteAtual.nascimento.trim()) {
+      alert("Preencha Parentesco, Nome, CPF e Data de Nascimento do dependente");
+      return;
+    }
+    if (!validateCPF(dependenteAtual.cpf)) {
+      alert("CPF do dependente inválido");
+      return;
+    }
+    if (!validateDate(dependenteAtual.nascimento)) {
+      alert("Data de nascimento do dependente inválida");
+      return;
+    }
+    dependentes.push({
+      id: crypto.randomUUID(),
+      parentesco: dependenteAtual.parentesco,
+      nome: dependenteAtual.nome.trim(),
+      cpf: onlyDigits(dependenteAtual.cpf),
+      nascimento: dependenteAtual.nascimento,
+      documentoId: dependenteAtual.documentoId,
+      salarioFamilia: !!dependenteAtual.salarioFamilia,
+      impostoRenda: !!dependenteAtual.impostoRenda,
+    });
+    dependenteAtual = { parentesco: "", nome: "", cpf: "", nascimento: "", arquivo: null, documentoId: undefined, salarioFamilia: false, impostoRenda: false };
+  }
 
-	// Documentos (Storage IDs)
-	let documentosStorage: Record<string, string | undefined> = $state({});
+  function removerDependente(id: string) {
+    dependentes = dependentes.filter((d) => d.id !== id);
+  }
 
-	// Cursos e Treinamentos
-	let cursos = $state<
-		Array<{
-			id: string;
-			descricao: string;
-			data: string;
-			certificadoId?: string;
-		}>
-	>([]);
-	let mostrarFormularioCurso = $state(false);
-	let cursoAtual = $state({ descricao: '', data: '', arquivo: null as File | null });
+  async function loadSimbolos() {
+    const list = await client.query(api.simbolos.getAll, {} as any);
+    simbolos = list.map((s: any) => ({ 
+      _id: s._id, 
+      nome: s.nome, 
+      tipo: s.tipo, 
+      descricao: s.descricao 
+    }));
+  }
 
-	// Dependentes
-	let dependentes = $state<
-		Array<{
-			id: string;
-			parentesco: string;
-			nome: string;
-			cpf: string;
-			nascimento: string;
-			documentoId?: string;
-			salarioFamilia?: boolean;
-			impostoRenda?: boolean;
-		}>
-	>([]);
-	let mostrarFormularioDependente = $state(false);
-	let dependenteAtual = $state<{
-		parentesco: string;
-		nome: string;
-		cpf: string;
-		nascimento: string;
-		arquivo: File | null;
-		documentoId?: string;
-		salarioFamilia?: boolean;
-		impostoRenda?: boolean;
-	}>({
-		parentesco: '',
-		nome: '',
-		cpf: '',
-		nascimento: '',
-		arquivo: null,
-		documentoId: undefined,
-		salarioFamilia: false,
-		impostoRenda: false
-	});
+  async function fillFromCEP(cepValue: string) {
+    const cepDigits = onlyDigits(cepValue);
+    if (cepDigits.length !== 8) return;
+    
+    try {
+      const res = await fetch(`https://viacep.com.br/ws/${cepDigits}/json/`);
+      const data = await res.json();
+      if (!data || data.erro) return;
+      
+      const enderecoFull = [data.logradouro, data.bairro].filter(Boolean).join(", ");
+      endereco = enderecoFull;
+      cidade = data.localidade || "";
+      uf = data.uf || "";
+    } catch {}
+  }
 
-	function adicionarCurso() {
-		if (!cursoAtual.descricao.trim() || !cursoAtual.data.trim()) {
-			alert('Preencha a descrição e a data do curso');
-			return;
-		}
-		cursos.push({
-			id: crypto.randomUUID(),
-			descricao: cursoAtual.descricao,
-			data: cursoAtual.data,
-			certificadoId: undefined
-		});
-		cursoAtual = { descricao: '', data: '', arquivo: null };
-	}
+  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();
+      documentosStorage[campo] = storageId;
+    } catch (err: any) {
+      throw new Error(err?.message || "Erro ao fazer upload");
+    }
+  }
 
-	function removerCurso(id: string) {
-		cursos = cursos.filter((c) => c.id !== id);
-	}
+  async function handleDocumentoRemove(campo: string) {
+    documentosStorage[campo] = undefined;
+  }
 
-	async function uploadCertificado(file: File): Promise<string> {
-		const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-		const response = await fetch(uploadUrl, {
-			method: 'POST',
-			headers: { 'Content-Type': file.type },
-			body: file
-		});
-		const result = await response.json();
-		return result.storageId;
-	}
-
-	async function uploadDocumentoDependente(file: File): Promise<string> {
-		const uploadUrl = await client.mutation(api.documentos.generateUploadUrl, {});
-		const response = await fetch(uploadUrl, {
-			method: 'POST',
-			headers: { 'Content-Type': file.type },
-			body: file
-		});
-		const result = await response.json();
-		return result.storageId as string;
-	}
+  async function handleSubmit() {
+    // Validação básica
+    if (!nome || !cpf || !rg || !nascimento || !email || !telefone) {
+      notice = { kind: "error", text: "Preencha todos os campos obrigatórios" };
+      return;
+    }
+    
+    if (!validateCPF(cpf)) {
+      notice = { kind: "error", text: "CPF inválido" };
+      return;
+    }
+    
+    if (!validateDate(nascimento)) {
+      notice = { kind: "error", text: "Data de nascimento inválida" };
+      return;
+    }
+    
+    if (!simboloId) {
+      notice = { kind: "error", text: "Selecione um símbolo" };
+      return;
+    }
 
 	function adicionarDependente() {
 		if (dependentes.length >= 10) {
@@ -238,1719 +242,1249 @@
 		};
 	}
 
-	function removerDependente(id: string) {
-		dependentes = dependentes.filter((d) => d.id !== id);
-	}
+      const novoFuncionarioId = await client.mutation(api.funcionarios.create, payload as any);
+      
+      // Salvar cursos, se houver
+      for (const curso of cursos) {
+        let certificadoId = curso.certificadoId;
+        // Se houver arquivo para upload, fazer o upload
+        if (cursoAtual.arquivo && curso.id === cursos[cursos.length - 1].id) {
+          try {
+            certificadoId = await uploadCertificado(cursoAtual.arquivo);
+          } catch (err) {
+            console.error("Erro ao fazer upload do certificado:", err);
+          }
+        }
+        
+        await client.mutation(api.cursos.criar, {
+          funcionarioId: novoFuncionarioId,
+          descricao: curso.descricao,
+          data: curso.data,
+          certificadoId: certificadoId as any,
+        });
+      }
+      
+      notice = { kind: "success", text: "Funcionário cadastrado com sucesso!" };
+      setTimeout(() => goto("/recursos-humanos/funcionarios"), 600);
+    } catch (e: any) {
+      const msg = e?.message || String(e);
+      if (/CPF j[aá] cadastrado/i.test(msg)) {
+        notice = { kind: "error", text: "CPF já cadastrado." };
+      } else if (/Matr[ií]cula j[aá] cadastrada/i.test(msg)) {
+        notice = { kind: "error", text: "Matrícula já cadastrada." };
+      } else {
+        notice = { kind: "error", text: "Erro ao cadastrar funcionário." };
+      }
+    } finally {
+      loading = false;
+    }
+  }
 
-	async function loadSimbolos() {
-		const list = await client.query(api.simbolos.getAll, {});
-		simbolos = list.map((s) => ({
-			_id: s._id,
-			nome: s.nome,
-			tipo: s.tipo,
-			descricao: s.descricao
-		}));
-	}
+  $effect(() => {
+    loadSimbolos();
+  });
 
-	async function fillFromCEP(cepValue: string) {
-		const cepDigits = onlyDigits(cepValue);
-		if (cepDigits.length !== 8) return;
-
-		try {
-			const res = await fetch(`https://viacep.com.br/ws/${cepDigits}/json/`);
-			const data = await res.json();
-			if (!data || data.erro) return;
-
-			const enderecoFull = [data.logradouro, data.bairro].filter(Boolean).join(', ');
-			endereco = enderecoFull;
-			cidade = data.localidade || '';
-			uf = data.uf || '';
-		} catch {}
-	}
-
-	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();
-			documentosStorage[campo] = storageId;
-		} catch (err) {
-			if (err instanceof Error) {
-				throw new Error(err.message || 'Erro ao fazer upload');
-			} else {
-				throw new Error('Erro ao fazer upload');
-			}
-		}
-	}
-
-	async function handleDocumentoRemove(campo: string) {
-		documentosStorage[campo] = undefined;
-	}
-
-	async function handleSubmit() {
-		// Validação básica
-		if (!nome || !cpf || !rg || !nascimento || !email || !telefone) {
-			notice = { kind: 'error', text: 'Preencha todos os campos obrigatórios' };
-			return;
-		}
-
-		if (!validateCPF(cpf)) {
-			notice = { kind: 'error', text: 'CPF inválido' };
-			return;
-		}
-
-		if (!validateDate(nascimento)) {
-			notice = { kind: 'error', text: 'Data de nascimento inválida' };
-			return;
-		}
-
-		if (!simboloId) {
-			notice = { kind: 'error', text: 'Selecione um símbolo' };
-			return;
-		}
-
-		try {
-			loading = true;
-
-			const payload = {
-				nome,
-				matricula: matricula.trim() || undefined,
-				cpf: onlyDigits(cpf),
-				rg: onlyDigits(rg),
-				nascimento,
-				email,
-				telefone: onlyDigits(telefone),
-				endereco,
-				cep: onlyDigits(cep),
-				cidade,
-				uf: uf.toUpperCase(),
-				simboloId: simboloId,
-				simboloTipo: tipo,
-				admissaoData: admissaoData || undefined,
-				desligamentoData: undefined,
-
-				// Dados Pessoais Adicionais
-				nomePai: nomePai || undefined,
-				nomeMae: nomeMae || undefined,
-				naturalidade: naturalidade || undefined,
-				naturalidadeUF: naturalidadeUF ? naturalidadeUF.toUpperCase() : undefined,
-				sexo: sexo || undefined,
-				estadoCivil: estadoCivil || undefined,
-				nacionalidade: nacionalidade || undefined,
-
-				// Documentos Pessoais
-				rgOrgaoExpedidor: rgOrgaoExpedidor || undefined,
-				rgDataEmissao: rgDataEmissao || undefined,
-				carteiraProfissionalNumero: carteiraProfissionalNumero || undefined,
-				carteiraProfissionalSerie: carteiraProfissionalSerie || undefined,
-				carteiraProfissionalDataEmissao: carteiraProfissionalDataEmissao || undefined,
-				reservistaNumero: reservistaNumero || undefined,
-				reservistaSerie: reservistaSerie || undefined,
-				tituloEleitorNumero: tituloEleitorNumero || undefined,
-				tituloEleitorZona: tituloEleitorZona || undefined,
-				tituloEleitorSecao: tituloEleitorSecao || undefined,
-				pisNumero: pisNumero || undefined,
-
-				// Formação e Saúde
-				grauInstrucao: grauInstrucao || undefined,
-				formacao: formacao || undefined,
-				formacaoRegistro: formacaoRegistro || undefined,
-				grupoSanguineo: grupoSanguineo || undefined,
-				fatorRH: fatorRH || undefined,
-
-				// Cargo e Vínculo
-				descricaoCargo: descricaoCargo || undefined,
-				regimeTrabalho: regimeTrabalho,
-				nomeacaoPortaria: nomeacaoPortaria || undefined,
-				nomeacaoData: nomeacaoData || undefined,
-				nomeacaoDOE: nomeacaoDOE || undefined,
-				pertenceOrgaoPublico: pertenceOrgaoPublico || undefined,
-				orgaoOrigem: orgaoOrigem || undefined,
-				aposentado: aposentado || undefined,
-
-				// Dados Bancários
-				contaBradescoNumero: contaBradescoNumero || undefined,
-				contaBradescoDV: contaBradescoDV || undefined,
-				contaBradescoAgencia: contaBradescoAgencia || undefined,
-
-				// Documentos
-				...Object.fromEntries(
-					Object.entries(documentosStorage).map(([key, value]) => [key, value as any])
-				),
-				// Dependentes (opcional)
-				dependentes: dependentes.length
-					? dependentes.map((d) => ({
-							parentesco: d.parentesco,
-							nome: d.nome,
-							cpf: d.cpf,
-							nascimento: d.nascimento,
-							documentoId: d.documentoId,
-							salarioFamilia: !!d.salarioFamilia,
-							impostoRenda: !!d.impostoRenda
-						}))
-					: undefined
-			};
-
-			const novoFuncionarioId = await client.mutation(api.funcionarios.create, payload as any);
-
-			// Salvar cursos, se houver
-			for (const curso of cursos) {
-				let certificadoId = curso.certificadoId;
-				// Se houver arquivo para upload, fazer o upload
-				if (cursoAtual.arquivo && curso.id === cursos[cursos.length - 1].id) {
-					try {
-						certificadoId = await uploadCertificado(cursoAtual.arquivo);
-					} catch (err) {
-						console.error('Erro ao fazer upload do certificado:', err);
-					}
-				}
-
-				await client.mutation(api.cursos.criar, {
-					funcionarioId: novoFuncionarioId,
-					descricao: curso.descricao,
-					data: curso.data,
-					certificadoId: certificadoId as any
-				});
-			}
-
-			notice = { kind: 'success', text: 'Funcionário cadastrado com sucesso!' };
-			setTimeout(() => goto(resolve('/recursos-humanos/funcionarios')), 600);
-		} catch (e) {
-			const msg = e?.message || String(e);
-			if (/CPF j[aá] cadastrado/i.test(msg)) {
-				notice = { kind: 'error', text: 'CPF já cadastrado.' };
-			} else if (/Matr[ií]cula j[aá] cadastrada/i.test(msg)) {
-				notice = { kind: 'error', text: 'Matrícula já cadastrada.' };
-			} else {
-				notice = { kind: 'error', text: 'Erro ao cadastrar funcionário.' };
-			}
-		} finally {
-			loading = false;
-		}
-	}
-
-	$effect(() => {
-		loadSimbolos();
-	});
-
-	// Resetar simboloId quando tipo mudar
-	$effect(() => {
-		tipo; // track tipo
-		simboloId = ''; // reset selection when tipo changes
-	});
+  // Resetar simboloId quando tipo mudar
+  $effect(() => {
+    tipo; // track tipo
+    simboloId = ""; // reset selection when tipo changes
+  });
 </script>
 
-<main class="container mx-auto max-w-7xl px-4 py-4">
-	<!-- Breadcrumb -->
-	<div class="breadcrumbs mb-4 text-sm">
-		<ul>
-			<li>
-				<a href={resolve('/recursos-humanos')} class="text-primary hover:underline"
-					>Recursos Humanos</a
-				>
-			</li>
-			<li>
-				<a href={resolve('/recursos-humanos/funcionarios')} class="text-primary hover:underline"
-					>Funcionários</a
-				>
-			</li>
-			<li>Cadastrar</li>
-		</ul>
-	</div>
-
-	<!-- Cabeçalho -->
-	<div class="mb-6">
-		<div class="mb-2 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="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-primary text-3xl font-bold">Cadastro de Funcionário</h1>
-				<p class="text-base-content/70">
-					Preencha os campos abaixo para cadastrar um novo funcionário
-				</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="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();
-		}}
-	>
-		<!-- Card 1: Informações Pessoais -->
-		<div class="card bg-base-100 shadow-xl">
-			<div class="card-body space-y-4">
-				<h2 class="card-title border-b pb-3 text-xl">
-					<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-						/>
-					</svg>
-					Informações Pessoais
-				</h2>
-
-				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-					<!-- Nome -->
-					<div class="form-control lg:col-span-2">
-						<label class="label" for="nome">
-							<span class="label-text font-medium"
-								>Nome Completo <span class="text-error">*</span></span
-							>
-						</label>
-						<input
-							id="nome"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={nome}
-							required
-						/>
-					</div>
-
-					<!-- Matrícula -->
-					<div class="form-control">
-						<label class="label" for="matricula">
-							<span class="label-text font-medium"
-								>Matrícula <span class="text-base-content/50 text-xs">(opcional)</span></span
-							>
-						</label>
-						<input
-							id="matricula"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={matricula}
-							placeholder="Deixe em branco se não tiver"
-						/>
-					</div>
-
-					<!-- CPF -->
-					<div class="form-control">
-						<label class="label" for="cpf">
-							<span class="label-text font-medium">CPF <span class="text-error">*</span></span>
-						</label>
-						<input
-							id="cpf"
-							type="text"
-							inputmode="numeric"
-							class="input input-bordered w-full"
-							value={cpf}
-							oninput={(e) => {
-								const target = e.target as HTMLInputElement;
-								cpf = maskCPF(target.value);
-								target.value = cpf;
-							}}
-							required
-						/>
-					</div>
-
-					<!-- RG -->
-					<div class="form-control">
-						<label class="label" for="rg">
-							<span class="label-text font-medium">RG <span class="text-error">*</span></span>
-						</label>
-						<input
-							id="rg"
-							type="text"
-							inputmode="numeric"
-							class="input input-bordered w-full"
-							value={rg}
-							oninput={(e) => {
-								const target = e.target as HTMLInputElement;
-								rg = onlyDigits(target.value);
-								target.value = rg;
-							}}
-							required
-						/>
-					</div>
-
-					<!-- Órgão Expedidor -->
-					<div class="form-control">
-						<label class="label" for="rgOrgaoExpedidor">
-							<span class="label-text font-medium">Órgão Expedidor</span>
-						</label>
-						<input
-							id="rgOrgaoExpedidor"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={rgOrgaoExpedidor}
-							placeholder="Ex: SDS/PE"
-						/>
-					</div>
-
-					<!-- Data Emissão RG -->
-					<div class="form-control">
-						<label class="label" for="rgDataEmissao">
-							<span class="label-text font-medium">Data Emissão RG</span>
-						</label>
-						<input
-							id="rgDataEmissao"
-							type="text"
-							inputmode="numeric"
-							placeholder="dd/mm/aaaa"
-							class="input input-bordered w-full"
-							value={rgDataEmissao}
-							oninput={(e) => {
-								const target = e.target as HTMLInputElement;
-								rgDataEmissao = maskDate(target.value);
-								target.value = rgDataEmissao;
-							}}
-						/>
-					</div>
-
-					<!-- Nome do Pai -->
-					<div class="form-control lg:col-span-2">
-						<label class="label" for="nomePai">
-							<span class="label-text font-medium">Nome do Pai</span>
-						</label>
-						<input
-							id="nomePai"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={nomePai}
-						/>
-					</div>
-
-					<!-- Nome da Mãe -->
-					<div class="form-control lg:col-span-2">
-						<label class="label" for="nomeMae">
-							<span class="label-text font-medium">Nome da Mãe</span>
-						</label>
-						<input
-							id="nomeMae"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={nomeMae}
-						/>
-					</div>
-
-					<!-- Data de Nascimento -->
-					<div class="form-control">
-						<label class="label" for="nascimento">
-							<span class="label-text font-medium"
-								>Data de Nascimento <span class="text-error">*</span></span
-							>
-						</label>
-						<input
-							id="nascimento"
-							type="text"
-							inputmode="numeric"
-							placeholder="dd/mm/aaaa"
-							class="input input-bordered w-full"
-							value={nascimento}
-							oninput={(e) => {
-								const target = e.target as HTMLInputElement;
-								nascimento = maskDate(target.value);
-								target.value = nascimento;
-							}}
-							required
-						/>
-					</div>
-
-					<!-- Naturalidade -->
-					<div class="form-control">
-						<label class="label" for="naturalidade">
-							<span class="label-text font-medium">Naturalidade</span>
-						</label>
-						<input
-							id="naturalidade"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={naturalidade}
-							placeholder="Cidade de nascimento"
-						/>
-					</div>
-
-					<!-- Naturalidade UF -->
-					<div class="form-control">
-						<label class="label" for="naturalidadeUF">
-							<span class="label-text font-medium">UF Naturalidade</span>
-						</label>
-						<select
-							id="naturalidadeUF"
-							class="select select-bordered w-full"
-							bind:value={naturalidadeUF}
-						>
-							<option value="">Selecione...</option>
-							{#each UFS_BRASIL as ufOption (ufOption)}
-								<option value={ufOption}>{ufOption}</option>
-							{/each}
-						</select>
-					</div>
-
-					<!-- Sexo -->
-					<div class="form-control">
-						<label class="label" for="sexo">
-							<span class="label-text font-medium">Sexo</span>
-						</label>
-						<select id="sexo" class="select select-bordered w-full" bind:value={sexo}>
-							<option value="">Selecione...</option>
-							{#each SEXO_OPTIONS as option (option.value)}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-
-					<!-- Estado Civil -->
-					<div class="form-control">
-						<label class="label" for="estadoCivil">
-							<span class="label-text font-medium">Estado Civil</span>
-						</label>
-						<select id="estadoCivil" class="select select-bordered w-full" bind:value={estadoCivil}>
-							<option value="">Selecione...</option>
-							{#each ESTADO_CIVIL_OPTIONS as option (option.value)}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-
-					<!-- Nacionalidade -->
-					<div class="form-control">
-						<label class="label" for="nacionalidade">
-							<span class="label-text font-medium">Nacionalidade</span>
-						</label>
-						<input
-							id="nacionalidade"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={nacionalidade}
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Card 2: Documentos Pessoais -->
-		<div class="card bg-base-100 shadow-xl">
-			<div class="card-body space-y-4">
-				<h2 class="card-title border-b pb-3 text-xl">
-					<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 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>
-					Documentos Pessoais
-				</h2>
-
-				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-					<!-- Carteira Profissional -->
-					<div class="form-control">
-						<label class="label" for="carteiraProfissionalNumero">
-							<span class="label-text font-medium">Carteira Profissional Nº</span>
-						</label>
-						<input
-							id="carteiraProfissionalNumero"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={carteiraProfissionalNumero}
-						/>
-					</div>
-
-					<div class="form-control">
-						<label class="label" for="carteiraProfissionalSerie">
-							<span class="label-text font-medium">Série</span>
-						</label>
-						<input
-							id="carteiraProfissionalSerie"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={carteiraProfissionalSerie}
-						/>
-					</div>
-
-					<div class="form-control">
-						<label class="label" for="carteiraProfissionalDataEmissao">
-							<span class="label-text font-medium">Data Emissão</span>
-						</label>
-						<input
-							id="carteiraProfissionalDataEmissao"
-							type="text"
-							inputmode="numeric"
-							placeholder="dd/mm/aaaa"
-							class="input input-bordered w-full"
-							value={carteiraProfissionalDataEmissao}
-							oninput={(e) => {
-								const target = e.target as HTMLInputElement;
-								carteiraProfissionalDataEmissao = maskDate(target.value);
-								target.value = carteiraProfissionalDataEmissao;
-							}}
-						/>
-					</div>
-
-					<!-- Reservista -->
-					<div class="form-control">
-						<label class="label" for="reservistaNumero">
-							<span class="label-text font-medium">Reservista Nº</span>
-						</label>
-						<input
-							id="reservistaNumero"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={reservistaNumero}
-						/>
-					</div>
-
-					<div class="form-control">
-						<label class="label" for="reservistaSerie">
-							<span class="label-text font-medium">Série</span>
-						</label>
-						<input
-							id="reservistaSerie"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={reservistaSerie}
-						/>
-					</div>
-
-					<!-- Título de Eleitor -->
-					<div class="form-control">
-						<label class="label" for="tituloEleitorNumero">
-							<span class="label-text font-medium">Título de Eleitor Nº</span>
-						</label>
-						<input
-							id="tituloEleitorNumero"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={tituloEleitorNumero}
-						/>
-					</div>
-
-					<div class="form-control">
-						<label class="label" for="tituloEleitorZona">
-							<span class="label-text font-medium">Zona</span>
-						</label>
-						<input
-							id="tituloEleitorZona"
-							type="text"
-							inputmode="numeric"
-							class="input input-bordered w-full"
-							bind:value={tituloEleitorZona}
-						/>
-					</div>
-
-					<div class="form-control">
-						<label class="label" for="tituloEleitorSecao">
-							<span class="label-text font-medium">Seção</span>
-						</label>
-						<input
-							id="tituloEleitorSecao"
-							type="text"
-							inputmode="numeric"
-							class="input input-bordered w-full"
-							bind:value={tituloEleitorSecao}
-						/>
-					</div>
-
-					<!-- PIS/PASEP -->
-					<div class="form-control">
-						<label class="label" for="pisNumero">
-							<span class="label-text font-medium">PIS/PASEP Nº</span>
-						</label>
-						<input
-							id="pisNumero"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={pisNumero}
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Card 3: Formação e Saúde -->
-		<div class="card bg-base-100 shadow-xl">
-			<div class="card-body space-y-4">
-				<h2 class="card-title border-b pb-3 text-xl">
-					<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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-						/>
-					</svg>
-					Formação e Saúde
-				</h2>
-
-				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-					<!-- Grau de Instrução -->
-					<div class="form-control">
-						<label class="label" for="grauInstrucao">
-							<span class="label-text font-medium">Grau de Instrução</span>
-						</label>
-						<select
-							id="grauInstrucao"
-							class="select select-bordered w-full"
-							bind:value={grauInstrucao}
-						>
-							<option value="">Selecione...</option>
-							{#each GRAU_INSTRUCAO_OPTIONS as option}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-
-					<!-- Formação -->
-					<div class="form-control">
-						<label class="label" for="formacao">
-							<span class="label-text font-medium">Formação/Curso</span>
-						</label>
-						<input
-							id="formacao"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={formacao}
-							placeholder="Ex: Administração"
-						/>
-					</div>
-
-					<!-- Registro Nº -->
-					<div class="form-control">
-						<label class="label" for="formacaoRegistro">
-							<span class="label-text font-medium">Registro Nº</span>
-						</label>
-						<input
-							id="formacaoRegistro"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={formacaoRegistro}
-							placeholder="Nº do registro profissional"
-						/>
-					</div>
-
-					<!-- Grupo Sanguíneo -->
-					<div class="form-control">
-						<label class="label" for="grupoSanguineo">
-							<span class="label-text font-medium">Grupo Sanguíneo</span>
-						</label>
-						<select
-							id="grupoSanguineo"
-							class="select select-bordered w-full"
-							bind:value={grupoSanguineo}
-						>
-							<option value="">Selecione...</option>
-							{#each GRUPO_SANGUINEO_OPTIONS as option}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-
-					<!-- Fator RH -->
-					<div class="form-control">
-						<label class="label" for="fatorRH">
-							<span class="label-text font-medium">Fator RH</span>
-						</label>
-						<select id="fatorRH" class="select select-bordered w-full" bind:value={fatorRH}>
-							<option value="">Selecione...</option>
-							{#each FATOR_RH_OPTIONS as option}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Card 3.5: Cursos e Treinamentos -->
-		<div class="card bg-base-100 shadow-xl">
-			<div class="card-body space-y-4">
-				<h2 class="card-title border-b pb-3 text-xl">
-					<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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
-						/>
-					</svg>
-					Cursos e Treinamentos
-				</h2>
-
-				<p class="text-base-content/70 text-sm">
-					Adicione até 7 cursos ou treinamentos realizados pelo funcionário (opcional)
-				</p>
-
-				<!-- Lista de cursos adicionados -->
-				{#if cursos.length > 0}
-					<div class="space-y-2">
-						<h3 class="text-sm font-semibold">Cursos adicionados ({cursos.length}/7)</h3>
-						{#each cursos as curso}
-							<div class="bg-base-200 flex items-center gap-3 rounded-lg p-3">
-								<div class="flex-1">
-									<p class="text-sm font-semibold">{curso.descricao}</p>
-									<p class="text-base-content/70 text-xs">{curso.data}</p>
-								</div>
-								<button
-									type="button"
-									class="btn btn-sm btn-error btn-square"
-									aria-label="Remover curso"
-									onclick={() => removerCurso(curso.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="M6 18L18 6M6 6l12 12"
-										/>
-									</svg>
-								</button>
-							</div>
-						{/each}
-					</div>
-				{/if}
-
-				<!-- Formulário para adicionar curso -->
-				{#if cursos.length < 7}
-					<div class="collapse-arrow border-base-300 bg-base-200 collapse border">
-						<input type="checkbox" bind:checked={mostrarFormularioCurso} />
-						<div class="collapse-title font-medium">Adicionar Curso/Treinamento</div>
-						<div class="collapse-content">
-							<div class="space-y-3 pt-2">
-								<div class="form-control">
-									<label class="label" for="curso-descricao">
-										<span class="label-text font-medium">Descrição do Curso</span>
-									</label>
-									<input
-										id="curso-descricao"
-										type="text"
-										class="input input-bordered w-full"
-										bind:value={cursoAtual.descricao}
-										placeholder="Ex: Gestão de Projetos"
-									/>
-								</div>
-
-								<div class="form-control">
-									<label class="label" for="curso-data">
-										<span class="label-text font-medium">Data de Conclusão</span>
-									</label>
-									<input
-										id="curso-data"
-										type="text"
-										class="input input-bordered w-full"
-										bind:value={cursoAtual.data}
-										placeholder="Ex: 01/2024"
-										onchange={(e) => (cursoAtual.data = maskDate(e.currentTarget.value))}
-									/>
-								</div>
-
-								<div class="form-control">
-									<label class="label" for="curso-certificado">
-										<span class="label-text font-medium">Certificado/Diploma (opcional)</span>
-									</label>
-									<input
-										id="curso-certificado"
-										type="file"
-										class="file-input file-input-bordered w-full"
-										accept=".pdf,.jpg,.jpeg,.png"
-										onchange={(e) => {
-											const file = e.currentTarget.files?.[0];
-											if (file) cursoAtual.arquivo = file;
-										}}
-									/>
-								</div>
-
-								<button
-									type="button"
-									class="btn btn-primary btn-sm mt-2 gap-2"
-									onclick={adicionarCurso}
-								>
-									<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>
-									Adicionar à Lista
-								</button>
-							</div>
-						</div>
-					</div>
-				{: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>Limite de 7 cursos atingido</span>
-					</div>
-				{/if}
-			</div>
-		</div>
-
-		<!-- Card 4: Endereço e Contato -->
-		<div class="card bg-base-100 shadow-xl">
-			<div class="card-body space-y-4">
-				<h2 class="card-title border-b pb-3 text-xl">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
-						/>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-					</svg>
-					Endereço e Contato
-				</h2>
-
-				<div class="grid grid-cols-1 gap-4 md:grid-cols-4">
-					<!-- CEP -->
-					<div class="form-control">
-						<label class="label" for="cep">
-							<span class="label-text font-medium">CEP <span class="text-error">*</span></span>
-						</label>
-						<input
-							id="cep"
-							type="text"
-							inputmode="numeric"
-							class="input input-bordered w-full"
-							value={cep}
-							oninput={(e) => {
-								const target = e.target as HTMLInputElement;
-								cep = maskCEP(target.value);
-								target.value = cep;
-							}}
-							onblur={() => fillFromCEP(cep)}
-							required
-						/>
-					</div>
-
-					<!-- Cidade -->
-					<div class="form-control lg:col-span-2">
-						<label class="label" for="cidade">
-							<span class="label-text font-medium">Cidade <span class="text-error">*</span></span>
-						</label>
-						<input
-							id="cidade"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={cidade}
-							required
-						/>
-					</div>
-
-					<!-- UF -->
-					<div class="form-control">
-						<label class="label" for="uf">
-							<span class="label-text font-medium">UF <span class="text-error">*</span></span>
-						</label>
-						<select id="uf" class="select select-bordered w-full" bind:value={uf} required>
-							<option value="">Selecione...</option>
-							{#each UFS_BRASIL as ufOption}
-								<option value={ufOption}>{ufOption}</option>
-							{/each}
-						</select>
-					</div>
-
-					<!-- Endereço -->
-					<div class="form-control md:col-span-2">
-						<label class="label" for="endereco">
-							<span class="label-text font-medium">Endereço <span class="text-error">*</span></span>
-						</label>
-						<input
-							id="endereco"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={endereco}
-							required
-						/>
-					</div>
-
-					<!-- E-mail -->
-					<div class="form-control lg:col-span-2">
-						<label class="label" for="email">
-							<span class="label-text font-medium">E-mail <span class="text-error">*</span></span>
-						</label>
-						<input
-							id="email"
-							type="email"
-							class="input input-bordered w-full"
-							bind:value={email}
-							required
-						/>
-					</div>
-
-					<!-- Telefone -->
-					<div class="form-control lg:col-span-2">
-						<label class="label" for="telefone">
-							<span class="label-text font-medium">Telefone <span class="text-error">*</span></span>
-						</label>
-						<input
-							id="telefone"
-							type="text"
-							inputmode="numeric"
-							class="input input-bordered w-full"
-							value={telefone}
-							oninput={(e) => {
-								const target = e.target as HTMLInputElement;
-								telefone = maskPhone(target.value);
-								target.value = telefone;
-							}}
-							required
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Card 4.5: Dependentes -->
-		<div class="card bg-base-100 shadow-xl">
-			<div class="card-body space-y-4">
-				<h2 class="card-title border-b pb-3 text-xl">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2a3 3 0 00-5.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2a3 3 0 015.356-1.857M15 7a3 3 0 11-6 0 3 3 0 016 0z"
-						/>
-					</svg>
-					Dependentes
-				</h2>
-
-				{#if dependentes.length > 0}
-					<div class="space-y-2">
-						<h3 class="text-sm font-semibold">Dependentes adicionados ({dependentes.length}/10)</h3>
-						{#each dependentes as dep}
-							<div class="bg-base-200 flex items-center gap-3 rounded-lg p-3">
-								<div class="flex-1 text-sm">
-									<p class="font-semibold">{dep.nome} — {dep.parentesco}</p>
-									<p class="text-base-content/70 text-xs">
-										CPF: {dep.cpf} • Nasc.: {dep.nascimento}
-									</p>
-									<div class="mt-2 flex flex-wrap gap-4">
-										<label class="label cursor-pointer gap-2">
-											<input
-												type="checkbox"
-												class="checkbox checkbox-xs checkbox-primary"
-												bind:checked={dep.salarioFamilia}
-											/>
-											<span class="label-text text-xs">Salário Família</span>
-										</label>
-										<label class="label cursor-pointer gap-2">
-											<input
-												type="checkbox"
-												class="checkbox checkbox-xs checkbox-primary"
-												bind:checked={dep.impostoRenda}
-											/>
-											<span class="label-text text-xs">Imposto de Renda</span>
-										</label>
-									</div>
-								</div>
-								<button
-									type="button"
-									class="btn btn-sm btn-error btn-square"
-									aria-label="Remover dependente"
-									onclick={() => removerDependente(dep.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="M6 18L18 6M6 6l12 12"
-										/></svg
-									>
-								</button>
-							</div>
-						{/each}
-					</div>
-				{/if}
-
-				{#if dependentes.length < 10}
-					<div class="collapse-arrow border-base-300 bg-base-200 collapse border">
-						<input type="checkbox" bind:checked={mostrarFormularioDependente} />
-						<div class="collapse-title font-medium">Adicionar Dependente</div>
-						<div class="collapse-content">
-							<div class="grid grid-cols-1 gap-4 pt-2 md:grid-cols-2 lg:grid-cols-3">
-								<div class="form-control">
-									<label class="label" for="dep-parentesco">
-										<span class="label-text font-medium">Grau de Parentesco</span>
-									</label>
-									<select
-										id="dep-parentesco"
-										class="select select-bordered w-full"
-										bind:value={dependenteAtual.parentesco}
-									>
-										<option value="">Selecione...</option>
-										<option value="filho">Filho</option>
-										<option value="filha">Filha</option>
-										<option value="conjuge">Cônjuge</option>
-										<option value="outro">Outros</option>
-									</select>
-								</div>
-
-								<div class="form-control lg:col-span-2">
-									<label class="label" for="dep-nome">
-										<span class="label-text font-medium">Nome do Dependente</span>
-									</label>
-									<input
-										id="dep-nome"
-										type="text"
-										class="input input-bordered w-full"
-										bind:value={dependenteAtual.nome}
-									/>
-								</div>
-
-								<div class="form-control">
-									<label class="label" for="dep-cpf">
-										<span class="label-text font-medium">CPF do Dependente</span>
-									</label>
-									<input
-										id="dep-cpf"
-										type="text"
-										inputmode="numeric"
-										class="input input-bordered w-full"
-										value={dependenteAtual.cpf}
-										oninput={(e) => {
-											const t = e.target as HTMLInputElement;
-											dependenteAtual.cpf = maskCPF(t.value);
-											t.value = dependenteAtual.cpf;
-										}}
-									/>
-								</div>
-
-								<div class="form-control">
-									<label class="label" for="dep-nascimento">
-										<span class="label-text font-medium">Data de Nascimento</span>
-									</label>
-									<input
-										id="dep-nascimento"
-										type="text"
-										inputmode="numeric"
-										placeholder="dd/mm/aaaa"
-										class="input input-bordered w-full"
-										value={dependenteAtual.nascimento}
-										oninput={(e) => {
-											const t = e.target as HTMLInputElement;
-											dependenteAtual.nascimento = maskDate(t.value);
-											t.value = dependenteAtual.nascimento;
-										}}
-									/>
-								</div>
-
-								<div class="form-control lg:col-span-3">
-									<label class="label" for="dep-doc">
-										<span class="label-text font-medium"
-											>Certidão de Nascimento/Casamento ou Outros (opcional)</span
-										>
-									</label>
-									<input
-										id="dep-doc"
-										type="file"
-										class="file-input file-input-bordered w-full"
-										accept=".pdf,.jpg,.jpeg,.png"
-										onchange={async (e) => {
-											const file = e.currentTarget.files?.[0];
-											dependenteAtual.arquivo = file || null;
-											if (file) {
-												try {
-													dependenteAtual.documentoId = await uploadDocumentoDependente(file);
-												} catch {
-													alert('Falha no upload do documento do dependente');
-												}
-											}
-										}}
-									/>
-								</div>
-
-								<!-- Checkboxes de benefícios por dependente -->
-								<div class="form-control">
-									<label class="label cursor-pointer justify-start gap-3">
-										<input
-											type="checkbox"
-											class="checkbox checkbox-primary"
-											bind:checked={dependenteAtual.salarioFamilia}
-										/>
-										<span class="label-text">Salário Família</span>
-									</label>
-								</div>
-								<div class="form-control">
-									<label class="label cursor-pointer justify-start gap-3">
-										<input
-											type="checkbox"
-											class="checkbox checkbox-primary"
-											bind:checked={dependenteAtual.impostoRenda}
-										/>
-										<span class="label-text">Imposto de Renda</span>
-									</label>
-								</div>
-
-								<div class="lg:col-span-3">
-									<button
-										type="button"
-										class="btn btn-primary btn-sm gap-2"
-										onclick={adicionarDependente}
-									>
-										<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
-										>
-										Adicionar Dependente
-									</button>
-								</div>
-							</div>
-						</div>
-					</div>
-				{/if}
-			</div>
-		</div>
-
-		<!-- Card 5: Cargo e Vínculo -->
-		<div class="card bg-base-100 shadow-xl">
-			<div class="card-body space-y-4">
-				<h2 class="card-title border-b pb-3 text-xl">
-					<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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-						/>
-					</svg>
-					Cargo e Vínculo
-				</h2>
-
-				<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-					<!-- Símbolo Tipo -->
-					<div class="form-control">
-						<label class="label" for="simboloTipo">
-							<span class="label-text font-medium"
-								>Símbolo Tipo <span class="text-error">*</span></span
-							>
-						</label>
-						<select
-							id="simboloTipo"
-							class="select select-bordered w-full"
-							bind:value={tipo}
-							required
-						>
-							<option value="cargo_comissionado">Cargo Comissionado</option>
-							<option value="funcao_gratificada">Função Gratificada</option>
-						</select>
-					</div>
-
-					<!-- Símbolo -->
-					<div class="form-control">
-						<label class="label" for="simboloId">
-							<span class="label-text font-medium">Símbolo <span class="text-error">*</span></span>
-						</label>
-						<select
-							id="simboloId"
-							class="select select-bordered w-full"
-							bind:value={simboloId}
-							required
-						>
-							<option value="">Selecione...</option>
-							{#each simbolos.filter((s) => s.tipo === tipo) as s}
-								<option value={s._id}>{s.nome} — {s.descricao}</option>
-							{/each}
-						</select>
-					</div>
-
-					<!-- Descrição Cargo/Função -->
-					<div class="form-control lg:col-span-3">
-						<label class="label" for="descricaoCargo">
-							<span class="label-text font-medium">Descrição Cargo/Função</span>
-						</label>
-						<input
-							id="descricaoCargo"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={descricaoCargo}
-							placeholder="Descreva as atribuições do cargo"
-						/>
-					</div>
-
-					<!-- Nomeação/Portaria -->
-					<div class="form-control">
-						<label class="label" for="nomeacaoPortaria">
-							<span class="label-text font-medium">Nomeação/Portaria Nº</span>
-						</label>
-						<input
-							id="nomeacaoPortaria"
-							type="text"
-							class="input input-bordered w-full"
-							bind:value={nomeacaoPortaria}
-						/>
-					</div>
-
-					<div class="form-control">
-						<label class="label" for="nomeacaoData">
-							<span class="label-text font-medium">Data</span>
-						</label>
-						<input
-							id="nomeacaoData"
-							type="text"
-							inputmode="numeric"
-							placeholder="dd/mm/aaaa"
-							class="input input-bordered w-full"
-							value={nomeacaoData}
-							oninput={(e) => {
-								const target = e.target as HTMLInputElement;
-								nomeacaoData = maskDate(target.value);
-								target.value = nomeacaoData;
-							}}
-						/>
-					</div>
-
-					<div class="form-control">
-						<label class="label" for="nomeacaoDOE">
-							<span class="label-text font-medium">DOE</span>
-						</label>
-						<input
-							id="nomeacaoDOE"
-							type="text"
-							inputmode="numeric"
-							placeholder="dd/mm/aaaa"
-							class="input input-bordered w-full"
-							value={nomeacaoDOE}
-							oninput={(e) => {
-								const target = e.target as HTMLInputElement;
-								nomeacaoDOE = maskDate(target.value);
-								target.value = nomeacaoDOE;
-							}}
-						/>
-					</div>
-
-					<!-- Data Admissão -->
-					<div class="form-control">
-						<label class="label" for="admissaoData">
-							<span class="label-text font-medium">Data Admissão</span>
-						</label>
-						<input
-							id="admissaoData"
-							type="text"
-							inputmode="numeric"
-							placeholder="dd/mm/aaaa"
-							class="input input-bordered w-full"
-							value={admissaoData}
-							oninput={(e) => {
-								const target = e.target as HTMLInputElement;
-								admissaoData = maskDate(target.value);
-								target.value = admissaoData;
-							}}
-						/>
-					</div>
-
-					<!-- Regime de Trabalho -->
-					<div class="form-control">
-						<label class="label" for="regimeTrabalho">
-							<span class="label-text font-medium">Regime do Funcionário</span>
-						</label>
-						<select
-							id="regimeTrabalho"
-							class="select select-bordered w-full"
-							bind:value={regimeTrabalho}
-							required
-						>
-							<option value="">Selecione...</option>
-							{#each REGIME_TRABALHO_OPTIONS as option (option)}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-
-					<!-- Pertence a Órgão Público -->
-					<div class="form-control lg:col-span-3">
-						<label class="label cursor-pointer justify-start gap-4">
-							<input
-								type="checkbox"
-								class="checkbox checkbox-primary"
-								bind:checked={pertenceOrgaoPublico}
-							/>
-							<span class="label-text font-medium"
-								>Pertence a Órgão Público Federal, Estadual ou Municipal?</span
-							>
-						</label>
-					</div>
-
-					<!-- Órgão de Origem -->
-					{#if pertenceOrgaoPublico}
-						<div class="form-control lg:col-span-2">
-							<label class="label" for="orgaoOrigem">
-								<span class="label-text font-medium"
-									>Órgão de Origem (para servidor extra-quadro)</span
-								>
-							</label>
-							<input
-								id="orgaoOrigem"
-								type="text"
-								class="input input-bordered w-full"
-								bind:value={orgaoOrigem}
-							/>
-						</div>
-					{/if}
-
-					<!-- Aposentado -->
-					<div class="form-control">
-						<label class="label" for="aposentado">
-							<span class="label-text font-medium">Se Aposentado</span>
-						</label>
-						<select id="aposentado" class="select select-bordered w-full" bind:value={aposentado}>
-							{#each APOSENTADO_OPTIONS as option}
-								<option value={option.value}>{option.label}</option>
-							{/each}
-						</select>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Card 6: Dados Bancários -->
-		<div class="card bg-base-100 shadow-xl">
-			<div class="card-body space-y-4">
-				<h2 class="card-title border-b pb-3 text-xl">
-					<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 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-						/>
-					</svg>
-					Dados Bancários - Bradesco
-				</h2>
-
-				<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-					<!-- Conta Corrente -->
-					<div class="form-control">
-						<label class="label" for="contaBradescoNumero">
-							<span class="label-text font-medium">Conta Corrente Nº</span>
-						</label>
-						<input
-							id="contaBradescoNumero"
-							type="text"
-							inputmode="numeric"
-							class="input input-bordered w-full"
-							bind:value={contaBradescoNumero}
-						/>
-					</div>
-
-					<!-- DV -->
-					<div class="form-control">
-						<label class="label" for="contaBradescoDV">
-							<span class="label-text font-medium">DV</span>
-						</label>
-						<input
-							id="contaBradescoDV"
-							type="text"
-							maxlength="2"
-							class="input input-bordered w-full"
-							bind:value={contaBradescoDV}
-						/>
-					</div>
-
-					<!-- Agência -->
-					<div class="form-control">
-						<label class="label" for="contaBradescoAgencia">
-							<span class="label-text font-medium">Agência</span>
-						</label>
-						<input
-							id="contaBradescoAgencia"
-							type="text"
-							inputmode="numeric"
-							class="input input-bordered w-full"
-							bind:value={contaBradescoAgencia}
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Modelos de Declarações -->
-		<ModelosDeclaracoes />
-
-		<!-- Card 7: Documentação Anexa -->
-		<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">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
-						/>
-					</svg>
-					Documentação Anexa
-				</h2>
-
-				<p class="text-base-content/70 text-sm">
-					Anexe os documentos necessários em formato PDF ou imagem (máximo 10MB cada)
-				</p>
-
-				{#each categoriasDocumentos as categoria (categoria)}
-					<div class="space-y-3">
-						<h3 class="text-primary text-lg font-semibold">{categoria}</h3>
-						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-							{#each getDocumentosByCategoria(categoria) as doc}
-								<FileUpload
-									label={doc.nome}
-									helpUrl={doc.helpUrl}
-									value={documentosStorage[doc.campo]}
-									onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
-									onRemove={() => handleDocumentoRemove(doc.campo)}
-									disabled={loading}
-								/>
-							{/each}
-						</div>
-					</div>
-				{/each}
-			</div>
-		</div>
-
-		<!-- Card 8: Ações -->
-		<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-ghost btn-lg"
-						disabled={loading}
-						onclick={() => goto('/recursos-humanos/funcionarios')}
-					>
-						<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="button"
-						class="btn btn-primary btn-lg"
-						disabled={loading}
-						onclick={() =>
-							(
-								document.getElementById('confirmar_cadastro_func') as HTMLDialogElement
-							)?.showModal()}
-					>
-						{#if loading}
-							<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 Funcionário
-						{/if}
-					</button>
-				</div>
-			</div>
-		</div>
-
-		<!-- Modal de Confirmação Legal -->
-		<dialog id="confirmar_cadastro_func" class="modal">
-			<div class="modal-box max-w-3xl">
-				<h3 class="mb-3 text-lg font-bold">Declaração de Veracidade</h3>
-				<div class="prose max-w-none text-sm">
-					<p>
-						Declaro, sob as penas da lei (art. 299 do Código Penal Brasileiro, que trata do crime de
-						falsidade ideológica, e demais cominações legais aplicáveis), a veracidade e
-						autenticidade de todas as informações e documentos por mim prestados/enviados neste ato.
-						Tenho ciência de que a falsidade das informações implicará nas penalidades cabíveis,
-						podendo resultar na nulidade do ato.
-					</p>
-				</div>
-				<div class="modal-action">
-					<div class="flex gap-2">
-						<button
-							type="button"
-							class="btn"
-							onclick={() =>
-								(document.getElementById('confirmar_cadastro_func') as HTMLDialogElement)?.close()}
-							>Cancelar</button
-						>
-						<button
-							type="button"
-							class="btn btn-primary"
-							onclick={() => {
-								(document.getElementById('confirmar_cadastro_func') as HTMLDialogElement)?.close();
-								handleSubmit();
-							}}>Ciente</button
-						>
-					</div>
-				</div>
-			</div>
-		</dialog>
-	</form>
+<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>Cadastrar</li>
+    </ul>
+  </div>
+
+  <!-- Cabeçalho -->
+  <div class="mb-6">
+    <div class="flex items-center gap-4 mb-2">
+      <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="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-primary">Cadastro de Funcionário</h1>
+        <p class="text-base-content/70">Preencha os campos abaixo para cadastrar um novo funcionário</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}
+
+  <!-- Formulário -->
+  <form class="space-y-6" onsubmit={(e) => { e.preventDefault(); }}>
+    
+    <!-- Card 1: Informações Pessoais -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body space-y-4">
+        <h2 class="card-title text-xl border-b pb-3">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+          </svg>
+          Informações Pessoais
+        </h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <!-- Nome -->
+          <div class="form-control lg:col-span-2">
+            <label class="label" for="nome">
+              <span class="label-text font-medium">Nome Completo <span class="text-error">*</span></span>
+            </label>
+            <input 
+              id="nome" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={nome}
+              required 
+            />
+          </div>
+
+          <!-- Matrícula -->
+          <div class="form-control">
+            <label class="label" for="matricula">
+              <span class="label-text font-medium">Matrícula <span class="text-base-content/50 text-xs">(opcional)</span></span>
+            </label>
+            <input 
+              id="matricula" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={matricula}
+              placeholder="Deixe em branco se não tiver"
+            />
+          </div>
+
+          <!-- CPF -->
+          <div class="form-control">
+            <label class="label" for="cpf">
+              <span class="label-text font-medium">CPF <span class="text-error">*</span></span>
+            </label>
+            <input 
+              id="cpf" 
+              type="text" 
+              inputmode="numeric"
+              class="input input-bordered w-full" 
+              value={cpf}
+              oninput={(e) => { 
+                const target = e.target as HTMLInputElement;
+                cpf = maskCPF(target.value);
+                target.value = cpf;
+              }}
+              required 
+            />
+          </div>
+
+          <!-- RG -->
+          <div class="form-control">
+            <label class="label" for="rg">
+              <span class="label-text font-medium">RG <span class="text-error">*</span></span>
+            </label>
+            <input 
+              id="rg" 
+              type="text" 
+              inputmode="numeric"
+              class="input input-bordered w-full" 
+              value={rg}
+              oninput={(e) => { 
+                const target = e.target as HTMLInputElement;
+                rg = onlyDigits(target.value);
+                target.value = rg;
+              }}
+              required 
+            />
+          </div>
+
+          <!-- Órgão Expedidor -->
+          <div class="form-control">
+            <label class="label" for="rgOrgaoExpedidor">
+              <span class="label-text font-medium">Órgão Expedidor</span>
+            </label>
+            <input 
+              id="rgOrgaoExpedidor" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={rgOrgaoExpedidor}
+              placeholder="Ex: SDS/PE"
+            />
+          </div>
+
+          <!-- Data Emissão RG -->
+          <div class="form-control">
+            <label class="label" for="rgDataEmissao">
+              <span class="label-text font-medium">Data Emissão RG</span>
+            </label>
+            <input 
+              id="rgDataEmissao" 
+              type="text" 
+              inputmode="numeric"
+              placeholder="dd/mm/aaaa"
+              class="input input-bordered w-full" 
+              value={rgDataEmissao}
+              oninput={(e) => { 
+                const target = e.target as HTMLInputElement;
+                rgDataEmissao = maskDate(target.value);
+                target.value = rgDataEmissao;
+              }}
+            />
+          </div>
+
+          <!-- Nome do Pai -->
+          <div class="form-control lg:col-span-2">
+            <label class="label" for="nomePai">
+              <span class="label-text font-medium">Nome do Pai</span>
+            </label>
+            <input 
+              id="nomePai" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={nomePai}
+            />
+          </div>
+
+          <!-- Nome da Mãe -->
+          <div class="form-control lg:col-span-2">
+            <label class="label" for="nomeMae">
+              <span class="label-text font-medium">Nome da Mãe</span>
+            </label>
+            <input 
+              id="nomeMae" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={nomeMae}
+            />
+          </div>
+
+          <!-- Data de Nascimento -->
+          <div class="form-control">
+            <label class="label" for="nascimento">
+              <span class="label-text font-medium">Data de Nascimento <span class="text-error">*</span></span>
+            </label>
+            <input 
+              id="nascimento" 
+              type="text" 
+              inputmode="numeric"
+              placeholder="dd/mm/aaaa"
+              class="input input-bordered w-full" 
+              value={nascimento}
+              oninput={(e) => { 
+                const target = e.target as HTMLInputElement;
+                nascimento = maskDate(target.value);
+                target.value = nascimento;
+              }}
+              required 
+            />
+          </div>
+
+          <!-- Naturalidade -->
+          <div class="form-control">
+            <label class="label" for="naturalidade">
+              <span class="label-text font-medium">Naturalidade</span>
+            </label>
+            <input 
+              id="naturalidade" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={naturalidade}
+              placeholder="Cidade de nascimento"
+            />
+          </div>
+
+          <!-- Naturalidade UF -->
+          <div class="form-control">
+            <label class="label" for="naturalidadeUF">
+              <span class="label-text font-medium">UF Naturalidade</span>
+            </label>
+            <select 
+              id="naturalidadeUF" 
+              class="select select-bordered w-full" 
+              bind:value={naturalidadeUF}
+            >
+              <option value="">Selecione...</option>
+              {#each UFS_BRASIL as ufOption}
+                <option value={ufOption}>{ufOption}</option>
+              {/each}
+            </select>
+          </div>
+
+          <!-- Sexo -->
+          <div class="form-control">
+            <label class="label" for="sexo">
+              <span class="label-text font-medium">Sexo</span>
+            </label>
+            <select 
+              id="sexo" 
+              class="select select-bordered w-full" 
+              bind:value={sexo}
+            >
+              <option value="">Selecione...</option>
+              {#each SEXO_OPTIONS as option}
+                <option value={option.value}>{option.label}</option>
+              {/each}
+            </select>
+          </div>
+
+          <!-- Estado Civil -->
+          <div class="form-control">
+            <label class="label" for="estadoCivil">
+              <span class="label-text font-medium">Estado Civil</span>
+            </label>
+            <select 
+              id="estadoCivil" 
+              class="select select-bordered w-full" 
+              bind:value={estadoCivil}
+            >
+              <option value="">Selecione...</option>
+              {#each ESTADO_CIVIL_OPTIONS as option}
+                <option value={option.value}>{option.label}</option>
+              {/each}
+            </select>
+          </div>
+
+          <!-- Nacionalidade -->
+          <div class="form-control">
+            <label class="label" for="nacionalidade">
+              <span class="label-text font-medium">Nacionalidade</span>
+            </label>
+            <input 
+              id="nacionalidade" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={nacionalidade}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card 2: Documentos Pessoais -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body space-y-4">
+        <h2 class="card-title text-xl border-b pb-3">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
+          Documentos Pessoais
+        </h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <!-- Carteira Profissional -->
+          <div class="form-control">
+            <label class="label" for="carteiraProfissionalNumero">
+              <span class="label-text font-medium">Carteira Profissional Nº</span>
+            </label>
+            <input 
+              id="carteiraProfissionalNumero" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={carteiraProfissionalNumero}
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="carteiraProfissionalSerie">
+              <span class="label-text font-medium">Série</span>
+            </label>
+            <input 
+              id="carteiraProfissionalSerie" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={carteiraProfissionalSerie}
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="carteiraProfissionalDataEmissao">
+              <span class="label-text font-medium">Data Emissão</span>
+            </label>
+            <input 
+              id="carteiraProfissionalDataEmissao" 
+              type="text" 
+              inputmode="numeric"
+              placeholder="dd/mm/aaaa"
+              class="input input-bordered w-full" 
+              value={carteiraProfissionalDataEmissao}
+              oninput={(e) => { 
+                const target = e.target as HTMLInputElement;
+                carteiraProfissionalDataEmissao = maskDate(target.value);
+                target.value = carteiraProfissionalDataEmissao;
+              }}
+            />
+          </div>
+
+          <!-- Reservista -->
+          <div class="form-control">
+            <label class="label" for="reservistaNumero">
+              <span class="label-text font-medium">Reservista Nº</span>
+            </label>
+            <input 
+              id="reservistaNumero" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={reservistaNumero}
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="reservistaSerie">
+              <span class="label-text font-medium">Série</span>
+            </label>
+            <input 
+              id="reservistaSerie" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={reservistaSerie}
+            />
+          </div>
+
+          <!-- Título de Eleitor -->
+          <div class="form-control">
+            <label class="label" for="tituloEleitorNumero">
+              <span class="label-text font-medium">Título de Eleitor Nº</span>
+            </label>
+            <input 
+              id="tituloEleitorNumero" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={tituloEleitorNumero}
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="tituloEleitorZona">
+              <span class="label-text font-medium">Zona</span>
+            </label>
+            <input 
+              id="tituloEleitorZona" 
+              type="text" 
+              inputmode="numeric"
+              class="input input-bordered w-full" 
+              bind:value={tituloEleitorZona}
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="tituloEleitorSecao">
+              <span class="label-text font-medium">Seção</span>
+            </label>
+            <input 
+              id="tituloEleitorSecao" 
+              type="text" 
+              inputmode="numeric"
+              class="input input-bordered w-full" 
+              bind:value={tituloEleitorSecao}
+            />
+          </div>
+
+          <!-- PIS/PASEP -->
+          <div class="form-control">
+            <label class="label" for="pisNumero">
+              <span class="label-text font-medium">PIS/PASEP Nº</span>
+            </label>
+            <input 
+              id="pisNumero" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={pisNumero}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card 3: Formação e Saúde -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body space-y-4">
+        <h2 class="card-title text-xl border-b pb-3">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+          </svg>
+          Formação e Saúde
+        </h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <!-- Grau de Instrução -->
+          <div class="form-control">
+            <label class="label" for="grauInstrucao">
+              <span class="label-text font-medium">Grau de Instrução</span>
+            </label>
+            <select 
+              id="grauInstrucao" 
+              class="select select-bordered w-full" 
+              bind:value={grauInstrucao}
+            >
+              <option value="">Selecione...</option>
+              {#each GRAU_INSTRUCAO_OPTIONS as option}
+                <option value={option.value}>{option.label}</option>
+              {/each}
+            </select>
+          </div>
+
+          <!-- Formação -->
+          <div class="form-control">
+            <label class="label" for="formacao">
+              <span class="label-text font-medium">Formação/Curso</span>
+            </label>
+            <input 
+              id="formacao" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={formacao}
+              placeholder="Ex: Administração"
+            />
+          </div>
+
+          <!-- Registro Nº -->
+          <div class="form-control">
+            <label class="label" for="formacaoRegistro">
+              <span class="label-text font-medium">Registro Nº</span>
+            </label>
+            <input 
+              id="formacaoRegistro" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={formacaoRegistro}
+              placeholder="Nº do registro profissional"
+            />
+          </div>
+
+          <!-- Grupo Sanguíneo -->
+          <div class="form-control">
+            <label class="label" for="grupoSanguineo">
+              <span class="label-text font-medium">Grupo Sanguíneo</span>
+            </label>
+            <select 
+              id="grupoSanguineo" 
+              class="select select-bordered w-full" 
+              bind:value={grupoSanguineo}
+            >
+              <option value="">Selecione...</option>
+              {#each GRUPO_SANGUINEO_OPTIONS as option}
+                <option value={option.value}>{option.label}</option>
+              {/each}
+            </select>
+          </div>
+
+          <!-- Fator RH -->
+          <div class="form-control">
+            <label class="label" for="fatorRH">
+              <span class="label-text font-medium">Fator RH</span>
+            </label>
+            <select 
+              id="fatorRH" 
+              class="select select-bordered w-full" 
+              bind:value={fatorRH}
+            >
+              <option value="">Selecione...</option>
+              {#each FATOR_RH_OPTIONS as option}
+                <option value={option.value}>{option.label}</option>
+              {/each}
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card 3.5: Cursos e Treinamentos -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body space-y-4">
+        <h2 class="card-title text-xl border-b pb-3">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+          </svg>
+          Cursos e Treinamentos
+        </h2>
+
+        <p class="text-sm text-base-content/70">
+          Adicione até 7 cursos ou treinamentos realizados pelo funcionário (opcional)
+        </p>
+
+        <!-- Lista de cursos adicionados -->
+        {#if cursos.length > 0}
+          <div class="space-y-2">
+            <h3 class="font-semibold text-sm">Cursos adicionados ({cursos.length}/7)</h3>
+            {#each cursos as curso}
+              <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
+                <div class="flex-1">
+                  <p class="font-semibold text-sm">{curso.descricao}</p>
+                  <p class="text-xs text-base-content/70">{curso.data}</p>
+                </div>
+                <button 
+                  type="button"
+                  class="btn btn-sm btn-error btn-square"
+                  aria-label="Remover curso"
+                  onclick={() => removerCurso(curso.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="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+        <!-- Formulário para adicionar curso -->
+        {#if cursos.length < 7}
+          <div class="collapse collapse-arrow border border-base-300 bg-base-200">
+            <input type="checkbox" bind:checked={mostrarFormularioCurso} />
+            <div class="collapse-title font-medium">
+              Adicionar Curso/Treinamento
+            </div>
+            <div class="collapse-content">
+              <div class="space-y-3 pt-2">
+                <div class="form-control">
+                  <label class="label" for="curso-descricao">
+                    <span class="label-text font-medium">Descrição do Curso</span>
+                  </label>
+                  <input 
+                    id="curso-descricao"
+                    type="text" 
+                    class="input input-bordered w-full" 
+                    bind:value={cursoAtual.descricao}
+                    placeholder="Ex: Gestão de Projetos"
+                  />
+                </div>
+
+                <div class="form-control">
+                  <label class="label" for="curso-data">
+                    <span class="label-text font-medium">Data de Conclusão</span>
+                  </label>
+                  <input 
+                    id="curso-data"
+                    type="text" 
+                    class="input input-bordered w-full" 
+                    bind:value={cursoAtual.data}
+                    placeholder="Ex: 01/2024"
+                    onchange={(e) => cursoAtual.data = maskDate(e.currentTarget.value)}
+                  />
+                </div>
+
+                <div class="form-control">
+                  <label class="label" for="curso-certificado">
+                    <span class="label-text font-medium">Certificado/Diploma (opcional)</span>
+                  </label>
+                  <input 
+                    id="curso-certificado"
+                    type="file" 
+                    class="file-input file-input-bordered w-full" 
+                    accept=".pdf,.jpg,.jpeg,.png"
+                    onchange={(e) => {
+                      const file = e.currentTarget.files?.[0];
+                      if (file) cursoAtual.arquivo = file;
+                    }}
+                  />
+                </div>
+
+                <button 
+                  type="button"
+                  class="btn btn-primary btn-sm gap-2 mt-2"
+                  onclick={adicionarCurso}
+                >
+                  <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>
+                  Adicionar à Lista
+                </button>
+              </div>
+            </div>
+          </div>
+        {: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>Limite de 7 cursos atingido</span>
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Card 4: Endereço e Contato -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body space-y-4">
+        <h2 class="card-title text-xl border-b pb-3">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+          Endereço e Contato
+        </h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <!-- CEP -->
+          <div class="form-control">
+            <label class="label" for="cep">
+              <span class="label-text font-medium">CEP <span class="text-error">*</span></span>
+            </label>
+            <input 
+              id="cep" 
+              type="text" 
+              inputmode="numeric"
+              class="input input-bordered w-full" 
+              value={cep}
+              oninput={(e) => { 
+                const target = e.target as HTMLInputElement;
+                cep = maskCEP(target.value);
+                target.value = cep;
+              }}
+              onblur={() => fillFromCEP(cep)}
+              required 
+            />
+          </div>
+
+          <!-- Cidade -->
+          <div class="form-control lg:col-span-2">
+            <label class="label" for="cidade">
+              <span class="label-text font-medium">Cidade <span class="text-error">*</span></span>
+            </label>
+            <input 
+              id="cidade" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={cidade}
+              required 
+            />
+          </div>
+
+          <!-- UF -->
+          <div class="form-control">
+            <label class="label" for="uf">
+              <span class="label-text font-medium">UF <span class="text-error">*</span></span>
+            </label>
+            <select 
+              id="uf" 
+              class="select select-bordered w-full" 
+              bind:value={uf}
+              required
+            >
+              <option value="">Selecione...</option>
+              {#each UFS_BRASIL as ufOption}
+                <option value={ufOption}>{ufOption}</option>
+              {/each}
+            </select>
+          </div>
+
+          <!-- Endereço -->
+          <div class="form-control md:col-span-2">
+            <label class="label" for="endereco">
+              <span class="label-text font-medium">Endereço <span class="text-error">*</span></span>
+            </label>
+            <input 
+              id="endereco" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={endereco}
+              required 
+            />
+          </div>
+
+          <!-- E-mail -->
+          <div class="form-control lg:col-span-2">
+            <label class="label" for="email">
+              <span class="label-text font-medium">E-mail <span class="text-error">*</span></span>
+            </label>
+            <input 
+              id="email" 
+              type="email" 
+              class="input input-bordered w-full" 
+              bind:value={email}
+              required 
+            />
+          </div>
+
+          <!-- Telefone -->
+          <div class="form-control lg:col-span-2">
+            <label class="label" for="telefone">
+              <span class="label-text font-medium">Telefone <span class="text-error">*</span></span>
+            </label>
+            <input 
+              id="telefone" 
+              type="text" 
+              inputmode="numeric"
+              class="input input-bordered w-full" 
+              value={telefone}
+              oninput={(e) => { 
+                const target = e.target as HTMLInputElement;
+                telefone = maskPhone(target.value);
+                target.value = telefone;
+              }}
+              required 
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card 4.5: Dependentes -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body space-y-4">
+        <h2 class="card-title text-xl border-b pb-3">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2a3 3 0 00-5.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2a3 3 0 015.356-1.857M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+          Dependentes
+        </h2>
+
+        {#if dependentes.length > 0}
+          <div class="space-y-2">
+            <h3 class="font-semibold text-sm">Dependentes adicionados ({dependentes.length}/10)</h3>
+            {#each dependentes as dep}
+              <div class="flex items-center gap-3 p-3 bg-base-200 rounded-lg">
+                <div class="flex-1 text-sm">
+                  <p class="font-semibold">{dep.nome} — {dep.parentesco}</p>
+                  <p class="text-xs text-base-content/70">CPF: {dep.cpf} • Nasc.: {dep.nascimento}</p>
+                  <div class="flex flex-wrap gap-4 mt-2">
+                    <label class="label cursor-pointer gap-2">
+                      <input type="checkbox" class="checkbox checkbox-xs checkbox-primary" bind:checked={dep.salarioFamilia} />
+                      <span class="label-text text-xs">Salário Família</span>
+                    </label>
+                    <label class="label cursor-pointer gap-2">
+                      <input type="checkbox" class="checkbox checkbox-xs checkbox-primary" bind:checked={dep.impostoRenda} />
+                      <span class="label-text text-xs">Imposto de Renda</span>
+                    </label>
+                  </div>
+                </div>
+                <button type="button" class="btn btn-sm btn-error btn-square" aria-label="Remover dependente" onclick={() => removerDependente(dep.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="M6 18L18 6M6 6l12 12" /></svg>
+                </button>
+              </div>
+            {/each}
+          </div>
+        {/if}
+
+        {#if dependentes.length < 10}
+          <div class="collapse collapse-arrow border border-base-300 bg-base-200">
+            <input type="checkbox" bind:checked={mostrarFormularioDependente} />
+            <div class="collapse-title font-medium">Adicionar Dependente</div>
+            <div class="collapse-content">
+              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
+                <div class="form-control">
+                  <label class="label" for="dep-parentesco">
+                    <span class="label-text font-medium">Grau de Parentesco</span>
+                  </label>
+                  <select id="dep-parentesco" class="select select-bordered w-full" bind:value={dependenteAtual.parentesco}>
+                    <option value="">Selecione...</option>
+                    <option value="filho">Filho</option>
+                    <option value="filha">Filha</option>
+                    <option value="conjuge">Cônjuge</option>
+                    <option value="outro">Outros</option>
+                  </select>
+                </div>
+
+                <div class="form-control lg:col-span-2">
+                  <label class="label" for="dep-nome">
+                    <span class="label-text font-medium">Nome do Dependente</span>
+                  </label>
+                  <input id="dep-nome" type="text" class="input input-bordered w-full" bind:value={dependenteAtual.nome} />
+                </div>
+
+                <div class="form-control">
+                  <label class="label" for="dep-cpf">
+                    <span class="label-text font-medium">CPF do Dependente</span>
+                  </label>
+                  <input id="dep-cpf" type="text" inputmode="numeric" class="input input-bordered w-full" value={dependenteAtual.cpf}
+                    oninput={(e) => { const t = e.target as HTMLInputElement; dependenteAtual.cpf = maskCPF(t.value); t.value = dependenteAtual.cpf; }} />
+                </div>
+
+                <div class="form-control">
+                  <label class="label" for="dep-nascimento">
+                    <span class="label-text font-medium">Data de Nascimento</span>
+                  </label>
+                  <input id="dep-nascimento" type="text" inputmode="numeric" placeholder="dd/mm/aaaa" class="input input-bordered w-full" value={dependenteAtual.nascimento}
+                    oninput={(e) => { const t = e.target as HTMLInputElement; dependenteAtual.nascimento = maskDate(t.value); t.value = dependenteAtual.nascimento; }} />
+                </div>
+
+                <div class="form-control lg:col-span-3">
+                  <label class="label" for="dep-doc">
+                    <span class="label-text font-medium">Certidão de Nascimento/Casamento ou Outros (opcional)</span>
+                  </label>
+                  <input id="dep-doc" type="file" class="file-input file-input-bordered w-full" accept=".pdf,.jpg,.jpeg,.png"
+                    onchange={async (e) => { const file = e.currentTarget.files?.[0]; dependenteAtual.arquivo = file || null; if (file) { try { dependenteAtual.documentoId = await uploadDocumentoDependente(file); } catch { alert("Falha no upload do documento do dependente"); } } }} />
+                </div>
+
+              <!-- Checkboxes de benefícios por dependente -->
+              <div class="form-control">
+                <label class="label cursor-pointer justify-start gap-3">
+                  <input type="checkbox" class="checkbox checkbox-primary" bind:checked={dependenteAtual.salarioFamilia} />
+                  <span class="label-text">Salário Família</span>
+                </label>
+              </div>
+              <div class="form-control">
+                <label class="label cursor-pointer justify-start gap-3">
+                  <input type="checkbox" class="checkbox checkbox-primary" bind:checked={dependenteAtual.impostoRenda} />
+                  <span class="label-text">Imposto de Renda</span>
+                </label>
+              </div>
+
+                <div class="lg:col-span-3">
+                  <button type="button" class="btn btn-primary btn-sm gap-2" onclick={adicionarDependente}>
+                    <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>
+                    Adicionar Dependente
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Card 5: Cargo e Vínculo -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body space-y-4">
+        <h2 class="card-title text-xl border-b pb-3">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+          </svg>
+          Cargo e Vínculo
+        </h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <!-- Símbolo Tipo -->
+          <div class="form-control">
+            <label class="label" for="simboloTipo">
+              <span class="label-text font-medium">Símbolo Tipo <span class="text-error">*</span></span>
+            </label>
+            <select 
+              id="simboloTipo" 
+              class="select select-bordered w-full" 
+              bind:value={tipo}
+              required
+            >
+              <option value="cargo_comissionado">Cargo Comissionado</option>
+              <option value="funcao_gratificada">Função Gratificada</option>
+            </select>
+          </div>
+
+          <!-- Símbolo -->
+          <div class="form-control">
+            <label class="label" for="simboloId">
+              <span class="label-text font-medium">Símbolo <span class="text-error">*</span></span>
+            </label>
+            <select 
+              id="simboloId" 
+              class="select select-bordered w-full" 
+              bind:value={simboloId}
+              required
+            >
+              <option value="">Selecione...</option>
+              {#each simbolos.filter((s) => s.tipo === tipo) as s}
+                <option value={s._id}>{s.nome} — {s.descricao}</option>
+              {/each}
+            </select>
+          </div>
+
+          <!-- Descrição Cargo/Função -->
+          <div class="form-control lg:col-span-3">
+            <label class="label" for="descricaoCargo">
+              <span class="label-text font-medium">Descrição Cargo/Função</span>
+            </label>
+            <input 
+              id="descricaoCargo" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={descricaoCargo}
+              placeholder="Descreva as atribuições do cargo"
+            />
+          </div>
+
+          <!-- Nomeação/Portaria -->
+          <div class="form-control">
+            <label class="label" for="nomeacaoPortaria">
+              <span class="label-text font-medium">Nomeação/Portaria Nº</span>
+            </label>
+            <input 
+              id="nomeacaoPortaria" 
+              type="text" 
+              class="input input-bordered w-full" 
+              bind:value={nomeacaoPortaria}
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="nomeacaoData">
+              <span class="label-text font-medium">Data</span>
+            </label>
+            <input 
+              id="nomeacaoData" 
+              type="text" 
+              inputmode="numeric"
+              placeholder="dd/mm/aaaa"
+              class="input input-bordered w-full" 
+              value={nomeacaoData}
+              oninput={(e) => { 
+                const target = e.target as HTMLInputElement;
+                nomeacaoData = maskDate(target.value);
+                target.value = nomeacaoData;
+              }}
+            />
+          </div>
+
+          <div class="form-control">
+            <label class="label" for="nomeacaoDOE">
+              <span class="label-text font-medium">DOE</span>
+            </label>
+            <input 
+              id="nomeacaoDOE" 
+              type="text" 
+              inputmode="numeric"
+              placeholder="dd/mm/aaaa"
+              class="input input-bordered w-full" 
+              value={nomeacaoDOE}
+              oninput={(e) => { 
+                const target = e.target as HTMLInputElement;
+                nomeacaoDOE = maskDate(target.value);
+                target.value = nomeacaoDOE;
+              }}
+            />
+          </div>
+
+          <!-- Data Admissão -->
+          <div class="form-control">
+            <label class="label" for="admissaoData">
+              <span class="label-text font-medium">Data Admissão</span>
+            </label>
+            <input 
+              id="admissaoData" 
+              type="text" 
+              inputmode="numeric"
+              placeholder="dd/mm/aaaa"
+              class="input input-bordered w-full" 
+              value={admissaoData}
+              oninput={(e) => { 
+                const target = e.target as HTMLInputElement;
+                admissaoData = maskDate(target.value);
+                target.value = admissaoData;
+              }}
+            />
+          </div>
+
+          <!-- Regime de Trabalho -->
+          <div class="form-control">
+            <label class="label" for="regimeTrabalho">
+              <span class="label-text font-medium">Regime do Funcionário</span>
+            </label>
+            <select
+              id="regimeTrabalho"
+              class="select select-bordered w-full"
+              bind:value={regimeTrabalho}
+              required
+            >
+              <option value="">Selecione...</option>
+              {#each REGIME_TRABALHO_OPTIONS as option}
+                <option value={option.value}>{option.label}</option>
+              {/each}
+            </select>
+          </div>
+
+          <!-- Pertence a Órgão Público -->
+          <div class="form-control lg:col-span-3">
+            <label class="label cursor-pointer justify-start gap-4">
+              <input 
+                type="checkbox" 
+                class="checkbox checkbox-primary" 
+                bind:checked={pertenceOrgaoPublico}
+              />
+              <span class="label-text font-medium">Pertence a Órgão Público Federal, Estadual ou Municipal?</span>
+            </label>
+          </div>
+
+          <!-- Órgão de Origem -->
+          {#if pertenceOrgaoPublico}
+            <div class="form-control lg:col-span-2">
+              <label class="label" for="orgaoOrigem">
+                <span class="label-text font-medium">Órgão de Origem (para servidor extra-quadro)</span>
+              </label>
+              <input 
+                id="orgaoOrigem" 
+                type="text" 
+                class="input input-bordered w-full" 
+                bind:value={orgaoOrigem}
+              />
+            </div>
+          {/if}
+
+          <!-- Aposentado -->
+          <div class="form-control">
+            <label class="label" for="aposentado">
+              <span class="label-text font-medium">Se Aposentado</span>
+            </label>
+            <select 
+              id="aposentado" 
+              class="select select-bordered w-full" 
+              bind:value={aposentado}
+            >
+              {#each APOSENTADO_OPTIONS as option}
+                <option value={option.value}>{option.label}</option>
+              {/each}
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Card 6: Dados Bancários -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body space-y-4">
+        <h2 class="card-title text-xl border-b pb-3">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
+          </svg>
+          Dados Bancários - Bradesco
+        </h2>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <!-- Conta Corrente -->
+          <div class="form-control">
+            <label class="label" for="contaBradescoNumero">
+              <span class="label-text font-medium">Conta Corrente Nº</span>
+            </label>
+            <input 
+              id="contaBradescoNumero" 
+              type="text" 
+              inputmode="numeric"
+              class="input input-bordered w-full" 
+              bind:value={contaBradescoNumero}
+            />
+          </div>
+
+          <!-- DV -->
+          <div class="form-control">
+            <label class="label" for="contaBradescoDV">
+              <span class="label-text font-medium">DV</span>
+            </label>
+            <input 
+              id="contaBradescoDV" 
+              type="text" 
+              maxlength="2"
+              class="input input-bordered w-full" 
+              bind:value={contaBradescoDV}
+            />
+          </div>
+
+          <!-- Agência -->
+          <div class="form-control">
+            <label class="label" for="contaBradescoAgencia">
+              <span class="label-text font-medium">Agência</span>
+            </label>
+            <input 
+              id="contaBradescoAgencia" 
+              type="text" 
+              inputmode="numeric"
+              class="input input-bordered w-full" 
+              bind:value={contaBradescoAgencia}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modelos de Declarações -->
+    <ModelosDeclaracoes />
+
+    <!-- Card 7: Documentação Anexa -->
+    <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">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+          </svg>
+          Documentação Anexa
+        </h2>
+
+        <p class="text-sm text-base-content/70">
+          Anexe os documentos necessários em formato PDF ou imagem (máximo 10MB cada)
+        </p>
+
+        {#each categoriasDocumentos as categoria}
+          <div class="space-y-3">
+            <h3 class="text-lg font-semibold text-primary">{categoria}</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {#each getDocumentosByCategoria(categoria) as doc}
+                <FileUpload
+                  label={doc.nome}
+                  helpUrl={doc.helpUrl}
+                  value={documentosStorage[doc.campo]}
+                  onUpload={(file) => handleDocumentoUpload(doc.campo, file)}
+                  onRemove={() => handleDocumentoRemove(doc.campo)}
+                  disabled={loading}
+                />
+              {/each}
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Card 8: Ações -->
+    <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={loading}
+            onclick={() => goto("/recursos-humanos/funcionarios")}
+          >
+            <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="button" 
+            class="btn btn-primary btn-lg" 
+            disabled={loading}
+            onclick={() => (document.getElementById('confirmar_cadastro_func') as HTMLDialogElement)?.showModal()}
+          >
+            {#if loading}
+              <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 Funcionário
+            {/if}
+          </button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Modal de Confirmação Legal -->
+    <dialog id="confirmar_cadastro_func" class="modal">
+      <div class="modal-box max-w-3xl">
+        <h3 class="font-bold text-lg mb-3">Declaração de Veracidade</h3>
+        <div class="prose text-sm max-w-none">
+          <p>
+            Declaro, sob as penas da lei (art. 299 do Código Penal Brasileiro, que trata do crime de falsidade ideológica, e demais cominações legais aplicáveis), a veracidade e autenticidade de todas as informações e documentos por mim prestados/enviados neste ato. Tenho ciência de que a falsidade das informações implicará nas penalidades cabíveis, podendo resultar na nulidade do ato.
+          </p>
+        </div>
+        <div class="modal-action">
+          <div class="flex gap-2">
+            <button type="button" class="btn" onclick={() => (document.getElementById('confirmar_cadastro_func') as HTMLDialogElement)?.close()}>Cancelar</button>
+            <button type="button" class="btn btn-primary" onclick={() => { (document.getElementById('confirmar_cadastro_func') as HTMLDialogElement)?.close(); handleSubmit(); }}>Ciente</button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  </form>
 </main>
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 cf72eb7..9ec3f57 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,514 +1,330 @@
 <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();
+  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;
+    }
+  }
 
-			// 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 limparFiltro() {
+    filtro = "";
+  }
 
-	function limparFiltro() {
-		filtro = '';
-	}
+  function back() { 
+    goto("/recursos-humanos/funcionarios"); 
+  }
 
-	function back() {
-		goto('/recursos-humanos/funcionarios');
-	}
+  // 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);
+    })
+  );
 
-	// 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();
-	});
+  onMount(() => { 
+    void load(); 
+  });
 </script>
 
 <!-- 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="/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="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>
 
 <!-- Header com ícone e descrição -->
 <div class="mb-6">
-	<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 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>
 
 <!-- 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="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>
+  <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>
 {/if}
 
 <!-- Card de Filtros -->
-<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 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>
 
 <!-- Tabela de Funcionários -->
 <div class="card bg-base-100 shadow-xl">
-	<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>
+  <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>
 
-		{#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>
+    {#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>
 </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="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>
+  <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>
 </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 76a2f2c..3ea6688 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/simbolos/+page.svelte
@@ -1,440 +1,359 @@
 <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="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>
+  <!-- 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>
 
-	<!-- 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>
+  <!-- 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>
 
-	<!-- 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}
+  <!-- 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}
 
-	<!-- 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>
+  <!-- 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>
 
-	{#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}
+  {#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}
 </main>
 
 <!-- Modal de Confirmação de Exclusão -->
 <dialog id="delete_modal" class="modal">
-	<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>
+  <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>
 </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 1b6960a..59859f3 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,415 +1,431 @@
 <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);
+  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);
+  }
 
-	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);
-	}
+  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,
+      };
 
-	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
-			};
+      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: "",
+    },
+  }));
 
-			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;
-		}
-	});
+  // 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 items-center justify-center py-12">
-		<span class="loading loading-spinner loading-lg"></span>
-	</div>
+  <div class="flex justify-center items-center py-12">
+    <span class="loading loading-spinner loading-lg"></span>
+  </div>
 {:else if !simboloQuery.data}
-	<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>
+  <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>
 {:else}
-	<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
+    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.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 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>
+        {#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>
 
-						<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"
-								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 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>
 {/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 d75fa52..1396d45 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,539 +1,477 @@
 <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);
+  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);
+  }
 
-	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);
-	}
+  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,
+      };
 
-	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
-	}));
+      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 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>
+<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>
 
-	<!-- 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>
+  <!-- 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>
 
-	<!-- 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}
+  <!-- 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}
 
-	<!-- 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>
+  <!-- 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>
 
-				<!-- 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>
+        <!-- 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>
 
-				<!-- 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>
+        <!-- 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>
 
-				<!-- 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>
+        <!-- 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>
 
-		<!-- 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>
+    <!-- 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>
 
-				{#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>
+        {#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>
 
-						<!-- 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>
+            <!-- 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>
 
-					<!-- 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>
+          <!-- 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>
 
-		<!-- 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>
+    <!-- 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>
 </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 28b8fac..d6618dd 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,406 +1,424 @@
 <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 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>
+<main class="container mx-auto px-4 py-6 max-w-7xl">
+  <!-- Breadcrumb -->
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li>
+        <a href="/secretaria-executiva" class="text-primary hover:underline"
+          >Secretaria Executiva</a
+        >
+      </li>
+      <li>Gestão de Ausências</li>
+    </ul>
+  </div>
 
-	<!-- Header -->
-	<div class="mb-6">
-		<div class="flex items-center justify-between">
-			<div class="flex items-center gap-4">
-				<div class="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>
+  <!-- Header -->
+  <div class="mb-6">
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-4">
+        <div class="p-3 bg-orange-500/20 rounded-xl">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-8 w-8 text-orange-600"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </div>
+        <div>
+          <h1 class="text-3xl font-bold text-primary">Gestão de Ausências</h1>
+          <p class="text-base-content/70">
+            Visão geral de todas as solicitações de ausências
+          </p>
+        </div>
+      </div>
+      <button
+        class="btn btn-ghost gap-2"
+        onclick={() => goto("/secretaria-executiva")}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 19l-7-7m0 0l7-7m-7 7h18"
+          />
+        </svg>
+        Voltar
+      </button>
+    </div>
+  </div>
 
-	<!-- Estatísticas -->
-	<div class="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>
+  <!-- Estatísticas -->
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-base-300">
+      <div class="stat-figure text-orange-500">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-8 w-8"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
+        </svg>
+      </div>
+      <div class="stat-title">Total</div>
+      <div class="stat-value text-orange-500">{stats.total}</div>
+      <div class="stat-desc">Solicitações</div>
+    </div>
 
-		<div class="stat bg-base-100 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-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-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-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-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>
+    <div class="stat bg-base-100 shadow-lg rounded-box border border-error/30">
+      <div class="stat-figure text-error">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-8 w-8"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div class="stat-title">Reprovadas</div>
+      <div class="stat-value text-error">{stats.reprovadas}</div>
+      <div class="stat-desc">Indeferidas</div>
+    </div>
+  </div>
 
-	<!-- Filtros -->
-	<div class="card bg-base-100 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>
+  <!-- Filtros -->
+  <div class="card bg-base-100 shadow-lg mb-6">
+    <div class="card-body">
+      <h2 class="card-title text-lg mb-4">Filtros</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="form-control">
+          <label class="label" for="filtro-status">
+            <span class="label-text">Status</span>
+          </label>
+          <select
+            id="filtro-status"
+            class="select select-bordered"
+            bind:value={filtroStatus}
+          >
+            <option value="todos">Todos</option>
+            <option value="aguardando_aprovacao">Aguardando Aprovação</option>
+            <option value="aprovado">Aprovado</option>
+            <option value="reprovado">Reprovado</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
 
-	<!-- Lista de Solicitações -->
-	<div class="card bg-base-100 shadow-lg">
-		<div class="card-body">
-			<h2 class="card-title mb-4 text-lg">
-				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 text-lg mb-4">
+        Todas as Solicitações ({ausenciasFiltradas.length})
+      </h2>
 
-			{#if ausenciasFiltradas.length === 0}
-				<div class="alert">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-						class="stroke-info 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>
+      {#if ausenciasFiltradas.length === 0}
+        <div class="alert">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="stroke-info shrink-0 w-6 h-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            ></path>
+          </svg>
+          <span>Nenhuma solicitação encontrada com os filtros aplicados.</span>
+        </div>
+      {:else}
+        <div class="overflow-x-auto">
+          <table class="table table-zebra">
+            <thead>
+              <tr>
+                <th>Funcionário</th>
+                <th>Time</th>
+                <th>Período</th>
+                <th>Dias</th>
+                <th>Motivo</th>
+                <th>Status</th>
+                <th>Solicitado em</th>
+                <th>Ações</th>
+              </tr>
+            </thead>
+            <tbody>
+              {#each ausenciasFiltradas as ausencia}
+                <tr>
+                  <td class="font-semibold">
+                    {ausencia.funcionario?.nome || "N/A"}
+                  </td>
+                  <td>
+                    {#if ausencia.time}
+                      <div
+                        class="badge badge-sm font-semibold"
+                        style="background-color: {ausencia.time
+                          .cor}20; border-color: {ausencia.time
+                          .cor}; color: {ausencia.time.cor}"
+                      >
+                        {ausencia.time.nome}
+                      </div>
+                    {:else}
+                      <span class="text-base-content/50">Sem time</span>
+                    {/if}
+                  </td>
+                  <td>
+                    {new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
+                    {new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
+                  </td>
+                  <td class="font-bold">
+                    {calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
+                  </td>
+                  <td class="max-w-xs truncate" title={ausencia.motivo}>
+                    {ausencia.motivo}
+                  </td>
+                  <td>
+                    <div class={`badge ${getStatusBadge(ausencia.status)}`}>
+                      {getStatusTexto(ausencia.status)}
+                    </div>
+                  </td>
+                  <td class="text-xs">
+                    {new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
+                  </td>
+                  <td>
+                    {#if ausencia.status === "aguardando_aprovacao"}
+                      <button
+                        type="button"
+                        class="btn btn-primary btn-sm gap-2"
+                        onclick={() => selecionarSolicitacao(ausencia._id)}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          class="h-4 w-4"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                          />
+                        </svg>
+                        Ver Detalhes
+                      </button>
+                    {:else}
+                      <button
+                        type="button"
+                        class="btn btn-ghost btn-sm gap-2"
+                        onclick={() => selecionarSolicitacao(ausencia._id)}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          class="h-4 w-4"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                          />
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                          />
+                        </svg>
+                        Ver Detalhes
+                      </button>
+                    {/if}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
+    </div>
+  </div>
 </main>
 
 <!-- Modal de Aprovação -->
 {#if solicitacaoSelecionada && 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 e349a09..5afa446 100644
--- a/apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/solicitar-acesso/+page.svelte
@@ -1,347 +1,394 @@
 <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="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>
+  <!-- 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>
 
-	<!-- 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}
+  <!-- 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}
 
-	<!-- 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>
+  <!-- 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>
 
-					<!-- 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>
+          <!-- 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>
 
-					<!-- 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>
+          <!-- 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>
 
-					<!-- 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>
+          <!-- 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>
 
-				<!-- 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>
+        <!-- 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>
 
-	<!-- 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>
+  <!-- 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>
 </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 0a3cd0e..214332c 100644
--- a/apps/web/src/routes/(dashboard)/ti/monitoramento-emails/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/monitoramento-emails/+page.svelte
@@ -1,568 +1,463 @@
 <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();
+  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 });
 
-	// Criar uma chave reativa para forçar atualização das queries
-	let refreshKey = $state(0);
+  // Função para forçar refresh das queries
+  function refreshQueries() {
+    refreshKey++;
+  }
 
-	// 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 });
+  $effect(() => {
+    if (autoRefresh) {
+      refreshInterval = setInterval(() => {
+        refreshQueries();
+      }, 5000); // Refresh a cada 5 segundos
+    } else {
+      if (refreshInterval) {
+        clearInterval(refreshInterval);
+        refreshInterval = null;
+      }
+    }
 
-	// Função para forçar refresh das queries
-	function refreshQueries() {
-		refreshKey++;
-	}
+    return () => {
+      if (refreshInterval) {
+        clearInterval(refreshInterval);
+        refreshInterval = null;
+      }
+    };
+  });
 
-	$effect(() => {
-		if (autoRefresh) {
-			refreshInterval = setInterval(() => {
-				refreshQueries();
-			}, 5000); // Refresh a cada 5 segundos
-		} else {
-			if (refreshInterval) {
-				clearInterval(refreshInterval);
-				refreshInterval = null;
-			}
-		}
+  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;
+    }
+  }
 
-		return () => {
-			if (refreshInterval) {
-				clearInterval(refreshInterval);
-				refreshInterval = null;
-			}
-		};
-	});
+  function formatarData(timestamp: number | undefined): string {
+    if (!timestamp) return "-";
+    return new Date(timestamp).toLocaleString("pt-BR");
+  }
 
-	async function processarFilaManual() {
-		if (processando) return;
+  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";
+    }
+  }
 
-		try {
-			processando = true;
-			const resultado = await client.action(api.email.processarFilaEmailsManual, { limite: 10 });
+  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;
+    }
+  }
 
-			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 abrirModalDetalhes(email: Doc<"notificacoesEmail">) {
+    emailSelecionado = email;
+    modalDetalhesAberto = true;
+  }
 
-	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;
-	}
+  function fecharModalDetalhes() {
+    modalDetalhesAberto = false;
+    emailSelecionado = null;
+  }
 </script>
 
 <div class="container mx-auto p-6">
-	<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>
+  <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>
 
-	<!-- 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>
+  <!-- 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>
 
-			<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-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-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-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-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-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-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}
+      <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}
 
-	<!-- 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>
+  <!-- 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>
 
-				<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-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>
+      {#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>
 
-	<!-- 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>
+  <!-- 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>
 
-				<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>
+        <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>
 </div>
 
 <!-- Modal de Detalhes do Email -->
 {#if modalDetalhesAberto && emailSelecionado}
-	<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="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="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 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>
+        <!-- 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>
 
-					<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>
+          <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>
 
-				<!-- 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 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>
+        <!-- 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>
 
-					{#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.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.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.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.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>
+          {#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>
 
-				<!-- 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}
+        <!-- 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}
 
-				<!-- 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>
+        <!-- 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>
 
-			<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 32b2e99..274680b 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">
+		<a href={resolve('/ti')} class="btn btn-ghost">
 			<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 89f0240..f6f233c 100644
--- a/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
@@ -1,2024 +1,2271 @@
 <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 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>
+<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>
 
-	<!-- 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}
+  <!-- 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}
 
-	<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>
+  <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>
 
-				<!-- 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>
+        <!-- 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>
 
-				<!-- 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="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}
+          {#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}
 
-				<!-- 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="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>
+          {#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>
 
-							<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="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>
+            {#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>
 
-				<!-- 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>
+        <!-- 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>
 
-				<!-- 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>
+        <!-- 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>
 
-		<!-- 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>
+    <!-- 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>
 
-				{#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>
+        {#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>
 
-	<!-- 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>
+  <!-- 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>
 
-				<!-- 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="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>
+      {#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>
 
-	<!-- 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>
+  <!-- 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>
 </div>
 
 <!-- Modal Novo Template -->
 {#if modalNovoTemplateAberto}
-	<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="modal modal-open">
+    <div class="modal-box max-w-2xl">
+      <h3 class="font-bold text-lg mb-4">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" 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 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>
 {/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 5592266..8424660 100644
--- a/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/painel-permissoes/+page.svelte
@@ -1,799 +1,848 @@
 <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 { goto } from '$app/navigation';
-	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
-	type RoleRow = {
-		_id: Id<'roles'>;
-		_creationTime: number;
-		nome: string;
-		descricao: string;
-		nivel: number;
-		setor?: string;
-		customizado: boolean;
-		editavel?: boolean;
-		criadoPor?: Id<'usuarios'>;
-	};
+  import { useQuery, useConvexClient } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
+  import { goto } from "$app/navigation";
+  import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
+  type RoleRow = {
+    _id: Id<"roles">;
+    _creationTime: number;
+    nome: string;
+    descricao: string;
+    nivel: number;
+    setor?: string;
+    customizado: boolean;
+    editavel?: boolean;
+    criadoPor?: Id<"usuarios">;
+  };
 
-	const client = useConvexClient();
+  const client = useConvexClient();
 
-	// Carregar lista de roles e catálogo de recursos/ações
-	const rolesQuery = useQuery(api.roles.listar, {});
-	const catalogoQuery = useQuery(api.permissoesAcoes.listarRecursosEAcoes, {});
+  // Carregar lista de roles e catálogo de recursos/ações
+  const rolesQuery = useQuery(api.roles.listar, {});
+  const catalogoQuery = useQuery(api.permissoesAcoes.listarRecursosEAcoes, {});
 
-	let salvando = $state(false);
-	let mensagem = $state<{ tipo: 'success' | 'error'; texto: string } | null>(null);
-	let busca = $state('');
-	let filtroRole = $state('');
-	// Controla quais recursos estão expandidos (mostrando as ações) por perfil
-	// Formato: { "roleId-recurso": true/false }
-	let recursosExpandidos: Record<string, boolean> = $state({});
+  let salvando = $state(false);
+  let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(
+    null,
+  );
+  let busca = $state("");
+  let filtroRole = $state("");
+  // Controla quais recursos estão expandidos (mostrando as ações) por perfil
+  // Formato: { "roleId-recurso": true/false }
+  let recursosExpandidos: Record<string, boolean> = $state({});
 
-	// Gerenciamento de Perfis
-	let modalGerenciarPerfisAberto = $state(false);
-	let perfilSendoEditado = $state<RoleRow | null>(null);
-	let nomeNovoPerfil = $state('');
-	let descricaoNovoPerfil = $state('');
-	let nivelNovoPerfil = $state(3);
-	let processando = $state(false);
+  // Gerenciamento de Perfis
+  let modalGerenciarPerfisAberto = $state(false);
+  let perfilSendoEditado = $state<RoleRow | null>(null);
+  let nomeNovoPerfil = $state("");
+  let descricaoNovoPerfil = $state("");
+  let nivelNovoPerfil = $state(3);
+  let processando = $state(false);
 
-	// Cache de permissões por role
-	let permissoesPorRole: Record<string, Array<{ recurso: string; acoes: Array<string> }>> = $state(
-		{}
-	);
+  // Cache de permissões por role
+  let permissoesPorRole: Record<
+    string,
+    Array<{ recurso: string; acoes: Array<string> }>
+  > = $state({});
 
-	async function carregarPermissoesRole(roleId: Id<'roles'>) {
-		if (permissoesPorRole[roleId]) return;
-		const dados = await client.query(api.permissoesAcoes.listarPermissoesAcoesPorRole, { roleId });
-		permissoesPorRole[roleId] = dados;
-	}
+  async function carregarPermissoesRole(roleId: Id<"roles">) {
+    if (permissoesPorRole[roleId]) return;
+    const dados = await client.query(
+      api.permissoesAcoes.listarPermissoesAcoesPorRole,
+      { roleId },
+    );
+    permissoesPorRole[roleId] = dados;
+  }
 
-	function toggleRecurso(roleId: Id<'roles'>, recurso: string) {
-		const key = `${roleId}-${recurso}`;
-		recursosExpandidos[key] = !recursosExpandidos[key];
-	}
+  function toggleRecurso(roleId: Id<"roles">, recurso: string) {
+    const key = `${roleId}-${recurso}`;
+    recursosExpandidos[key] = !recursosExpandidos[key];
+  }
 
-	function isRecursoExpandido(roleId: Id<'roles'>, recurso: string) {
-		const key = `${roleId}-${recurso}`;
-		return recursosExpandidos[key] ?? false;
-	}
+  function isRecursoExpandido(roleId: Id<"roles">, recurso: string) {
+    const key = `${roleId}-${recurso}`;
+    return recursosExpandidos[key] ?? false;
+  }
 
-	function mostrarMensagem(tipo: 'success' | 'error', texto: string) {
-		mensagem = { tipo, texto };
-		setTimeout(() => {
-			mensagem = null;
-		}, 3000);
-	}
+  function mostrarMensagem(tipo: "success" | "error", texto: string) {
+    mensagem = { tipo, texto };
+    setTimeout(() => {
+      mensagem = null;
+    }, 3000);
+  }
 
-	const rolesFiltradas = $derived.by(() => {
-		if (!rolesQuery.data) return [];
-		let rs = rolesQuery.data; // Removed explicit type annotation
-		if (filtroRole) rs = rs.filter((r) => r._id === filtroRole); // Removed as any
-		if (busca.trim()) {
-			const b = busca.toLowerCase();
-			rs = rs.filter(
-				(r) => r.descricao.toLowerCase().includes(b) || r.nome.toLowerCase().includes(b)
-			);
-		}
-		return rs;
-	});
+  const rolesFiltradas = $derived.by(() => {
+    if (!rolesQuery.data) return [];
+    let rs = rolesQuery.data; // Removed explicit type annotation
+    if (filtroRole) rs = rs.filter((r) => r._id === filtroRole); // Removed as any
+    if (busca.trim()) {
+      const b = busca.toLowerCase();
+      rs = rs.filter(
+        (r) =>
+          r.descricao.toLowerCase().includes(b) ||
+          r.nome.toLowerCase().includes(b),
+      );
+    }
+    return rs;
+  });
 
-	// Carregar permissões para todos os perfis filtrados quando necessário
-	$effect(() => {
-		if (rolesFiltradas && catalogoQuery.data) {
-			for (const roleRow of rolesFiltradas) {
-				if (roleRow.nivel > 1) {
-					carregarPermissoesRole(roleRow._id);
-				}
-			}
-		}
-	});
+  // Carregar permissões para todos os perfis filtrados quando necessário
+  $effect(() => {
+    if (rolesFiltradas && catalogoQuery.data) {
+      for (const roleRow of rolesFiltradas) {
+        if (roleRow.nivel > 1) {
+          carregarPermissoesRole(roleRow._id);
+        }
+      }
+    }
+  });
 
-	async function toggleAcao(roleId: Id<'roles'>, recurso: string, acao: string, conceder: boolean) {
-		try {
-			salvando = true;
-			await client.mutation(api.permissoesAcoes.atualizarPermissaoAcao, {
-				roleId,
-				recurso,
-				acao,
-				conceder
-			});
-			// Atualizar cache local
-			const atual = permissoesPorRole[roleId] || [];
-			const entry = atual.find((e) => e.recurso === recurso);
-			if (entry) {
-				const set = new Set(entry.acoes);
-				if (conceder) set.add(acao);
-				else set.delete(acao);
-				entry.acoes = Array.from(set);
-			} else {
-				permissoesPorRole[roleId] = [...atual, { recurso, acoes: conceder ? [acao] : [] }];
-			}
-			mostrarMensagem('success', 'Permissão atualizada com sucesso!');
-		} catch (error: unknown) {
-			// Changed to unknown
-			const message = error instanceof Error ? error.message : 'Erro ao atualizar permissão';
-			mostrarMensagem('error', message);
-		} finally {
-			salvando = false;
-		}
-	}
+  async function toggleAcao(
+    roleId: Id<"roles">,
+    recurso: string,
+    acao: string,
+    conceder: boolean,
+  ) {
+    try {
+      salvando = true;
+      await client.mutation(api.permissoesAcoes.atualizarPermissaoAcao, {
+        roleId,
+        recurso,
+        acao,
+        conceder,
+      });
+      // Atualizar cache local
+      const atual = permissoesPorRole[roleId] || [];
+      const entry = atual.find((e) => e.recurso === recurso);
+      if (entry) {
+        const set = new Set(entry.acoes);
+        if (conceder) set.add(acao);
+        else set.delete(acao);
+        entry.acoes = Array.from(set);
+      } else {
+        permissoesPorRole[roleId] = [
+          ...atual,
+          { recurso, acoes: conceder ? [acao] : [] },
+        ];
+      }
+      mostrarMensagem("success", "Permissão atualizada com sucesso!");
+    } catch (error: unknown) {
+      // Changed to unknown
+      const message =
+        error instanceof Error ? error.message : "Erro ao atualizar permissão";
+      mostrarMensagem("error", message);
+    } finally {
+      salvando = false;
+    }
+  }
 
-	function isConcedida(roleId: Id<'roles'>, recurso: string, acao: string) {
-		const dados = permissoesPorRole[roleId];
-		const entry = dados?.find((e) => e.recurso === recurso);
-		return entry ? entry.acoes.includes(acao) : false;
-	}
+  function isConcedida(roleId: Id<"roles">, recurso: string, acao: string) {
+    const dados = permissoesPorRole[roleId];
+    const entry = dados?.find((e) => e.recurso === recurso);
+    return entry ? entry.acoes.includes(acao) : false;
+  }
 
-	function abrirModalCriarPerfil() {
-		nomeNovoPerfil = '';
-		descricaoNovoPerfil = '';
-		nivelNovoPerfil = 3; // Default to a common level
-		perfilSendoEditado = null;
-		modalGerenciarPerfisAberto = true;
-	}
+  function abrirModalCriarPerfil() {
+    nomeNovoPerfil = "";
+    descricaoNovoPerfil = "";
+    nivelNovoPerfil = 3; // Default to a common level
+    perfilSendoEditado = null;
+    modalGerenciarPerfisAberto = true;
+  }
 
-	function prepararEdicaoPerfil(role: RoleRow) {
-		perfilSendoEditado = role;
-		nomeNovoPerfil = role.nome;
-		descricaoNovoPerfil = role.descricao;
-		nivelNovoPerfil = role.nivel;
-		modalGerenciarPerfisAberto = true;
-	}
+  function prepararEdicaoPerfil(role: RoleRow) {
+    perfilSendoEditado = role;
+    nomeNovoPerfil = role.nome;
+    descricaoNovoPerfil = role.descricao;
+    nivelNovoPerfil = role.nivel;
+    modalGerenciarPerfisAberto = true;
+  }
 
-	function fecharModalGerenciarPerfis() {
-		modalGerenciarPerfisAberto = false;
-		perfilSendoEditado = null;
-	}
+  function fecharModalGerenciarPerfis() {
+    modalGerenciarPerfisAberto = false;
+    perfilSendoEditado = null;
+  }
 
-	async function criarNovoPerfil() {
-		if (!nomeNovoPerfil.trim()) return;
+  async function criarNovoPerfil() {
+    if (!nomeNovoPerfil.trim()) return;
 
-		processando = true;
-		try {
-			const result = await client.mutation(api.roles.criar, {
-				nome: nomeNovoPerfil.trim(),
-				descricao: descricaoNovoPerfil.trim(),
-				nivel: nivelNovoPerfil,
-				customizado: true
-			});
+    processando = true;
+    try {
+      const result = await client.mutation(api.roles.criar, {
+        nome: nomeNovoPerfil.trim(),
+        descricao: descricaoNovoPerfil.trim(),
+        nivel: nivelNovoPerfil,
+        customizado: true,
+      });
 
-			if (result.sucesso) {
-				mostrarMensagem('success', 'Perfil criado com sucesso!');
-				nomeNovoPerfil = '';
-				descricaoNovoPerfil = '';
-				nivelNovoPerfil = 3;
-				fecharModalGerenciarPerfis();
-				if (rolesQuery.refetch) {
-					// Verificação para garantir que refetch existe
-					rolesQuery.refetch(); // Atualiza a lista de perfis
-				}
-			} else {
-				mostrarMensagem('error', `Erro ao criar perfil: ${result.erro}`);
-			}
-		} catch (error: unknown) {
-			const message = error instanceof Error ? error.message : String(error);
-			mostrarMensagem('error', `Erro ao criar perfil: ${message}`);
-		} finally {
-			processando = false;
-		}
-	}
+      if (result.sucesso) {
+        mostrarMensagem("success", "Perfil criado com sucesso!");
+        nomeNovoPerfil = "";
+        descricaoNovoPerfil = "";
+        nivelNovoPerfil = 3;
+        fecharModalGerenciarPerfis();
+        if (rolesQuery.refetch) {
+          // Verificação para garantir que refetch existe
+          rolesQuery.refetch(); // Atualiza a lista de perfis
+        }
+      } else {
+        mostrarMensagem("error", `Erro ao criar perfil: ${result.erro}`);
+      }
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      mostrarMensagem("error", `Erro ao criar perfil: ${message}`);
+    } finally {
+      processando = false;
+    }
+  }
 
-	async function editarPerfil() {
-		if (!perfilSendoEditado || !nomeNovoPerfil.trim()) return;
+  async function editarPerfil() {
+    if (!perfilSendoEditado || !nomeNovoPerfil.trim()) return;
 
-		processando = true;
-		try {
-			const result = await client.mutation(api.roles.atualizar, {
-				roleId: perfilSendoEditado._id,
-				nome: nomeNovoPerfil.trim(),
-				descricao: descricaoNovoPerfil.trim(),
-				nivel: nivelNovoPerfil,
-				setor: perfilSendoEditado.setor // Manter setor existente
-			});
+    processando = true;
+    try {
+      const result = await client.mutation(api.roles.atualizar, {
+        roleId: perfilSendoEditado._id,
+        nome: nomeNovoPerfil.trim(),
+        descricao: descricaoNovoPerfil.trim(),
+        nivel: nivelNovoPerfil,
+        setor: perfilSendoEditado.setor, // Manter setor existente
+      });
 
-			if (result.sucesso) {
-				mostrarMensagem('success', 'Perfil atualizado com sucesso!');
-				fecharModalGerenciarPerfis();
-				if (rolesQuery.refetch) {
-					// Verificação para garantir que refetch existe
-					rolesQuery.refetch(); // Atualiza a lista de perfis
-				}
-			} else {
-				mostrarMensagem('error', `Erro ao atualizar perfil: ${result.erro}`);
-			}
-		} catch (error: unknown) {
-			const message = error instanceof Error ? error.message : String(error);
-			mostrarMensagem('error', `Erro ao atualizar perfil: ${message}`);
-		} finally {
-			processando = false;
-		}
-	}
+      if (result.sucesso) {
+        mostrarMensagem("success", "Perfil atualizado com sucesso!");
+        fecharModalGerenciarPerfis();
+        if (rolesQuery.refetch) {
+          // Verificação para garantir que refetch existe
+          rolesQuery.refetch(); // Atualiza a lista de perfis
+        }
+      } else {
+        mostrarMensagem("error", `Erro ao atualizar perfil: ${result.erro}`);
+      }
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      mostrarMensagem("error", `Erro ao atualizar perfil: ${message}`);
+    } finally {
+      processando = false;
+    }
+  }
 </script>
 
-<ProtectedRoute allowedRoles={['ti_master', 'admin']} 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">Gerenciar Perfis & Permissões</li>
-		</ul>
-	</div>
+<ProtectedRoute allowedRoles={["ti_master", "admin"]} 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">Gerenciar Perfis & Permissões</li>
+    </ul>
+  </div>
 
-	<!-- Header -->
-	<div class="mb-6">
-		<div class="mb-2 flex items-center gap-3">
-			<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="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>
-			</div>
-			<div class="flex-1">
-				<h1 class="text-base-content text-3xl font-bold">
-					Gerenciar Perfis & Permissões de Acesso
-				</h1>
-				<p class="text-base-content/60 mt-1">
-					Configure as permissões de acesso aos menus do sistema por função
-				</p>
-			</div>
-			<button class="btn btn-primary gap-2" onclick={abrirModalCriarPerfil}>
-				<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 Novo Perfil
-			</button>
-			<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>
+  <!-- Header -->
+  <div class="mb-6">
+    <div class="flex items-center gap-3 mb-2">
+      <div class="p-3 bg-primary/10 rounded-xl">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-8 w-8 text-primary"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 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>
+      </div>
+      <div class="flex-1">
+        <h1 class="text-3xl font-bold text-base-content">
+          Gerenciar Perfis & Permissões de Acesso
+        </h1>
+        <p class="text-base-content/60 mt-1">
+          Configure as permissões de acesso aos menus do sistema por função
+        </p>
+      </div>
+      <button class="btn btn-primary gap-2" onclick={abrirModalCriarPerfil}>
+        <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 Novo Perfil
+      </button>
+      <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>
 
-	<!-- Alertas -->
-	{#if mensagem}
-		<div
-			class="alert mb-6 shadow-lg"
-			class:alert-success={mensagem.tipo === 'success'}
-			class:alert-error={mensagem.tipo === 'error'}
-		>
-			{#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}
-				<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">{mensagem.texto}</span>
-		</div>
-	{/if}
+  <!-- Alertas -->
+  {#if mensagem}
+    <div
+      class="alert mb-6 shadow-lg"
+      class:alert-success={mensagem.tipo === "success"}
+      class:alert-error={mensagem.tipo === "error"}
+    >
+      {#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}
+        <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">{mensagem.texto}</span>
+    </div>
+  {/if}
 
-	<!-- Filtros e Busca -->
-	<div class="card bg-base-100 mb-6 shadow-xl">
-		<div class="card-body">
-			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-				<!-- Busca por menu -->
-				<div class="form-control">
-					<label class="label" for="busca">
-						<span class="label-text font-semibold">Buscar Perfil</span>
-					</label>
-					<div class="relative">
-						<input
-							id="busca"
-							type="text"
-							placeholder="Digite o nome/descrição do perfil..."
-							class="input input-bordered w-full pr-10"
-							bind:value={busca}
-						/>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="text-base-content/40 absolute top-3.5 right-3 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>
-				</div>
+  <!-- Filtros e Busca -->
+  <div class="card bg-base-100 shadow-xl mb-6">
+    <div class="card-body">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <!-- Busca por menu -->
+        <div class="form-control">
+          <label class="label" for="busca">
+            <span class="label-text font-semibold">Buscar Perfil</span>
+          </label>
+          <div class="relative">
+            <input
+              id="busca"
+              type="text"
+              placeholder="Digite o nome/descrição do perfil..."
+              class="input input-bordered w-full pr-10"
+              bind:value={busca}
+            />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5 absolute right-3 top-3.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>
+        </div>
 
-				<!-- Filtro por perfil -->
-				<div class="form-control">
-					<label class="label" for="filtroRole">
-						<span class="label-text font-semibold">Filtrar por Perfil</span>
-					</label>
-					<select id="filtroRole" class="select select-bordered w-full" bind:value={filtroRole}>
-						<option value="">Todos os perfis</option>
-						{#if rolesQuery.data}
-							{#each rolesQuery.data as roleRow}
-								<option value={roleRow._id}>
-									{roleRow.descricao} ({roleRow.nome})
-								</option>
-							{/each}
-						{/if}
-					</select>
-				</div>
-			</div>
+        <!-- Filtro por perfil -->
+        <div class="form-control">
+          <label class="label" for="filtroRole">
+            <span class="label-text font-semibold">Filtrar por Perfil</span>
+          </label>
+          <select
+            id="filtroRole"
+            class="select select-bordered w-full"
+            bind:value={filtroRole}
+          >
+            <option value="">Todos os perfis</option>
+            {#if rolesQuery.data}
+              {#each rolesQuery.data as roleRow}
+                <option value={roleRow._id}>
+                  {roleRow.descricao} ({roleRow.nome})
+                </option>
+              {/each}
+            {/if}
+          </select>
+        </div>
+      </div>
 
-			{#if busca || filtroRole}
-				<div class="mt-2 flex items-center gap-2">
-					<span class="text-base-content/60 text-sm">Filtros ativos:</span>
-					{#if busca}
-						<div class="badge badge-primary gap-2">
-							Busca: {busca}
-							<button class="btn btn-xs" onclick={() => (busca = '')} aria-label="Limpar busca">
-								✕
-							</button>
-						</div>
-					{/if}
-					{#if filtroRole}
-						<div class="badge badge-secondary gap-2">
-							Perfil filtrado
-							<button
-								class="btn btn-xs"
-								onclick={() => (filtroRole = '')}
-								aria-label="Limpar filtro"
-							>
-								✕
-							</button>
-						</div>
-					{/if}
-				</div>
-			{/if}
-		</div>
-	</div>
+      {#if busca || filtroRole}
+        <div class="flex items-center gap-2 mt-2">
+          <span class="text-sm text-base-content/60">Filtros ativos:</span>
+          {#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>
+            </div>
+          {/if}
+          {#if filtroRole}
+            <div class="badge badge-secondary gap-2">
+              Perfil filtrado
+              <button
+                class="btn btn-ghost btn-xs"
+                onclick={() => (filtroRole = "")}
+                aria-label="Limpar filtro"
+              >
+                ✕
+              </button>
+            </div>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  </div>
 
-	<!-- Informações sobre o sistema de permissões -->
-	<div class="alert 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"
-		>
-			<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="text-lg font-bold">Como funciona o sistema de permissões:</h3>
-			<div class="mt-3 grid grid-cols-1 gap-3 md:grid-cols-2">
-				<div>
-					<h4 class="text-sm font-semibold">Tipos de Permissão:</h4>
-					<ul class="mt-1 space-y-1 text-sm">
-						<li>
-							• <strong>Acessar:</strong> Visualizar menu e acessar página
-						</li>
-						<li>• <strong>Consultar:</strong> Ver dados (requer "Acessar")</li>
-						<li>
-							• <strong>Gravar:</strong> Criar/editar/excluir (requer "Consultar")
-						</li>
-					</ul>
-				</div>
-				<div>
-					<h4 class="text-sm font-semibold">Perfis Especiais:</h4>
-					<ul class="mt-1 space-y-1 text-sm">
-						<li>• <strong>Admin e TI:</strong> Acesso total automático</li>
-						<li>• <strong>Dashboard:</strong> Público para todos</li>
-						<li>
-							• <strong>Perfil Customizado:</strong> Permissões personalizadas
-						</li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</div>
+  <!-- Informações sobre o sistema de permissões -->
+  <div class="alert 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"
+    >
+      <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 text-lg">Como funciona o sistema de permissões:</h3>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
+        <div>
+          <h4 class="font-semibold text-sm">Tipos de Permissão:</h4>
+          <ul class="text-sm mt-1 space-y-1">
+            <li>
+              • <strong>Acessar:</strong> Visualizar menu e acessar página
+            </li>
+            <li>• <strong>Consultar:</strong> Ver dados (requer "Acessar")</li>
+            <li>
+              • <strong>Gravar:</strong> Criar/editar/excluir (requer "Consultar")
+            </li>
+          </ul>
+        </div>
+        <div>
+          <h4 class="font-semibold text-sm">Perfis Especiais:</h4>
+          <ul class="text-sm mt-1 space-y-1">
+            <li>• <strong>Admin e TI:</strong> Acesso total automático</li>
+            <li>• <strong>Dashboard:</strong> Público para todos</li>
+            <li>
+              • <strong>Perfil Customizado:</strong> Permissões personalizadas
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
 
-	<!-- Matriz de Permissões por Ação -->
-	{#if rolesQuery.isLoading || catalogoQuery.isLoading}
-		<div class="flex items-center justify-center py-12">
-			<span class="loading loading-spinner loading-lg text-primary"></span>
-		</div>
-	{:else if rolesQuery.error}
-		<div class="alert alert-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>
-			<span>Erro ao carregar perfis: {rolesQuery.error.message}</span>
-		</div>
-	{:else if rolesQuery.data && catalogoQuery.data}
-		{#if rolesFiltradas.length === 0}
-			<div class="card bg-base-100 shadow-xl">
-				<div class="card-body items-center 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-						/>
-					</svg>
-					<h3 class="mt-4 text-xl font-bold">Nenhum resultado encontrado</h3>
-					<p class="text-base-content/60">
-						{busca
-							? `Não foram encontrados perfis com "${busca}"`
-							: 'Nenhum perfil corresponde aos filtros aplicados'}
-					</p>
-					<button
-						class="btn btn-primary btn-sm mt-4"
-						onclick={() => {
-							busca = '';
-							filtroRole = '';
-						}}
-					>
-						Limpar Filtros
-					</button>
-				</div>
-			</div>
-		{/if}
+  <!-- Matriz de Permissões por Ação -->
+  {#if rolesQuery.isLoading || catalogoQuery.isLoading}
+    <div class="flex justify-center items-center py-12">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+    </div>
+  {:else if rolesQuery.error}
+    <div class="alert alert-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>
+      <span>Erro ao carregar perfis: {rolesQuery.error.message}</span>
+    </div>
+  {:else if rolesQuery.data && catalogoQuery.data}
+    {#if rolesFiltradas.length === 0}
+      <div class="card bg-base-100 shadow-xl">
+        <div class="card-body items-center 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            />
+          </svg>
+          <h3 class="text-xl font-bold mt-4">Nenhum resultado encontrado</h3>
+          <p class="text-base-content/60">
+            {busca
+              ? `Não foram encontrados perfis com "${busca}"`
+              : "Nenhum perfil corresponde aos filtros aplicados"}
+          </p>
+          <button
+            class="btn btn-primary btn-sm mt-4"
+            onclick={() => {
+              busca = "";
+              filtroRole = "";
+            }}
+          >
+            Limpar Filtros
+          </button>
+        </div>
+      </div>
+    {/if}
 
-		{#each rolesFiltradas as roleRow}
-			{@const roleId = roleRow._id}
-			<div class="card bg-base-100 mb-6 shadow-xl">
-				<div class="card-body">
-					<div class="mb-4 flex flex-wrap items-center justify-between gap-4">
-						<div class="min-w-[200px] flex-1">
-							<div class="mb-2 flex items-center gap-3">
-								<h2 class="card-title text-2xl">{roleRow.descricao}</h2>
-								<div class="badge badge-lg badge-primary">
-									Nível {roleRow.nivel}
-								</div>
-								{#if roleRow.nivel <= 1}
-									<div class="badge badge-lg badge-success gap-1">
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="h-4 w-4"
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke="currentColor"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-											/>
-										</svg>
-										Acesso Total
-									</div>
-								{/if}
-							</div>
-							<p class="text-base-content/60 text-sm">
-								<span class="bg-base-200 rounded px-2 py-1 font-mono">{roleRow.nome}</span>
-							</p>
-						</div>
-						<div class="flex items-center gap-2">
-							<button
-								type="button"
-								class="btn btn-outline btn-sm"
-								onclick={() => prepararEdicaoPerfil(roleRow)}
-							>
-								Editar
-							</button>
-						</div>
-					</div>
+    {#each rolesFiltradas as roleRow}
+      {@const roleId = roleRow._id}
+      <div class="card bg-base-100 shadow-xl mb-6">
+        <div class="card-body">
+          <div class="flex items-center justify-between mb-4 flex-wrap gap-4">
+            <div class="flex-1 min-w-[200px]">
+              <div class="flex items-center gap-3 mb-2">
+                <h2 class="card-title text-2xl">{roleRow.descricao}</h2>
+                <div class="badge badge-lg badge-primary">
+                  Nível {roleRow.nivel}
+                </div>
+                {#if roleRow.nivel <= 1}
+                  <div class="badge badge-lg badge-success gap-1">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                    Acesso Total
+                  </div>
+                {/if}
+              </div>
+              <p class="text-sm text-base-content/60">
+                <span class="font-mono bg-base-200 px-2 py-1 rounded"
+                  >{roleRow.nome}</span
+                >
+              </p>
+            </div>
+            <div class="flex items-center gap-2">
+              <button
+                type="button"
+                class="btn btn-outline btn-sm"
+                onclick={() => prepararEdicaoPerfil(roleRow)}
+              >
+                Editar
+              </button>
+            </div>
+          </div>
 
-					{#if roleRow.nivel <= 1}
-						<div class="alert alert-success shadow-md">
-							<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>
-								<h3 class="font-bold">Perfil Administrativo</h3>
-								<div class="text-sm">
-									Este perfil possui acesso total ao sistema automaticamente, sem necessidade de
-									configuração manual.
-								</div>
-							</div>
-						</div>
-					{:else if catalogoQuery.data}
-						<div class="space-y-2">
-							{#each catalogoQuery.data as item}
-								{@const recursoExpandido = isRecursoExpandido(roleId, item.recurso)}
-								<div class="border-base-300 overflow-hidden rounded-lg border">
-									<!-- Cabeçalho do recurso (clicável) -->
-									<button
-										type="button"
-										class="bg-base-200 hover:bg-base-300 flex w-full items-center justify-between px-4 py-3 transition-colors"
-										onclick={() => toggleRecurso(roleId, item.recurso)}
-										disabled={salvando}
-									>
-										<span class="text-lg font-semibold">{item.recurso}</span>
-										<svg
-											xmlns="http://www.w3.org/2000/svg"
-											class="h-5 w-5 transition-transform"
-											class:rotate-180={recursoExpandido}
-											fill="none"
-											viewBox="0 0 24 24"
-											stroke="currentColor"
-										>
-											<path
-												stroke-linecap="round"
-												stroke-linejoin="round"
-												stroke-width="2"
-												d="M19 9l-7 7-7-7"
-											/>
-										</svg>
-									</button>
+          {#if roleRow.nivel <= 1}
+            <div class="alert alert-success shadow-md">
+              <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>
+                <h3 class="font-bold">Perfil Administrativo</h3>
+                <div class="text-sm">
+                  Este perfil possui acesso total ao sistema automaticamente,
+                  sem necessidade de configuração manual.
+                </div>
+              </div>
+            </div>
+          {:else if catalogoQuery.data}
+            <div class="space-y-2">
+              {#each catalogoQuery.data as item}
+                {@const recursoExpandido = isRecursoExpandido(
+                  roleId,
+                  item.recurso,
+                )}
+                <div class="border border-base-300 rounded-lg overflow-hidden">
+                  <!-- Cabeçalho do recurso (clicável) -->
+                  <button
+                    type="button"
+                    class="w-full px-4 py-3 bg-base-200 hover:bg-base-300 transition-colors flex items-center justify-between"
+                    onclick={() => toggleRecurso(roleId, item.recurso)}
+                    disabled={salvando}
+                  >
+                    <span class="font-semibold text-lg">{item.recurso}</span>
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      class="h-5 w-5 transition-transform"
+                      class:rotate-180={recursoExpandido}
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M19 9l-7 7-7-7"
+                      />
+                    </svg>
+                  </button>
 
-									<!-- Lista de ações (visível quando expandido) -->
-									{#if recursoExpandido}
-										<div class="bg-base-100 border-base-300 border-t px-4 py-3">
-											<div class="space-y-2">
-												{#each ['ver', 'listar', 'criar', 'editar', 'excluir'] as acao}
-													<label
-														class="hover:bg-base-200 flex cursor-pointer items-center gap-3 rounded p-2 transition-colors"
-													>
-														<input
-															type="checkbox"
-															class="checkbox checkbox-primary"
-															checked={isConcedida(roleId, item.recurso, acao)}
-															disabled={salvando}
-															onchange={(e) =>
-																toggleAcao(roleId, item.recurso, acao, e.currentTarget.checked)}
-														/>
-														<span class="flex-1 font-medium capitalize">{acao}</span>
-													</label>
-												{/each}
-											</div>
-										</div>
-									{/if}
-								</div>
-							{/each}
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/each}
-	{/if}
+                  <!-- Lista de ações (visível quando expandido) -->
+                  {#if recursoExpandido}
+                    <div class="px-4 py-3 bg-base-100 border-t border-base-300">
+                      <div class="space-y-2">
+                        {#each ["ver", "listar", "criar", "editar", "excluir"] as acao}
+                          <label
+                            class="flex items-center gap-3 cursor-pointer hover:bg-base-200 p-2 rounded transition-colors"
+                          >
+                            <input
+                              type="checkbox"
+                              class="checkbox checkbox-primary"
+                              checked={isConcedida(roleId, item.recurso, acao)}
+                              disabled={salvando}
+                              onchange={(e) =>
+                                toggleAcao(
+                                  roleId,
+                                  item.recurso,
+                                  acao,
+                                  e.currentTarget.checked,
+                                )}
+                            />
+                            <span class="flex-1 capitalize font-medium"
+                              >{acao}</span
+                            >
+                          </label>
+                        {/each}
+                      </div>
+                    </div>
+                  {/if}
+                </div>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  {/if}
 
-	<!-- Modal Gerenciar Perfis -->
-	{#if modalGerenciarPerfisAberto}
-		<dialog class="modal modal-open">
-			<div
-				class="modal-box border-base-200/60 bg-base-200/40 w-full max-w-4xl overflow-hidden border p-0 shadow-2xl"
-			>
-				<div
-					class="from-primary via-primary/90 to-secondary/80 text-base-100 relative bg-linear-to-r px-8 py-6"
-				>
-					<button
-						type="button"
-						class="btn btn-sm btn-circle btn-ghost text-base-100/80 hover:text-base-100 absolute top-4 right-4"
-						onclick={fecharModalGerenciarPerfis}
-						aria-label="Fechar modal"
-					>
-						✕
-					</button>
+  <!-- Modal Gerenciar Perfis -->
+  {#if modalGerenciarPerfisAberto}
+    <dialog class="modal modal-open">
+      <div
+        class="modal-box max-w-4xl w-full overflow-hidden border border-base-200/60 bg-base-200/40 p-0 shadow-2xl"
+      >
+        <div
+          class="relative bg-linear-to-r from-primary via-primary/90 to-secondary/80 px-8 py-6 text-base-100"
+        >
+          <button
+            type="button"
+            class="btn btn-sm btn-circle btn-ghost absolute right-4 top-4 text-base-100/80 hover:text-base-100"
+            onclick={fecharModalGerenciarPerfis}
+            aria-label="Fechar modal"
+          >
+            ✕
+          </button>
 
-					<h3 class="text-3xl font-black tracking-tight">Gerenciar Perfis de Acesso</h3>
-					<p class="text-base-100/80 mt-2 max-w-2xl text-sm md:text-base">
-						{perfilSendoEditado
-							? 'Atualize as informações do perfil selecionado para manter a governança de acesso alinhada com as diretrizes do sistema.'
-							: 'Crie um novo perfil de acesso definindo nome, descrição e nível hierárquico conforme os padrões adotados pela Secretaria.'}
-					</p>
-				</div>
+          <h3 class="text-3xl font-black tracking-tight">
+            Gerenciar Perfis de Acesso
+          </h3>
+          <p class="mt-2 max-w-2xl text-sm text-base-100/80 md:text-base">
+            {perfilSendoEditado
+              ? "Atualize as informações do perfil selecionado para manter a governança de acesso alinhada com as diretrizes do sistema."
+              : "Crie um novo perfil de acesso definindo nome, descrição e nível hierárquico conforme os padrões adotados pela Secretaria."}
+          </p>
+        </div>
 
-				<div class="bg-base-100 px-8 py-6">
-					<section
-						class="border-base-200/60 bg-base-100 space-y-6 rounded-2xl border p-6 shadow-sm"
-					>
-						<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-							<div class="space-y-1">
-								<h4 class="text-base-content text-xl font-semibold">
-									{perfilSendoEditado ? 'Editar Perfil' : 'Criar Novo Perfil'}
-								</h4>
-								<p class="text-base-content/70 text-sm">
-									{perfilSendoEditado
-										? 'Os campos bloqueados indicam atributos padronizados do sistema. Ajuste apenas o que estiver disponível.'
-										: 'Preencha as informações com atenção para garantir que o novo perfil siga o padrão institucional.'}
-								</p>
-							</div>
+        <div class="bg-base-100 px-8 py-6">
+          <section
+            class="space-y-6 rounded-2xl border border-base-200/60 bg-base-100 p-6 shadow-sm"
+          >
+            <div
+              class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
+            >
+              <div class="space-y-1">
+                <h4 class="text-xl font-semibold text-base-content">
+                  {perfilSendoEditado ? "Editar Perfil" : "Criar Novo Perfil"}
+                </h4>
+                <p class="text-sm text-base-content/70">
+                  {perfilSendoEditado
+                    ? "Os campos bloqueados indicam atributos padronizados do sistema. Ajuste apenas o que estiver disponível."
+                    : "Preencha as informações com atenção para garantir que o novo perfil siga o padrão institucional."}
+                </p>
+              </div>
 
-							{#if perfilSendoEditado}
-								<span
-									class="badge badge-outline badge-primary badge-lg flex flex-col items-center gap-1 self-start px-5 py-3 text-center"
-								>
-									<span class="text-primary text-[11px] font-semibold tracking-[0.32em] uppercase">
-										Nível atual
-									</span>
-									<span class="text-primary text-2xl leading-none font-bold">
-										{perfilSendoEditado.nivel}
-									</span>
-								</span>
-							{/if}
-						</div>
+              {#if perfilSendoEditado}
+                <span
+                  class="badge badge-outline badge-primary badge-lg self-start flex flex-col items-center gap-1 px-5 py-3 text-center"
+                >
+                  <span
+                    class="text-[11px] font-semibold uppercase tracking-[0.32em] text-primary"
+                  >
+                    Nível atual
+                  </span>
+                  <span class="text-2xl font-bold leading-none text-primary">
+                    {perfilSendoEditado.nivel}
+                  </span>
+                </span>
+              {/if}
+            </div>
 
-						<div class="grid gap-6 md:grid-cols-2">
-							<div class="form-control md:col-span-2">
-								<label class="label" for="nome-perfil-input">
-									<span class="label-text">Nome do Perfil *</span>
-								</label>
-								<input
-									id="nome-perfil-input"
-									type="text"
-									bind:value={nomeNovoPerfil}
-									class="input input-bordered input-primary"
-									placeholder="Ex: RH, Financeiro, Gestor"
-									disabled={perfilSendoEditado !== null && !perfilSendoEditado.customizado}
-								/>
-							</div>
+            <div class="grid gap-6 md:grid-cols-2">
+              <div class="form-control md:col-span-2">
+                <label class="label" for="nome-perfil-input">
+                  <span class="label-text">Nome do Perfil *</span>
+                </label>
+                <input
+                  id="nome-perfil-input"
+                  type="text"
+                  bind:value={nomeNovoPerfil}
+                  class="input input-bordered input-primary"
+                  placeholder="Ex: RH, Financeiro, Gestor"
+                  disabled={perfilSendoEditado !== null &&
+                    !perfilSendoEditado.customizado}
+                />
+              </div>
 
-							<div class="form-control md:col-span-2">
-								<label class="label" for="descricao-perfil-input">
-									<span class="label-text">Descrição</span>
-								</label>
-								<textarea
-									id="descricao-perfil-input"
-									bind:value={descricaoNovoPerfil}
-									class="textarea textarea-bordered textarea-primary min-h-[120px]"
-									placeholder="Breve descrição das responsabilidades e limites de atuação deste perfil."
-								></textarea>
-							</div>
+              <div class="form-control md:col-span-2">
+                <label class="label" for="descricao-perfil-input">
+                  <span class="label-text">Descrição</span>
+                </label>
+                <textarea
+                  id="descricao-perfil-input"
+                  bind:value={descricaoNovoPerfil}
+                  class="textarea textarea-bordered textarea-primary min-h-[120px]"
+                  placeholder="Breve descrição das responsabilidades e limites de atuação deste perfil."
+                ></textarea>
+              </div>
 
-							<div class="form-control max-w-xs">
-								<label class="label" for="nivel-perfil-input">
-									<span class="label-text">Nível de Acesso (0-5) *</span>
-								</label>
-								<input
-									id="nivel-perfil-input"
-									type="number"
-									bind:value={nivelNovoPerfil}
-									min="0"
-									max="5"
-									class="input input-bordered input-secondary"
-									disabled={perfilSendoEditado !== null && !perfilSendoEditado.customizado}
-								/>
-							</div>
-						</div>
-					</section>
+              <div class="form-control max-w-xs">
+                <label class="label" for="nivel-perfil-input">
+                  <span class="label-text">Nível de Acesso (0-5) *</span>
+                </label>
+                <input
+                  id="nivel-perfil-input"
+                  type="number"
+                  bind:value={nivelNovoPerfil}
+                  min="0"
+                  max="5"
+                  class="input input-bordered input-secondary"
+                  disabled={perfilSendoEditado !== null &&
+                    !perfilSendoEditado.customizado}
+                />
+              </div>
+            </div>
+          </section>
 
-					<div
-						class="mt-8 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between"
-					>
-						<p class="text-base-content/60 text-sm">Campos marcados com * são obrigatórios.</p>
-						<div class="flex flex-wrap gap-3">
-							<button
-								type="button"
-								class="btn"
-								onclick={fecharModalGerenciarPerfis}
-								disabled={processando}
-							>
-								Cancelar
-							</button>
-							<button
-								type="button"
-								class="btn btn-primary"
-								disabled={!nomeNovoPerfil.trim() || processando}
-								onclick={perfilSendoEditado ? editarPerfil : criarNovoPerfil}
-							>
-								{#if processando}
-									<span class="loading loading-spinner"></span>
-									Processando...
-								{:else}
-									{perfilSendoEditado ? 'Salvar Alterações' : 'Criar Perfil'}
-								{/if}
-							</button>
-						</div>
-					</div>
-				</div>
-			</div>
-			<form method="dialog" class="modal-backdrop">
-				<button type="button" onclick={fecharModalGerenciarPerfis} aria-label="Fechar modal"
-					>Fechar</button
-				>
-			</form>
-		</dialog>
-	{/if}
+          <div
+            class="mt-8 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-between"
+          >
+            <p class="text-sm text-base-content/60">
+              Campos marcados com * são obrigatórios.
+            </p>
+            <div class="flex flex-wrap gap-3">
+              <button
+                type="button"
+                class="btn btn-ghost"
+                onclick={fecharModalGerenciarPerfis}
+                disabled={processando}
+              >
+                Cancelar
+              </button>
+              <button
+                type="button"
+                class="btn btn-primary"
+                disabled={!nomeNovoPerfil.trim() || processando}
+                onclick={perfilSendoEditado ? editarPerfil : criarNovoPerfil}
+              >
+                {#if processando}
+                  <span class="loading loading-spinner"></span>
+                  Processando...
+                {:else}
+                  {perfilSendoEditado ? "Salvar Alterações" : "Criar Perfil"}
+                {/if}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <form method="dialog" class="modal-backdrop">
+        <button
+          type="button"
+          onclick={fecharModalGerenciarPerfis}
+          aria-label="Fechar modal">Fechar</button
+        >
+      </form>
+    </dialog>
+  {/if}
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte b/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
index 7d3ab7d..6232f81 100644
--- a/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
@@ -1,786 +1,846 @@
 <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 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>
+<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>
 
-		<!-- 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}
+    <!-- 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}
 
-		<!-- 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>
+    <!-- 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>
 
-					<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>
+          <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>
 
-						<!-- 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-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}
+          <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}
 
-		<!-- 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>
+    <!-- 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>
 
-							<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>
+              <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>
 
-								{#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}
+                {#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}
 
-								<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="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="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>
+              <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>
 
-	<!-- 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>
+  <!-- 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>
 
-				<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>
+        <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>
 
-					<!-- 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>
+          <!-- 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>
 
-						<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>
+            <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>
 
-					<!-- 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>
+          <!-- 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>
 
-					<!-- 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>
+          <!-- 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>
 
-					<!-- 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>
+          <!-- 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>
 
-				<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}
+        <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}
 </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 5ec6985..8aaa195 100644
--- a/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
@@ -1,100 +1,107 @@
 <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="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>
+<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>
 
-	<!-- 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>
+  <!-- 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>
 </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 b63e18f..43dfb7f 100644
--- a/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
@@ -1,836 +1,694 @@
 <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();
+  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);
 
-	// Queries
-	const solicitacoesQuery = useQuery(api.solicitacoesAcesso.getAll, {});
+  // 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 [];
+  });
 
-	// 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 carregando = $derived.by(() => {
+    return solicitacoesQuery === undefined || solicitacoesQuery === null;
+  });
 
-	// Extrair dados das solicitações
-	const solicitacoes = $derived.by(() => {
-		if (solicitacoesQuery === undefined || solicitacoesQuery === null) {
-			return [];
-		}
+  // 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
+    };
+  });
 
-		if ('data' in solicitacoesQuery && solicitacoesQuery.data !== undefined) {
-			return Array.isArray(solicitacoesQuery.data) ? solicitacoesQuery.data : [];
-		}
+  // Filtrar e buscar solicitações
+  const solicitacoesFiltradas = $derived.by(() => {
+    let resultado = solicitacoes;
 
-		if (Array.isArray(solicitacoesQuery)) {
-			return solicitacoesQuery;
-		}
+    // Filtrar por status
+    if (filtroStatus !== "todos") {
+      resultado = resultado.filter(s => s.status === filtroStatus);
+    }
 
-		return [];
-	});
+    // 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)
+      );
+    }
 
-	const carregando = $derived.by(() => {
-		return solicitacoesQuery === undefined || solicitacoesQuery === null;
-	});
+    // Ordenar por data (mais recente primeiro)
+    return resultado.sort((a, b) => b.dataSolicitacao - a.dataSolicitacao);
+  });
 
-	// Estatísticas
-	const stats = $derived.by(() => {
-		if (carregando) return null;
+  // Funções auxiliares
+  function formatarData(timestamp: number): string {
+    return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
+  }
 
-		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;
+  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));
 
-		return {
-			total,
-			pendentes,
-			aprovadas,
-			rejeitadas
-		};
-	});
+    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";
+  }
 
-	// Filtrar e buscar solicitações
-	const solicitacoesFiltradas = $derived.by(() => {
-		let resultado = solicitacoes;
+  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 por status
-		if (filtroStatus !== 'todos') {
-			resultado = resultado.filter((s) => s.status === filtroStatus);
-		}
+  function getStatusTexto(status: StatusSolicitacao): string {
+    switch (status) {
+      case "pendente":
+        return "Pendente";
+      case "aprovado":
+        return "Aprovado";
+      case "rejeitado":
+        return "Rejeitado";
+      default:
+        return status;
+    }
+  }
 
-		// 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)
-			);
-		}
+  // Funções de modal
+  function abrirDetalhes(solicitacao: SolicitacaoAcesso) {
+    solicitacaoSelecionada = solicitacao;
+    modalDetalhesAberto = true;
+  }
 
-		// Ordenar por data (mais recente primeiro)
-		return resultado.sort((a, b) => b.dataSolicitacao - a.dataSolicitacao);
-	});
+  function fecharDetalhes() {
+    modalDetalhesAberto = false;
+    solicitacaoSelecionada = null;
+  }
 
-	// Funções auxiliares
-	function formatarData(timestamp: number): string {
-		return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
-	}
+  function abrirAprovar(solicitacao: SolicitacaoAcesso) {
+    solicitacaoSelecionada = solicitacao;
+    observacoes = "";
+    modalAprovarAberto = true;
+  }
 
-	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 fecharAprovar() {
+    modalAprovarAberto = false;
+    solicitacaoSelecionada = null;
+    observacoes = "";
+  }
 
-		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 abrirRejeitar(solicitacao: SolicitacaoAcesso) {
+    solicitacaoSelecionada = solicitacao;
+    observacoes = "";
+    modalRejeitarAberto = true;
+  }
 
-	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';
-		}
-	}
+  function fecharRejeitar() {
+    modalRejeitarAberto = false;
+    solicitacaoSelecionada = null;
+    observacoes = "";
+  }
 
-	function getStatusTexto(status: StatusSolicitacao): string {
-		switch (status) {
-			case 'pendente':
-				return 'Pendente';
-			case 'aprovado':
-				return 'Aprovado';
-			case 'rejeitado':
-				return 'Rejeitado';
-			default:
-				return status;
-		}
-	}
+  // Funções de ação
+  async function aprovarSolicitacao() {
+    if (!solicitacaoSelecionada) return;
 
-	// Funções de modal
-	function abrirDetalhes(solicitacao: SolicitacaoAcesso) {
-		solicitacaoSelecionada = solicitacao;
-		modalDetalhesAberto = true;
-	}
+    processando = true;
+    mensagem = null;
 
-	function fecharDetalhes() {
-		modalDetalhesAberto = false;
-		solicitacaoSelecionada = null;
-	}
+    try {
+      await client.mutation(api.solicitacoesAcesso.aprovar, {
+        solicitacaoId: solicitacaoSelecionada._id,
+        observacoes: observacoes.trim() || undefined,
+      });
 
-	function abrirAprovar(solicitacao: SolicitacaoAcesso) {
-		solicitacaoSelecionada = solicitacao;
-		observacoes = '';
-		modalAprovarAberto = true;
-	}
+      mensagem = {
+        tipo: "success",
+        texto: "Solicitação aprovada com sucesso!",
+      };
 
-	function fecharAprovar() {
-		modalAprovarAberto = false;
-		solicitacaoSelecionada = null;
-		observacoes = '';
-	}
+      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 abrirRejeitar(solicitacao: SolicitacaoAcesso) {
-		solicitacaoSelecionada = solicitacao;
-		observacoes = '';
-		modalRejeitarAberto = true;
-	}
+  async function rejeitarSolicitacao() {
+    if (!solicitacaoSelecionada) return;
 
-	function fecharRejeitar() {
-		modalRejeitarAberto = false;
-		solicitacaoSelecionada = null;
-		observacoes = '';
-	}
+    processando = true;
+    mensagem = null;
 
-	// Funções de ação
-	async function aprovarSolicitacao() {
-		if (!solicitacaoSelecionada) return;
+    try {
+      await client.mutation(api.solicitacoesAcesso.rejeitar, {
+        solicitacaoId: solicitacaoSelecionada._id,
+        observacoes: observacoes.trim() || undefined,
+      });
 
-		processando = true;
-		mensagem = null;
+      mensagem = {
+        tipo: "success",
+        texto: "Solicitação rejeitada com sucesso!",
+      };
 
-		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;
-		}
-	}
+      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 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}
+<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}
 
-		<!-- 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>
+    <!-- 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>
 
-		<!-- 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"
-				/>
+    <!-- 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}
 
-				<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"
-				/>
+    <!-- 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="Aprovadas"
-					value={stats.aprovadas}
-					description={stats.total > 0
-						? ((stats.aprovadas / stats.total) * 100).toFixed(1) + '% do total'
-						: '0% do total'}
-					Icon={CheckCircle2}
-					color="success"
-				/>
+        <!-- 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="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}
+    <!-- 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}
 
-		<!-- 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 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}
 
-				<!-- 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 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}
 
-		<!-- 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>
+    <!-- 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>
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/times/+page.svelte b/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
index 1cdc8bf..f342979 100644
--- a/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
@@ -1,811 +1,873 @@
 <script lang="ts">
-	import { useConvexClient, useQuery } from 'convex-svelte';
-	import { api } from '@sgse-app/backend/convex/_generated/api';
-	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
-	import { goto } from '$app/navigation';
-	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+  import { useConvexClient, useQuery } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
+  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
+  import { goto } from "$app/navigation";
+  import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
 
-	// Tipos baseados nos retornos das queries do backend
-	type Usuario = {
-		_id: Id<'usuarios'>;
-		matricula: string;
-		nome: string;
-		email: string;
-		ativo: boolean;
-		bloqueado?: boolean;
-		motivoBloqueio?: string;
-		primeiroAcesso: boolean;
-		ultimoAcesso?: number;
-		criadoEm: number;
-		role: {
-			_id: Id<'roles'>;
-			_creationTime?: number;
-			criadoPor?: Id<'usuarios'>;
-			customizado?: boolean;
-			descricao: string;
-			editavel?: boolean;
-			nome: string;
-			nivel: number;
-			setor?: string;
-			erro?: boolean;
-		};
-		funcionario?: {
-			_id: Id<'funcionarios'>;
-			nome: string;
-			matricula?: string;
-			descricaoCargo?: string;
-			simboloTipo: 'cargo_comissionado' | 'funcao_gratificada';
-		};
-		avisos?: Array<{
-			tipo: 'erro' | 'aviso' | 'info';
-			mensagem: string;
-		}>;
-	};
+  // Tipos baseados nos retornos das queries do backend
+  type Usuario = {
+    _id: Id<"usuarios">;
+    matricula: string;
+    nome: string;
+    email: string;
+    ativo: boolean;
+    bloqueado?: boolean;
+    motivoBloqueio?: string;
+    primeiroAcesso: boolean;
+    ultimoAcesso?: number;
+    criadoEm: number;
+    role: {
+      _id: Id<"roles">;
+      _creationTime?: number;
+      criadoPor?: Id<"usuarios">;
+      customizado?: boolean;
+      descricao: string;
+      editavel?: boolean;
+      nome: string;
+      nivel: number;
+      setor?: string;
+      erro?: boolean;
+    };
+    funcionario?: {
+      _id: Id<"funcionarios">;
+      nome: string;
+      matricula?: string;
+      descricaoCargo?: string;
+      simboloTipo: "cargo_comissionado" | "funcao_gratificada";
+    };
+    avisos?: Array<{
+      tipo: "erro" | "aviso" | "info";
+      mensagem: string;
+    }>;
+  };
 
-	type Funcionario = {
-		_id: Id<'funcionarios'>;
-		nome: string;
-		matricula?: string;
-		cpf?: string;
-		rg?: string;
-		nascimento?: string;
-		email?: string;
-		telefone?: string;
-		endereco?: string;
-		cep?: string;
-		cidade?: string;
-		uf?: string;
-		simboloId: Id<'simbolos'>;
-		simboloTipo: 'cargo_comissionado' | 'funcao_gratificada';
-		admissaoData?: string;
-		desligamentoData?: string;
-		descricaoCargo?: string;
-	};
+  type Funcionario = {
+    _id: Id<"funcionarios">;
+    nome: string;
+    matricula?: string;
+    cpf?: string;
+    rg?: string;
+    nascimento?: string;
+    email?: string;
+    telefone?: string;
+    endereco?: string;
+    cep?: string;
+    cidade?: string;
+    uf?: string;
+    simboloId: Id<"simbolos">;
+    simboloTipo: "cargo_comissionado" | "funcao_gratificada";
+    admissaoData?: string;
+    desligamentoData?: string;
+    descricaoCargo?: string;
+  };
 
-	type Gestor = Doc<'usuarios'> | null;
+  type Gestor = Doc<"usuarios"> | null;
 
-	type TimeComDetalhes = Doc<'times'> & {
-		gestor: Gestor;
-		totalMembros: number;
-	};
+  type TimeComDetalhes = Doc<"times"> & {
+    gestor: Gestor;
+    totalMembros: number;
+  };
 
-	type MembroTime = Doc<'timesMembros'> & {
-		funcionario: Doc<'funcionarios'> | null;
-	};
+  type MembroTime = Doc<"timesMembros"> & {
+    funcionario: Doc<"funcionarios"> | null;
+  };
 
-	type TimeComMembros = Doc<'times'> & {
-		gestor: Gestor;
-		membros: MembroTime[];
-	};
+  type TimeComMembros = Doc<"times"> & {
+    gestor: Gestor;
+    membros: MembroTime[];
+  };
 
-	const client = useConvexClient();
+  const client = useConvexClient();
 
-	// Queries
-	const timesQuery = useQuery(api.times.listar, {});
-	const usuariosQuery = useQuery(api.usuarios.listar, {});
-	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+  // Queries
+  const timesQuery = useQuery(api.times.listar, {});
+  const usuariosQuery = useQuery(api.usuarios.listar, {});
+  const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
 
-	const times = $derived((timesQuery?.data || []) as TimeComDetalhes[]);
-	const usuarios = $derived((usuariosQuery?.data || []) as Usuario[]);
-	const funcionarios = $derived((funcionariosQuery?.data || []) as Funcionario[]);
+  const times = $derived((timesQuery?.data || []) as TimeComDetalhes[]);
+  const usuarios = $derived((usuariosQuery?.data || []) as Usuario[]);
+  const funcionarios = $derived(
+    (funcionariosQuery?.data || []) as Funcionario[],
+  );
 
-	const carregando = $derived(
-		timesQuery === undefined || usuariosQuery === undefined || funcionariosQuery === undefined
-	);
+  const carregando = $derived(
+    timesQuery === undefined ||
+      usuariosQuery === undefined ||
+      funcionariosQuery === undefined,
+  );
 
-	// Estados
-	let modoEdicao = $state(false);
-	let timeEmEdicao = $state<TimeComDetalhes | null>(null);
-	let mostrarModalMembros = $state(false);
-	let timeParaMembros = $state<TimeComMembros | null>(null);
-	let mostrarConfirmacaoExclusao = $state(false);
-	let timeParaExcluir = $state<TimeComDetalhes | null>(null);
-	let processando = $state(false);
+  // Estados
+  let modoEdicao = $state(false);
+  let timeEmEdicao = $state<TimeComDetalhes | null>(null);
+  let mostrarModalMembros = $state(false);
+  let timeParaMembros = $state<TimeComMembros | null>(null);
+  let mostrarConfirmacaoExclusao = $state(false);
+  let timeParaExcluir = $state<TimeComDetalhes | null>(null);
+  let processando = $state(false);
 
-	// Form
-	let formNome = $state('');
-	let formDescricao = $state('');
-	let formGestorId = $state('');
-	let formCor = $state('#3B82F6');
+  // Form
+  let formNome = $state("");
+  let formDescricao = $state("");
+  let formGestorId = $state("");
+  let formCor = $state("#3B82F6");
 
-	// Membros
-	let membrosDisponiveis = $derived(
-		funcionarios.filter((f: Funcionario) => {
-			// Verificar se o funcionário já está em algum time ativo
-			const jaNaEquipe = timeParaMembros?.membros?.some(
-				(m: MembroTime) => m.funcionario?._id === f._id
-			);
-			return !jaNaEquipe;
-		})
-	);
+  // Membros
+  let membrosDisponiveis = $derived(
+    funcionarios.filter((f: Funcionario) => {
+      // Verificar se o funcionário já está em algum time ativo
+      const jaNaEquipe = timeParaMembros?.membros?.some(
+        (m: MembroTime) => m.funcionario?._id === f._id,
+      );
+      return !jaNaEquipe;
+    }),
+  );
 
-	// Cores predefinidas
-	const coresDisponiveis = [
-		'#3B82F6', // Blue
-		'#10B981', // Green
-		'#F59E0B', // Yellow
-		'#EF4444', // Red
-		'#8B5CF6', // Purple
-		'#EC4899', // Pink
-		'#14B8A6', // Teal
-		'#F97316' // Orange
-	];
+  // Cores predefinidas
+  const coresDisponiveis = [
+    "#3B82F6", // Blue
+    "#10B981", // Green
+    "#F59E0B", // Yellow
+    "#EF4444", // Red
+    "#8B5CF6", // Purple
+    "#EC4899", // Pink
+    "#14B8A6", // Teal
+    "#F97316", // Orange
+  ];
 
-	function novoTime() {
-		modoEdicao = true;
-		timeEmEdicao = null;
-		formNome = '';
-		formDescricao = '';
-		formGestorId = '';
-		formCor = coresDisponiveis[Math.floor(Math.random() * coresDisponiveis.length)];
-	}
+  function novoTime() {
+    modoEdicao = true;
+    timeEmEdicao = null;
+    formNome = "";
+    formDescricao = "";
+    formGestorId = "";
+    formCor =
+      coresDisponiveis[Math.floor(Math.random() * coresDisponiveis.length)];
+  }
 
-	function editarTime(time: TimeComDetalhes) {
-		modoEdicao = true;
-		timeEmEdicao = time;
-		formNome = time.nome;
-		formDescricao = time.descricao || '';
-		formGestorId = time.gestorId;
-		formCor = time.cor || '#3B82F6';
-	}
+  function editarTime(time: TimeComDetalhes) {
+    modoEdicao = true;
+    timeEmEdicao = time;
+    formNome = time.nome;
+    formDescricao = time.descricao || "";
+    formGestorId = time.gestorId;
+    formCor = time.cor || "#3B82F6";
+  }
 
-	function cancelarEdicao() {
-		modoEdicao = false;
-		timeEmEdicao = null;
-		formNome = '';
-		formDescricao = '';
-		formGestorId = '';
-		formCor = '#3B82F6';
-	}
+  function cancelarEdicao() {
+    modoEdicao = false;
+    timeEmEdicao = null;
+    formNome = "";
+    formDescricao = "";
+    formGestorId = "";
+    formCor = "#3B82F6";
+  }
 
-	async function salvarTime() {
-		if (!formNome.trim() || !formGestorId) {
-			alert('Preencha todos os campos obrigatórios!');
-			return;
-		}
+  async function salvarTime() {
+    if (!formNome.trim() || !formGestorId) {
+      alert("Preencha todos os campos obrigatórios!");
+      return;
+    }
 
-		processando = true;
-		try {
-			if (timeEmEdicao) {
-				await client.mutation(api.times.atualizar, {
-					id: timeEmEdicao._id,
-					nome: formNome,
-					descricao: formDescricao || undefined,
-					gestorId: formGestorId as Id<'usuarios'>,
-					cor: formCor
-				});
-			} else {
-				await client.mutation(api.times.criar, {
-					nome: formNome,
-					descricao: formDescricao || undefined,
-					gestorId: formGestorId as Id<'usuarios'>,
-					cor: formCor
-				});
-			}
-			cancelarEdicao();
-		} catch (e: unknown) {
-			const errorMessage = e instanceof Error ? e.message : String(e);
-			alert('Erro ao salvar: ' + errorMessage);
-		} finally {
-			processando = false;
-		}
-	}
+    processando = true;
+    try {
+      if (timeEmEdicao) {
+        await client.mutation(api.times.atualizar, {
+          id: timeEmEdicao._id,
+          nome: formNome,
+          descricao: formDescricao || undefined,
+          gestorId: formGestorId as Id<"usuarios">,
+          cor: formCor,
+        });
+      } else {
+        await client.mutation(api.times.criar, {
+          nome: formNome,
+          descricao: formDescricao || undefined,
+          gestorId: formGestorId as Id<"usuarios">,
+          cor: formCor,
+        });
+      }
+      cancelarEdicao();
+    } catch (e: unknown) {
+      const errorMessage = e instanceof Error ? e.message : String(e);
+      alert("Erro ao salvar: " + errorMessage);
+    } finally {
+      processando = false;
+    }
+  }
 
-	function confirmarExclusao(time: TimeComDetalhes) {
-		timeParaExcluir = time;
-		mostrarConfirmacaoExclusao = true;
-	}
+  function confirmarExclusao(time: TimeComDetalhes) {
+    timeParaExcluir = time;
+    mostrarConfirmacaoExclusao = true;
+  }
 
-	async function excluirTime() {
-		if (!timeParaExcluir) return;
+  async function excluirTime() {
+    if (!timeParaExcluir) return;
 
-		processando = true;
-		try {
-			await client.mutation(api.times.desativar, { id: timeParaExcluir._id });
-			mostrarConfirmacaoExclusao = false;
-			timeParaExcluir = null;
-		} catch (e: unknown) {
-			const errorMessage = e instanceof Error ? e.message : String(e);
-			alert('Erro ao excluir: ' + errorMessage);
-		} finally {
-			processando = false;
-		}
-	}
+    processando = true;
+    try {
+      await client.mutation(api.times.desativar, { id: timeParaExcluir._id });
+      mostrarConfirmacaoExclusao = false;
+      timeParaExcluir = null;
+    } catch (e: unknown) {
+      const errorMessage = e instanceof Error ? e.message : String(e);
+      alert("Erro ao excluir: " + errorMessage);
+    } finally {
+      processando = false;
+    }
+  }
 
-	async function abrirGerenciarMembros(time: TimeComDetalhes) {
-		const detalhes = await client.query(api.times.obterPorId, { id: time._id });
-		if (detalhes) {
-			timeParaMembros = detalhes as TimeComMembros;
-			mostrarModalMembros = true;
-		}
-	}
+  async function abrirGerenciarMembros(time: TimeComDetalhes) {
+    const detalhes = await client.query(api.times.obterPorId, { id: time._id });
+    if (detalhes) {
+      timeParaMembros = detalhes as TimeComMembros;
+      mostrarModalMembros = true;
+    }
+  }
 
-	async function adicionarMembro(funcionarioId: string) {
-		if (!timeParaMembros) return;
+  async function adicionarMembro(funcionarioId: string) {
+    if (!timeParaMembros) return;
 
-		processando = true;
-		try {
-			await client.mutation(api.times.adicionarMembro, {
-				timeId: timeParaMembros._id,
-				funcionarioId: funcionarioId as Id<'funcionarios'>
-			});
+    processando = true;
+    try {
+      await client.mutation(api.times.adicionarMembro, {
+        timeId: timeParaMembros._id,
+        funcionarioId: funcionarioId as Id<"funcionarios">,
+      });
 
-			// Recarregar detalhes do time
-			const detalhes = await client.query(api.times.obterPorId, {
-				id: timeParaMembros._id
-			});
-			if (detalhes) {
-				timeParaMembros = detalhes as TimeComMembros;
-			}
-		} catch (e: unknown) {
-			const errorMessage = e instanceof Error ? e.message : String(e);
-			alert('Erro: ' + errorMessage);
-		} finally {
-			processando = false;
-		}
-	}
+      // Recarregar detalhes do time
+      const detalhes = await client.query(api.times.obterPorId, {
+        id: timeParaMembros._id,
+      });
+      if (detalhes) {
+        timeParaMembros = detalhes as TimeComMembros;
+      }
+    } catch (e: unknown) {
+      const errorMessage = e instanceof Error ? e.message : String(e);
+      alert("Erro: " + errorMessage);
+    } finally {
+      processando = false;
+    }
+  }
 
-	async function removerMembro(membroId: string) {
-		if (!confirm('Deseja realmente remover este membro do time?')) return;
+  async function removerMembro(membroId: string) {
+    if (!confirm("Deseja realmente remover este membro do time?")) return;
 
-		processando = true;
-		try {
-			await client.mutation(api.times.removerMembro, {
-				membroId: membroId as Id<'timesMembros'>
-			});
+    processando = true;
+    try {
+      await client.mutation(api.times.removerMembro, {
+        membroId: membroId as Id<"timesMembros">,
+      });
 
-			// Recarregar detalhes do time
-			if (timeParaMembros) {
-				const detalhes = await client.query(api.times.obterPorId, {
-					id: timeParaMembros._id
-				});
-				if (detalhes) {
-					timeParaMembros = detalhes as TimeComMembros;
-				}
-			}
-		} catch (e: unknown) {
-			const errorMessage = e instanceof Error ? e.message : String(e);
-			alert('Erro: ' + errorMessage);
-		} finally {
-			processando = false;
-		}
-	}
+      // Recarregar detalhes do time
+      if (timeParaMembros) {
+        const detalhes = await client.query(api.times.obterPorId, {
+          id: timeParaMembros._id,
+        });
+        if (detalhes) {
+          timeParaMembros = detalhes as TimeComMembros;
+        }
+      }
+    } catch (e: unknown) {
+      const errorMessage = e instanceof Error ? e.message : String(e);
+      alert("Erro: " + errorMessage);
+    } finally {
+      processando = false;
+    }
+  }
 
-	function fecharModalMembros() {
-		mostrarModalMembros = false;
-		timeParaMembros = null;
-	}
+  function fecharModalMembros() {
+    mostrarModalMembros = false;
+    timeParaMembros = null;
+  }
 </script>
 
-<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={2}>
-	<main class="container mx-auto max-w-7xl px-4 py-6">
-		<!-- Breadcrumb -->
-		<div class="breadcrumbs mb-4 text-sm">
-			<ul>
-				<li>
-					<a href="/ti" class="text-primary hover:underline">Tecnologia da Informação</a>
-				</li>
-				<li>Gestão de Times</li>
-			</ul>
-		</div>
+<ProtectedRoute
+  allowedRoles={["ti_master", "admin", "ti_usuario"]}
+  maxLevel={2}
+>
+  <main class="container mx-auto px-4 py-6 max-w-7xl">
+    <!-- Breadcrumb -->
+    <div class="text-sm breadcrumbs mb-4">
+      <ul>
+        <li>
+          <a href="/ti" class="text-primary hover:underline"
+            >Tecnologia da Informação</a
+          >
+        </li>
+        <li>Gestão de Times</li>
+      </ul>
+    </div>
 
-		<!-- Header -->
-		<div class="mb-6">
-			<div class="flex items-center justify-between">
-				<div class="flex items-center gap-4">
-					<div class="bg-secondary/10 rounded-xl p-3">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="text-secondary 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 Times</h1>
-						<p class="text-base-content/60 mt-1">
-							Organize funcionários em equipes e defina gestores
-						</p>
-					</div>
-				</div>
-				<div class="flex gap-2">
-					<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>
-					<button class="btn btn-primary gap-2" onclick={novoTime}>
-						<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 Time
-					</button>
-				</div>
-			</div>
-		</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-secondary/10 rounded-xl">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-8 w-8 text-secondary"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="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 Times
+            </h1>
+            <p class="text-base-content/60 mt-1">
+              Organize funcionários em equipes e defina gestores
+            </p>
+          </div>
+        </div>
+        <div class="flex gap-2">
+          <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>
+          <button class="btn btn-primary gap-2" onclick={novoTime}>
+            <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 Time
+          </button>
+        </div>
+      </div>
+    </div>
 
-		<!-- Formulário de Edição -->
-		{#if modoEdicao}
-			<div
-				class="card from-primary/10 to-primary/5 border-primary/20 mb-6 border-2 bg-linear-to-br shadow-xl"
-			>
-				<div class="card-body">
-					<h2 class="card-title mb-4 text-xl">
-						{timeEmEdicao ? 'Editar Time' : 'Novo Time'}
-					</h2>
+    <!-- Formulário de Edição -->
+    {#if modoEdicao}
+      <div
+        class="card bg-linear-to-br from-primary/10 to-primary/5 shadow-xl mb-6 border-2 border-primary/20"
+      >
+        <div class="card-body">
+          <h2 class="card-title text-xl mb-4">
+            {timeEmEdicao ? "Editar Time" : "Novo Time"}
+          </h2>
 
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-						<div class="form-control">
-							<label class="label" for="nome">
-								<span class="label-text font-semibold">Nome do Time *</span>
-							</label>
-							<input
-								id="nome"
-								type="text"
-								class="input input-bordered"
-								bind:value={formNome}
-								placeholder="Ex: Equipe Administrativa"
-							/>
-						</div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div class="form-control">
+              <label class="label" for="nome">
+                <span class="label-text font-semibold">Nome do Time *</span>
+              </label>
+              <input
+                id="nome"
+                type="text"
+                class="input input-bordered"
+                bind:value={formNome}
+                placeholder="Ex: Equipe Administrativa"
+              />
+            </div>
 
-						<div class="form-control">
-							<label class="label" for="gestor">
-								<span class="label-text font-semibold">Gestor *</span>
-							</label>
-							<select id="gestor" class="select select-bordered" bind:value={formGestorId}>
-								<option value="">Selecione um gestor</option>
-								{#each usuarios as usuario}
-									<option value={usuario._id}>{usuario.nome}</option>
-								{/each}
-							</select>
-						</div>
+            <div class="form-control">
+              <label class="label" for="gestor">
+                <span class="label-text font-semibold">Gestor *</span>
+              </label>
+              <select
+                id="gestor"
+                class="select select-bordered"
+                bind:value={formGestorId}
+              >
+                <option value="">Selecione um gestor</option>
+                {#each usuarios as usuario}
+                  <option value={usuario._id}>{usuario.nome}</option>
+                {/each}
+              </select>
+            </div>
 
-						<div class="form-control md:col-span-2">
-							<label class="label" for="descricao">
-								<span class="label-text font-semibold">Descrição</span>
-							</label>
-							<textarea
-								id="descricao"
-								class="textarea textarea-bordered"
-								bind:value={formDescricao}
-								placeholder="Descrição opcional do time"
-								rows="2"
-							></textarea>
-						</div>
+            <div class="form-control md:col-span-2">
+              <label class="label" for="descricao">
+                <span class="label-text font-semibold">Descrição</span>
+              </label>
+              <textarea
+                id="descricao"
+                class="textarea textarea-bordered"
+                bind:value={formDescricao}
+                placeholder="Descrição opcional do time"
+                rows="2"
+              ></textarea>
+            </div>
 
-						<div class="form-control">
-							<label class="label" for="cor">
-								<span class="label-text font-semibold">Cor do Time</span>
-							</label>
-							<div class="flex flex-wrap gap-2">
-								{#each coresDisponiveis as cor}
-									<button
-										type="button"
-										class="h-10 w-10 rounded-lg border-2 transition-all hover:scale-110"
-										style="background-color: {cor}; border-color: {formCor === cor ? '#000' : cor}"
-										onclick={() => (formCor = cor)}
-										aria-label="Selecionar cor"
-									></button>
-								{/each}
-							</div>
-						</div>
-					</div>
+            <div class="form-control">
+              <label class="label" for="cor">
+                <span class="label-text font-semibold">Cor do Time</span>
+              </label>
+              <div class="flex gap-2 flex-wrap">
+                {#each coresDisponiveis as cor}
+                  <button
+                    type="button"
+                    class="w-10 h-10 rounded-lg border-2 transition-all hover:scale-110"
+                    style="background-color: {cor}; border-color: {formCor ===
+                    cor
+                      ? '#000'
+                      : cor}"
+                    onclick={() => (formCor = cor)}
+                    aria-label="Selecionar cor"
+                  ></button>
+                {/each}
+              </div>
+            </div>
+          </div>
 
-					<div class="card-actions mt-6 justify-end">
-						<button class="btn" onclick={cancelarEdicao} disabled={processando}> Cancelar </button>
-						<button class="btn btn-primary" onclick={salvarTime} disabled={processando}>
-							{processando ? 'Salvando...' : 'Salvar'}
-						</button>
-					</div>
-				</div>
-			</div>
-		{/if}
+          <div class="card-actions justify-end mt-6">
+            <button
+              class="btn btn-ghost"
+              onclick={cancelarEdicao}
+              disabled={processando}
+            >
+              Cancelar
+            </button>
+            <button
+              class="btn btn-primary"
+              onclick={salvarTime}
+              disabled={processando}
+            >
+              {processando ? "Salvando..." : "Salvar"}
+            </button>
+          </div>
+        </div>
+      </div>
+    {/if}
 
-		<!-- Lista de Times -->
-		{#if carregando}
-			<div class="flex items-center justify-center py-20">
-				<span class="loading loading-spinner loading-lg text-primary"></span>
-			</div>
-		{:else}
-			<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-				{#each times.filter((t: TimeComDetalhes) => t.ativo) as time}
-					<div
-						class="card bg-base-100 border-l-4 shadow-xl transition-all hover:shadow-2xl"
-						style="border-color: {time.cor || '#3B82F6'}"
-					>
-						<div class="card-body">
-							<div class="mb-2 flex items-start justify-between">
-								<div class="flex items-center gap-2">
-									<div
-										class="h-3 w-3 rounded-full"
-										style="background-color: {time.cor || '#3B82F6'}"
-									></div>
-									<h2 class="card-title text-lg">{time.nome}</h2>
-								</div>
-								<div class="dropdown dropdown-end">
-									<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"
-											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 border-base-300 z-[1] w-52 border p-2 shadow-xl"
-									>
-										<li>
-											<button type="button" onclick={() => editarTime(time)}>
-												<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>
-												Editar
-											</button>
-										</li>
-										<li>
-											<button type="button" onclick={() => abrirGerenciarMembros(time)}>
-												<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 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>
-												Gerenciar Membros
-											</button>
-										</li>
-										<li>
-											<button
-												type="button"
-												onclick={() => confirmarExclusao(time)}
-												class="text-error"
-											>
-												<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>
-												Desativar
-											</button>
-										</li>
-									</ul>
-								</div>
-							</div>
+    <!-- Lista de Times -->
+    {#if carregando}
+      <div class="flex justify-center items-center py-20">
+        <span class="loading loading-spinner loading-lg text-primary"></span>
+      </div>
+    {:else}
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {#each times.filter((t: TimeComDetalhes) => t.ativo) as time}
+          <div
+            class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all border-l-4"
+            style="border-color: {time.cor || '#3B82F6'}"
+          >
+            <div class="card-body">
+              <div class="flex items-start justify-between mb-2">
+                <div class="flex items-center gap-2">
+                  <div
+                    class="w-3 h-3 rounded-full"
+                    style="background-color: {time.cor || '#3B82F6'}"
+                  ></div>
+                  <h2 class="card-title text-lg">{time.nome}</h2>
+                </div>
+                <div class="dropdown dropdown-end">
+                  <button
+                    type="button"
+                    class="btn btn-ghost btn-sm btn-square"
+                    aria-label="Menu do time"
+                  >
+                    <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 z-[1] menu p-2 shadow-xl bg-base-100 rounded-box w-52 border border-base-300"
+                  >
+                    <li>
+                      <button type="button" onclick={() => editarTime(time)}>
+                        <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>
+                        Editar
+                      </button>
+                    </li>
+                    <li>
+                      <button
+                        type="button"
+                        onclick={() => abrirGerenciarMembros(time)}
+                      >
+                        <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 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>
+                        Gerenciar Membros
+                      </button>
+                    </li>
+                    <li>
+                      <button
+                        type="button"
+                        onclick={() => confirmarExclusao(time)}
+                        class="text-error"
+                      >
+                        <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>
+                        Desativar
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+              </div>
 
-							<p class="text-base-content/70 mb-3 min-h-[2rem] text-sm">
-								{time.descricao || 'Sem descrição'}
-							</p>
+              <p class="text-sm text-base-content/70 mb-3 min-h-[2rem]">
+                {time.descricao || "Sem descrição"}
+              </p>
 
-							<div class="divider my-2"></div>
+              <div class="divider my-2"></div>
 
-							<div class="space-y-2">
-								<div class="flex items-center gap-2 text-sm">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="text-primary 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.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-										/>
-									</svg>
-									<span class="text-base-content/70"
-										><strong>Gestor:</strong>
-										{time.gestor?.nome || 'Não definido'}</span
-									>
-								</div>
-								<div class="flex items-center gap-2 text-sm">
-									<svg
-										xmlns="http://www.w3.org/2000/svg"
-										class="text-primary 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 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>
-									<span class="text-base-content/70"
-										><strong>Membros:</strong>
-										<span class="badge badge-primary badge-sm">{time.totalMembros || 0}</span></span
-									>
-								</div>
-							</div>
+              <div class="space-y-2">
+                <div class="flex items-center gap-2 text-sm">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-4 w-4 text-primary"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                  </svg>
+                  <span class="text-base-content/70"
+                    ><strong>Gestor:</strong>
+                    {time.gestor?.nome || "Não definido"}</span
+                  >
+                </div>
+                <div class="flex items-center gap-2 text-sm">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-4 w-4 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>
+                  <span class="text-base-content/70"
+                    ><strong>Membros:</strong>
+                    <span class="badge badge-primary badge-sm"
+                      >{time.totalMembros || 0}</span
+                    ></span
+                  >
+                </div>
+              </div>
 
-							<div class="card-actions mt-4 justify-end">
-								<button
-									class="btn btn-sm btn-outline btn-primary"
-									onclick={() => abrirGerenciarMembros(time)}
-								>
-									Ver Detalhes
-								</button>
-							</div>
-						</div>
-					</div>
-				{/each}
+              <div class="card-actions justify-end mt-4">
+                <button
+                  class="btn btn-sm btn-outline btn-primary"
+                  onclick={() => abrirGerenciarMembros(time)}
+                >
+                  Ver Detalhes
+                </button>
+              </div>
+            </div>
+          </div>
+        {/each}
 
-				{#if times.filter((t: TimeComDetalhes) => t.ativo).length === 0}
-					<div class="col-span-full">
-						<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 time cadastrado</h3>
-							<p class="text-base-content/60 mt-2">
-								Clique em "Novo Time" para criar seu primeiro time
-							</p>
-						</div>
-					</div>
-				{/if}
-			</div>
-		{/if}
+        {#if times.filter((t: TimeComDetalhes) => t.ativo).length === 0}
+          <div class="col-span-full">
+            <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 time cadastrado</h3>
+              <p class="text-base-content/60 mt-2">
+                Clique em "Novo Time" para criar seu primeiro time
+              </p>
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/if}
 
-		<!-- Modal de Gerenciar Membros -->
-		{#if mostrarModalMembros && timeParaMembros}
-			<dialog class="modal modal-open">
-				<div class="modal-box max-w-4xl">
-					<h3 class="mb-4 flex items-center gap-2 text-2xl font-bold">
-						<div class="h-3 w-3 rounded-full" style="background-color: {timeParaMembros.cor}"></div>
-						{timeParaMembros.nome}
-					</h3>
+    <!-- Modal de Gerenciar Membros -->
+    {#if mostrarModalMembros && timeParaMembros}
+      <dialog class="modal modal-open">
+        <div class="modal-box max-w-4xl">
+          <h3 class="font-bold text-2xl mb-4 flex items-center gap-2">
+            <div
+              class="w-3 h-3 rounded-full"
+              style="background-color: {timeParaMembros.cor}"
+            ></div>
+            {timeParaMembros.nome}
+          </h3>
 
-					<!-- Membros Atuais -->
-					<div class="mb-6">
-						<h4 class="mb-3 text-lg font-bold">
-							Membros Atuais ({timeParaMembros.membros?.length || 0})
-						</h4>
+          <!-- Membros Atuais -->
+          <div class="mb-6">
+            <h4 class="font-bold text-lg mb-3">
+              Membros Atuais ({timeParaMembros.membros?.length || 0})
+            </h4>
 
-						{#if timeParaMembros.membros && timeParaMembros.membros.length > 0}
-							<div class="max-h-60 space-y-2 overflow-y-auto">
-								{#each timeParaMembros.membros as membro}
-									<div class="bg-base-200 flex items-center justify-between rounded-lg p-3">
-										<div class="flex items-center gap-3">
-											<div class="avatar placeholder">
-												<div class="bg-primary text-primary-content w-10 rounded-full">
-													<span class="text-xs"
-														>{membro.funcionario?.nome.substring(0, 2).toUpperCase()}</span
-													>
-												</div>
-											</div>
-											<div>
-												<div class="font-semibold">
-													{membro.funcionario?.nome}
-												</div>
-												<div class="text-base-content/50 text-xs">
-													Desde {new Date(membro.dataEntrada).toLocaleDateString('pt-BR')}
-												</div>
-											</div>
-										</div>
-										<button
-											class="btn btn-sm btn-error"
-											onclick={() => removerMembro(membro._id)}
-											disabled={processando}
-											aria-label="Remover membro"
-										>
-											<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>
-								{/each}
-							</div>
-						{: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>Nenhum membro neste time ainda.</span>
-							</div>
-						{/if}
-					</div>
+            {#if timeParaMembros.membros && timeParaMembros.membros.length > 0}
+              <div class="space-y-2 max-h-60 overflow-y-auto">
+                {#each timeParaMembros.membros as membro}
+                  <div
+                    class="flex items-center justify-between p-3 bg-base-200 rounded-lg"
+                  >
+                    <div class="flex items-center gap-3">
+                      <div class="avatar placeholder">
+                        <div
+                          class="bg-primary text-primary-content rounded-full w-10"
+                        >
+                          <span class="text-xs"
+                            >{membro.funcionario?.nome
+                              .substring(0, 2)
+                              .toUpperCase()}</span
+                          >
+                        </div>
+                      </div>
+                      <div>
+                        <div class="font-semibold">
+                          {membro.funcionario?.nome}
+                        </div>
+                        <div class="text-xs text-base-content/50">
+                          Desde {new Date(
+                            membro.dataEntrada,
+                          ).toLocaleDateString("pt-BR")}
+                        </div>
+                      </div>
+                    </div>
+                    <button
+                      class="btn btn-sm btn-error btn-square"
+                      onclick={() => removerMembro(membro._id)}
+                      disabled={processando}
+                      aria-label="Remover membro"
+                    >
+                      <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>
+                {/each}
+              </div>
+            {: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>Nenhum membro neste time ainda.</span>
+              </div>
+            {/if}
+          </div>
 
-					<div class="divider"></div>
+          <div class="divider"></div>
 
-					<!-- Adicionar Membros -->
-					<div>
-						<h4 class="mb-3 text-lg font-bold">Adicionar Membros</h4>
+          <!-- Adicionar Membros -->
+          <div>
+            <h4 class="font-bold text-lg mb-3">Adicionar Membros</h4>
 
-						{#if membrosDisponiveis.length > 0}
-							<div class="max-h-60 space-y-2 overflow-y-auto">
-								{#each membrosDisponiveis as funcionario}
-									<div
-										class="bg-base-200 hover:bg-base-300 flex items-center justify-between rounded-lg p-3 transition-colors"
-									>
-										<div class="flex items-center gap-3">
-											<div class="avatar placeholder">
-												<div class="bg-neutral text-neutral-content w-10 rounded-full">
-													<span class="text-xs"
-														>{funcionario.nome.substring(0, 2).toUpperCase()}</span
-													>
-												</div>
-											</div>
-											<div>
-												<div class="font-semibold">{funcionario.nome}</div>
-												<div class="text-base-content/50 text-xs">
-													{funcionario.matricula || 'S/N'}
-												</div>
-											</div>
-										</div>
-										<button
-											class="btn btn-sm btn-primary"
-											onclick={() => adicionarMembro(funcionario._id)}
-											disabled={processando}
-										>
-											Adicionar
-										</button>
-									</div>
-								{/each}
-							</div>
-						{:else}
-							<div class="alert">
-								<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>Todos os funcionários já estão em times.</span>
-							</div>
-						{/if}
-					</div>
+            {#if membrosDisponiveis.length > 0}
+              <div class="space-y-2 max-h-60 overflow-y-auto">
+                {#each membrosDisponiveis as funcionario}
+                  <div
+                    class="flex items-center justify-between p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors"
+                  >
+                    <div class="flex items-center gap-3">
+                      <div class="avatar placeholder">
+                        <div
+                          class="bg-neutral text-neutral-content rounded-full w-10"
+                        >
+                          <span class="text-xs"
+                            >{funcionario.nome
+                              .substring(0, 2)
+                              .toUpperCase()}</span
+                          >
+                        </div>
+                      </div>
+                      <div>
+                        <div class="font-semibold">{funcionario.nome}</div>
+                        <div class="text-xs text-base-content/50">
+                          {funcionario.matricula || "S/N"}
+                        </div>
+                      </div>
+                    </div>
+                    <button
+                      class="btn btn-sm btn-primary"
+                      onclick={() => adicionarMembro(funcionario._id)}
+                      disabled={processando}
+                    >
+                      Adicionar
+                    </button>
+                  </div>
+                {/each}
+              </div>
+            {:else}
+              <div class="alert">
+                <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>Todos os funcionários já estão em times.</span>
+              </div>
+            {/if}
+          </div>
 
-					<div class="modal-action">
-						<button class="btn" onclick={fecharModalMembros}>Fechar</button>
-					</div>
-				</div>
-				<form method="dialog" class="modal-backdrop">
-					<button type="button" onclick={fecharModalMembros} aria-label="Fechar modal"
-						>Fechar</button
-					>
-				</form>
-			</dialog>
-		{/if}
+          <div class="modal-action">
+            <button class="btn" onclick={fecharModalMembros}>Fechar</button>
+          </div>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+          <button
+            type="button"
+            onclick={fecharModalMembros}
+            aria-label="Fechar modal">Fechar</button
+          >
+        </form>
+      </dialog>
+    {/if}
 
-		<!-- Modal de Confirmação de Exclusão -->
-		{#if mostrarConfirmacaoExclusao && timeParaExcluir}
-			<dialog class="modal modal-open">
-				<div class="modal-box">
-					<h3 class="text-lg font-bold">Confirmar Desativação</h3>
-					<p class="py-4">
-						Tem certeza que deseja desativar o time <strong>{timeParaExcluir.nome}</strong>? Todos
-						os membros serão removidos.
-					</p>
-					<div class="modal-action">
-						<button
-							class="btn"
-							onclick={() => (mostrarConfirmacaoExclusao = false)}
-							disabled={processando}
-						>
-							Cancelar
-						</button>
-						<button class="btn btn-error" onclick={excluirTime} disabled={processando}>
-							{processando ? 'Processando...' : 'Desativar'}
-						</button>
-					</div>
-				</div>
-				<form method="dialog" class="modal-backdrop">
-					<button
-						type="button"
-						onclick={() => (mostrarConfirmacaoExclusao = false)}
-						aria-label="Fechar modal">Fechar</button
-					>
-				</form>
-			</dialog>
-		{/if}
-	</main>
+    <!-- Modal de Confirmação de Exclusão -->
+    {#if mostrarConfirmacaoExclusao && timeParaExcluir}
+      <dialog class="modal modal-open">
+        <div class="modal-box">
+          <h3 class="font-bold text-lg">Confirmar Desativação</h3>
+          <p class="py-4">
+            Tem certeza que deseja desativar o time <strong
+              >{timeParaExcluir.nome}</strong
+            >? Todos os membros serão removidos.
+          </p>
+          <div class="modal-action">
+            <button
+              class="btn"
+              onclick={() => (mostrarConfirmacaoExclusao = false)}
+              disabled={processando}
+            >
+              Cancelar
+            </button>
+            <button
+              class="btn btn-error"
+              onclick={excluirTime}
+              disabled={processando}
+            >
+              {processando ? "Processando..." : "Desativar"}
+            </button>
+          </div>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+          <button
+            type="button"
+            onclick={() => (mostrarConfirmacaoExclusao = false)}
+            aria-label="Fechar modal">Fechar</button
+          >
+        </form>
+      </dialog>
+    {/if}
+  </main>
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
index f93c768..c2974d8 100644
--- a/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
@@ -1,1310 +1,1403 @@
 <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 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>
+<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>
 
-		<!-- 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}
+    <!-- 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}
 
-		<!-- 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}
+    <!-- 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}
 
-		<!-- 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>
+    <!-- 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>
 
-					<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>
+          <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>
 
-						<!-- 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="text-base-content/60 mt-4 text-sm">
-						Mostrando {usuariosFiltrados.length} de {usuarios.length} usuário(s)
-					</div>
-				</div>
-			</div>
-		{/if}
+          <div class="mt-4 text-sm text-base-content/60">
+            Mostrando {usuariosFiltrados.length} de {usuarios.length} usuário(s)
+          </div>
+        </div>
+      </div>
+    {/if}
 
-		<!-- 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>
+    <!-- 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>
 
-					<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>
+          <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>
 
-	<!-- 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>
+  <!-- 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>
 
-				<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="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>
+          {#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>
 
-				<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="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="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="modal-action">
-					<button type="button" class="btn" onclick={fecharModalAssociar} disabled={processando}>
-						Cancelar
-					</button>
+        <div class="modal-action">
+          <button
+            type="button"
+            class="btn btn-ghost"
+            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="text-error mb-4 text-lg font-bold">Excluir Usuário</h3>
+  <!-- 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>
 
-				<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="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="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}
+        <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}
 </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 de91390..e36a233 100644
--- a/apps/web/src/routes/(dashboard)/ti/usuarios/criar/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/criar/+page.svelte
@@ -1,540 +1,574 @@
 <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 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>
+<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>
 
-		<!-- 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>
+    <!-- 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>
 
-		<!-- 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}
+    <!-- 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}
 
-		<!-- 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>
+    <!-- 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>
 
-				<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>
+        <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>
 
-						<!-- 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 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>
+            <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>
 
-						<!-- 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="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>
+              {#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>
 
-					<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="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="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>
+          <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>
 </ProtectedRoute>
diff --git a/bun.lock b/bun.lock
index 452768f..0b14041 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 1,
   "workspaces": {
     "": {
       "name": "sgse-app",
@@ -42,7 +41,7 @@
         "@types/papaparse": "^5.3.14",
         "better-auth": "catalog:",
         "convex": "catalog:",
-        "convex-svelte": "^0.0.12",
+        "convex-svelte": "^0.0.11",
         "date-fns": "^4.1.0",
         "emoji-picker-element": "^1.27.0",
         "eslint": "catalog:",
@@ -120,7 +119,7 @@
   "catalog": {
     "@eslint/js": "^9.39.1",
     "better-auth": "1.3.27",
-    "convex": "1.28.2",
+    "convex": "^1.28.0",
     "eslint": "^9.39.1",
     "typescript": "^5.9.2",
   },
@@ -133,55 +132,55 @@
 
     "@aws-crypto/util": ["@aws-crypto/util@5.2.0", "", { "dependencies": { "@aws-sdk/types": "^3.222.0", "@smithy/util-utf8": "^2.0.0", "tslib": "^2.6.2" } }, "sha512-4RkU9EsI6ZpBve5fseQlGNUWKMa1RLPQ1dnjnQoe07ldfIzcsGb5hC5W0Dm7u423KWzawlrpbjXBrXCEv9zazQ=="],
 
-    "@aws-sdk/client-sesv2": ["@aws-sdk/client-sesv2@3.928.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "3.928.0", "@aws-sdk/credential-provider-node": "3.928.0", "@aws-sdk/middleware-host-header": "3.922.0", "@aws-sdk/middleware-logger": "3.922.0", "@aws-sdk/middleware-recursion-detection": "3.922.0", "@aws-sdk/middleware-user-agent": "3.928.0", "@aws-sdk/region-config-resolver": "3.925.0", "@aws-sdk/signature-v4-multi-region": "3.928.0", "@aws-sdk/types": "3.922.0", "@aws-sdk/util-endpoints": "3.922.0", "@aws-sdk/util-user-agent-browser": "3.922.0", "@aws-sdk/util-user-agent-node": "3.928.0", "@smithy/config-resolver": "^4.4.2", "@smithy/core": "^3.17.2", "@smithy/fetch-http-handler": "^5.3.5", "@smithy/hash-node": "^4.2.4", "@smithy/invalid-dependency": "^4.2.4", "@smithy/middleware-content-length": "^4.2.4", "@smithy/middleware-endpoint": "^4.3.6", "@smithy/middleware-retry": "^4.4.6", "@smithy/middleware-serde": "^4.2.4", "@smithy/middleware-stack": "^4.2.4", "@smithy/node-config-provider": "^4.3.4", "@smithy/node-http-handler": "^4.4.4", "@smithy/protocol-http": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/url-parser": "^4.2.4", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.5", "@smithy/util-defaults-mode-node": "^4.2.8", "@smithy/util-endpoints": "^3.2.4", "@smithy/util-middleware": "^4.2.4", "@smithy/util-retry": "^4.2.4", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-6wSrQRA+nT1ksZncvCyXo8a7/UIGuVEYnoubLKlJ/7j9MzHfSkDebL5YHBt03mmR7fJ+IRew+9xqsLzAbT0yUQ=="],
+    "@aws-sdk/client-sesv2": ["@aws-sdk/client-sesv2@3.921.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "3.921.0", "@aws-sdk/credential-provider-node": "3.921.0", "@aws-sdk/middleware-host-header": "3.921.0", "@aws-sdk/middleware-logger": "3.921.0", "@aws-sdk/middleware-recursion-detection": "3.921.0", "@aws-sdk/middleware-user-agent": "3.921.0", "@aws-sdk/region-config-resolver": "3.921.0", "@aws-sdk/signature-v4-multi-region": "3.921.0", "@aws-sdk/types": "3.921.0", "@aws-sdk/util-endpoints": "3.921.0", "@aws-sdk/util-user-agent-browser": "3.921.0", "@aws-sdk/util-user-agent-node": "3.921.0", "@smithy/config-resolver": "^4.4.1", "@smithy/core": "^3.17.2", "@smithy/fetch-http-handler": "^5.3.5", "@smithy/hash-node": "^4.2.4", "@smithy/invalid-dependency": "^4.2.4", "@smithy/middleware-content-length": "^4.2.4", "@smithy/middleware-endpoint": "^4.3.6", "@smithy/middleware-retry": "^4.4.6", "@smithy/middleware-serde": "^4.2.4", "@smithy/middleware-stack": "^4.2.4", "@smithy/node-config-provider": "^4.3.4", "@smithy/node-http-handler": "^4.4.4", "@smithy/protocol-http": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/url-parser": "^4.2.4", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.5", "@smithy/util-defaults-mode-node": "^4.2.7", "@smithy/util-endpoints": "^3.2.4", "@smithy/util-middleware": "^4.2.4", "@smithy/util-retry": "^4.2.4", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-SokAr3tgHo+M+U/nrqidZNiuhA8//l/L6A6R9e8lNEQZtI3tFB0SQcKFYQCy8H96/cNZhnYIqkxsUysEl0bNdw=="],
 
-    "@aws-sdk/client-sso": ["@aws-sdk/client-sso@3.928.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "3.928.0", "@aws-sdk/middleware-host-header": "3.922.0", "@aws-sdk/middleware-logger": "3.922.0", "@aws-sdk/middleware-recursion-detection": "3.922.0", "@aws-sdk/middleware-user-agent": "3.928.0", "@aws-sdk/region-config-resolver": "3.925.0", "@aws-sdk/types": "3.922.0", "@aws-sdk/util-endpoints": "3.922.0", "@aws-sdk/util-user-agent-browser": "3.922.0", "@aws-sdk/util-user-agent-node": "3.928.0", "@smithy/config-resolver": "^4.4.2", "@smithy/core": "^3.17.2", "@smithy/fetch-http-handler": "^5.3.5", "@smithy/hash-node": "^4.2.4", "@smithy/invalid-dependency": "^4.2.4", "@smithy/middleware-content-length": "^4.2.4", "@smithy/middleware-endpoint": "^4.3.6", "@smithy/middleware-retry": "^4.4.6", "@smithy/middleware-serde": "^4.2.4", "@smithy/middleware-stack": "^4.2.4", "@smithy/node-config-provider": "^4.3.4", "@smithy/node-http-handler": "^4.4.4", "@smithy/protocol-http": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/url-parser": "^4.2.4", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.5", "@smithy/util-defaults-mode-node": "^4.2.8", "@smithy/util-endpoints": "^3.2.4", "@smithy/util-middleware": "^4.2.4", "@smithy/util-retry": "^4.2.4", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-Efenb8zV2fJJDXmp2NE4xj8Ymhp4gVJCkQ6ixhdrpfQXgd2PODO7a20C2+BhFM6aGmN3m6XWYJ64ZyhXF4pAyQ=="],
+    "@aws-sdk/client-sso": ["@aws-sdk/client-sso@3.921.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "3.921.0", "@aws-sdk/middleware-host-header": "3.921.0", "@aws-sdk/middleware-logger": "3.921.0", "@aws-sdk/middleware-recursion-detection": "3.921.0", "@aws-sdk/middleware-user-agent": "3.921.0", "@aws-sdk/region-config-resolver": "3.921.0", "@aws-sdk/types": "3.921.0", "@aws-sdk/util-endpoints": "3.921.0", "@aws-sdk/util-user-agent-browser": "3.921.0", "@aws-sdk/util-user-agent-node": "3.921.0", "@smithy/config-resolver": "^4.4.1", "@smithy/core": "^3.17.2", "@smithy/fetch-http-handler": "^5.3.5", "@smithy/hash-node": "^4.2.4", "@smithy/invalid-dependency": "^4.2.4", "@smithy/middleware-content-length": "^4.2.4", "@smithy/middleware-endpoint": "^4.3.6", "@smithy/middleware-retry": "^4.4.6", "@smithy/middleware-serde": "^4.2.4", "@smithy/middleware-stack": "^4.2.4", "@smithy/node-config-provider": "^4.3.4", "@smithy/node-http-handler": "^4.4.4", "@smithy/protocol-http": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/url-parser": "^4.2.4", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.5", "@smithy/util-defaults-mode-node": "^4.2.7", "@smithy/util-endpoints": "^3.2.4", "@smithy/util-middleware": "^4.2.4", "@smithy/util-retry": "^4.2.4", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-qWyT7WikdkPRAMuWidZ2l8jcQAPwNjvLcFZ/8K+oCAaMLt0LKLd7qeTwZ5tZFNqRNPXKfE8MkvAjyqSpE3i2yg=="],
 
-    "@aws-sdk/core": ["@aws-sdk/core@3.928.0", "", { "dependencies": { "@aws-sdk/types": "3.922.0", "@aws-sdk/xml-builder": "3.921.0", "@smithy/core": "^3.17.2", "@smithy/node-config-provider": "^4.3.4", "@smithy/property-provider": "^4.2.4", "@smithy/protocol-http": "^5.3.4", "@smithy/signature-v4": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/util-base64": "^4.3.0", "@smithy/util-middleware": "^4.2.4", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-e28J2uKjy2uub4u41dNnmzAu0AN3FGB+LRcLN2Qnwl9Oq3kIcByl5sM8ZD+vWpNG+SFUrUasBCq8cMnHxwXZ4w=="],
+    "@aws-sdk/core": ["@aws-sdk/core@3.921.0", "", { "dependencies": { "@aws-sdk/types": "3.921.0", "@aws-sdk/xml-builder": "3.921.0", "@smithy/core": "^3.17.2", "@smithy/node-config-provider": "^4.3.4", "@smithy/property-provider": "^4.2.4", "@smithy/protocol-http": "^5.3.4", "@smithy/signature-v4": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/util-base64": "^4.3.0", "@smithy/util-middleware": "^4.2.4", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-1eiD9ZO9cvEHdQUn/pwJVGN9LXg6D0O7knGVA0TA/v7nFSYy0n8RYG8vdnlcoYYnV1BcHgaf4KmRVMOszafNZQ=="],
 
-    "@aws-sdk/credential-provider-env": ["@aws-sdk/credential-provider-env@3.928.0", "", { "dependencies": { "@aws-sdk/core": "3.928.0", "@aws-sdk/types": "3.922.0", "@smithy/property-provider": "^4.2.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-tB8F9Ti0/NFyFVQX8UQtgRik88evtHpyT6WfXOB4bAY6lEnEHA0ubJZmk9y+aUeoE+OsGLx70dC3JUsiiCPJkQ=="],
+    "@aws-sdk/credential-provider-env": ["@aws-sdk/credential-provider-env@3.921.0", "", { "dependencies": { "@aws-sdk/core": "3.921.0", "@aws-sdk/types": "3.921.0", "@smithy/property-provider": "^4.2.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-RGG+zZdOYGJBQ8+L7BI6v41opoF8knErMtBZAUGcD3gvWEhjatc7lSbIpBeYWbTaWPPLHQU+ZVbmQ/jRLBgefw=="],
 
-    "@aws-sdk/credential-provider-http": ["@aws-sdk/credential-provider-http@3.928.0", "", { "dependencies": { "@aws-sdk/core": "3.928.0", "@aws-sdk/types": "3.922.0", "@smithy/fetch-http-handler": "^5.3.5", "@smithy/node-http-handler": "^4.4.4", "@smithy/property-provider": "^4.2.4", "@smithy/protocol-http": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/util-stream": "^4.5.5", "tslib": "^2.6.2" } }, "sha512-67ynC/8UW9Y8Gn1ZZtC3OgcQDGWrJelHmkbgpmmxYUrzVhp+NINtz3wiTzrrBFhPH/8Uy6BxvhMfXhn0ptcMEQ=="],
+    "@aws-sdk/credential-provider-http": ["@aws-sdk/credential-provider-http@3.921.0", "", { "dependencies": { "@aws-sdk/core": "3.921.0", "@aws-sdk/types": "3.921.0", "@smithy/fetch-http-handler": "^5.3.5", "@smithy/node-http-handler": "^4.4.4", "@smithy/property-provider": "^4.2.4", "@smithy/protocol-http": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/util-stream": "^4.5.5", "tslib": "^2.6.2" } }, "sha512-TAv08Ow0oF/olV4DTLoPDj46KMk35bL1IUCfToESDrWk1TOSur7d4sCL0p/7dUsAxS244cEgeyIIijKNtxj2AA=="],
 
-    "@aws-sdk/credential-provider-ini": ["@aws-sdk/credential-provider-ini@3.928.0", "", { "dependencies": { "@aws-sdk/core": "3.928.0", "@aws-sdk/credential-provider-env": "3.928.0", "@aws-sdk/credential-provider-http": "3.928.0", "@aws-sdk/credential-provider-process": "3.928.0", "@aws-sdk/credential-provider-sso": "3.928.0", "@aws-sdk/credential-provider-web-identity": "3.928.0", "@aws-sdk/nested-clients": "3.928.0", "@aws-sdk/types": "3.922.0", "@smithy/credential-provider-imds": "^4.2.4", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-WVWYyj+jox6mhKYp11mu8x1B6Xa2sLbXFHAv5K3Jg8CHvXYpePgTcYlCljq3d4XHC4Jl4nCcsdMtBahSpU9bAA=="],
+    "@aws-sdk/credential-provider-ini": ["@aws-sdk/credential-provider-ini@3.921.0", "", { "dependencies": { "@aws-sdk/core": "3.921.0", "@aws-sdk/credential-provider-env": "3.921.0", "@aws-sdk/credential-provider-http": "3.921.0", "@aws-sdk/credential-provider-process": "3.921.0", "@aws-sdk/credential-provider-sso": "3.921.0", "@aws-sdk/credential-provider-web-identity": "3.921.0", "@aws-sdk/nested-clients": "3.921.0", "@aws-sdk/types": "3.921.0", "@smithy/credential-provider-imds": "^4.2.4", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-MUSRYGiMRq5NRGPRgJ7Nuh7GqXzE9iteAwdbzMJ4pnImgr7CjeWDihCIGk+gKLSG+NoRVVJM0V9PA4rxFir0Pg=="],
 
-    "@aws-sdk/credential-provider-node": ["@aws-sdk/credential-provider-node@3.928.0", "", { "dependencies": { "@aws-sdk/credential-provider-env": "3.928.0", "@aws-sdk/credential-provider-http": "3.928.0", "@aws-sdk/credential-provider-ini": "3.928.0", "@aws-sdk/credential-provider-process": "3.928.0", "@aws-sdk/credential-provider-sso": "3.928.0", "@aws-sdk/credential-provider-web-identity": "3.928.0", "@aws-sdk/types": "3.922.0", "@smithy/credential-provider-imds": "^4.2.4", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-SdXVjxZOIXefIR/NJx+lyXOrn4m0ScTAU2JXpLsFCkW2Cafo6vTqHUghyO8vak/XQ8PpPqpLXVpGbAYFuIPW6Q=="],
+    "@aws-sdk/credential-provider-node": ["@aws-sdk/credential-provider-node@3.921.0", "", { "dependencies": { "@aws-sdk/credential-provider-env": "3.921.0", "@aws-sdk/credential-provider-http": "3.921.0", "@aws-sdk/credential-provider-ini": "3.921.0", "@aws-sdk/credential-provider-process": "3.921.0", "@aws-sdk/credential-provider-sso": "3.921.0", "@aws-sdk/credential-provider-web-identity": "3.921.0", "@aws-sdk/types": "3.921.0", "@smithy/credential-provider-imds": "^4.2.4", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-bxUAqRyo49WzKWn/XS0d8QXT9GydY/ew5m58PYfSMwYfmwBZXx1GLSWe3tZnefm6santFiqmIWfMmeRWdygKmQ=="],
 
-    "@aws-sdk/credential-provider-process": ["@aws-sdk/credential-provider-process@3.928.0", "", { "dependencies": { "@aws-sdk/core": "3.928.0", "@aws-sdk/types": "3.922.0", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-XL0juran8yhqwn0mreV+NJeHJOkcRBaExsvVn9fXWW37A4gLh4esSJxM2KbSNh0t+/Bk3ehBI5sL9xad+yRDuw=="],
+    "@aws-sdk/credential-provider-process": ["@aws-sdk/credential-provider-process@3.921.0", "", { "dependencies": { "@aws-sdk/core": "3.921.0", "@aws-sdk/types": "3.921.0", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-DM62ooWI/aZ+ENBcLszuKmOkiICf6p4vYO2HgA3Cy2OEsTsjb67NEcntksxpZkD3mSIrCy/Qi4Z7tc77gle2Nw=="],
 
-    "@aws-sdk/credential-provider-sso": ["@aws-sdk/credential-provider-sso@3.928.0", "", { "dependencies": { "@aws-sdk/client-sso": "3.928.0", "@aws-sdk/core": "3.928.0", "@aws-sdk/token-providers": "3.928.0", "@aws-sdk/types": "3.922.0", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-md/y+ePDsO1zqPJrsOyPs4ciKmdpqLL7B0dln1NhqZPnKIS5IBfTqZJ5tJ9eTezqc7Tn4Dbg6HiuemcGvZTeFA=="],
+    "@aws-sdk/credential-provider-sso": ["@aws-sdk/credential-provider-sso@3.921.0", "", { "dependencies": { "@aws-sdk/client-sso": "3.921.0", "@aws-sdk/core": "3.921.0", "@aws-sdk/token-providers": "3.921.0", "@aws-sdk/types": "3.921.0", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-Nh5jPJ6Y6nu3cHzZnq394lGXE5YO8Szke5zlATbNI7Tl0QJR65GE0IZsBcjzRMGpYX6ENCqPDK8FmklkmCYyVQ=="],
 
-    "@aws-sdk/credential-provider-web-identity": ["@aws-sdk/credential-provider-web-identity@3.928.0", "", { "dependencies": { "@aws-sdk/core": "3.928.0", "@aws-sdk/nested-clients": "3.928.0", "@aws-sdk/types": "3.922.0", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-rd97nLY5e/nGOr73ZfsXD+H44iZ9wyGZTKt/2QkiBN3hot/idhgT9+XHsWhRi+o/dThQbpL8RkpAnpF+0ZGthw=="],
+    "@aws-sdk/credential-provider-web-identity": ["@aws-sdk/credential-provider-web-identity@3.921.0", "", { "dependencies": { "@aws-sdk/core": "3.921.0", "@aws-sdk/nested-clients": "3.921.0", "@aws-sdk/types": "3.921.0", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-VWcbgB2/shPPK674roHV4s8biCtvn0P/05EbTqy9WeyM5Oblx291gRGccyDhQbJbOL/6diRPBM08tlKPlBKNfw=="],
 
-    "@aws-sdk/middleware-host-header": ["@aws-sdk/middleware-host-header@3.922.0", "", { "dependencies": { "@aws-sdk/types": "3.922.0", "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-HPquFgBnq/KqKRVkiuCt97PmWbKtxQ5iUNLEc6FIviqOoZTmaYG3EDsIbuFBz9C4RHJU4FKLmHL2bL3FEId6AA=="],
+    "@aws-sdk/middleware-host-header": ["@aws-sdk/middleware-host-header@3.921.0", "", { "dependencies": { "@aws-sdk/types": "3.921.0", "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-eX1Ka29XzuEcXG4YABTwyLtPLchjmcjSjaq4irKJTFkxSYzX7gjoKt18rh/ZzOWOSqi23+cpjvBacL4VBKvE2Q=="],
 
-    "@aws-sdk/middleware-logger": ["@aws-sdk/middleware-logger@3.922.0", "", { "dependencies": { "@aws-sdk/types": "3.922.0", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-AkvYO6b80FBm5/kk2E636zNNcNgjztNNUxpqVx+huyGn9ZqGTzS4kLqW2hO6CBe5APzVtPCtiQsXL24nzuOlAg=="],
+    "@aws-sdk/middleware-logger": ["@aws-sdk/middleware-logger@3.921.0", "", { "dependencies": { "@aws-sdk/types": "3.921.0", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-14Qqp8wisKGj/2Y22OfO5jTBG5Xez+p3Zr2piAtz7AcbY8vBEoZbd6f+9lwwVFC73Aobkau223wzKbGT8HYQMw=="],
 
-    "@aws-sdk/middleware-recursion-detection": ["@aws-sdk/middleware-recursion-detection@3.922.0", "", { "dependencies": { "@aws-sdk/types": "3.922.0", "@aws/lambda-invoke-store": "^0.1.1", "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-TtSCEDonV/9R0VhVlCpxZbp/9sxQvTTRKzIf8LxW3uXpby6Wl8IxEciBJlxmSkoqxh542WRcko7NYODlvL/gDA=="],
+    "@aws-sdk/middleware-recursion-detection": ["@aws-sdk/middleware-recursion-detection@3.921.0", "", { "dependencies": { "@aws-sdk/types": "3.921.0", "@aws/lambda-invoke-store": "^0.1.1", "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-MYU5oI2b97M7u1dC1nt7SiGEvvLrQDlzV6hq9CB5TYX2glgbyvkaS//1Tjm87VF6qVSf5jYfwFDPeFGd8O1NrQ=="],
 
-    "@aws-sdk/middleware-sdk-s3": ["@aws-sdk/middleware-sdk-s3@3.928.0", "", { "dependencies": { "@aws-sdk/core": "3.928.0", "@aws-sdk/types": "3.922.0", "@aws-sdk/util-arn-parser": "3.893.0", "@smithy/core": "^3.17.2", "@smithy/node-config-provider": "^4.3.4", "@smithy/protocol-http": "^5.3.4", "@smithy/signature-v4": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/util-config-provider": "^4.2.0", "@smithy/util-middleware": "^4.2.4", "@smithy/util-stream": "^4.5.5", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-LTkjS6cpJ2PEtsottTKq7JxZV0oH+QJ12P/dGNPZL4URayjEMBVR/dp4zh835X/FPXzijga3sdotlIKzuFy9FA=="],
+    "@aws-sdk/middleware-sdk-s3": ["@aws-sdk/middleware-sdk-s3@3.921.0", "", { "dependencies": { "@aws-sdk/core": "3.921.0", "@aws-sdk/types": "3.921.0", "@aws-sdk/util-arn-parser": "3.893.0", "@smithy/core": "^3.17.2", "@smithy/node-config-provider": "^4.3.4", "@smithy/protocol-http": "^5.3.4", "@smithy/signature-v4": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/util-config-provider": "^4.2.0", "@smithy/util-middleware": "^4.2.4", "@smithy/util-stream": "^4.5.5", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-u4fkE6sn5KWojhPUeDIqRx0BJlQug60PzAnLPlxeIvy2+ZeTSY64WYwF6V7wIZCf1RIstiBA/hQUsX07LfbvNg=="],
 
-    "@aws-sdk/middleware-user-agent": ["@aws-sdk/middleware-user-agent@3.928.0", "", { "dependencies": { "@aws-sdk/core": "3.928.0", "@aws-sdk/types": "3.922.0", "@aws-sdk/util-endpoints": "3.922.0", "@smithy/core": "^3.17.2", "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-ESvcfLx5PtpdUM3ptCwb80toBTd3y5I4w5jaeOPHihiZr7jkRLE/nsaCKzlqscPs6UQ8xI0maav04JUiTskcHw=="],
+    "@aws-sdk/middleware-user-agent": ["@aws-sdk/middleware-user-agent@3.921.0", "", { "dependencies": { "@aws-sdk/core": "3.921.0", "@aws-sdk/types": "3.921.0", "@aws-sdk/util-endpoints": "3.921.0", "@smithy/core": "^3.17.2", "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-gXgokMBTPZAbQMm1+JOxItqA81aSFK6n7V2mAwxdmHjzCUZacX5RzkVPNbSaPPgDkroYnIzK09EusIpM6dLaqw=="],
 
-    "@aws-sdk/nested-clients": ["@aws-sdk/nested-clients@3.928.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "3.928.0", "@aws-sdk/middleware-host-header": "3.922.0", "@aws-sdk/middleware-logger": "3.922.0", "@aws-sdk/middleware-recursion-detection": "3.922.0", "@aws-sdk/middleware-user-agent": "3.928.0", "@aws-sdk/region-config-resolver": "3.925.0", "@aws-sdk/types": "3.922.0", "@aws-sdk/util-endpoints": "3.922.0", "@aws-sdk/util-user-agent-browser": "3.922.0", "@aws-sdk/util-user-agent-node": "3.928.0", "@smithy/config-resolver": "^4.4.2", "@smithy/core": "^3.17.2", "@smithy/fetch-http-handler": "^5.3.5", "@smithy/hash-node": "^4.2.4", "@smithy/invalid-dependency": "^4.2.4", "@smithy/middleware-content-length": "^4.2.4", "@smithy/middleware-endpoint": "^4.3.6", "@smithy/middleware-retry": "^4.4.6", "@smithy/middleware-serde": "^4.2.4", "@smithy/middleware-stack": "^4.2.4", "@smithy/node-config-provider": "^4.3.4", "@smithy/node-http-handler": "^4.4.4", "@smithy/protocol-http": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/url-parser": "^4.2.4", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.5", "@smithy/util-defaults-mode-node": "^4.2.8", "@smithy/util-endpoints": "^3.2.4", "@smithy/util-middleware": "^4.2.4", "@smithy/util-retry": "^4.2.4", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-kXzfJkq2cD65KAHDe4hZCsnxcGGEWD5pjHqcZplwG4VFMa/iVn/mWrUY9QdadD2GBpXFNQbgOiKG3U2NkKu+4Q=="],
+    "@aws-sdk/nested-clients": ["@aws-sdk/nested-clients@3.921.0", "", { "dependencies": { "@aws-crypto/sha256-browser": "5.2.0", "@aws-crypto/sha256-js": "5.2.0", "@aws-sdk/core": "3.921.0", "@aws-sdk/middleware-host-header": "3.921.0", "@aws-sdk/middleware-logger": "3.921.0", "@aws-sdk/middleware-recursion-detection": "3.921.0", "@aws-sdk/middleware-user-agent": "3.921.0", "@aws-sdk/region-config-resolver": "3.921.0", "@aws-sdk/types": "3.921.0", "@aws-sdk/util-endpoints": "3.921.0", "@aws-sdk/util-user-agent-browser": "3.921.0", "@aws-sdk/util-user-agent-node": "3.921.0", "@smithy/config-resolver": "^4.4.1", "@smithy/core": "^3.17.2", "@smithy/fetch-http-handler": "^5.3.5", "@smithy/hash-node": "^4.2.4", "@smithy/invalid-dependency": "^4.2.4", "@smithy/middleware-content-length": "^4.2.4", "@smithy/middleware-endpoint": "^4.3.6", "@smithy/middleware-retry": "^4.4.6", "@smithy/middleware-serde": "^4.2.4", "@smithy/middleware-stack": "^4.2.4", "@smithy/node-config-provider": "^4.3.4", "@smithy/node-http-handler": "^4.4.4", "@smithy/protocol-http": "^5.3.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/url-parser": "^4.2.4", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-body-length-node": "^4.2.1", "@smithy/util-defaults-mode-browser": "^4.3.5", "@smithy/util-defaults-mode-node": "^4.2.7", "@smithy/util-endpoints": "^3.2.4", "@smithy/util-middleware": "^4.2.4", "@smithy/util-retry": "^4.2.4", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-GV9aV8WqH/EWo4x3T5BrYb2ph1yfYuzUXZc0hhvxbFbDKD8m2fX9menao3Mgm7E5C68Su392u+MD9SGmGCmfKQ=="],
 
-    "@aws-sdk/region-config-resolver": ["@aws-sdk/region-config-resolver@3.925.0", "", { "dependencies": { "@aws-sdk/types": "3.922.0", "@smithy/config-resolver": "^4.4.2", "@smithy/node-config-provider": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-FOthcdF9oDb1pfQBRCfWPZhJZT5wqpvdAS5aJzB1WDZ+6EuaAhLzLH/fW1slDunIqq1PSQGG3uSnVglVVOvPHQ=="],
+    "@aws-sdk/region-config-resolver": ["@aws-sdk/region-config-resolver@3.921.0", "", { "dependencies": { "@aws-sdk/types": "3.921.0", "@smithy/config-resolver": "^4.4.1", "@smithy/node-config-provider": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-cSycw4wXcvsrssUdcEaeYQhQcZYVsBwHtgATh9HcIm01PrMV0lV71vcoyZ+9vUhwHwchRT6dItAyTHSQxwjvjg=="],
 
-    "@aws-sdk/signature-v4-multi-region": ["@aws-sdk/signature-v4-multi-region@3.928.0", "", { "dependencies": { "@aws-sdk/middleware-sdk-s3": "3.928.0", "@aws-sdk/types": "3.922.0", "@smithy/protocol-http": "^5.3.4", "@smithy/signature-v4": "^5.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-1+Ic8+MyqQy+OE6QDoQKVCIcSZO+ETmLLLpVS5yu0fihBU85B5HHU7iaKX1qX7lEaGPMpSN/mbHW0VpyQ0Xqaw=="],
+    "@aws-sdk/signature-v4-multi-region": ["@aws-sdk/signature-v4-multi-region@3.921.0", "", { "dependencies": { "@aws-sdk/middleware-sdk-s3": "3.921.0", "@aws-sdk/types": "3.921.0", "@smithy/protocol-http": "^5.3.4", "@smithy/signature-v4": "^5.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-pFtJXtrf8cOsCgEb2OoPwQP4BKrnwIq69FuLowvWrXllFntAoAdEYaj9wNxPyl4pGqvo/9zO9CtkMb53PNxmWQ=="],
 
-    "@aws-sdk/token-providers": ["@aws-sdk/token-providers@3.928.0", "", { "dependencies": { "@aws-sdk/core": "3.928.0", "@aws-sdk/nested-clients": "3.928.0", "@aws-sdk/types": "3.922.0", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-533NpTdUJNDi98zBwRp4ZpZoqULrAVfc0YgIy+8AZHzk0v7N+v59O0d2Du3YO6zN4VU8HU8766DgKiyEag6Dzg=="],
+    "@aws-sdk/token-providers": ["@aws-sdk/token-providers@3.921.0", "", { "dependencies": { "@aws-sdk/core": "3.921.0", "@aws-sdk/nested-clients": "3.921.0", "@aws-sdk/types": "3.921.0", "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-d+w6X7ykqXirFBF+dYyK5Ntw0KmO2sgMj+JLR/vAe1vaR8/Fuqs3yOAFU7yNEzpcnbLJmMznxKpht03CSEMh4Q=="],
 
-    "@aws-sdk/types": ["@aws-sdk/types@3.922.0", "", { "dependencies": { "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-eLA6XjVobAUAMivvM7DBL79mnHyrm+32TkXNWZua5mnxF+6kQCfblKKJvxMZLGosO53/Ex46ogim8IY5Nbqv2w=="],
+    "@aws-sdk/types": ["@aws-sdk/types@3.921.0", "", { "dependencies": { "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-mqEG8+vFh5w0ZZC+R8VCOdSk998Hy93pIDuwYpfMAWgYwVhFaIMOLn1fZw0w2DhTs5+ONHHwMJ6uVXtuuqOLQQ=="],
 
     "@aws-sdk/util-arn-parser": ["@aws-sdk/util-arn-parser@3.893.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-u8H4f2Zsi19DGnwj5FSZzDMhytYF/bCh37vAtBsn3cNDL3YG578X5oc+wSX54pM3tOxS+NY7tvOAo52SW7koUA=="],
 
-    "@aws-sdk/util-endpoints": ["@aws-sdk/util-endpoints@3.922.0", "", { "dependencies": { "@aws-sdk/types": "3.922.0", "@smithy/types": "^4.8.1", "@smithy/url-parser": "^4.2.4", "@smithy/util-endpoints": "^3.2.4", "tslib": "^2.6.2" } }, "sha512-4ZdQCSuNMY8HMlR1YN4MRDdXuKd+uQTeKIr5/pIM+g3TjInZoj8imvXudjcrFGA63UF3t92YVTkBq88mg58RXQ=="],
+    "@aws-sdk/util-endpoints": ["@aws-sdk/util-endpoints@3.921.0", "", { "dependencies": { "@aws-sdk/types": "3.921.0", "@smithy/types": "^4.8.1", "@smithy/url-parser": "^4.2.4", "@smithy/util-endpoints": "^3.2.4", "tslib": "^2.6.2" } }, "sha512-kuJYRqug6V8gOg401BuK4w4IAVO3575VDR8iYiFw0gPwNIfOXvdlChfsJQoREqwJfif45J4eSmUsFtMfx87BQg=="],
 
     "@aws-sdk/util-locate-window": ["@aws-sdk/util-locate-window@3.893.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-T89pFfgat6c8nMmpI8eKjBcDcgJq36+m9oiXbcUzeU55MP9ZuGgBomGjGnHaEyF36jenW9gmg3NfZDm0AO2XPg=="],
 
-    "@aws-sdk/util-user-agent-browser": ["@aws-sdk/util-user-agent-browser@3.922.0", "", { "dependencies": { "@aws-sdk/types": "3.922.0", "@smithy/types": "^4.8.1", "bowser": "^2.11.0", "tslib": "^2.6.2" } }, "sha512-qOJAERZ3Plj1st7M4Q5henl5FRpE30uLm6L9edZqZXGR6c7ry9jzexWamWVpQ4H4xVAVmiO9dIEBAfbq4mduOA=="],
+    "@aws-sdk/util-user-agent-browser": ["@aws-sdk/util-user-agent-browser@3.921.0", "", { "dependencies": { "@aws-sdk/types": "3.921.0", "@smithy/types": "^4.8.1", "bowser": "^2.11.0", "tslib": "^2.6.2" } }, "sha512-buhv/ICWr4Nt8bquHOejCiVikBsfEYw4/HSc9U050QebRXIakt50zKYaWDQw4iCMeeqCiwE9mElEaXJAysythg=="],
 
-    "@aws-sdk/util-user-agent-node": ["@aws-sdk/util-user-agent-node@3.928.0", "", { "dependencies": { "@aws-sdk/middleware-user-agent": "3.928.0", "@aws-sdk/types": "3.922.0", "@smithy/node-config-provider": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" }, "peerDependencies": { "aws-crt": ">=1.0.0" }, "optionalPeers": ["aws-crt"] }, "sha512-s0jP67nQLLWVWfBtqTkZUkSWK5e6OI+rs+wFya2h9VLyWBFir17XSDI891s8HZKIVCEl8eBrup+hhywm4nsIAA=="],
+    "@aws-sdk/util-user-agent-node": ["@aws-sdk/util-user-agent-node@3.921.0", "", { "dependencies": { "@aws-sdk/middleware-user-agent": "3.921.0", "@aws-sdk/types": "3.921.0", "@smithy/node-config-provider": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" }, "peerDependencies": { "aws-crt": ">=1.0.0" }, "optionalPeers": ["aws-crt"] }, "sha512-Ilftai6AMAU1cEaUqIiTxkyj1NupLhP9Eq8HRfVuIH8489J2wLCcOyiLklAgSzBNmrxW+fagxkY+Dg0lFwmcVA=="],
 
     "@aws-sdk/xml-builder": ["@aws-sdk/xml-builder@3.921.0", "", { "dependencies": { "@smithy/types": "^4.8.1", "fast-xml-parser": "5.2.5", "tslib": "^2.6.2" } }, "sha512-LVHg0jgjyicKKvpNIEMXIMr1EBViESxcPkqfOlT+X1FkmUMTNZEEVF18tOJg4m4hV5vxtkWcqtr4IEeWa1C41Q=="],
 
@@ -263,57 +262,57 @@
 
     "@dicebear/thumbs": ["@dicebear/thumbs@9.2.4", "", { "peerDependencies": { "@dicebear/core": "^9.0.0" } }, "sha512-EL4sMqv9p2+1Xy3d8e8UxyeKZV2+cgt3X2x2RTRzEOIIhobtkL8u6lJxmJbiGbpVtVALmrt5e7gjmwqpryYDpg=="],
 
-    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="],
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.11", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg=="],
 
-    "@esbuild/android-arm": ["@esbuild/android-arm@0.25.12", "", { "os": "android", "cpu": "arm" }, "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg=="],
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.25.11", "", { "os": "android", "cpu": "arm" }, "sha512-uoa7dU+Dt3HYsethkJ1k6Z9YdcHjTrSb5NUy66ZfZaSV8hEYGD5ZHbEMXnqLFlbBflLsl89Zke7CAdDJ4JI+Gg=="],
 
-    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.12", "", { "os": "android", "cpu": "arm64" }, "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg=="],
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.11", "", { "os": "android", "cpu": "arm64" }, "sha512-9slpyFBc4FPPz48+f6jyiXOx/Y4v34TUeDDXJpZqAWQn/08lKGeD8aDp9TMn9jDz2CiEuHwfhRmGBvpnd/PWIQ=="],
 
-    "@esbuild/android-x64": ["@esbuild/android-x64@0.25.12", "", { "os": "android", "cpu": "x64" }, "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg=="],
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.25.11", "", { "os": "android", "cpu": "x64" }, "sha512-Sgiab4xBjPU1QoPEIqS3Xx+R2lezu0LKIEcYe6pftr56PqPygbB7+szVnzoShbx64MUupqoE0KyRlN7gezbl8g=="],
 
-    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg=="],
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.11", "", { "os": "darwin", "cpu": "arm64" }, "sha512-VekY0PBCukppoQrycFxUqkCojnTQhdec0vevUL/EDOCnXd9LKWqD/bHwMPzigIJXPhC59Vd1WFIL57SKs2mg4w=="],
 
-    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA=="],
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.11", "", { "os": "darwin", "cpu": "x64" }, "sha512-+hfp3yfBalNEpTGp9loYgbknjR695HkqtY3d3/JjSRUyPg/xd6q+mQqIb5qdywnDxRZykIHs3axEqU6l1+oWEQ=="],
 
-    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.12", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg=="],
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.11", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-CmKjrnayyTJF2eVuO//uSjl/K3KsMIeYeyN7FyDBjsR3lnSJHaXlVoAK8DZa7lXWChbuOk7NjAc7ygAwrnPBhA=="],
 
-    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.12", "", { "os": "freebsd", "cpu": "x64" }, "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ=="],
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.11", "", { "os": "freebsd", "cpu": "x64" }, "sha512-Dyq+5oscTJvMaYPvW3x3FLpi2+gSZTCE/1ffdwuM6G1ARang/mb3jvjxs0mw6n3Lsw84ocfo9CrNMqc5lTfGOw=="],
 
-    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.12", "", { "os": "linux", "cpu": "arm" }, "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw=="],
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.11", "", { "os": "linux", "cpu": "arm" }, "sha512-TBMv6B4kCfrGJ8cUPo7vd6NECZH/8hPpBHHlYI3qzoYFvWu2AdTvZNuU/7hsbKWqu/COU7NIK12dHAAqBLLXgw=="],
 
-    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ=="],
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.11", "", { "os": "linux", "cpu": "arm64" }, "sha512-Qr8AzcplUhGvdyUF08A1kHU3Vr2O88xxP0Tm8GcdVOUm25XYcMPp2YqSVHbLuXzYQMf9Bh/iKx7YPqECs6ffLA=="],
 
-    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.12", "", { "os": "linux", "cpu": "ia32" }, "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA=="],
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.11", "", { "os": "linux", "cpu": "ia32" }, "sha512-TmnJg8BMGPehs5JKrCLqyWTVAvielc615jbkOirATQvWWB1NMXY77oLMzsUjRLa0+ngecEmDGqt5jiDC6bfvOw=="],
 
-    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng=="],
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.11", "", { "os": "linux", "cpu": "none" }, "sha512-DIGXL2+gvDaXlaq8xruNXUJdT5tF+SBbJQKbWy/0J7OhU8gOHOzKmGIlfTTl6nHaCOoipxQbuJi7O++ldrxgMw=="],
 
-    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw=="],
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.11", "", { "os": "linux", "cpu": "none" }, "sha512-Osx1nALUJu4pU43o9OyjSCXokFkFbyzjXb6VhGIJZQ5JZi8ylCQ9/LFagolPsHtgw6himDSyb5ETSfmp4rpiKQ=="],
 
-    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.12", "", { "os": "linux", "cpu": "ppc64" }, "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA=="],
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.11", "", { "os": "linux", "cpu": "ppc64" }, "sha512-nbLFgsQQEsBa8XSgSTSlrnBSrpoWh7ioFDUmwo158gIm5NNP+17IYmNWzaIzWmgCxq56vfr34xGkOcZ7jX6CPw=="],
 
-    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w=="],
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.11", "", { "os": "linux", "cpu": "none" }, "sha512-HfyAmqZi9uBAbgKYP1yGuI7tSREXwIb438q0nqvlpxAOs3XnZ8RsisRfmVsgV486NdjD7Mw2UrFSw51lzUk1ww=="],
 
-    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.12", "", { "os": "linux", "cpu": "s390x" }, "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg=="],
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.11", "", { "os": "linux", "cpu": "s390x" }, "sha512-HjLqVgSSYnVXRisyfmzsH6mXqyvj0SA7pG5g+9W7ESgwA70AXYNpfKBqh1KbTxmQVaYxpzA/SvlB9oclGPbApw=="],
 
-    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.12", "", { "os": "linux", "cpu": "x64" }, "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw=="],
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.11", "", { "os": "linux", "cpu": "x64" }, "sha512-HSFAT4+WYjIhrHxKBwGmOOSpphjYkcswF449j6EjsjbinTZbp8PJtjsVK1XFJStdzXdy/jaddAep2FGY+wyFAQ=="],
 
-    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.12", "", { "os": "none", "cpu": "arm64" }, "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg=="],
+    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.11", "", { "os": "none", "cpu": "arm64" }, "sha512-hr9Oxj1Fa4r04dNpWr3P8QKVVsjQhqrMSUzZzf+LZcYjZNqhA3IAfPQdEh1FLVUJSiu6sgAwp3OmwBfbFgG2Xg=="],
 
-    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.12", "", { "os": "none", "cpu": "x64" }, "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ=="],
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.11", "", { "os": "none", "cpu": "x64" }, "sha512-u7tKA+qbzBydyj0vgpu+5h5AeudxOAGncb8N6C9Kh1N4n7wU1Xw1JDApsRjpShRpXRQlJLb9wY28ELpwdPcZ7A=="],
 
-    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.12", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A=="],
+    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.11", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-Qq6YHhayieor3DxFOoYM1q0q1uMFYb7cSpLD2qzDSvK1NAvqFi8Xgivv0cFC6J+hWVw2teCYltyy9/m/14ryHg=="],
 
-    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.12", "", { "os": "openbsd", "cpu": "x64" }, "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw=="],
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.11", "", { "os": "openbsd", "cpu": "x64" }, "sha512-CN+7c++kkbrckTOz5hrehxWN7uIhFFlmS/hqziSFVWpAzpWrQoAG4chH+nN3Be+Kzv/uuo7zhX716x3Sn2Jduw=="],
 
-    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.25.12", "", { "os": "none", "cpu": "arm64" }, "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg=="],
+    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.25.11", "", { "os": "none", "cpu": "arm64" }, "sha512-rOREuNIQgaiR+9QuNkbkxubbp8MSO9rONmwP5nKncnWJ9v5jQ4JxFnLu4zDSRPf3x4u+2VN4pM4RdyIzDty/wQ=="],
 
-    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.12", "", { "os": "sunos", "cpu": "x64" }, "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w=="],
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.11", "", { "os": "sunos", "cpu": "x64" }, "sha512-nq2xdYaWxyg9DcIyXkZhcYulC6pQ2FuCgem3LI92IwMgIZ69KHeY8T4Y88pcwoLIjbed8n36CyKoYRDygNSGhA=="],
 
-    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg=="],
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.11", "", { "os": "win32", "cpu": "arm64" }, "sha512-3XxECOWJq1qMZ3MN8srCJ/QfoLpL+VaxD/WfNRm1O3B4+AZ/BnLVgFbUV3eiRYDMXetciH16dwPbbHqwe1uU0Q=="],
 
-    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.12", "", { "os": "win32", "cpu": "ia32" }, "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ=="],
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.11", "", { "os": "win32", "cpu": "ia32" }, "sha512-3ukss6gb9XZ8TlRyJlgLn17ecsK4NSQTmdIXRASVsiS2sQ6zPPZklNJT5GR5tE/MUarymmy8kCEf5xPCNCqVOA=="],
 
-    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.12", "", { "os": "win32", "cpu": "x64" }, "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA=="],
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.11", "", { "os": "win32", "cpu": "x64" }, "sha512-D7Hpz6A2L4hzsRpPaCYkQnGOotdUpDzSGRIv9I+1ITdHROSFUWW95ZPZWQmGka1Fg7W3zFJowyn9WGwMJ0+KPA=="],
 
     "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.9.0", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g=="],
 
@@ -369,7 +368,7 @@
 
     "@levischuck/tiny-cbor": ["@levischuck/tiny-cbor@0.2.11", "", {}, "sha512-llBRm4dT4Z89aRsm6u2oEZ8tfwL/2l6BwpZ7JcyieouniDECM5AqNgr/y08zalEIvW3RSK4upYyybDcmjXqAow=="],
 
-    "@mmailaender/convex-better-auth-svelte": ["@mmailaender/convex-better-auth-svelte@0.2.1", "", { "dependencies": { "is-network-error": "^1.1.0" }, "peerDependencies": { "@convex-dev/better-auth": "^0.9.0", "better-auth": "^1.3.27", "convex": "^1.27.0", "convex-svelte": ">=0.0.12", "svelte": "^5.0.0" } }, "sha512-vcQ0Jc7LdR2Kx8p1s3OaBB29kH31/5uKPIh7ejIS3UqfRYa9/zbaBy6OwEVifKDcQy/3begUCRbQsD9eF7+PnA=="],
+    "@mmailaender/convex-better-auth-svelte": ["@mmailaender/convex-better-auth-svelte@0.2.0", "", { "dependencies": { "is-network-error": "^1.1.0" }, "peerDependencies": { "@convex-dev/better-auth": "^0.9.0", "better-auth": "^1.3.27", "convex": "^1.27.0", "convex-svelte": "^0.0.11", "svelte": "^5.0.0" } }, "sha512-qzahOJg30xErb4ZW+aeszQw4ydhCmKFXn8CeRSA77YxR/dDMgZl+vdWLE4EKsDN0Jd748ecWMnk1fDNNUdgDcg=="],
 
     "@next/eslint-plugin-next": ["@next/eslint-plugin-next@15.5.6", "", { "dependencies": { "fast-glob": "3.3.1" } }, "sha512-YxDvsT2fwy1j5gMqk3ppXlsgDopHnkM4BoxSVASbvvgh5zgsK8lvWerDzPip8k3WVzsTZ1O7A7si1KNfN4OZfQ=="],
 
@@ -409,49 +408,49 @@
 
     "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
 
-    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.53.2", "", { "os": "android", "cpu": "arm" }, "sha512-yDPzwsgiFO26RJA4nZo8I+xqzh7sJTZIWQOxn+/XOdPE31lAvLIYCKqjV+lNH/vxE2L2iH3plKxDCRK6i+CwhA=="],
+    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.52.5", "", { "os": "android", "cpu": "arm" }, "sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ=="],
 
-    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.53.2", "", { "os": "android", "cpu": "arm64" }, "sha512-k8FontTxIE7b0/OGKeSN5B6j25EuppBcWM33Z19JoVT7UTXFSo3D9CdU39wGTeb29NO3XxpMNauh09B+Ibw+9g=="],
+    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.52.5", "", { "os": "android", "cpu": "arm64" }, "sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA=="],
 
-    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.53.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-A6s4gJpomNBtJ2yioj8bflM2oogDwzUiMl2yNJ2v9E7++sHrSrsQ29fOfn5DM/iCzpWcebNYEdXpaK4tr2RhfQ=="],
+    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.52.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA=="],
 
-    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.53.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-e6XqVmXlHrBlG56obu9gDRPW3O3hLxpwHpLsBJvuI8qqnsrtSZ9ERoWUXtPOkY8c78WghyPHZdmPhHLWNdAGEw=="],
+    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.52.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA=="],
 
-    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.53.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-v0E9lJW8VsrwPux5Qe5CwmH/CF/2mQs6xU1MF3nmUxmZUCHazCjLgYvToOk+YuuUqLQBio1qkkREhxhc656ViA=="],
+    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.52.5", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA=="],
 
-    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.53.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-ClAmAPx3ZCHtp6ysl4XEhWU69GUB1D+s7G9YjHGhIGCSrsg00nEGRRZHmINYxkdoJehde8VIsDC5t9C0gb6yqA=="],
+    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.52.5", "", { "os": "freebsd", "cpu": "x64" }, "sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ=="],
 
-    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.53.2", "", { "os": "linux", "cpu": "arm" }, "sha512-EPlb95nUsz6Dd9Qy13fI5kUPXNSljaG9FiJ4YUGU1O/Q77i5DYFW5KR8g1OzTcdZUqQQ1KdDqsTohdFVwCwjqg=="],
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.52.5", "", { "os": "linux", "cpu": "arm" }, "sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ=="],
 
-    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.53.2", "", { "os": "linux", "cpu": "arm" }, "sha512-BOmnVW+khAUX+YZvNfa0tGTEMVVEerOxN0pDk2E6N6DsEIa2Ctj48FOMfNDdrwinocKaC7YXUZ1pHlKpnkja/Q=="],
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.52.5", "", { "os": "linux", "cpu": "arm" }, "sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ=="],
 
-    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.53.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-Xt2byDZ+6OVNuREgBXr4+CZDJtrVso5woFtpKdGPhpTPHcNG7D8YXeQzpNbFRxzTVqJf7kvPMCub/pcGUWgBjA=="],
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.52.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg=="],
 
-    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.53.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-+LdZSldy/I9N8+klim/Y1HsKbJ3BbInHav5qE9Iy77dtHC/pibw1SR/fXlWyAk0ThnpRKoODwnAuSjqxFRDHUQ=="],
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.52.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q=="],
 
-    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.53.2", "", { "os": "linux", "cpu": "none" }, "sha512-8ms8sjmyc1jWJS6WdNSA23rEfdjWB30LH8Wqj0Cqvv7qSHnvw6kgMMXRdop6hkmGPlyYBdRPkjJnj3KCUHV/uQ=="],
+    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.52.5", "", { "os": "linux", "cpu": "none" }, "sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA=="],
 
-    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.53.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-3HRQLUQbpBDMmzoxPJYd3W6vrVHOo2cVW8RUo87Xz0JPJcBLBr5kZ1pGcQAhdZgX9VV7NbGNipah1omKKe23/g=="],
+    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.52.5", "", { "os": "linux", "cpu": "ppc64" }, "sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw=="],
 
-    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.53.2", "", { "os": "linux", "cpu": "none" }, "sha512-fMjKi+ojnmIvhk34gZP94vjogXNNUKMEYs+EDaB/5TG/wUkoeua7p7VCHnE6T2Tx+iaghAqQX8teQzcvrYpaQA=="],
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.52.5", "", { "os": "linux", "cpu": "none" }, "sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw=="],
 
-    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.53.2", "", { "os": "linux", "cpu": "none" }, "sha512-XuGFGU+VwUUV5kLvoAdi0Wz5Xbh2SrjIxCtZj6Wq8MDp4bflb/+ThZsVxokM7n0pcbkEr2h5/pzqzDYI7cCgLQ=="],
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.52.5", "", { "os": "linux", "cpu": "none" }, "sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg=="],
 
-    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.53.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-w6yjZF0P+NGzWR3AXWX9zc0DNEGdtvykB03uhonSHMRa+oWA6novflo2WaJr6JZakG2ucsyb+rvhrKac6NIy+w=="],
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.52.5", "", { "os": "linux", "cpu": "s390x" }, "sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ=="],
 
-    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.53.2", "", { "os": "linux", "cpu": "x64" }, "sha512-yo8d6tdfdeBArzC7T/PnHd7OypfI9cbuZzPnzLJIyKYFhAQ8SvlkKtKBMbXDxe1h03Rcr7u++nFS7tqXz87Gtw=="],
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.52.5", "", { "os": "linux", "cpu": "x64" }, "sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q=="],
 
-    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.53.2", "", { "os": "linux", "cpu": "x64" }, "sha512-ah59c1YkCxKExPP8O9PwOvs+XRLKwh/mV+3YdKqQ5AMQ0r4M4ZDuOrpWkUaqO7fzAHdINzV9tEVu8vNw48z0lA=="],
+    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.52.5", "", { "os": "linux", "cpu": "x64" }, "sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg=="],
 
-    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.53.2", "", { "os": "none", "cpu": "arm64" }, "sha512-4VEd19Wmhr+Zy7hbUsFZ6YXEiP48hE//KPLCSVNY5RMGX2/7HZ+QkN55a3atM1C/BZCGIgqN+xrVgtdak2S9+A=="],
+    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.52.5", "", { "os": "none", "cpu": "arm64" }, "sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw=="],
 
-    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.53.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-IlbHFYc/pQCgew/d5fslcy1KEaYVCJ44G8pajugd8VoOEI8ODhtb/j8XMhLpwHCMB3yk2J07ctup10gpw2nyMA=="],
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.52.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w=="],
 
-    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.53.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-lNlPEGgdUfSzdCWU176ku/dQRnA7W+Gp8d+cWv73jYrb8uT7HTVVxq62DUYxjbaByuf1Yk0RIIAbDzp+CnOTFg=="],
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.52.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg=="],
 
-    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.53.2", "", { "os": "win32", "cpu": "x64" }, "sha512-S6YojNVrHybQis2lYov1sd+uj7K0Q05NxHcGktuMMdIQ2VixGwAfbJ23NnlvvVV1bdpR2m5MsNBViHJKcA4ADw=="],
+    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.52.5", "", { "os": "win32", "cpu": "x64" }, "sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ=="],
 
-    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.53.2", "", { "os": "win32", "cpu": "x64" }, "sha512-k+/Rkcyx//P6fetPoLMb8pBeqJBNGx81uuf7iljX9++yNBVRDQgD04L+SVXmXmh5ZP4/WOp4mWF0kmi06PW2tA=="],
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.52.5", "", { "os": "win32", "cpu": "x64" }, "sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg=="],
 
     "@sgse-app/backend": ["@sgse-app/backend@workspace:packages/backend"],
 
@@ -461,55 +460,55 @@
 
     "@simplewebauthn/server": ["@simplewebauthn/server@13.2.2", "", { "dependencies": { "@hexagon/base64": "^1.1.27", "@levischuck/tiny-cbor": "^0.2.2", "@peculiar/asn1-android": "^2.3.10", "@peculiar/asn1-ecc": "^2.3.8", "@peculiar/asn1-rsa": "^2.3.8", "@peculiar/asn1-schema": "^2.3.8", "@peculiar/asn1-x509": "^2.3.8", "@peculiar/x509": "^1.13.0" } }, "sha512-HcWLW28yTMGXpwE9VLx9J+N2KEUaELadLrkPEEI9tpI5la70xNEVEsu/C+m3u7uoq4FulLqZQhgBCzR9IZhFpA=="],
 
-    "@smithy/abort-controller": ["@smithy/abort-controller@4.2.5", "", { "dependencies": { "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-j7HwVkBw68YW8UmFRcjZOmssE77Rvk0GWAIN1oFBhsaovQmZWYCIcGa9/pwRB0ExI8Sk9MWNALTjftjHZea7VA=="],
+    "@smithy/abort-controller": ["@smithy/abort-controller@4.2.4", "", { "dependencies": { "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-Z4DUr/AkgyFf1bOThW2HwzREagee0sB5ycl+hDiSZOfRLW8ZgrOjDi6g8mHH19yyU5E2A/64W3z6SMIf5XiUSQ=="],
 
-    "@smithy/config-resolver": ["@smithy/config-resolver@4.4.3", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.5", "@smithy/types": "^4.9.0", "@smithy/util-config-provider": "^4.2.0", "@smithy/util-endpoints": "^3.2.5", "@smithy/util-middleware": "^4.2.5", "tslib": "^2.6.2" } }, "sha512-ezHLe1tKLUxDJo2LHtDuEDyWXolw8WGOR92qb4bQdWq/zKenO5BvctZGrVJBK08zjezSk7bmbKFOXIVyChvDLw=="],
+    "@smithy/config-resolver": ["@smithy/config-resolver@4.4.1", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.4", "@smithy/types": "^4.8.1", "@smithy/util-config-provider": "^4.2.0", "@smithy/util-endpoints": "^3.2.4", "@smithy/util-middleware": "^4.2.4", "tslib": "^2.6.2" } }, "sha512-BciDJ5hkyYEGBBKMbjGB1A/Zq8bYZ41Zo9BMnGdKF6QD1fY4zIkYx6zui/0CHaVGnv6h0iy8y4rnPX9CPCAPyQ=="],
 
-    "@smithy/core": ["@smithy/core@3.18.0", "", { "dependencies": { "@smithy/middleware-serde": "^4.2.5", "@smithy/protocol-http": "^5.3.5", "@smithy/types": "^4.9.0", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-middleware": "^4.2.5", "@smithy/util-stream": "^4.5.6", "@smithy/util-utf8": "^4.2.0", "@smithy/uuid": "^1.1.0", "tslib": "^2.6.2" } }, "sha512-vGSDXOJFZgOPTatSI1ly7Gwyy/d/R9zh2TO3y0JZ0uut5qQ88p9IaWaZYIWSSqtdekNM4CGok/JppxbAff4KcQ=="],
+    "@smithy/core": ["@smithy/core@3.17.2", "", { "dependencies": { "@smithy/middleware-serde": "^4.2.4", "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "@smithy/util-base64": "^4.3.0", "@smithy/util-body-length-browser": "^4.2.0", "@smithy/util-middleware": "^4.2.4", "@smithy/util-stream": "^4.5.5", "@smithy/util-utf8": "^4.2.0", "@smithy/uuid": "^1.1.0", "tslib": "^2.6.2" } }, "sha512-n3g4Nl1Te+qGPDbNFAYf+smkRVB+JhFsGy9uJXXZQEufoP4u0r+WLh6KvTDolCswaagysDc/afS1yvb2jnj1gQ=="],
 
-    "@smithy/credential-provider-imds": ["@smithy/credential-provider-imds@4.2.5", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.5", "@smithy/property-provider": "^4.2.5", "@smithy/types": "^4.9.0", "@smithy/url-parser": "^4.2.5", "tslib": "^2.6.2" } }, "sha512-BZwotjoZWn9+36nimwm/OLIcVe+KYRwzMjfhd4QT7QxPm9WY0HiOV8t/Wlh+HVUif0SBVV7ksq8//hPaBC/okQ=="],
+    "@smithy/credential-provider-imds": ["@smithy/credential-provider-imds@4.2.4", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.4", "@smithy/property-provider": "^4.2.4", "@smithy/types": "^4.8.1", "@smithy/url-parser": "^4.2.4", "tslib": "^2.6.2" } }, "sha512-YVNMjhdz2pVto5bRdux7GMs0x1m0Afz3OcQy/4Yf9DH4fWOtroGH7uLvs7ZmDyoBJzLdegtIPpXrpJOZWvUXdw=="],
 
-    "@smithy/fetch-http-handler": ["@smithy/fetch-http-handler@5.3.6", "", { "dependencies": { "@smithy/protocol-http": "^5.3.5", "@smithy/querystring-builder": "^4.2.5", "@smithy/types": "^4.9.0", "@smithy/util-base64": "^4.3.0", "tslib": "^2.6.2" } }, "sha512-3+RG3EA6BBJ/ofZUeTFJA7mHfSYrZtQIrDP9dI8Lf7X6Jbos2jptuLrAAteDiFVrmbEmLSuRG/bUKzfAXk7dhg=="],
+    "@smithy/fetch-http-handler": ["@smithy/fetch-http-handler@5.3.5", "", { "dependencies": { "@smithy/protocol-http": "^5.3.4", "@smithy/querystring-builder": "^4.2.4", "@smithy/types": "^4.8.1", "@smithy/util-base64": "^4.3.0", "tslib": "^2.6.2" } }, "sha512-mg83SM3FLI8Sa2ooTJbsh5MFfyMTyNRwxqpKHmE0ICRIa66Aodv80DMsTQI02xBLVJ0hckwqTRr5IGAbbWuFLQ=="],
 
-    "@smithy/hash-node": ["@smithy/hash-node@4.2.5", "", { "dependencies": { "@smithy/types": "^4.9.0", "@smithy/util-buffer-from": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-DpYX914YOfA3UDT9CN1BM787PcHfWRBB43fFGCYrZFUH0Jv+5t8yYl+Pd5PW4+QzoGEDvn5d5QIO4j2HyYZQSA=="],
+    "@smithy/hash-node": ["@smithy/hash-node@4.2.4", "", { "dependencies": { "@smithy/types": "^4.8.1", "@smithy/util-buffer-from": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-kKU0gVhx/ppVMntvUOZE7WRMFW86HuaxLwvqileBEjL7PoILI8/djoILw3gPQloGVE6O0oOzqafxeNi2KbnUJw=="],
 
-    "@smithy/invalid-dependency": ["@smithy/invalid-dependency@4.2.5", "", { "dependencies": { "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-2L2erASEro1WC5nV+plwIMxrTXpvpfzl4e+Nre6vBVRR2HKeGGcvpJyyL3/PpiSg+cJG2KpTmZmq934Olb6e5A=="],
+    "@smithy/invalid-dependency": ["@smithy/invalid-dependency@4.2.4", "", { "dependencies": { "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-z6aDLGiHzsMhbS2MjetlIWopWz//K+mCoPXjW6aLr0mypF+Y7qdEh5TyJ20Onf9FbWHiWl4eC+rITdizpnXqOw=="],
 
     "@smithy/is-array-buffer": ["@smithy/is-array-buffer@4.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-DZZZBvC7sjcYh4MazJSGiWMI2L7E0oCiRHREDzIxi/M2LY79/21iXt6aPLHge82wi5LsuRF5A06Ds3+0mlh6CQ=="],
 
-    "@smithy/middleware-content-length": ["@smithy/middleware-content-length@4.2.5", "", { "dependencies": { "@smithy/protocol-http": "^5.3.5", "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-Y/RabVa5vbl5FuHYV2vUCwvh/dqzrEY/K2yWPSqvhFUwIY0atLqO4TienjBXakoy4zrKAMCZwg+YEqmH7jaN7A=="],
+    "@smithy/middleware-content-length": ["@smithy/middleware-content-length@4.2.4", "", { "dependencies": { "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-hJRZuFS9UsElX4DJSJfoX4M1qXRH+VFiLMUnhsWvtOOUWRNvvOfDaUSdlNbjwv1IkpVjj/Rd/O59Jl3nhAcxow=="],
 
-    "@smithy/middleware-endpoint": ["@smithy/middleware-endpoint@4.3.7", "", { "dependencies": { "@smithy/core": "^3.18.0", "@smithy/middleware-serde": "^4.2.5", "@smithy/node-config-provider": "^4.3.5", "@smithy/shared-ini-file-loader": "^4.4.0", "@smithy/types": "^4.9.0", "@smithy/url-parser": "^4.2.5", "@smithy/util-middleware": "^4.2.5", "tslib": "^2.6.2" } }, "sha512-i8Mi8OuY6Yi82Foe3iu7/yhBj1HBRoOQwBSsUNYglJTNSFaWYTNM2NauBBs/7pq2sqkLRqeUXA3Ogi2utzpUlQ=="],
+    "@smithy/middleware-endpoint": ["@smithy/middleware-endpoint@4.3.6", "", { "dependencies": { "@smithy/core": "^3.17.2", "@smithy/middleware-serde": "^4.2.4", "@smithy/node-config-provider": "^4.3.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "@smithy/url-parser": "^4.2.4", "@smithy/util-middleware": "^4.2.4", "tslib": "^2.6.2" } }, "sha512-PXehXofGMFpDqr933rxD8RGOcZ0QBAWtuzTgYRAHAL2BnKawHDEdf/TnGpcmfPJGwonhginaaeJIKluEojiF/w=="],
 
-    "@smithy/middleware-retry": ["@smithy/middleware-retry@4.4.7", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.5", "@smithy/protocol-http": "^5.3.5", "@smithy/service-error-classification": "^4.2.5", "@smithy/smithy-client": "^4.9.3", "@smithy/types": "^4.9.0", "@smithy/util-middleware": "^4.2.5", "@smithy/util-retry": "^4.2.5", "@smithy/uuid": "^1.1.0", "tslib": "^2.6.2" } }, "sha512-E7Vc6WHCHlzDRTx1W0jZ6J1L6ziEV0PIWcUdmfL4y+c8r7WYr6I+LkQudaD8Nfb7C5c4P3SQ972OmXHtv6m/OA=="],
+    "@smithy/middleware-retry": ["@smithy/middleware-retry@4.4.6", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.4", "@smithy/protocol-http": "^5.3.4", "@smithy/service-error-classification": "^4.2.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "@smithy/util-middleware": "^4.2.4", "@smithy/util-retry": "^4.2.4", "@smithy/uuid": "^1.1.0", "tslib": "^2.6.2" } }, "sha512-OhLx131znrEDxZPAvH/OYufR9d1nB2CQADyYFN4C3V/NQS7Mg4V6uvxHC/Dr96ZQW8IlHJTJ+vAhKt6oxWRndA=="],
 
-    "@smithy/middleware-serde": ["@smithy/middleware-serde@4.2.5", "", { "dependencies": { "@smithy/protocol-http": "^5.3.5", "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-La1ldWTJTZ5NqQyPqnCNeH9B+zjFhrNoQIL1jTh4zuqXRlmXhxYHhMtI1/92OlnoAtp6JoN7kzuwhWoXrBwPqg=="],
+    "@smithy/middleware-serde": ["@smithy/middleware-serde@4.2.4", "", { "dependencies": { "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-jUr3x2CDhV15TOX2/Uoz4gfgeqLrRoTQbYAuhLS7lcVKNev7FeYSJ1ebEfjk+l9kbb7k7LfzIR/irgxys5ZTOg=="],
 
-    "@smithy/middleware-stack": ["@smithy/middleware-stack@4.2.5", "", { "dependencies": { "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-bYrutc+neOyWxtZdbB2USbQttZN0mXaOyYLIsaTbJhFsfpXyGWUxJpEuO1rJ8IIJm2qH4+xJT0mxUSsEDTYwdQ=="],
+    "@smithy/middleware-stack": ["@smithy/middleware-stack@4.2.4", "", { "dependencies": { "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-Gy3TKCOnm9JwpFooldwAboazw+EFYlC+Bb+1QBsSi5xI0W5lX81j/P5+CXvD/9ZjtYKRgxq+kkqd/KOHflzvgA=="],
 
-    "@smithy/node-config-provider": ["@smithy/node-config-provider@4.3.5", "", { "dependencies": { "@smithy/property-provider": "^4.2.5", "@smithy/shared-ini-file-loader": "^4.4.0", "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-UTurh1C4qkVCtqggI36DGbLB2Kv8UlcFdMXDcWMbqVY2uRg0XmT9Pb4Vj6oSQ34eizO1fvR0RnFV4Axw4IrrAg=="],
+    "@smithy/node-config-provider": ["@smithy/node-config-provider@4.3.4", "", { "dependencies": { "@smithy/property-provider": "^4.2.4", "@smithy/shared-ini-file-loader": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-3X3w7qzmo4XNNdPKNS4nbJcGSwiEMsNsRSunMA92S4DJLLIrH5g1AyuOA2XKM9PAPi8mIWfqC+fnfKNsI4KvHw=="],
 
-    "@smithy/node-http-handler": ["@smithy/node-http-handler@4.4.5", "", { "dependencies": { "@smithy/abort-controller": "^4.2.5", "@smithy/protocol-http": "^5.3.5", "@smithy/querystring-builder": "^4.2.5", "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-CMnzM9R2WqlqXQGtIlsHMEZfXKJVTIrqCNoSd/QpAyp+Dw0a1Vps13l6ma1fH8g7zSPNsA59B/kWgeylFuA/lw=="],
+    "@smithy/node-http-handler": ["@smithy/node-http-handler@4.4.4", "", { "dependencies": { "@smithy/abort-controller": "^4.2.4", "@smithy/protocol-http": "^5.3.4", "@smithy/querystring-builder": "^4.2.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-VXHGfzCXLZeKnFp6QXjAdy+U8JF9etfpUXD1FAbzY1GzsFJiDQRQIt2CnMUvUdz3/YaHNqT3RphVWMUpXTIODA=="],
 
-    "@smithy/property-provider": ["@smithy/property-provider@4.2.5", "", { "dependencies": { "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-8iLN1XSE1rl4MuxvQ+5OSk/Zb5El7NJZ1td6Tn+8dQQHIjp59Lwl6bd0+nzw6SKm2wSSriH2v/I9LPzUic7EOg=="],
+    "@smithy/property-provider": ["@smithy/property-provider@4.2.4", "", { "dependencies": { "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-g2DHo08IhxV5GdY3Cpt/jr0mkTlAD39EJKN27Jb5N8Fb5qt8KG39wVKTXiTRCmHHou7lbXR8nKVU14/aRUf86w=="],
 
-    "@smithy/protocol-http": ["@smithy/protocol-http@5.3.5", "", { "dependencies": { "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-RlaL+sA0LNMp03bf7XPbFmT5gN+w3besXSWMkA8rcmxLSVfiEXElQi4O2IWwPfxzcHkxqrwBFMbngB8yx/RvaQ=="],
+    "@smithy/protocol-http": ["@smithy/protocol-http@5.3.4", "", { "dependencies": { "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-3sfFd2MAzVt0Q/klOmjFi3oIkxczHs0avbwrfn1aBqtc23WqQSmjvk77MBw9WkEQcwbOYIX5/2z4ULj8DuxSsw=="],
 
-    "@smithy/querystring-builder": ["@smithy/querystring-builder@4.2.5", "", { "dependencies": { "@smithy/types": "^4.9.0", "@smithy/util-uri-escape": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-y98otMI1saoajeik2kLfGyRp11e5U/iJYH/wLCh3aTV/XutbGT9nziKGkgCaMD1ghK7p6htHMm6b6scl9JRUWg=="],
+    "@smithy/querystring-builder": ["@smithy/querystring-builder@4.2.4", "", { "dependencies": { "@smithy/types": "^4.8.1", "@smithy/util-uri-escape": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-KQ1gFXXC+WsbPFnk7pzskzOpn4s+KheWgO3dzkIEmnb6NskAIGp/dGdbKisTPJdtov28qNDohQrgDUKzXZBLig=="],
 
-    "@smithy/querystring-parser": ["@smithy/querystring-parser@4.2.5", "", { "dependencies": { "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-031WCTdPYgiQRYNPXznHXof2YM0GwL6SeaSyTH/P72M1Vz73TvCNH2Nq8Iu2IEPq9QP2yx0/nrw5YmSeAi/AjQ=="],
+    "@smithy/querystring-parser": ["@smithy/querystring-parser@4.2.4", "", { "dependencies": { "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-aHb5cqXZocdzEkZ/CvhVjdw5l4r1aU/9iMEyoKzH4eXMowT6M0YjBpp7W/+XjkBnY8Xh0kVd55GKjnPKlCwinQ=="],
 
-    "@smithy/service-error-classification": ["@smithy/service-error-classification@4.2.5", "", { "dependencies": { "@smithy/types": "^4.9.0" } }, "sha512-8fEvK+WPE3wUAcDvqDQG1Vk3ANLR8Px979te96m84CbKAjBVf25rPYSzb4xU4hlTyho7VhOGnh5i62D/JVF0JQ=="],
+    "@smithy/service-error-classification": ["@smithy/service-error-classification@4.2.4", "", { "dependencies": { "@smithy/types": "^4.8.1" } }, "sha512-fdWuhEx4+jHLGeew9/IvqVU/fxT/ot70tpRGuOLxE3HzZOyKeTQfYeV1oaBXpzi93WOk668hjMuuagJ2/Qs7ng=="],
 
-    "@smithy/shared-ini-file-loader": ["@smithy/shared-ini-file-loader@4.4.0", "", { "dependencies": { "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-5WmZ5+kJgJDjwXXIzr1vDTG+RhF9wzSODQBfkrQ2VVkYALKGvZX1lgVSxEkgicSAFnFhPj5rudJV0zoinqS0bA=="],
+    "@smithy/shared-ini-file-loader": ["@smithy/shared-ini-file-loader@4.3.4", "", { "dependencies": { "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-y5ozxeQ9omVjbnJo9dtTsdXj9BEvGx2X8xvRgKnV+/7wLBuYJQL6dOa/qMY6omyHi7yjt1OA97jZLoVRYi8lxA=="],
 
-    "@smithy/signature-v4": ["@smithy/signature-v4@5.3.5", "", { "dependencies": { "@smithy/is-array-buffer": "^4.2.0", "@smithy/protocol-http": "^5.3.5", "@smithy/types": "^4.9.0", "@smithy/util-hex-encoding": "^4.2.0", "@smithy/util-middleware": "^4.2.5", "@smithy/util-uri-escape": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-xSUfMu1FT7ccfSXkoLl/QRQBi2rOvi3tiBZU2Tdy3I6cgvZ6SEi9QNey+lqps/sJRnogIS+lq+B1gxxbra2a/w=="],
+    "@smithy/signature-v4": ["@smithy/signature-v4@5.3.4", "", { "dependencies": { "@smithy/is-array-buffer": "^4.2.0", "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "@smithy/util-hex-encoding": "^4.2.0", "@smithy/util-middleware": "^4.2.4", "@smithy/util-uri-escape": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-ScDCpasxH7w1HXHYbtk3jcivjvdA1VICyAdgvVqKhKKwxi+MTwZEqFw0minE+oZ7F07oF25xh4FGJxgqgShz0A=="],
 
-    "@smithy/smithy-client": ["@smithy/smithy-client@4.9.3", "", { "dependencies": { "@smithy/core": "^3.18.0", "@smithy/middleware-endpoint": "^4.3.7", "@smithy/middleware-stack": "^4.2.5", "@smithy/protocol-http": "^5.3.5", "@smithy/types": "^4.9.0", "@smithy/util-stream": "^4.5.6", "tslib": "^2.6.2" } }, "sha512-8tlueuTgV5n7inQCkhyptrB3jo2AO80uGrps/XTYZivv5MFQKKBj3CIWIGMI2fRY5LEduIiazOhAWdFknY1O9w=="],
+    "@smithy/smithy-client": ["@smithy/smithy-client@4.9.2", "", { "dependencies": { "@smithy/core": "^3.17.2", "@smithy/middleware-endpoint": "^4.3.6", "@smithy/middleware-stack": "^4.2.4", "@smithy/protocol-http": "^5.3.4", "@smithy/types": "^4.8.1", "@smithy/util-stream": "^4.5.5", "tslib": "^2.6.2" } }, "sha512-gZU4uAFcdrSi3io8U99Qs/FvVdRxPvIMToi+MFfsy/DN9UqtknJ1ais+2M9yR8e0ASQpNmFYEKeIKVcMjQg3rg=="],
 
-    "@smithy/types": ["@smithy/types@4.9.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-MvUbdnXDTwykR8cB1WZvNNwqoWVaTRA0RLlLmf/cIFNMM2cKWz01X4Ly6SMC4Kks30r8tT3Cty0jmeWfiuyHTA=="],
+    "@smithy/types": ["@smithy/types@4.8.1", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-N0Zn0OT1zc+NA+UVfkYqQzviRh5ucWwO7mBV3TmHHprMnfcJNfhlPicDkBHi0ewbh+y3evR6cNAW0Raxvb01NA=="],
 
-    "@smithy/url-parser": ["@smithy/url-parser@4.2.5", "", { "dependencies": { "@smithy/querystring-parser": "^4.2.5", "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-VaxMGsilqFnK1CeBX+LXnSuaMx4sTL/6znSZh2829txWieazdVxr54HmiyTsIbpOTLcf5nYpq9lpzmwRdxj6rQ=="],
+    "@smithy/url-parser": ["@smithy/url-parser@4.2.4", "", { "dependencies": { "@smithy/querystring-parser": "^4.2.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-w/N/Iw0/PTwJ36PDqU9PzAwVElo4qXxCC0eCTlUtIz/Z5V/2j/cViMHi0hPukSBHp4DVwvUlUhLgCzqSJ6plrg=="],
 
     "@smithy/util-base64": ["@smithy/util-base64@4.3.0", "", { "dependencies": { "@smithy/util-buffer-from": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-GkXZ59JfyxsIwNTWFnjmFEI8kZpRNIBfxKjv09+nkAWPt/4aGaEWMM04m4sxgNVWkbt2MdSvE3KF/PfX4nFedQ=="],
 
@@ -521,19 +520,19 @@
 
     "@smithy/util-config-provider": ["@smithy/util-config-provider@4.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-YEjpl6XJ36FTKmD+kRJJWYvrHeUvm5ykaUS5xK+6oXffQPHeEM4/nXlZPe+Wu0lsgRUcNZiliYNh/y7q9c2y6Q=="],
 
-    "@smithy/util-defaults-mode-browser": ["@smithy/util-defaults-mode-browser@4.3.6", "", { "dependencies": { "@smithy/property-provider": "^4.2.5", "@smithy/smithy-client": "^4.9.3", "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-kbpuXbEf2YQ9zEE6eeVnUCQWO0e1BjMnKrXL8rfXgiWA0m8/E0leU4oSNzxP04WfCmW8vjEqaDeXWxwE4tpOjQ=="],
+    "@smithy/util-defaults-mode-browser": ["@smithy/util-defaults-mode-browser@4.3.5", "", { "dependencies": { "@smithy/property-provider": "^4.2.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-GwaGjv/QLuL/QHQaqhf/maM7+MnRFQQs7Bsl6FlaeK6lm6U7mV5AAnVabw68cIoMl5FQFyKK62u7RWRzWL25OQ=="],
 
-    "@smithy/util-defaults-mode-node": ["@smithy/util-defaults-mode-node@4.2.9", "", { "dependencies": { "@smithy/config-resolver": "^4.4.3", "@smithy/credential-provider-imds": "^4.2.5", "@smithy/node-config-provider": "^4.3.5", "@smithy/property-provider": "^4.2.5", "@smithy/smithy-client": "^4.9.3", "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-dgyribrVWN5qE5usYJ0m5M93mVM3L3TyBPZWe1Xl6uZlH2gzfQx3dz+ZCdW93lWqdedJRkOecnvbnoEEXRZ5VQ=="],
+    "@smithy/util-defaults-mode-node": ["@smithy/util-defaults-mode-node@4.2.7", "", { "dependencies": { "@smithy/config-resolver": "^4.4.1", "@smithy/credential-provider-imds": "^4.2.4", "@smithy/node-config-provider": "^4.3.4", "@smithy/property-provider": "^4.2.4", "@smithy/smithy-client": "^4.9.2", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-6hinjVqec0WYGsqN7h9hL/ywfULmJJNXGXnNZW7jrIn/cFuC/aVlVaiDfBIJEvKcOrmN8/EgsW69eY0gXABeHw=="],
 
-    "@smithy/util-endpoints": ["@smithy/util-endpoints@3.2.5", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.5", "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-3O63AAWu2cSNQZp+ayl9I3NapW1p1rR5mlVHcF6hAB1dPZUQFfRPYtplWX/3xrzWthPGj5FqB12taJJCfH6s8A=="],
+    "@smithy/util-endpoints": ["@smithy/util-endpoints@3.2.4", "", { "dependencies": { "@smithy/node-config-provider": "^4.3.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-f+nBDhgYRCmUEDKEQb6q0aCcOTXRDqH5wWaFHJxt4anB4pKHlgGoYP3xtioKXH64e37ANUkzWf6p4Mnv1M5/Vg=="],
 
     "@smithy/util-hex-encoding": ["@smithy/util-hex-encoding@4.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-CCQBwJIvXMLKxVbO88IukazJD9a4kQ9ZN7/UMGBjBcJYvatpWk+9g870El4cB8/EJxfe+k+y0GmR9CAzkF+Nbw=="],
 
-    "@smithy/util-middleware": ["@smithy/util-middleware@4.2.5", "", { "dependencies": { "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-6Y3+rvBF7+PZOc40ybeZMcGln6xJGVeY60E7jy9Mv5iKpMJpHgRE6dKy9ScsVxvfAYuEX4Q9a65DQX90KaQ3bA=="],
+    "@smithy/util-middleware": ["@smithy/util-middleware@4.2.4", "", { "dependencies": { "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-fKGQAPAn8sgV0plRikRVo6g6aR0KyKvgzNrPuM74RZKy/wWVzx3BMk+ZWEueyN3L5v5EDg+P582mKU+sH5OAsg=="],
 
-    "@smithy/util-retry": ["@smithy/util-retry@4.2.5", "", { "dependencies": { "@smithy/service-error-classification": "^4.2.5", "@smithy/types": "^4.9.0", "tslib": "^2.6.2" } }, "sha512-GBj3+EZBbN4NAqJ/7pAhsXdfzdlznOh8PydUijy6FpNIMnHPSMO2/rP4HKu+UFeikJxShERk528oy7GT79YiJg=="],
+    "@smithy/util-retry": ["@smithy/util-retry@4.2.4", "", { "dependencies": { "@smithy/service-error-classification": "^4.2.4", "@smithy/types": "^4.8.1", "tslib": "^2.6.2" } }, "sha512-yQncJmj4dtv/isTXxRb4AamZHy4QFr4ew8GxS6XLWt7sCIxkPxPzINWd7WLISEFPsIan14zrKgvyAF+/yzfwoA=="],
 
-    "@smithy/util-stream": ["@smithy/util-stream@4.5.6", "", { "dependencies": { "@smithy/fetch-http-handler": "^5.3.6", "@smithy/node-http-handler": "^4.4.5", "@smithy/types": "^4.9.0", "@smithy/util-base64": "^4.3.0", "@smithy/util-buffer-from": "^4.2.0", "@smithy/util-hex-encoding": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-qWw/UM59TiaFrPevefOZ8CNBKbYEP6wBAIlLqxn3VAIo9rgnTNc4ASbVrqDmhuwI87usnjhdQrxodzAGFFzbRQ=="],
+    "@smithy/util-stream": ["@smithy/util-stream@4.5.5", "", { "dependencies": { "@smithy/fetch-http-handler": "^5.3.5", "@smithy/node-http-handler": "^4.4.4", "@smithy/types": "^4.8.1", "@smithy/util-base64": "^4.3.0", "@smithy/util-buffer-from": "^4.2.0", "@smithy/util-hex-encoding": "^4.2.0", "@smithy/util-utf8": "^4.2.0", "tslib": "^2.6.2" } }, "sha512-7M5aVFjT+HPilPOKbOmQfCIPchZe4DSBc1wf1+NvHvSoFTiFtauZzT+onZvCj70xhXd0AEmYnZYmdJIuwxOo4w=="],
 
     "@smithy/util-uri-escape": ["@smithy/util-uri-escape@4.2.0", "", { "dependencies": { "tslib": "^2.6.2" } }, "sha512-igZpCKV9+E/Mzrpq6YacdTQ0qTiLm85gD6N/IrmyDvQFA4UnU3d5g3m8tMT/6zG/vVkWSU+VxeUyGonL62DuxA=="],
 
@@ -547,7 +546,7 @@
 
     "@sveltejs/adapter-auto": ["@sveltejs/adapter-auto@6.1.1", "", { "peerDependencies": { "@sveltejs/kit": "^2.0.0" } }, "sha512-cBNt4jgH4KuaNO5gRSB2CZKkGtz+OCZ8lPjRQGjhvVUD4akotnj2weUia6imLl2v07K3IgsQRyM36909miSwoQ=="],
 
-    "@sveltejs/kit": ["@sveltejs/kit@2.48.4", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/cookie": "^0.6.0", "acorn": "^8.14.1", "cookie": "^0.6.0", "devalue": "^5.3.2", "esm-env": "^1.2.2", "kleur": "^4.1.5", "magic-string": "^0.30.5", "mrmime": "^2.0.0", "sade": "^1.8.1", "set-cookie-parser": "^2.6.0", "sirv": "^3.0.0" }, "peerDependencies": { "@opentelemetry/api": "^1.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0", "svelte": "^4.0.0 || ^5.0.0-next.0", "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["@opentelemetry/api"], "bin": { "svelte-kit": "svelte-kit.js" } }, "sha512-TGFX1pZUt9qqY20Cv5NyYvy0iLWHf2jXi8s+eCGsig7jQMdwZWKUFMR6TbvFNhfDSUpc1sH/Y5EHv20g3HHA3g=="],
+    "@sveltejs/kit": ["@sveltejs/kit@2.48.3", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/cookie": "^0.6.0", "acorn": "^8.14.1", "cookie": "^0.6.0", "devalue": "^5.3.2", "esm-env": "^1.2.2", "kleur": "^4.1.5", "magic-string": "^0.30.5", "mrmime": "^2.0.0", "sade": "^1.8.1", "set-cookie-parser": "^2.6.0", "sirv": "^3.0.0" }, "peerDependencies": { "@opentelemetry/api": "^1.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0", "svelte": "^4.0.0 || ^5.0.0-next.0", "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["@opentelemetry/api"], "bin": { "svelte-kit": "svelte-kit.js" } }, "sha512-jf8mx3yctRXE9hvixgcqqK94YI2hDnbxI/12Upkz99XFMvxnJKCMzvz0j7lmbXSyBSNEycWO5xHvi7b73y9qkQ=="],
 
     "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@6.2.1", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "debug": "^4.4.1", "deepmerge": "^4.3.1", "magic-string": "^0.30.17", "vitefu": "^1.1.1" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ=="],
 
@@ -555,35 +554,35 @@
 
     "@swc/helpers": ["@swc/helpers@0.5.17", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A=="],
 
-    "@tailwindcss/node": ["@tailwindcss/node@4.1.17", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.17" } }, "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg=="],
+    "@tailwindcss/node": ["@tailwindcss/node@4.1.16", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.19", "source-map-js": "^1.2.1", "tailwindcss": "4.1.16" } }, "sha512-BX5iaSsloNuvKNHRN3k2RcCuTEgASTo77mofW0vmeHkfrDWaoFAFvNHpEgtu0eqyypcyiBkDWzSMxJhp3AUVcw=="],
 
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.17", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.17", "@tailwindcss/oxide-darwin-arm64": "4.1.17", "@tailwindcss/oxide-darwin-x64": "4.1.17", "@tailwindcss/oxide-freebsd-x64": "4.1.17", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17", "@tailwindcss/oxide-linux-arm64-musl": "4.1.17", "@tailwindcss/oxide-linux-x64-gnu": "4.1.17", "@tailwindcss/oxide-linux-x64-musl": "4.1.17", "@tailwindcss/oxide-wasm32-wasi": "4.1.17", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17", "@tailwindcss/oxide-win32-x64-msvc": "4.1.17" } }, "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA=="],
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.16", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.16", "@tailwindcss/oxide-darwin-arm64": "4.1.16", "@tailwindcss/oxide-darwin-x64": "4.1.16", "@tailwindcss/oxide-freebsd-x64": "4.1.16", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.16", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.16", "@tailwindcss/oxide-linux-arm64-musl": "4.1.16", "@tailwindcss/oxide-linux-x64-gnu": "4.1.16", "@tailwindcss/oxide-linux-x64-musl": "4.1.16", "@tailwindcss/oxide-wasm32-wasi": "4.1.16", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.16", "@tailwindcss/oxide-win32-x64-msvc": "4.1.16" } }, "sha512-2OSv52FRuhdlgyOQqgtQHuCgXnS8nFSYRp2tJ+4WZXKgTxqPy7SMSls8c3mPT5pkZ17SBToGM5LHEJBO7miEdg=="],
 
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.17", "", { "os": "android", "cpu": "arm64" }, "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ=="],
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.16", "", { "os": "android", "cpu": "arm64" }, "sha512-8+ctzkjHgwDJ5caq9IqRSgsP70xhdhJvm+oueS/yhD5ixLhqTw9fSL1OurzMUhBwE5zK26FXLCz2f/RtkISqHA=="],
 
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.17", "", { "os": "darwin", "cpu": "arm64" }, "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg=="],
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.16", "", { "os": "darwin", "cpu": "arm64" }, "sha512-C3oZy5042v2FOALBZtY0JTDnGNdS6w7DxL/odvSny17ORUnaRKhyTse8xYi3yKGyfnTUOdavRCdmc8QqJYwFKA=="],
 
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.17", "", { "os": "darwin", "cpu": "x64" }, "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog=="],
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.16", "", { "os": "darwin", "cpu": "x64" }, "sha512-vjrl/1Ub9+JwU6BP0emgipGjowzYZMjbWCDqwA2Z4vCa+HBSpP4v6U2ddejcHsolsYxwL5r4bPNoamlV0xDdLg=="],
 
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.17", "", { "os": "freebsd", "cpu": "x64" }, "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g=="],
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.16", "", { "os": "freebsd", "cpu": "x64" }, "sha512-TSMpPYpQLm+aR1wW5rKuUuEruc/oOX3C7H0BTnPDn7W/eMw8W+MRMpiypKMkXZfwH8wqPIRKppuZoedTtNj2tg=="],
 
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17", "", { "os": "linux", "cpu": "arm" }, "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ=="],
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.16", "", { "os": "linux", "cpu": "arm" }, "sha512-p0GGfRg/w0sdsFKBjMYvvKIiKy/LNWLWgV/plR4lUgrsxFAoQBFrXkZ4C0w8IOXfslB9vHK/JGASWD2IefIpvw=="],
 
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.17", "", { "os": "linux", "cpu": "arm64" }, "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ=="],
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.16", "", { "os": "linux", "cpu": "arm64" }, "sha512-DoixyMmTNO19rwRPdqviTrG1rYzpxgyYJl8RgQvdAQUzxC1ToLRqtNJpU/ATURSKgIg6uerPw2feW0aS8SNr/w=="],
 
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.17", "", { "os": "linux", "cpu": "arm64" }, "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg=="],
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.16", "", { "os": "linux", "cpu": "arm64" }, "sha512-H81UXMa9hJhWhaAUca6bU2wm5RRFpuHImrwXBUvPbYb+3jo32I9VIwpOX6hms0fPmA6f2pGVlybO6qU8pF4fzQ=="],
 
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.17", "", { "os": "linux", "cpu": "x64" }, "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ=="],
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.16", "", { "os": "linux", "cpu": "x64" }, "sha512-ZGHQxDtFC2/ruo7t99Qo2TTIvOERULPl5l0K1g0oK6b5PGqjYMga+FcY1wIUnrUxY56h28FxybtDEla+ICOyew=="],
 
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.17", "", { "os": "linux", "cpu": "x64" }, "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ=="],
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.16", "", { "os": "linux", "cpu": "x64" }, "sha512-Oi1tAaa0rcKf1Og9MzKeINZzMLPbhxvm7rno5/zuP1WYmpiG0bEHq4AcRUiG2165/WUzvxkW4XDYCscZWbTLZw=="],
 
-    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.17", "", { "dependencies": { "@emnapi/core": "^1.6.0", "@emnapi/runtime": "^1.6.0", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.0.7", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.4.0" }, "cpu": "none" }, "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg=="],
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.16", "", { "dependencies": { "@emnapi/core": "^1.5.0", "@emnapi/runtime": "^1.5.0", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.0.7", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.4.0" }, "cpu": "none" }, "sha512-B01u/b8LteGRwucIBmCQ07FVXLzImWESAIMcUU6nvFt/tYsQ6IHz8DmZ5KtvmwxD+iTYBtM1xwoGXswnlu9v0Q=="],
 
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.17", "", { "os": "win32", "cpu": "arm64" }, "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.16", "", { "os": "win32", "cpu": "arm64" }, "sha512-zX+Q8sSkGj6HKRTMJXuPvOcP8XfYON24zJBRPlszcH1Np7xuHXhWn8qfFjIujVzvH3BHU+16jBXwgpl20i+v9A=="],
 
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.17", "", { "os": "win32", "cpu": "x64" }, "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw=="],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.16", "", { "os": "win32", "cpu": "x64" }, "sha512-m5dDFJUEejbFqP+UXVstd4W/wnxA4F61q8SoL+mqTypId2T2ZpuxosNSgowiCnLp2+Z+rivdU0AqpfgiD7yCBg=="],
 
-    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.17", "", { "dependencies": { "@tailwindcss/node": "4.1.17", "@tailwindcss/oxide": "4.1.17", "tailwindcss": "4.1.17" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-4+9w8ZHOiGnpcGI6z1TVVfWaX/koK7fKeSYF3qlYg2xpBtbteP2ddBxiarL+HVgfSJGeK5RIxRQmKm4rTJJAwA=="],
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.16", "", { "dependencies": { "@tailwindcss/node": "4.1.16", "@tailwindcss/oxide": "4.1.16", "tailwindcss": "4.1.16" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-bbguNBcDxsRmi9nnlWJxhfDWamY3lmcyACHcdO1crxfzuLpOhHLLtEIN/nCbbAtj5rchUgQD17QVAKi1f7IsKg=="],
 
     "@tanstack/devtools-event-client": ["@tanstack/devtools-event-client@0.3.4", "", {}, "sha512-eq+PpuutUyubXu+ycC1GIiVwBs86NF/8yYJJAKSpPcJLWl6R/761F1H4F/9ziX6zKezltFUH1ah3Cz8Ah+KJrw=="],
 
@@ -603,37 +602,37 @@
 
     "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
 
-    "@types/node": ["@types/node@24.10.0", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A=="],
+    "@types/node": ["@types/node@24.9.2", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA=="],
 
     "@types/nodemailer": ["@types/nodemailer@7.0.3", "", { "dependencies": { "@aws-sdk/client-sesv2": "^3.839.0", "@types/node": "*" } }, "sha512-fC8w49YQ868IuPWRXqPfLf+MuTRex5Z1qxMoG8rr70riqqbOp2F5xgOKE9fODEBPzpnvjkJXFgK6IL2xgMSTnA=="],
 
     "@types/pako": ["@types/pako@2.0.4", "", {}, "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw=="],
 
-    "@types/papaparse": ["@types/papaparse@5.5.0", "", { "dependencies": { "@types/node": "*" } }, "sha512-GVs5iMQmUr54BAZYYkByv8zPofFxmyxUpISPb2oh8sayR3+1zbxasrOvoKiHJ/nnoq/uULuPsu1Lze1EkagVFg=="],
+    "@types/papaparse": ["@types/papaparse@5.3.16", "", { "dependencies": { "@types/node": "*" } }, "sha512-T3VuKMC2H0lgsjI9buTB3uuKj3EMD2eap1MOuEQuBQ44EnDx/IkGhU6EwiTf9zG3za4SKlmwKAImdDKdNnCsXg=="],
 
     "@types/raf": ["@types/raf@3.4.3", "", {}, "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw=="],
 
     "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
 
-    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.46.4", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.46.4", "@typescript-eslint/type-utils": "8.46.4", "@typescript-eslint/utils": "8.46.4", "@typescript-eslint/visitor-keys": "8.46.4", "graphemer": "^1.4.0", "ignore": "^7.0.0", "natural-compare": "^1.4.0", "ts-api-utils": "^2.1.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.46.4", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-R48VhmTJqplNyDxCyqqVkFSZIx1qX6PzwqgcXn1olLrzxcSBDlOsbtcnQuQhNtnNiJ4Xe5gREI1foajYaYU2Vg=="],
+    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.46.3", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.46.3", "@typescript-eslint/type-utils": "8.46.3", "@typescript-eslint/utils": "8.46.3", "@typescript-eslint/visitor-keys": "8.46.3", "graphemer": "^1.4.0", "ignore": "^7.0.0", "natural-compare": "^1.4.0", "ts-api-utils": "^2.1.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.46.3", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-sbaQ27XBUopBkRiuY/P9sWGOWUW4rl8fDoHIUmLpZd8uldsTyB4/Zg6bWTegPoTLnKj9Hqgn3QD6cjPNB32Odw=="],
 
-    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.46.4", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.46.4", "@typescript-eslint/types": "8.46.4", "@typescript-eslint/typescript-estree": "8.46.4", "@typescript-eslint/visitor-keys": "8.46.4", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-tK3GPFWbirvNgsNKto+UmB/cRtn6TZfyw0D6IKrW55n6Vbs7KJoZtI//kpTKzE/DUmmnAFD8/Ca46s7Obs92/w=="],
+    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.46.3", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.46.3", "@typescript-eslint/types": "8.46.3", "@typescript-eslint/typescript-estree": "8.46.3", "@typescript-eslint/visitor-keys": "8.46.3", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg=="],
 
-    "@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.46.4", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.46.4", "@typescript-eslint/types": "^8.46.4", "debug": "^4.3.4" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-nPiRSKuvtTN+no/2N1kt2tUh/HoFzeEgOm9fQ6XQk4/ApGqjx0zFIIaLJ6wooR1HIoozvj2j6vTi/1fgAz7UYQ=="],
+    "@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.46.3", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.46.3", "@typescript-eslint/types": "^8.46.3", "debug": "^4.3.4" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-Fz8yFXsp2wDFeUElO88S9n4w1I4CWDTXDqDr9gYvZgUpwXQqmZBr9+NTTql5R3J7+hrJZPdpiWaB9VNhAKYLuQ=="],
 
-    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.46.4", "", { "dependencies": { "@typescript-eslint/types": "8.46.4", "@typescript-eslint/visitor-keys": "8.46.4" } }, "sha512-tMDbLGXb1wC+McN1M6QeDx7P7c0UWO5z9CXqp7J8E+xGcJuUuevWKxuG8j41FoweS3+L41SkyKKkia16jpX7CA=="],
+    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.46.3", "", { "dependencies": { "@typescript-eslint/types": "8.46.3", "@typescript-eslint/visitor-keys": "8.46.3" } }, "sha512-FCi7Y1zgrmxp3DfWfr+3m9ansUUFoy8dkEdeQSgA9gbm8DaHYvZCdkFRQrtKiedFf3Ha6VmoqoAaP68+i+22kg=="],
 
-    "@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.46.4", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-+/XqaZPIAk6Cjg7NWgSGe27X4zMGqrFqZ8atJsX3CWxH/jACqWnrWI68h7nHQld0y+k9eTTjb9r+KU4twLoo9A=="],
+    "@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.46.3", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-GLupljMniHNIROP0zE7nCcybptolcH8QZfXOpCfhQDAdwJ/ZTlcaBOYebSOZotpti/3HrHSw7D3PZm75gYFsOA=="],
 
-    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.46.4", "", { "dependencies": { "@typescript-eslint/types": "8.46.4", "@typescript-eslint/typescript-estree": "8.46.4", "@typescript-eslint/utils": "8.46.4", "debug": "^4.3.4", "ts-api-utils": "^2.1.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-V4QC8h3fdT5Wro6vANk6eojqfbv5bpwHuMsBcJUJkqs2z5XnYhJzyz9Y02eUmF9u3PgXEUiOt4w4KHR3P+z0PQ=="],
+    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.46.3", "", { "dependencies": { "@typescript-eslint/types": "8.46.3", "@typescript-eslint/typescript-estree": "8.46.3", "@typescript-eslint/utils": "8.46.3", "debug": "^4.3.4", "ts-api-utils": "^2.1.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-ZPCADbr+qfz3aiTTYNNkCbUt+cjNwI/5McyANNrFBpVxPt7GqpEYz5ZfdwuFyGUnJ9FdDXbGODUu6iRCI6XRXw=="],
 
-    "@typescript-eslint/types": ["@typescript-eslint/types@8.46.4", "", {}, "sha512-USjyxm3gQEePdUwJBFjjGNG18xY9A2grDVGuk7/9AkjIF1L+ZrVnwR5VAU5JXtUnBL/Nwt3H31KlRDaksnM7/w=="],
+    "@typescript-eslint/types": ["@typescript-eslint/types@8.46.3", "", {}, "sha512-G7Ok9WN/ggW7e/tOf8TQYMaxgID3Iujn231hfi0Pc7ZheztIJVpO44ekY00b7akqc6nZcvregk0Jpah3kep6hA=="],
 
-    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.46.4", "", { "dependencies": { "@typescript-eslint/project-service": "8.46.4", "@typescript-eslint/tsconfig-utils": "8.46.4", "@typescript-eslint/types": "8.46.4", "@typescript-eslint/visitor-keys": "8.46.4", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.1.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-7oV2qEOr1d4NWNmpXLR35LvCfOkTNymY9oyW+lUHkmCno7aOmIf/hMaydnJBUTBMRCOGZh8YjkFOc8dadEoNGA=="],
+    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.46.3", "", { "dependencies": { "@typescript-eslint/project-service": "8.46.3", "@typescript-eslint/tsconfig-utils": "8.46.3", "@typescript-eslint/types": "8.46.3", "@typescript-eslint/visitor-keys": "8.46.3", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.1.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-f/NvtRjOm80BtNM5OQtlaBdM5BRFUv7gf381j9wygDNL+qOYSNOgtQ/DCndiYi80iIOv76QqaTmp4fa9hwI0OA=="],
 
-    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.46.4", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.7.0", "@typescript-eslint/scope-manager": "8.46.4", "@typescript-eslint/types": "8.46.4", "@typescript-eslint/typescript-estree": "8.46.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-AbSv11fklGXV6T28dp2Me04Uw90R2iJ30g2bgLz529Koehrmkbs1r7paFqr1vPCZi7hHwYxYtxfyQMRC8QaVSg=="],
+    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.46.3", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.7.0", "@typescript-eslint/scope-manager": "8.46.3", "@typescript-eslint/types": "8.46.3", "@typescript-eslint/typescript-estree": "8.46.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-VXw7qmdkucEx9WkmR3ld/u6VhRyKeiF1uxWwCy/iuNfokjJ7VhsgLSOTjsol8BunSw190zABzpwdNsze2Kpo4g=="],
 
-    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.46.4", "", { "dependencies": { "@typescript-eslint/types": "8.46.4", "eslint-visitor-keys": "^4.2.1" } }, "sha512-/++5CYLQqsO9HFGLI7APrxBJYo+5OCMpViuhV8q5/Qa3o5mMrF//eQHks+PXcsAVaLdn817fMuS7zqoXNNZGaw=="],
+    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.46.3", "", { "dependencies": { "@typescript-eslint/types": "8.46.3", "eslint-visitor-keys": "^4.2.1" } }, "sha512-uk574k8IU0rOF/AjniX8qbLSGURJVUCeM5e4MIMKBFFi8weeiLrG1fyQejyLXQpRZbU/1BuQasleV/RfHC3hHg=="],
 
     "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
 
@@ -665,7 +664,7 @@
 
     "async-function": ["async-function@1.0.0", "", {}, "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA=="],
 
-    "autoprefixer": ["autoprefixer@10.4.22", "", { "dependencies": { "browserslist": "^4.27.0", "caniuse-lite": "^1.0.30001754", "fraction.js": "^5.3.4", "normalize-range": "^0.1.2", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg=="],
+    "autoprefixer": ["autoprefixer@10.4.21", "", { "dependencies": { "browserslist": "^4.24.4", "caniuse-lite": "^1.0.30001702", "fraction.js": "^4.3.7", "normalize-range": "^0.1.2", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ=="],
 
     "available-typed-arrays": ["available-typed-arrays@1.0.7", "", { "dependencies": { "possible-typed-array-names": "^1.0.0" } }, "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ=="],
 
@@ -675,7 +674,7 @@
 
     "base64-arraybuffer": ["base64-arraybuffer@1.0.2", "", {}, "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="],
 
-    "baseline-browser-mapping": ["baseline-browser-mapping@2.8.26", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-73lC1ugzwoaWCLJ1LvOgrR5xsMLTqSKIEoMHVtL9E/HNk0PXtTM76ZIm84856/SF7Nv8mPZxKoBsgpm0tR1u1Q=="],
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.8.21", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-JU0h5APyQNsHOlAM7HnQnPToSDQoEBZqzu/YBlqDnEeymPnZDREeXJA3KBMQee+dKteAxZ2AtvQEvVYdZf241Q=="],
 
     "better-auth": ["better-auth@1.3.27", "", { "dependencies": { "@better-auth/core": "1.3.27", "@better-auth/utils": "0.3.0", "@better-fetch/fetch": "1.1.18", "@noble/ciphers": "^2.0.0", "@noble/hashes": "^2.0.0", "@simplewebauthn/browser": "^13.1.2", "@simplewebauthn/server": "^13.1.2", "better-call": "1.0.19", "defu": "^6.1.4", "jose": "^6.1.0", "kysely": "^0.28.5", "nanostores": "^1.0.1", "zod": "^4.1.5" } }, "sha512-SwiGAJ7yU6dBhNg0NdV1h5M8T5sa7/AszZVc4vBfMDrLLmvUfbt9JoJ0uRUJUEdKRAAxTyl9yA+F3+GhtAD80w=="],
 
@@ -687,7 +686,7 @@
 
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
 
-    "browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="],
+    "browserslist": ["browserslist@4.27.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.19", "caniuse-lite": "^1.0.30001751", "electron-to-chromium": "^1.5.238", "node-releases": "^2.0.26", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw=="],
 
     "call-bind": ["call-bind@1.0.8", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.0", "es-define-property": "^1.0.0", "get-intrinsic": "^1.2.4", "set-function-length": "^1.2.2" } }, "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww=="],
 
@@ -697,7 +696,7 @@
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001754", "", {}, "sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001751", "", {}, "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw=="],
 
     "canvg": ["canvg@3.0.11", "", { "dependencies": { "@babel/runtime": "^7.12.5", "@types/raf": "^3.4.0", "core-js": "^3.8.3", "raf": "^3.4.1", "regenerator-runtime": "^0.13.7", "rgbcolor": "^1.0.1", "stackblur-canvas": "^2.0.0", "svg-pathdata": "^6.0.3" } }, "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA=="],
 
@@ -717,11 +716,11 @@
 
     "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
 
-    "convex": ["convex@1.28.2", "", { "dependencies": { "esbuild": "0.25.4", "prettier": "^3.0.0" }, "peerDependencies": { "@auth0/auth0-react": "^2.0.1", "@clerk/clerk-react": "^4.12.8 || ^5.0.0", "react": "^18.0.0 || ^19.0.0-0 || ^19.0.0" }, "optionalPeers": ["@auth0/auth0-react", "@clerk/clerk-react", "react"], "bin": { "convex": "bin/main.js" } }, "sha512-KzNsLbcVXb1OhpVQ+vHMgu+hjrsQ1ks5BZwJ2lR8O+nfbeJXE6tHbvsg1H17+ooUDvIDBSMT3vXS+AlodDhTnQ=="],
+    "convex": ["convex@1.28.0", "", { "dependencies": { "esbuild": "0.25.4", "prettier": "^3.0.0" }, "peerDependencies": { "@auth0/auth0-react": "^2.0.1", "@clerk/clerk-react": "^4.12.8 || ^5.0.0", "react": "^18.0.0 || ^19.0.0-0 || ^19.0.0" }, "optionalPeers": ["@auth0/auth0-react", "@clerk/clerk-react", "react"], "bin": { "convex": "bin/main.js" } }, "sha512-40FgeJ/LxP9TxnkDDztU/A5gcGTdq1klcTT5mM0Ak+kSlQiDktMpjNX1TfkWLxXaE3lI4qvawKH95v2RiYgFxA=="],
 
     "convex-helpers": ["convex-helpers@0.1.104", "", { "peerDependencies": { "@standard-schema/spec": "^1.0.0", "convex": "^1.24.0", "hono": "^4.0.5", "react": "^17.0.2 || ^18.0.0 || ^19.0.0", "typescript": "^5.5", "zod": "^3.22.4 || ^4.0.15" }, "optionalPeers": ["@standard-schema/spec", "hono", "react", "typescript", "zod"], "bin": { "convex-helpers": "bin.cjs" } }, "sha512-7CYvx7T3K6n+McDTK4ZQaQNNGBzq5aWezpjzsKbOxPXx7oNcTP9wrpef3JxeXWFzkByJv5hRCjseh9B7eNJ7Ig=="],
 
-    "convex-svelte": ["convex-svelte@0.0.12", "", { "dependencies": { "esm-env": "^1.2.2", "runed": "^0.31.1" }, "peerDependencies": { "convex": "^1.10.0", "svelte": "^5.0.0" } }, "sha512-sUZoYp4ZsokyvKlbbg1dWYB7MkAjZn4nNG9DnADEt9L6KTKuhhnEIt6fdLj+3GnVBUGDTssm17+7ppzFc4y7Gg=="],
+    "convex-svelte": ["convex-svelte@0.0.11", "", { "peerDependencies": { "convex": "^1.10.0", "svelte": "^5.0.0" } }, "sha512-N/29gg5Zqy72vKL4xHSLk3jGwXVKIWXPs6xzq6KxGL84y/D6hG85pG2CPOzn08EzMmByts5FTkJ5p3var6yDng=="],
 
     "cookie": ["cookie@1.0.2", "", {}, "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="],
 
@@ -733,7 +732,7 @@
 
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
 
-    "daisyui": ["daisyui@5.5.0", "", {}, "sha512-lfeimNM3U1FzjfBotV3iTrxNfBEncHs7kMP62lTLghmO99v7HVZ/lbcOLr/y0Q3JB6Lx7XEi2yC5RQ8BBxdKPA=="],
+    "daisyui": ["daisyui@5.3.10", "", {}, "sha512-vmjyPmm0hvFhA95KB6uiGmWakziB2pBv6CUcs5Ka/3iMBMn9S+C3SZYx9G9l2JrgTZ1EFn61F/HrPcwaUm2kLQ=="],
 
     "data-view-buffer": ["data-view-buffer@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-data-view": "^1.0.2" } }, "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ=="],
 
@@ -767,7 +766,7 @@
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
 
-    "electron-to-chromium": ["electron-to-chromium@1.5.250", "", {}, "sha512-/5UMj9IiGDMOFBnN4i7/Ry5onJrAGSbOGo3s9FEKmwobGq6xw832ccET0CE3CkkMBZ8GJSlUIesZofpyurqDXw=="],
+    "electron-to-chromium": ["electron-to-chromium@1.5.243", "", {}, "sha512-ZCphxFW3Q1TVhcgS9blfut1PX8lusVi2SvXQgmEEnK4TCmE1JhH2JkjJN+DNt0pJJwfBri5AROBnz2b/C+YU9g=="],
 
     "emoji-picker-element": ["emoji-picker-element@1.27.0", "", {}, "sha512-CeN9g5/kq41+BfYPDpAbE2ejZRHbs1faFDmU9+E9wGA4JWLkok9zo1hwcAFnUhV4lPR3ZuLHiJxNG1mpjoF4TQ=="],
 
@@ -789,7 +788,7 @@
 
     "es-to-primitive": ["es-to-primitive@1.3.0", "", { "dependencies": { "is-callable": "^1.2.7", "is-date-object": "^1.0.5", "is-symbol": "^1.0.4" } }, "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g=="],
 
-    "esbuild": ["esbuild@0.25.12", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.12", "@esbuild/android-arm": "0.25.12", "@esbuild/android-arm64": "0.25.12", "@esbuild/android-x64": "0.25.12", "@esbuild/darwin-arm64": "0.25.12", "@esbuild/darwin-x64": "0.25.12", "@esbuild/freebsd-arm64": "0.25.12", "@esbuild/freebsd-x64": "0.25.12", "@esbuild/linux-arm": "0.25.12", "@esbuild/linux-arm64": "0.25.12", "@esbuild/linux-ia32": "0.25.12", "@esbuild/linux-loong64": "0.25.12", "@esbuild/linux-mips64el": "0.25.12", "@esbuild/linux-ppc64": "0.25.12", "@esbuild/linux-riscv64": "0.25.12", "@esbuild/linux-s390x": "0.25.12", "@esbuild/linux-x64": "0.25.12", "@esbuild/netbsd-arm64": "0.25.12", "@esbuild/netbsd-x64": "0.25.12", "@esbuild/openbsd-arm64": "0.25.12", "@esbuild/openbsd-x64": "0.25.12", "@esbuild/openharmony-arm64": "0.25.12", "@esbuild/sunos-x64": "0.25.12", "@esbuild/win32-arm64": "0.25.12", "@esbuild/win32-ia32": "0.25.12", "@esbuild/win32-x64": "0.25.12" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg=="],
+    "esbuild": ["esbuild@0.25.11", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.11", "@esbuild/android-arm": "0.25.11", "@esbuild/android-arm64": "0.25.11", "@esbuild/android-x64": "0.25.11", "@esbuild/darwin-arm64": "0.25.11", "@esbuild/darwin-x64": "0.25.11", "@esbuild/freebsd-arm64": "0.25.11", "@esbuild/freebsd-x64": "0.25.11", "@esbuild/linux-arm": "0.25.11", "@esbuild/linux-arm64": "0.25.11", "@esbuild/linux-ia32": "0.25.11", "@esbuild/linux-loong64": "0.25.11", "@esbuild/linux-mips64el": "0.25.11", "@esbuild/linux-ppc64": "0.25.11", "@esbuild/linux-riscv64": "0.25.11", "@esbuild/linux-s390x": "0.25.11", "@esbuild/linux-x64": "0.25.11", "@esbuild/netbsd-arm64": "0.25.11", "@esbuild/netbsd-x64": "0.25.11", "@esbuild/openbsd-arm64": "0.25.11", "@esbuild/openbsd-x64": "0.25.11", "@esbuild/openharmony-arm64": "0.25.11", "@esbuild/sunos-x64": "0.25.11", "@esbuild/win32-arm64": "0.25.11", "@esbuild/win32-ia32": "0.25.11", "@esbuild/win32-x64": "0.25.11" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-KohQwyzrKTQmhXDW1PjCv3Tyspn9n5GcY2RTDqeORIdIJY8yKIF7sTSopFmn/wpMPW4rdPXI0UE5LJLuq3bx0Q=="],
 
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
@@ -807,7 +806,7 @@
 
     "eslint-plugin-svelte": ["eslint-plugin-svelte@3.13.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.6.1", "@jridgewell/sourcemap-codec": "^1.5.0", "esutils": "^2.0.3", "globals": "^16.0.0", "known-css-properties": "^0.37.0", "postcss": "^8.4.49", "postcss-load-config": "^3.1.4", "postcss-safe-parser": "^7.0.0", "semver": "^7.6.3", "svelte-eslint-parser": "^1.4.0" }, "peerDependencies": { "eslint": "^8.57.1 || ^9.0.0", "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0" }, "optionalPeers": ["svelte"] }, "sha512-2ohCCQJJTNbIpQCSDSTWj+FN0OVfPmSO03lmSNT7ytqMaWF6kpT86LdzDqtm4sh7TVPl/OEWJ/d7R87bXP2Vjg=="],
 
-    "eslint-plugin-turbo": ["eslint-plugin-turbo@2.6.1", "", { "dependencies": { "dotenv": "16.0.3" }, "peerDependencies": { "eslint": ">6.6.0", "turbo": ">2.0.0" } }, "sha512-nxwJD6ReZTxEmq/ZNJXI/Mfa3aXctTpQpJrQZESDC1bxjXXcz4i040P7wG6RsRRsQ+9eYB9D+KdCqERpwNZGzw=="],
+    "eslint-plugin-turbo": ["eslint-plugin-turbo@2.6.0", "", { "dependencies": { "dotenv": "16.0.3" }, "peerDependencies": { "eslint": ">6.6.0", "turbo": ">2.0.0" } }, "sha512-04TohZhq6YQVXBZVRvrn8ZTj1sUQYZmjUWsfwgFAlaM5Kbk5Fdh5mLBKfhGGzekB55E+Ut9qNzAGh+JW4rjiuA=="],
 
     "eslint-scope": ["eslint-scope@8.4.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg=="],
 
@@ -857,7 +856,7 @@
 
     "for-each": ["for-each@0.3.5", "", { "dependencies": { "is-callable": "^1.2.7" } }, "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg=="],
 
-    "fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
+    "fraction.js": ["fraction.js@4.3.7", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="],
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
@@ -975,7 +974,7 @@
 
     "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
-    "jose": ["jose@6.1.1", "", {}, "sha512-GWSqjfOPf4cWOkBzw5THBjtGPhXKqYnfRBzh4Ni+ArTrQQ9unvmsA3oFLqaYKoKe5sjWmGu5wVKg9Ft1i+LQfg=="],
+    "jose": ["jose@6.1.0", "", {}, "sha512-TTQJyoEoKcC1lscpVDCSsVgYzUDg/0Bt3WE//WiTPK6uOCQC2KZS4MpugbMWt/zyjkopgZoXhZuCi00gLudfUA=="],
 
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
@@ -1169,7 +1168,7 @@
 
     "rgbcolor": ["rgbcolor@1.0.1", "", {}, "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw=="],
 
-    "rollup": ["rollup@4.53.2", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.53.2", "@rollup/rollup-android-arm64": "4.53.2", "@rollup/rollup-darwin-arm64": "4.53.2", "@rollup/rollup-darwin-x64": "4.53.2", "@rollup/rollup-freebsd-arm64": "4.53.2", "@rollup/rollup-freebsd-x64": "4.53.2", "@rollup/rollup-linux-arm-gnueabihf": "4.53.2", "@rollup/rollup-linux-arm-musleabihf": "4.53.2", "@rollup/rollup-linux-arm64-gnu": "4.53.2", "@rollup/rollup-linux-arm64-musl": "4.53.2", "@rollup/rollup-linux-loong64-gnu": "4.53.2", "@rollup/rollup-linux-ppc64-gnu": "4.53.2", "@rollup/rollup-linux-riscv64-gnu": "4.53.2", "@rollup/rollup-linux-riscv64-musl": "4.53.2", "@rollup/rollup-linux-s390x-gnu": "4.53.2", "@rollup/rollup-linux-x64-gnu": "4.53.2", "@rollup/rollup-linux-x64-musl": "4.53.2", "@rollup/rollup-openharmony-arm64": "4.53.2", "@rollup/rollup-win32-arm64-msvc": "4.53.2", "@rollup/rollup-win32-ia32-msvc": "4.53.2", "@rollup/rollup-win32-x64-gnu": "4.53.2", "@rollup/rollup-win32-x64-msvc": "4.53.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-MHngMYwGJVi6Fmnk6ISmnk7JAHRNF0UkuucA0CUW3N3a4KnONPEZz+vUanQP/ZC/iY1Qkf3bwPWzyY84wEks1g=="],
+    "rollup": ["rollup@4.52.5", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.52.5", "@rollup/rollup-android-arm64": "4.52.5", "@rollup/rollup-darwin-arm64": "4.52.5", "@rollup/rollup-darwin-x64": "4.52.5", "@rollup/rollup-freebsd-arm64": "4.52.5", "@rollup/rollup-freebsd-x64": "4.52.5", "@rollup/rollup-linux-arm-gnueabihf": "4.52.5", "@rollup/rollup-linux-arm-musleabihf": "4.52.5", "@rollup/rollup-linux-arm64-gnu": "4.52.5", "@rollup/rollup-linux-arm64-musl": "4.52.5", "@rollup/rollup-linux-loong64-gnu": "4.52.5", "@rollup/rollup-linux-ppc64-gnu": "4.52.5", "@rollup/rollup-linux-riscv64-gnu": "4.52.5", "@rollup/rollup-linux-riscv64-musl": "4.52.5", "@rollup/rollup-linux-s390x-gnu": "4.52.5", "@rollup/rollup-linux-x64-gnu": "4.52.5", "@rollup/rollup-linux-x64-musl": "4.52.5", "@rollup/rollup-openharmony-arm64": "4.52.5", "@rollup/rollup-win32-arm64-msvc": "4.52.5", "@rollup/rollup-win32-ia32-msvc": "4.52.5", "@rollup/rollup-win32-x64-gnu": "4.52.5", "@rollup/rollup-win32-x64-msvc": "4.52.5", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw=="],
 
     "rou3": ["rou3@0.5.1", "", {}, "sha512-OXMmJ3zRk2xeXFGfA3K+EOPHC5u7RDFG7lIOx0X1pdnhUkI8MdVrbV+sNsD80ElpUZ+MRHdyxPnFthq9VHs8uQ=="],
 
@@ -1235,19 +1234,19 @@
 
     "supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
 
-    "svelte": ["svelte@5.43.6", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^2.1.0", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-RnyO9VXI85Bmsf4b8AuQFBKFYL3LKUl+ZrifOjvlrQoboAROj5IITVLK1yOXBjwUWUn2BI5cfmurktgCzuZ5QA=="],
+    "svelte": ["svelte@5.43.2", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "acorn": "^8.12.1", "aria-query": "^5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "esm-env": "^1.2.1", "esrap": "^2.1.0", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-ro1umEzX8rT5JpCmlf0PPv7ncD8MdVob9e18bhwqTKNoLjS8kDvhVpaoYVPc+qMwDAOfcwJtyY7ZFSDbOaNPgA=="],
 
     "svelte-chartjs": ["svelte-chartjs@3.1.5", "", { "peerDependencies": { "chart.js": "^3.5.0 || ^4.0.0", "svelte": "^4.0.0" } }, "sha512-ka2zh7v5FiwfAX1oMflZ0HkNkgjHjFqANgRyC+vNYXfxtx2ku68Zo+2KgbKeBH2nS1ThDqkIACPzGxy4T0UaoA=="],
 
-    "svelte-check": ["svelte-check@4.3.4", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-DVWvxhBrDsd+0hHWKfjP99lsSXASeOhHJYyuKOFYJcP7ThfSCKgjVarE8XfuMWpS5JV3AlDf+iK1YGGo2TACdw=="],
+    "svelte-check": ["svelte-check@4.3.3", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-RYP0bEwenDXzfv0P1sKAwjZSlaRyqBn0Fz1TVni58lqyEiqgwztTpmodJrGzP6ZT2aHl4MbTvWP6gbmQ3FOnBg=="],
 
     "svelte-eslint-parser": ["svelte-eslint-parser@1.4.0", "", { "dependencies": { "eslint-scope": "^8.2.0", "eslint-visitor-keys": "^4.0.0", "espree": "^10.0.0", "postcss": "^8.4.49", "postcss-scss": "^4.0.9", "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0" }, "optionalPeers": ["svelte"] }, "sha512-fjPzOfipR5S7gQ/JvI9r2H8y9gMGXO3JtmrylHLLyahEMquXI0lrebcjT+9/hNgDej0H7abTyox5HpHmW1PSWA=="],
 
-    "svelte-sonner": ["svelte-sonner@1.0.6", "", { "dependencies": { "runed": "^0.28.0" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-cOB6fKVPnJ/wuqHV4dqoTJ/l/g7n3V8goUHqnhIV2wyv55DdoCI1D3VQSBIs7Iy8pkH5ZaNPB8T53jFfXE/6og=="],
+    "svelte-sonner": ["svelte-sonner@1.0.5", "", { "dependencies": { "runed": "^0.28.0" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-9dpGPFqKb/QWudYqGnEz93vuY+NgCEvyNvxoCLMVGw6sDN/3oVeKV1xiEirW2E1N3vJEyj5imSBNOGltQHA7mg=="],
 
     "svg-pathdata": ["svg-pathdata@6.0.3", "", {}, "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw=="],
 
-    "tailwindcss": ["tailwindcss@4.1.17", "", {}, "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q=="],
+    "tailwindcss": ["tailwindcss@4.1.16", "", {}, "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA=="],
 
     "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],
 
@@ -1265,19 +1264,19 @@
 
     "tsyringe": ["tsyringe@4.10.0", "", { "dependencies": { "tslib": "^1.9.3" } }, "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw=="],
 
-    "turbo": ["turbo@2.6.1", "", { "optionalDependencies": { "turbo-darwin-64": "2.6.1", "turbo-darwin-arm64": "2.6.1", "turbo-linux-64": "2.6.1", "turbo-linux-arm64": "2.6.1", "turbo-windows-64": "2.6.1", "turbo-windows-arm64": "2.6.1" }, "bin": { "turbo": "bin/turbo" } }, "sha512-qBwXXuDT3rA53kbNafGbT5r++BrhRgx3sAo0cHoDAeG9g1ItTmUMgltz3Hy7Hazy1ODqNpR+C7QwqL6DYB52yA=="],
+    "turbo": ["turbo@2.5.8", "", { "optionalDependencies": { "turbo-darwin-64": "2.5.8", "turbo-darwin-arm64": "2.5.8", "turbo-linux-64": "2.5.8", "turbo-linux-arm64": "2.5.8", "turbo-windows-64": "2.5.8", "turbo-windows-arm64": "2.5.8" }, "bin": { "turbo": "bin/turbo" } }, "sha512-5c9Fdsr9qfpT3hA0EyYSFRZj1dVVsb6KIWubA9JBYZ/9ZEAijgUEae0BBR/Xl/wekt4w65/lYLTFaP3JmwSO8w=="],
 
-    "turbo-darwin-64": ["turbo-darwin-64@2.6.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-Dm0HwhyZF4J0uLqkhUyCVJvKM9Rw7M03v3J9A7drHDQW0qAbIGBrUijQ8g4Q9Cciw/BXRRd8Uzkc3oue+qn+ZQ=="],
+    "turbo-darwin-64": ["turbo-darwin-64@2.5.8", "", { "os": "darwin", "cpu": "x64" }, "sha512-Dh5bCACiHO8rUXZLpKw+m3FiHtAp2CkanSyJre+SInEvEr5kIxjGvCK/8MFX8SFRjQuhjtvpIvYYZJB4AGCxNQ=="],
 
-    "turbo-darwin-arm64": ["turbo-darwin-arm64@2.6.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-U0PIPTPyxdLsrC3jN7jaJUwgzX5sVUBsKLO7+6AL+OASaa1NbT1pPdiZoTkblBAALLP76FM0LlnsVQOnmjYhyw=="],
+    "turbo-darwin-arm64": ["turbo-darwin-arm64@2.5.8", "", { "os": "darwin", "cpu": "arm64" }, "sha512-f1H/tQC9px7+hmXn6Kx/w8Jd/FneIUnvLlcI/7RGHunxfOkKJKvsoiNzySkoHQ8uq1pJnhJ0xNGTlYM48ZaJOQ=="],
 
-    "turbo-linux-64": ["turbo-linux-64@2.6.1", "", { "os": "linux", "cpu": "x64" }, "sha512-eM1uLWgzv89bxlK29qwQEr9xYWBhmO/EGiH22UGfq+uXr+QW1OvNKKMogSN65Ry8lElMH4LZh0aX2DEc7eC0Mw=="],
+    "turbo-linux-64": ["turbo-linux-64@2.5.8", "", { "os": "linux", "cpu": "x64" }, "sha512-hMyvc7w7yadBlZBGl/bnR6O+dJTx3XkTeyTTH4zEjERO6ChEs0SrN8jTFj1lueNXKIHh1SnALmy6VctKMGnWfw=="],
 
-    "turbo-linux-arm64": ["turbo-linux-arm64@2.6.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-MFFh7AxAQAycXKuZDrbeutfWM5Ep0CEZ9u7zs4Hn2FvOViTCzIfEhmuJou3/a5+q5VX1zTxQrKGy+4Lf5cdpsA=="],
+    "turbo-linux-arm64": ["turbo-linux-arm64@2.5.8", "", { "os": "linux", "cpu": "arm64" }, "sha512-LQELGa7bAqV2f+3rTMRPnj5G/OHAe2U+0N9BwsZvfMvHSUbsQ3bBMWdSQaYNicok7wOZcHjz2TkESn1hYK6xIQ=="],
 
-    "turbo-windows-64": ["turbo-windows-64@2.6.1", "", { "os": "win32", "cpu": "x64" }, "sha512-buq7/VAN7KOjMYi4tSZT5m+jpqyhbRU2EUTTvp6V0Ii8dAkY2tAAjQN1q5q2ByflYWKecbQNTqxmVploE0LVwQ=="],
+    "turbo-windows-64": ["turbo-windows-64@2.5.8", "", { "os": "win32", "cpu": "x64" }, "sha512-3YdcaW34TrN1AWwqgYL9gUqmZsMT4T7g8Y5Azz+uwwEJW+4sgcJkIi9pYFyU4ZBSjBvkfuPZkGgfStir5BBDJQ=="],
 
-    "turbo-windows-arm64": ["turbo-windows-arm64@2.6.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-7w+AD5vJp3R+FB0YOj1YJcNcOOvBior7bcHTodqp90S3x3bLgpr7tE6xOea1e8JkP7GK6ciKVUpQvV7psiwU5Q=="],
+    "turbo-windows-arm64": ["turbo-windows-arm64@2.5.8", "", { "os": "win32", "cpu": "arm64" }, "sha512-eFC5XzLmgXJfnAK3UMTmVECCwuBcORrWdewoiXBnUm934DY6QN8YowC/srhNnROMpaKaqNeRpoB5FxCww3eteQ=="],
 
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
@@ -1293,7 +1292,7 @@
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
-    "typescript-eslint": ["typescript-eslint@8.46.4", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.46.4", "@typescript-eslint/parser": "8.46.4", "@typescript-eslint/typescript-estree": "8.46.4", "@typescript-eslint/utils": "8.46.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-KALyxkpYV5Ix7UhvjTwJXZv76VWsHG+NjNlt/z+a17SOQSiOcBdUXdbJdyXi7RPxrBFECtFOiPwUJQusJuCqrg=="],
+    "typescript-eslint": ["typescript-eslint@8.46.3", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.46.3", "@typescript-eslint/parser": "8.46.3", "@typescript-eslint/typescript-estree": "8.46.3", "@typescript-eslint/utils": "8.46.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-bAfgMavTuGo+8n6/QQDVQz4tZ4f7Soqg53RbrlZQEoAltYop/XR4RAts/I0BrO3TTClTSTFJ0wYbla+P8cEWJA=="],
 
     "unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "has-bigints": "^1.0.2", "has-symbols": "^1.1.0", "which-boxed-primitive": "^1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
 
@@ -1309,7 +1308,7 @@
 
     "utrie": ["utrie@1.0.2", "", { "dependencies": { "base64-arraybuffer": "^1.0.2" } }, "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw=="],
 
-    "vite": ["vite@7.2.2", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ=="],
+    "vite": ["vite@7.1.12", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug=="],
 
     "vitefu": ["vitefu@1.1.1", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["vite"] }, "sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ=="],
 
@@ -1351,9 +1350,9 @@
 
     "@sveltejs/kit/cookie": ["cookie@0.6.0", "", {}, "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw=="],
 
-    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.7.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-pJdKGq/1iquWYtv1RRSljZklxHCOCAJFJrImO5ZLKPJVJlVUcs8yFwNQlqS0Lo8xT1VAXXTCZocF9n26FWEKsw=="],
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.6.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg=="],
 
-    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.7.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-oAYoQnCYaQZKVS53Fq23ceWMRxq5EhQsE0x0RdQ55jT7wagMu5k+fS39v1fiSLrtrLQlXwVINenqhLMtTrV/1Q=="],
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.6.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.1.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ=="],
 
@@ -1371,8 +1370,6 @@
 
     "convex/esbuild": ["esbuild@0.25.4", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.4", "@esbuild/android-arm": "0.25.4", "@esbuild/android-arm64": "0.25.4", "@esbuild/android-x64": "0.25.4", "@esbuild/darwin-arm64": "0.25.4", "@esbuild/darwin-x64": "0.25.4", "@esbuild/freebsd-arm64": "0.25.4", "@esbuild/freebsd-x64": "0.25.4", "@esbuild/linux-arm": "0.25.4", "@esbuild/linux-arm64": "0.25.4", "@esbuild/linux-ia32": "0.25.4", "@esbuild/linux-loong64": "0.25.4", "@esbuild/linux-mips64el": "0.25.4", "@esbuild/linux-ppc64": "0.25.4", "@esbuild/linux-riscv64": "0.25.4", "@esbuild/linux-s390x": "0.25.4", "@esbuild/linux-x64": "0.25.4", "@esbuild/netbsd-arm64": "0.25.4", "@esbuild/netbsd-x64": "0.25.4", "@esbuild/openbsd-arm64": "0.25.4", "@esbuild/openbsd-x64": "0.25.4", "@esbuild/sunos-x64": "0.25.4", "@esbuild/win32-arm64": "0.25.4", "@esbuild/win32-ia32": "0.25.4", "@esbuild/win32-x64": "0.25.4" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q=="],
 
-    "convex-svelte/runed": ["runed@0.31.1", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-v3czcTnO+EJjiPvD4dwIqfTdHLZ8oH0zJheKqAHh9QMViY7Qb29UlAMRpX7ZtHh7AFqV60KmfxaJ9QMy+L1igQ=="],
-
     "eslint-plugin-react/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
@@ -1461,9 +1458,9 @@
 
     "@convex-dev/eslint-plugin/@typescript-eslint/utils/@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
 
-    "@convex-dev/eslint-plugin/@typescript-eslint/utils/@typescript-eslint/typescript-estree/@typescript-eslint/project-service/@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.46.4", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-+/XqaZPIAk6Cjg7NWgSGe27X4zMGqrFqZ8atJsX3CWxH/jACqWnrWI68h7nHQld0y+k9eTTjb9r+KU4twLoo9A=="],
+    "@convex-dev/eslint-plugin/@typescript-eslint/utils/@typescript-eslint/typescript-estree/@typescript-eslint/project-service/@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.46.3", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-GLupljMniHNIROP0zE7nCcybptolcH8QZfXOpCfhQDAdwJ/ZTlcaBOYebSOZotpti/3HrHSw7D3PZm75gYFsOA=="],
 
-    "@convex-dev/eslint-plugin/@typescript-eslint/utils/@typescript-eslint/typescript-estree/@typescript-eslint/project-service/@typescript-eslint/types": ["@typescript-eslint/types@8.46.4", "", {}, "sha512-USjyxm3gQEePdUwJBFjjGNG18xY9A2grDVGuk7/9AkjIF1L+ZrVnwR5VAU5JXtUnBL/Nwt3H31KlRDaksnM7/w=="],
+    "@convex-dev/eslint-plugin/@typescript-eslint/utils/@typescript-eslint/typescript-estree/@typescript-eslint/project-service/@typescript-eslint/types": ["@typescript-eslint/types@8.46.3", "", {}, "sha512-G7Ok9WN/ggW7e/tOf8TQYMaxgID3Iujn231hfi0Pc7ZheztIJVpO44ekY00b7akqc6nZcvregk0Jpah3kep6hA=="],
 
     "@convex-dev/eslint-plugin/@typescript-eslint/utils/@typescript-eslint/typescript-estree/fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
diff --git a/package.json b/package.json
index ecd66ec..0146ab7 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
       "packages/*"
     ],
     "catalog": {
-      "convex": "1.28.2",
+      "convex": "^1.28.0",
       "typescript": "^5.9.2",
       "better-auth": "1.3.27",
       "eslint": "^9.39.1",
diff --git a/packages/backend/convex/auth.ts b/packages/backend/convex/auth.ts
index bcd63a8..a360005 100644
--- a/packages/backend/convex/auth.ts
+++ b/packages/backend/convex/auth.ts
@@ -1,10 +1,10 @@
-import { createClient, type GenericCtx } from '@convex-dev/better-auth';
-import { convex } from '@convex-dev/better-auth/plugins';
-import { components } from './_generated/api';
-import { type DataModel } from './_generated/dataModel';
-import { mutation, MutationCtx, query, QueryCtx } from './_generated/server';
-import { betterAuth } from 'better-auth';
-import { v } from 'convex/values';
+import { createClient, type GenericCtx } from "@convex-dev/better-auth";
+import { convex } from "@convex-dev/better-auth/plugins";
+import { components } from "./_generated/api";
+import { type DataModel } from "./_generated/dataModel";
+import { mutation, MutationCtx, query, QueryCtx } from "./_generated/server";
+import { betterAuth } from "better-auth";
+import { v } from "convex/values";
 
 const siteUrl = process.env.SITE_URL!;
 
@@ -13,111 +13,106 @@ const siteUrl = process.env.SITE_URL!;
 export const authComponent = createClient<DataModel>(components.betterAuth);
 
 export const createAuth = (
-	ctx: GenericCtx<DataModel>,
-	{ optionsOnly } = { optionsOnly: false }
+  ctx: GenericCtx<DataModel>,
+  { optionsOnly } = { optionsOnly: false }
 ) => {
-	return betterAuth({
-		// disable logging when createAuth is called just to generate options.
-		// this is not required, but there's a lot of noise in logs without it.
-		logger: {
-			disabled: optionsOnly
-		},
-		baseURL: siteUrl,
-		database: authComponent.adapter(ctx),
-		// Configure simple, non-verified email/password to get started
-		emailAndPassword: {
-			enabled: true,
-			requireEmailVerification: false
-		},
-		plugins: [
-			// The Convex plugin is required for Convex compatibility
-			convex()
-		]
-	});
+  return betterAuth({
+    // disable logging when createAuth is called just to generate options.
+    // this is not required, but there's a lot of noise in logs without it.
+    logger: {
+      disabled: optionsOnly,
+    },
+    baseURL: siteUrl,
+    database: authComponent.adapter(ctx),
+    // Configure simple, non-verified email/password to get started
+    emailAndPassword: {
+      enabled: true,
+      requireEmailVerification: false,
+    },
+    plugins: [
+      // The Convex plugin is required for Convex compatibility
+      convex(),
+    ],
+  });
 };
 
 // Example function for getting the current user
 // Feel free to edit, omit, etc.
 export const getCurrentUser = query({
-	args: {},
-	handler: async (ctx) => {
-		const authUser = await authComponent.safeGetAuthUser(ctx as any);
-		if (!authUser) {
-			return;
-		}
+  args: {},
+  handler: async (ctx) => {
+    const authUser = await authComponent.safeGetAuthUser(ctx as any);
+    if (!authUser) {
+      return;
+    }
 
-		const user = await ctx.db
-			.query('usuarios')
-			.withIndex('authId', (q) => q.eq('authId', authUser._id))
-			.unique();
+    const user = await ctx.db
+      .query("usuarios")
+      .withIndex("authId", (q) => q.eq("authId", authUser._id))
+      .unique();
 
-		if (!user) {
-			return;
-		}
+    if (!user) {
+      return;
+    }
 
-		let fotoPerfilUrl = null;
-		if (user.fotoPerfil) {
-			fotoPerfilUrl = await ctx.storage.getUrl(user.fotoPerfil);
-		}
+    if (!user.roleId) {
+      return { ...user, role: null };
+    }
 
-		if (!user.roleId) {
-			return { ...user, role: null, fotoPerfilUrl };
-		}
+    const role = await ctx.db
+      .query("roles")
+      .withIndex("by_id", (q) => q.eq("_id", user.roleId))
+      .unique();
 
-		const role = await ctx.db
-			.query('roles')
-			.withIndex('by_id', (q) => q.eq('_id', user.roleId))
-			.unique();
-
-		return { ...user, role, fotoPerfilUrl };
-	}
+    return { ...user, role };
+  },
 });
 
 export const getCurrentUserFunction = async (ctx: QueryCtx | MutationCtx) => {
-	const authUser = await authComponent.safeGetAuthUser(ctx as any);
-	if (!authUser) {
-		return;
-	}
+  const authUser = await authComponent.safeGetAuthUser(ctx as any);
+  if (!authUser) {
+    return;
+  }
 
-	const user = await ctx.db
-		.query('usuarios')
-		.withIndex('authId', (q) => q.eq('authId', authUser._id))
-		.unique();
-	if (!user) {
-		return;
-	}
-	return user;
+  const user = await ctx.db
+    .query("usuarios")
+    .withIndex("authId", (q) => q.eq("authId", authUser._id))
+    .unique();
+  if (!user) {
+    return;
+  }
+  return user;
 };
 
 export const createAuthUser = async (
-	ctx: MutationCtx,
-	args: { nome: string; email: string; password: string }
+  ctx: MutationCtx,
+  args: { nome: string; email: string; password: string }
 ) => {
-	const { auth, headers } = await authComponent.getAuth(createAuth, ctx as any);
+  const { auth, headers } = await authComponent.getAuth(createAuth, ctx as any);
 
-	const result = await auth.api.signUpEmail({
-		headers,
-		body: {
-			name: args.nome,
-			email: args.email,
-			password: args.password
-		}
-	});
+  const result = await auth.api.signUpEmail({
+    headers,
+    body: {
+      name: args.nome,
+      email: args.email,
+      password: args.password,
+    },
+  });
 
-	return result.user.id;
+  return result.user.id;
 };
 
 export const updatePassword = async (
-	ctx: MutationCtx,
-	args: { newPassword: string; currentPassword: string }
+  ctx: MutationCtx,
+  args: { newPassword: string; currentPassword: string }
 ) => {
-	const { auth, headers } = await authComponent.getAuth(createAuth, ctx as any);
+  const { auth, headers } = await authComponent.getAuth(createAuth, ctx as any);
 
-	await auth.api.changePassword({
-		headers,
-		body: {
-			currentPassword: args.currentPassword,
-			newPassword: args.newPassword
-		}
-	});
+  await auth.api.changePassword({
+    headers,
+    body: {
+      currentPassword: args.currentPassword,
+      newPassword: args.newPassword,
+    },
+  });
 };
diff --git a/packages/backend/convex/funcionarios.ts b/packages/backend/convex/funcionarios.ts
index 91d075f..c85e216 100644
--- a/packages/backend/convex/funcionarios.ts
+++ b/packages/backend/convex/funcionarios.ts
@@ -1,38 +1,39 @@
-import { v } from 'convex/values';
-import { query, mutation } from './_generated/server';
-import { internal } from './_generated/api';
-import { simboloTipo } from './schema';
-import { getCurrentUserFunction } from './auth';
+import { v } from "convex/values";
+import { query, mutation } from "./_generated/server";
+import { internal } from "./_generated/api";
+import { simboloTipo } from "./schema";
 
 // Validadores para campos opcionais
 const sexoValidator = v.optional(
-	v.union(v.literal('masculino'), v.literal('feminino'), v.literal('outro'))
+  v.union(v.literal("masculino"), v.literal("feminino"), v.literal("outro"))
 );
 const estadoCivilValidator = v.optional(
-	v.union(
-		v.literal('solteiro'),
-		v.literal('casado'),
-		v.literal('divorciado'),
-		v.literal('viuvo'),
-		v.literal('uniao_estavel')
-	)
+  v.union(
+    v.literal("solteiro"),
+    v.literal("casado"),
+    v.literal("divorciado"),
+    v.literal("viuvo"),
+    v.literal("uniao_estavel")
+  )
 );
 const grauInstrucaoValidator = v.optional(
-	v.union(
-		v.literal('fundamental'),
-		v.literal('medio'),
-		v.literal('superior'),
-		v.literal('pos_graduacao'),
-		v.literal('mestrado'),
-		v.literal('doutorado')
-	)
+  v.union(
+    v.literal("fundamental"),
+    v.literal("medio"),
+    v.literal("superior"),
+    v.literal("pos_graduacao"),
+    v.literal("mestrado"),
+    v.literal("doutorado")
+  )
 );
 const grupoSanguineoValidator = v.optional(
-	v.union(v.literal('A'), v.literal('B'), v.literal('AB'), v.literal('O'))
+  v.union(v.literal("A"), v.literal("B"), v.literal("AB"), v.literal("O"))
+);
+const fatorRHValidator = v.optional(
+  v.union(v.literal("positivo"), v.literal("negativo"))
 );
-const fatorRHValidator = v.optional(v.union(v.literal('positivo'), v.literal('negativo')));
 const aposentadoValidator = v.optional(
-	v.union(v.literal('nao'), v.literal('funape_ipsep'), v.literal('inss'))
+  v.union(v.literal("nao"), v.literal("funape_ipsep"), v.literal("inss"))
 );
 
 const regimeTrabalhoValidator = v.optional(
@@ -45,256 +46,245 @@ const regimeTrabalhoValidator = v.optional(
 );
 
 export const getAll = query({
-	args: {},
-	handler: async (ctx) => {
-		// Autorização: listar funcionários
-		await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
-			recurso: 'funcionarios',
-			acao: 'listar'
-		});
-		const funcionarios = await ctx.db.query('funcionarios').collect();
-		// Retornar apenas os campos necessários para listagem
-		return funcionarios.map((f) => ({
-			_id: f._id,
-			nome: f.nome,
-			matricula: f.matricula,
-			cpf: f.cpf,
-			rg: f.rg,
-			nascimento: f.nascimento,
-			email: f.email,
-			telefone: f.telefone,
-			endereco: f.endereco,
-			cep: f.cep,
-			cidade: f.cidade,
-			uf: f.uf,
-			simboloId: f.simboloId,
-			simboloTipo: f.simboloTipo,
-			admissaoData: f.admissaoData,
-			desligamentoData: f.desligamentoData,
-			descricaoCargo: f.descricaoCargo
-		}));
-	}
+  args: {},
+  handler: async (ctx) => {
+    // Autorização: listar funcionários
+    await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
+      recurso: "funcionarios",
+      acao: "listar",
+    });
+    const funcionarios = await ctx.db.query("funcionarios").collect();
+    // Retornar apenas os campos necessários para listagem
+    return funcionarios.map((f) => ({
+      _id: f._id,
+      nome: f.nome,
+      matricula: f.matricula,
+      cpf: f.cpf,
+      rg: f.rg,
+      nascimento: f.nascimento,
+      email: f.email,
+      telefone: f.telefone,
+      endereco: f.endereco,
+      cep: f.cep,
+      cidade: f.cidade,
+      uf: f.uf,
+      simboloId: f.simboloId,
+      simboloTipo: f.simboloTipo,
+      admissaoData: f.admissaoData,
+      desligamentoData: f.desligamentoData,
+      descricaoCargo: f.descricaoCargo,
+    }));
+  },
 });
 
 export const getById = query({
-	args: { id: v.id('funcionarios') },
-	// Tipo inferido automaticamente pelo Convex
-	handler: async (ctx, args) => {
-		// Autorização: ver funcionário
-		// await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
-		//   recurso: "funcionarios",
-		//   acao: "ver",
-		// });
-		return await ctx.db.get(args.id);
-	}
-});
-
-export const getCurrent = query({
-	args: {},
-	handler: async (ctx) => {
-		const usuarioAtual = await getCurrentUserFunction(ctx);
-		if (!usuarioAtual) throw new Error('Usuário não encontrado');
-		if (!usuarioAtual.funcionarioId) throw new Error('Usuário não é funcionário');
-
-		return await ctx.db.get(usuarioAtual.funcionarioId);
-	}
+  args: { id: v.id("funcionarios") },
+  // Tipo inferido automaticamente pelo Convex
+  handler: async (ctx, args) => {
+    // Autorização: ver funcionário
+    await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
+      recurso: "funcionarios",
+      acao: "ver",
+    });
+    return await ctx.db.get(args.id);
+  },
 });
 
 export const create = mutation({
-	args: {
-		// Campos obrigatórios
-		nome: v.string(),
-		matricula: v.optional(v.string()),
-		simboloId: v.id('simbolos'),
-		nascimento: v.string(),
-		rg: v.string(),
-		cpf: v.string(),
-		endereco: v.string(),
-		cep: v.string(),
-		cidade: v.string(),
-		uf: v.string(),
-		telefone: v.string(),
-		email: v.string(),
-		admissaoData: v.optional(v.string()),
-		desligamentoData: v.optional(v.string()),
-		simboloTipo: simboloTipo,
+  args: {
+    // Campos obrigatórios
+    nome: v.string(),
+    matricula: v.optional(v.string()),
+    simboloId: v.id("simbolos"),
+    nascimento: v.string(),
+    rg: v.string(),
+    cpf: v.string(),
+    endereco: v.string(),
+    cep: v.string(),
+    cidade: v.string(),
+    uf: v.string(),
+    telefone: v.string(),
+    email: v.string(),
+    admissaoData: v.optional(v.string()),
+    desligamentoData: v.optional(v.string()),
+    simboloTipo: simboloTipo,
 
-		// Dados Pessoais Adicionais
-		nomePai: v.optional(v.string()),
-		nomeMae: v.optional(v.string()),
-		naturalidade: v.optional(v.string()),
-		naturalidadeUF: v.optional(v.string()),
-		sexo: sexoValidator,
-		estadoCivil: estadoCivilValidator,
-		nacionalidade: v.optional(v.string()),
+    // Dados Pessoais Adicionais
+    nomePai: v.optional(v.string()),
+    nomeMae: v.optional(v.string()),
+    naturalidade: v.optional(v.string()),
+    naturalidadeUF: v.optional(v.string()),
+    sexo: sexoValidator,
+    estadoCivil: estadoCivilValidator,
+    nacionalidade: v.optional(v.string()),
 
-		// Documentos Pessoais
-		rgOrgaoExpedidor: v.optional(v.string()),
-		rgDataEmissao: v.optional(v.string()),
-		carteiraProfissionalNumero: v.optional(v.string()),
-		carteiraProfissionalSerie: v.optional(v.string()),
-		carteiraProfissionalDataEmissao: v.optional(v.string()),
-		reservistaNumero: v.optional(v.string()),
-		reservistaSerie: v.optional(v.string()),
-		tituloEleitorNumero: v.optional(v.string()),
-		tituloEleitorZona: v.optional(v.string()),
-		tituloEleitorSecao: v.optional(v.string()),
-		pisNumero: v.optional(v.string()),
+    // Documentos Pessoais
+    rgOrgaoExpedidor: v.optional(v.string()),
+    rgDataEmissao: v.optional(v.string()),
+    carteiraProfissionalNumero: v.optional(v.string()),
+    carteiraProfissionalSerie: v.optional(v.string()),
+    carteiraProfissionalDataEmissao: v.optional(v.string()),
+    reservistaNumero: v.optional(v.string()),
+    reservistaSerie: v.optional(v.string()),
+    tituloEleitorNumero: v.optional(v.string()),
+    tituloEleitorZona: v.optional(v.string()),
+    tituloEleitorSecao: v.optional(v.string()),
+    pisNumero: v.optional(v.string()),
 
-		// Formação e Saúde
-		grauInstrucao: grauInstrucaoValidator,
-		formacao: v.optional(v.string()),
-		formacaoRegistro: v.optional(v.string()),
-		grupoSanguineo: grupoSanguineoValidator,
-		fatorRH: fatorRHValidator,
+    // Formação e Saúde
+    grauInstrucao: grauInstrucaoValidator,
+    formacao: v.optional(v.string()),
+    formacaoRegistro: v.optional(v.string()),
+    grupoSanguineo: grupoSanguineoValidator,
+    fatorRH: fatorRHValidator,
 
-		// Cargo e Vínculo
-		descricaoCargo: v.optional(v.string()),
-		nomeacaoPortaria: v.optional(v.string()),
-		nomeacaoData: v.optional(v.string()),
-		nomeacaoDOE: v.optional(v.string()),
-		pertenceOrgaoPublico: v.optional(v.boolean()),
-		orgaoOrigem: v.optional(v.string()),
-		aposentado: aposentadoValidator,
+    // Cargo e Vínculo
+    descricaoCargo: v.optional(v.string()),
+    nomeacaoPortaria: v.optional(v.string()),
+    nomeacaoData: v.optional(v.string()),
+    nomeacaoDOE: v.optional(v.string()),
+    pertenceOrgaoPublico: v.optional(v.boolean()),
+    orgaoOrigem: v.optional(v.string()),
+    aposentado: aposentadoValidator,
 
-		// Dados Bancários
-		contaBradescoNumero: v.optional(v.string()),
-		contaBradescoDV: v.optional(v.string()),
-		contaBradescoAgencia: v.optional(v.string()),
+    // Dados Bancários
+    contaBradescoNumero: v.optional(v.string()),
+    contaBradescoDV: v.optional(v.string()),
+    contaBradescoAgencia: v.optional(v.string()),
 
-		// Documentos Anexos (Storage IDs)
-		certidaoAntecedentesPF: v.optional(v.id('_storage')),
-		certidaoAntecedentesJFPE: v.optional(v.id('_storage')),
-		certidaoAntecedentesSDS: v.optional(v.id('_storage')),
-		certidaoAntecedentesTJPE: v.optional(v.id('_storage')),
-		certidaoImprobidade: v.optional(v.id('_storage')),
-		rgFrente: v.optional(v.id('_storage')),
-		rgVerso: v.optional(v.id('_storage')),
-		cpfFrente: v.optional(v.id('_storage')),
-		cpfVerso: v.optional(v.id('_storage')),
-		situacaoCadastralCPF: v.optional(v.id('_storage')),
-		tituloEleitorFrente: v.optional(v.id('_storage')),
-		tituloEleitorVerso: v.optional(v.id('_storage')),
-		comprovanteVotacao: v.optional(v.id('_storage')),
-		carteiraProfissionalFrente: v.optional(v.id('_storage')),
-		carteiraProfissionalVerso: v.optional(v.id('_storage')),
-		comprovantePIS: v.optional(v.id('_storage')),
-		certidaoRegistroCivil: v.optional(v.id('_storage')),
-		certidaoNascimentoDependentes: v.optional(v.id('_storage')),
-		cpfDependentes: v.optional(v.id('_storage')),
-		reservistaDoc: v.optional(v.id('_storage')),
-		comprovanteEscolaridade: v.optional(v.id('_storage')),
-		comprovanteResidencia: v.optional(v.id('_storage')),
-		comprovanteContaBradesco: v.optional(v.id('_storage')),
+    // Documentos Anexos (Storage IDs)
+    certidaoAntecedentesPF: v.optional(v.id("_storage")),
+    certidaoAntecedentesJFPE: v.optional(v.id("_storage")),
+    certidaoAntecedentesSDS: v.optional(v.id("_storage")),
+    certidaoAntecedentesTJPE: v.optional(v.id("_storage")),
+    certidaoImprobidade: v.optional(v.id("_storage")),
+    rgFrente: v.optional(v.id("_storage")),
+    rgVerso: v.optional(v.id("_storage")),
+    cpfFrente: v.optional(v.id("_storage")),
+    cpfVerso: v.optional(v.id("_storage")),
+    situacaoCadastralCPF: v.optional(v.id("_storage")),
+    tituloEleitorFrente: v.optional(v.id("_storage")),
+    tituloEleitorVerso: v.optional(v.id("_storage")),
+    comprovanteVotacao: v.optional(v.id("_storage")),
+    carteiraProfissionalFrente: v.optional(v.id("_storage")),
+    carteiraProfissionalVerso: v.optional(v.id("_storage")),
+    comprovantePIS: v.optional(v.id("_storage")),
+    certidaoRegistroCivil: v.optional(v.id("_storage")),
+    certidaoNascimentoDependentes: v.optional(v.id("_storage")),
+    cpfDependentes: v.optional(v.id("_storage")),
+    reservistaDoc: v.optional(v.id("_storage")),
+    comprovanteEscolaridade: v.optional(v.id("_storage")),
+    comprovanteResidencia: v.optional(v.id("_storage")),
+    comprovanteContaBradesco: v.optional(v.id("_storage")),
 
-		// Declarações (Storage IDs)
-		declaracaoAcumulacaoCargo: v.optional(v.id('_storage')),
-		declaracaoDependentesIR: v.optional(v.id('_storage')),
-		declaracaoIdoneidade: v.optional(v.id('_storage')),
-		termoNepotismo: v.optional(v.id('_storage')),
-		termoOpcaoRemuneracao: v.optional(v.id('_storage')),
-		// Dependentes (opcional)
-		dependentes: v.optional(
-			v.array(
-				v.object({
-					parentesco: v.union(
-						v.literal('filho'),
-						v.literal('filha'),
-						v.literal('conjuge'),
-						v.literal('outro')
-					),
-					nome: v.string(),
-					cpf: v.string(),
-					nascimento: v.string(),
-					documentoId: v.optional(v.id('_storage')),
-					salarioFamilia: v.optional(v.boolean()),
-					impostoRenda: v.optional(v.boolean())
-				})
-			)
-		)
-	},
-	returns: v.id('funcionarios'),
-	handler: async (ctx, args) => {
-		// Autorização: criar
-		await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
-			recurso: 'funcionarios',
-			acao: 'criar'
-		});
-		// Unicidade: CPF
-		const cpfExists = await ctx.db
-			.query('funcionarios')
-			.withIndex('by_cpf', (q) => q.eq('cpf', args.cpf))
-			.unique();
-		if (cpfExists) {
-			throw new Error('CPF já cadastrado');
-		}
+    // Declarações (Storage IDs)
+    declaracaoAcumulacaoCargo: v.optional(v.id("_storage")),
+    declaracaoDependentesIR: v.optional(v.id("_storage")),
+    declaracaoIdoneidade: v.optional(v.id("_storage")),
+    termoNepotismo: v.optional(v.id("_storage")),
+    termoOpcaoRemuneracao: v.optional(v.id("_storage")),
+    // Dependentes (opcional)
+    dependentes: v.optional(
+      v.array(
+        v.object({
+          parentesco: v.union(
+            v.literal("filho"),
+            v.literal("filha"),
+            v.literal("conjuge"),
+            v.literal("outro")
+          ),
+          nome: v.string(),
+          cpf: v.string(),
+          nascimento: v.string(),
+          documentoId: v.optional(v.id("_storage")),
+          salarioFamilia: v.optional(v.boolean()),
+          impostoRenda: v.optional(v.boolean()),
+        })
+      )
+    ),
+  },
+  returns: v.id("funcionarios"),
+  handler: async (ctx, args) => {
+    // Autorização: criar
+    await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
+      recurso: "funcionarios",
+      acao: "criar",
+    });
+    // Unicidade: CPF
+    const cpfExists = await ctx.db
+      .query("funcionarios")
+      .withIndex("by_cpf", (q) => q.eq("cpf", args.cpf))
+      .unique();
+    if (cpfExists) {
+      throw new Error("CPF já cadastrado");
+    }
 
-		// Unicidade: Matrícula (apenas se fornecida)
-		if (args.matricula) {
-			const matriculaExists = await ctx.db
-				.query('funcionarios')
-				.withIndex('by_matricula', (q) => q.eq('matricula', args.matricula))
-				.unique();
-			if (matriculaExists) {
-				throw new Error(
-					'Já existe um funcionário com esta matrícula. Por favor, use outra ou deixe em branco.'
-				);
-			}
-		}
+    // Unicidade: Matrícula (apenas se fornecida)
+    if (args.matricula) {
+      const matriculaExists = await ctx.db
+        .query("funcionarios")
+        .withIndex("by_matricula", (q) => q.eq("matricula", args.matricula))
+        .unique();
+      if (matriculaExists) {
+        throw new Error(
+          "Já existe um funcionário com esta matrícula. Por favor, use outra ou deixe em branco."
+        );
+      }
+    }
 
-		const novoFuncionarioId = await ctx.db.insert('funcionarios', args);
-		return novoFuncionarioId;
-	}
+    const novoFuncionarioId = await ctx.db.insert("funcionarios", args);
+    return novoFuncionarioId;
+  },
 });
 
 export const update = mutation({
-	args: {
-		id: v.id('funcionarios'),
-		// Campos obrigatórios
-		nome: v.string(),
-		matricula: v.optional(v.string()),
-		simboloId: v.id('simbolos'),
-		nascimento: v.string(),
-		rg: v.string(),
-		cpf: v.string(),
-		endereco: v.string(),
-		cep: v.string(),
-		cidade: v.string(),
-		uf: v.string(),
-		telefone: v.string(),
-		email: v.string(),
-		admissaoData: v.optional(v.string()),
-		desligamentoData: v.optional(v.string()),
-		simboloTipo: simboloTipo,
+  args: {
+    id: v.id("funcionarios"),
+    // Campos obrigatórios
+    nome: v.string(),
+    matricula: v.optional(v.string()),
+    simboloId: v.id("simbolos"),
+    nascimento: v.string(),
+    rg: v.string(),
+    cpf: v.string(),
+    endereco: v.string(),
+    cep: v.string(),
+    cidade: v.string(),
+    uf: v.string(),
+    telefone: v.string(),
+    email: v.string(),
+    admissaoData: v.optional(v.string()),
+    desligamentoData: v.optional(v.string()),
+    simboloTipo: simboloTipo,
 
-		// Dados Pessoais Adicionais
-		nomePai: v.optional(v.string()),
-		nomeMae: v.optional(v.string()),
-		naturalidade: v.optional(v.string()),
-		naturalidadeUF: v.optional(v.string()),
-		sexo: sexoValidator,
-		estadoCivil: estadoCivilValidator,
-		nacionalidade: v.optional(v.string()),
+    // Dados Pessoais Adicionais
+    nomePai: v.optional(v.string()),
+    nomeMae: v.optional(v.string()),
+    naturalidade: v.optional(v.string()),
+    naturalidadeUF: v.optional(v.string()),
+    sexo: sexoValidator,
+    estadoCivil: estadoCivilValidator,
+    nacionalidade: v.optional(v.string()),
 
-		// Documentos Pessoais
-		rgOrgaoExpedidor: v.optional(v.string()),
-		rgDataEmissao: v.optional(v.string()),
-		carteiraProfissionalNumero: v.optional(v.string()),
-		carteiraProfissionalSerie: v.optional(v.string()),
-		carteiraProfissionalDataEmissao: v.optional(v.string()),
-		reservistaNumero: v.optional(v.string()),
-		reservistaSerie: v.optional(v.string()),
-		tituloEleitorNumero: v.optional(v.string()),
-		tituloEleitorZona: v.optional(v.string()),
-		tituloEleitorSecao: v.optional(v.string()),
-		pisNumero: v.optional(v.string()),
+    // Documentos Pessoais
+    rgOrgaoExpedidor: v.optional(v.string()),
+    rgDataEmissao: v.optional(v.string()),
+    carteiraProfissionalNumero: v.optional(v.string()),
+    carteiraProfissionalSerie: v.optional(v.string()),
+    carteiraProfissionalDataEmissao: v.optional(v.string()),
+    reservistaNumero: v.optional(v.string()),
+    reservistaSerie: v.optional(v.string()),
+    tituloEleitorNumero: v.optional(v.string()),
+    tituloEleitorZona: v.optional(v.string()),
+    tituloEleitorSecao: v.optional(v.string()),
+    pisNumero: v.optional(v.string()),
 
-		// Formação e Saúde
-		grauInstrucao: grauInstrucaoValidator,
-		formacao: v.optional(v.string()),
-		formacaoRegistro: v.optional(v.string()),
-		grupoSanguineo: grupoSanguineoValidator,
-		fatorRH: fatorRHValidator,
+    // Formação e Saúde
+    grauInstrucao: grauInstrucaoValidator,
+    formacao: v.optional(v.string()),
+    formacaoRegistro: v.optional(v.string()),
+    grupoSanguineo: grupoSanguineoValidator,
+    fatorRH: fatorRHValidator,
 
     // Cargo e Vínculo
     descricaoCargo: v.optional(v.string()),
@@ -306,188 +296,188 @@ export const update = mutation({
     orgaoOrigem: v.optional(v.string()),
     aposentado: aposentadoValidator,
 
-		// Dados Bancários
-		contaBradescoNumero: v.optional(v.string()),
-		contaBradescoDV: v.optional(v.string()),
-		contaBradescoAgencia: v.optional(v.string()),
+    // Dados Bancários
+    contaBradescoNumero: v.optional(v.string()),
+    contaBradescoDV: v.optional(v.string()),
+    contaBradescoAgencia: v.optional(v.string()),
 
-		// Documentos Anexos (Storage IDs)
-		certidaoAntecedentesPF: v.optional(v.id('_storage')),
-		certidaoAntecedentesJFPE: v.optional(v.id('_storage')),
-		certidaoAntecedentesSDS: v.optional(v.id('_storage')),
-		certidaoAntecedentesTJPE: v.optional(v.id('_storage')),
-		certidaoImprobidade: v.optional(v.id('_storage')),
-		rgFrente: v.optional(v.id('_storage')),
-		rgVerso: v.optional(v.id('_storage')),
-		cpfFrente: v.optional(v.id('_storage')),
-		cpfVerso: v.optional(v.id('_storage')),
-		situacaoCadastralCPF: v.optional(v.id('_storage')),
-		tituloEleitorFrente: v.optional(v.id('_storage')),
-		tituloEleitorVerso: v.optional(v.id('_storage')),
-		comprovanteVotacao: v.optional(v.id('_storage')),
-		carteiraProfissionalFrente: v.optional(v.id('_storage')),
-		carteiraProfissionalVerso: v.optional(v.id('_storage')),
-		comprovantePIS: v.optional(v.id('_storage')),
-		certidaoRegistroCivil: v.optional(v.id('_storage')),
-		certidaoNascimentoDependentes: v.optional(v.id('_storage')),
-		cpfDependentes: v.optional(v.id('_storage')),
-		reservistaDoc: v.optional(v.id('_storage')),
-		comprovanteEscolaridade: v.optional(v.id('_storage')),
-		comprovanteResidencia: v.optional(v.id('_storage')),
-		comprovanteContaBradesco: v.optional(v.id('_storage')),
+    // Documentos Anexos (Storage IDs)
+    certidaoAntecedentesPF: v.optional(v.id("_storage")),
+    certidaoAntecedentesJFPE: v.optional(v.id("_storage")),
+    certidaoAntecedentesSDS: v.optional(v.id("_storage")),
+    certidaoAntecedentesTJPE: v.optional(v.id("_storage")),
+    certidaoImprobidade: v.optional(v.id("_storage")),
+    rgFrente: v.optional(v.id("_storage")),
+    rgVerso: v.optional(v.id("_storage")),
+    cpfFrente: v.optional(v.id("_storage")),
+    cpfVerso: v.optional(v.id("_storage")),
+    situacaoCadastralCPF: v.optional(v.id("_storage")),
+    tituloEleitorFrente: v.optional(v.id("_storage")),
+    tituloEleitorVerso: v.optional(v.id("_storage")),
+    comprovanteVotacao: v.optional(v.id("_storage")),
+    carteiraProfissionalFrente: v.optional(v.id("_storage")),
+    carteiraProfissionalVerso: v.optional(v.id("_storage")),
+    comprovantePIS: v.optional(v.id("_storage")),
+    certidaoRegistroCivil: v.optional(v.id("_storage")),
+    certidaoNascimentoDependentes: v.optional(v.id("_storage")),
+    cpfDependentes: v.optional(v.id("_storage")),
+    reservistaDoc: v.optional(v.id("_storage")),
+    comprovanteEscolaridade: v.optional(v.id("_storage")),
+    comprovanteResidencia: v.optional(v.id("_storage")),
+    comprovanteContaBradesco: v.optional(v.id("_storage")),
 
-		// Declarações (Storage IDs)
-		declaracaoAcumulacaoCargo: v.optional(v.id('_storage')),
-		declaracaoDependentesIR: v.optional(v.id('_storage')),
-		declaracaoIdoneidade: v.optional(v.id('_storage')),
-		termoNepotismo: v.optional(v.id('_storage')),
-		termoOpcaoRemuneracao: v.optional(v.id('_storage')),
-		// Dependentes (opcional)
-		dependentes: v.optional(
-			v.array(
-				v.object({
-					parentesco: v.union(
-						v.literal('filho'),
-						v.literal('filha'),
-						v.literal('conjuge'),
-						v.literal('outro')
-					),
-					nome: v.string(),
-					cpf: v.string(),
-					nascimento: v.string(),
-					documentoId: v.optional(v.id('_storage')),
-					salarioFamilia: v.optional(v.boolean()),
-					impostoRenda: v.optional(v.boolean())
-				})
-			)
-		)
-	},
-	returns: v.null(),
-	handler: async (ctx, args) => {
-		// Autorização: editar
-		await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
-			recurso: 'funcionarios',
-			acao: 'editar'
-		});
-		// Unicidade: CPF (excluindo o próprio registro)
-		const cpfExists = await ctx.db
-			.query('funcionarios')
-			.withIndex('by_cpf', (q) => q.eq('cpf', args.cpf))
-			.unique();
-		if (cpfExists && cpfExists._id !== args.id) {
-			throw new Error('CPF já cadastrado');
-		}
+    // Declarações (Storage IDs)
+    declaracaoAcumulacaoCargo: v.optional(v.id("_storage")),
+    declaracaoDependentesIR: v.optional(v.id("_storage")),
+    declaracaoIdoneidade: v.optional(v.id("_storage")),
+    termoNepotismo: v.optional(v.id("_storage")),
+    termoOpcaoRemuneracao: v.optional(v.id("_storage")),
+    // Dependentes (opcional)
+    dependentes: v.optional(
+      v.array(
+        v.object({
+          parentesco: v.union(
+            v.literal("filho"),
+            v.literal("filha"),
+            v.literal("conjuge"),
+            v.literal("outro")
+          ),
+          nome: v.string(),
+          cpf: v.string(),
+          nascimento: v.string(),
+          documentoId: v.optional(v.id("_storage")),
+          salarioFamilia: v.optional(v.boolean()),
+          impostoRenda: v.optional(v.boolean()),
+        })
+      )
+    ),
+  },
+  returns: v.null(),
+  handler: async (ctx, args) => {
+    // Autorização: editar
+    await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
+      recurso: "funcionarios",
+      acao: "editar",
+    });
+    // Unicidade: CPF (excluindo o próprio registro)
+    const cpfExists = await ctx.db
+      .query("funcionarios")
+      .withIndex("by_cpf", (q) => q.eq("cpf", args.cpf))
+      .unique();
+    if (cpfExists && cpfExists._id !== args.id) {
+      throw new Error("CPF já cadastrado");
+    }
 
-		// Unicidade: Matrícula (apenas se fornecida, excluindo o próprio registro)
-		if (args.matricula) {
-			const matriculaExists = await ctx.db
-				.query('funcionarios')
-				.withIndex('by_matricula', (q) => q.eq('matricula', args.matricula))
-				.unique();
-			if (matriculaExists && matriculaExists._id !== args.id) {
-				throw new Error(
-					'Já existe um funcionário com esta matrícula. Por favor, use outra ou deixe em branco.'
-				);
-			}
-		}
+    // Unicidade: Matrícula (apenas se fornecida, excluindo o próprio registro)
+    if (args.matricula) {
+      const matriculaExists = await ctx.db
+        .query("funcionarios")
+        .withIndex("by_matricula", (q) => q.eq("matricula", args.matricula))
+        .unique();
+      if (matriculaExists && matriculaExists._id !== args.id) {
+        throw new Error(
+          "Já existe um funcionário com esta matrícula. Por favor, use outra ou deixe em branco."
+        );
+      }
+    }
 
-		const usuarioExists = await ctx.db
-			.query('usuarios')
-			.withIndex('by_funcionarioId', (q) => q.eq('funcionarioId', args.id))
-			.unique();
+    const usuarioExists = await ctx.db
+      .query("usuarios")
+      .withIndex("by_funcionarioId", (q) => q.eq("funcionarioId", args.id))
+      .unique();
 
-		if (usuarioExists && usuarioExists.email !== args.email) {
-			await ctx.db.patch(usuarioExists._id, {
-				email: args.email
-			});
-		}
+    if (usuarioExists && usuarioExists.email !== args.email) {
+      await ctx.db.patch(usuarioExists._id, {
+        email: args.email,
+      });
+    }
 
-		const { id, ...updateData } = args;
-		await ctx.db.patch(id, updateData);
-		return null;
-	}
+    const { id, ...updateData } = args;
+    await ctx.db.patch(id, updateData);
+    return null;
+  },
 });
 
 export const remove = mutation({
-	args: { id: v.id('funcionarios') },
-	returns: v.null(),
-	handler: async (ctx, args) => {
-		// Autorização: excluir
-		await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
-			recurso: 'funcionarios',
-			acao: 'excluir'
-		});
-		// TODO: Talvez queiramos também remover os arquivos do storage
-		await ctx.db.delete(args.id);
-		return null;
-	}
+  args: { id: v.id("funcionarios") },
+  returns: v.null(),
+  handler: async (ctx, args) => {
+    // Autorização: excluir
+    await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
+      recurso: "funcionarios",
+      acao: "excluir",
+    });
+    // TODO: Talvez queiramos também remover os arquivos do storage
+    await ctx.db.delete(args.id);
+    return null;
+  },
 });
 
 // Query para obter ficha completa para impressão
 export const getFichaCompleta = query({
-	args: { id: v.id('funcionarios') },
-	// Tipo inferido automaticamente pelo Convex
-	handler: async (ctx, args) => {
-		await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
-			recurso: 'funcionarios',
-			acao: 'ver'
-		});
-		const funcionario = await ctx.db.get(args.id);
-		if (!funcionario) {
-			return null;
-		}
+  args: { id: v.id("funcionarios") },
+  // Tipo inferido automaticamente pelo Convex
+  handler: async (ctx, args) => {
+    await ctx.runQuery(internal.permissoesAcoes.assertPermissaoAcaoAtual, {
+      recurso: "funcionarios",
+      acao: "ver",
+    });
+    const funcionario = await ctx.db.get(args.id);
+    if (!funcionario) {
+      return null;
+    }
 
-		// Buscar informações do símbolo
-		const simbolo = await ctx.db.get(funcionario.simboloId);
+    // Buscar informações do símbolo
+    const simbolo = await ctx.db.get(funcionario.simboloId);
 
-		// Buscar cursos do funcionário
-		const cursos = await ctx.db
-			.query('cursos')
-			.withIndex('by_funcionario', (q) => q.eq('funcionarioId', args.id))
-			.collect();
+    // Buscar cursos do funcionário
+    const cursos = await ctx.db
+      .query("cursos")
+      .withIndex("by_funcionario", (q) => q.eq("funcionarioId", args.id))
+      .collect();
 
-		// Buscar URLs dos certificados
-		const cursosComUrls = await Promise.all(
-			cursos.map(async (curso) => {
-				let certificadoUrl = null;
-				if (curso.certificadoId) {
-					certificadoUrl = await ctx.storage.getUrl(curso.certificadoId);
-				}
-				return {
-					...curso,
-					certificadoUrl
-				};
-			})
-		);
+    // Buscar URLs dos certificados
+    const cursosComUrls = await Promise.all(
+      cursos.map(async (curso) => {
+        let certificadoUrl = null;
+        if (curso.certificadoId) {
+          certificadoUrl = await ctx.storage.getUrl(curso.certificadoId);
+        }
+        return {
+          ...curso,
+          certificadoUrl,
+        };
+      })
+    );
 
-		return {
-			...funcionario,
-			simbolo: simbolo
-				? {
-						nome: simbolo.nome,
-						descricao: simbolo.descricao,
-						tipo: simbolo.tipo,
-						vencValor: simbolo.vencValor,
-						repValor: simbolo.repValor,
-						valor: simbolo.valor
-					}
-				: null,
-			cursos: cursosComUrls
-		};
-	}
+    return {
+      ...funcionario,
+      simbolo: simbolo
+        ? {
+            nome: simbolo.nome,
+            descricao: simbolo.descricao,
+            tipo: simbolo.tipo,
+            vencValor: simbolo.vencValor,
+            repValor: simbolo.repValor,
+            valor: simbolo.valor,
+          }
+        : null,
+      cursos: cursosComUrls,
+    };
+  },
 });
 
 // Mutation: Configurar gestor (apenas para TI_MASTER)
 export const configurarGestor = mutation({
-	args: {
-		funcionarioId: v.id('funcionarios'),
-		gestorId: v.optional(v.id('usuarios'))
-	},
-	returns: v.null(),
-	handler: async (ctx, args) => {
-		await ctx.db.patch(args.funcionarioId, {
-			gestorId: args.gestorId
-		});
-		return null;
-	}
+  args: {
+    funcionarioId: v.id("funcionarios"),
+    gestorId: v.optional(v.id("usuarios")),
+  },
+  returns: v.null(),
+  handler: async (ctx, args) => {
+    await ctx.db.patch(args.funcionarioId, {
+      gestorId: args.gestorId,
+    });
+    return null;
+  },
 });
diff --git a/packages/backend/convex/monitoramento.ts b/packages/backend/convex/monitoramento.ts
index 6189bed..3d32bc3 100644
--- a/packages/backend/convex/monitoramento.ts
+++ b/packages/backend/convex/monitoramento.ts
@@ -139,6 +139,25 @@ export const configurarAlerta = mutation({
  */
 export const listarAlertas = query({
 	args: {},
+	returns: v.array(
+		v.object({
+			_id: v.id('alertConfigurations'),
+			metricName: v.string(),
+			threshold: v.number(),
+			operator: v.union(
+				v.literal('>'),
+				v.literal('<'),
+				v.literal('>='),
+				v.literal('<='),
+				v.literal('==')
+			),
+			enabled: v.boolean(),
+			notifyByEmail: v.boolean(),
+			notifyByChat: v.boolean(),
+			createdBy: v.id('usuarios'),
+			lastModified: v.number()
+		})
+	),
 	handler: async (ctx) => {
 		const alertas = await ctx.db.query('alertConfigurations').collect();
 		return alertas;