feat: enhance vacation management system with new employee association functionality, improved email notification handling, and comprehensive documentation; update dependencies and UI components for better user experience

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

@@ -14,9 +14,18 @@
   let filtroStatus = $state<"todos" | "ativo" | "bloqueado" | "inativo">("todos");
   let usuarioSelecionado = $state<any>(null);
   let modalAberto = $state(false);
-  let modalAcao = $state<"bloquear" | "desbloquear" | "reset">("bloquear");
+  let modalAcao = $state<"bloquear" | "desbloquear" | "reset" | "associar">("bloquear");
   let motivo = $state("");
   let processando = $state(false);
+  
+  // Modal de associar funcionário
+  let modalAssociarAberto = $state(false);
+  let usuarioParaAssociar = $state<any>(null);
+  let funcionarioSelecionadoId = $state<string>("");
+  let buscaFuncionario = $state("");
+  
+  // Query de funcionários
+  const funcionarios = useQuery(api.funcionarios.list, {});
 
   // Usuários filtrados
   const usuariosFiltrados = $derived.by(() => {
@@ -36,6 +45,21 @@
       return matchNome && matchStatus;
     });
   });
+  
+  // Funcionários filtrados (sem associação ou disponíveis)
+  const funcionariosFiltrados = $derived.by(() => {
+    if (!funcionarios?.data || !Array.isArray(funcionarios.data)) return [];
+    
+    return funcionarios.data.filter(f => {
+      // Filtro por busca
+      const matchBusca = !buscaFuncionario ||
+        f.nome.toLowerCase().includes(buscaFuncionario.toLowerCase()) ||
+        f.cpf?.includes(buscaFuncionario) ||
+        f.matricula?.includes(buscaFuncionario);
+      
+      return matchBusca;
+    }).sort((a, b) => a.nome.localeCompare(b.nome));
+  });
 
   const stats = $derived.by(() => {
     if (!usuarios?.data || !Array.isArray(usuarios.data)) return null;
@@ -59,6 +83,59 @@
     usuarioSelecionado = null;
     motivo = "";
   }
+  
+  function abrirModalAssociar(usuario: any) {
+    usuarioParaAssociar = usuario;
+    funcionarioSelecionadoId = usuario.funcionarioId || "";
+    buscaFuncionario = "";
+    modalAssociarAberto = true;
+  }
+  
+  function fecharModalAssociar() {
+    modalAssociarAberto = false;
+    usuarioParaAssociar = null;
+    funcionarioSelecionadoId = "";
+    buscaFuncionario = "";
+  }
+  
+  async function associarFuncionario() {
+    if (!usuarioParaAssociar || !funcionarioSelecionadoId) return;
+    
+    processando = true;
+    try {
+      await client.mutation(api.usuarios.associarFuncionario, {
+        usuarioId: usuarioParaAssociar._id as Id<"usuarios">,
+        funcionarioId: funcionarioSelecionadoId as Id<"funcionarios">
+      });
+      
+      alert("Funcionário associado com sucesso!");
+      fecharModalAssociar();
+    } catch (error: any) {
+      alert("Erro ao associar funcionário: " + error.message);
+    } finally {
+      processando = false;
+    }
+  }
+  
+  async function desassociarFuncionario() {
+    if (!usuarioParaAssociar) return;
+    
+    if (!confirm("Deseja realmente desassociar o funcionário deste usuário?")) return;
+    
+    processando = true;
+    try {
+      await client.mutation(api.usuarios.desassociarFuncionario, {
+        usuarioId: usuarioParaAssociar._id as Id<"usuarios">
+      });
+      
+      alert("Funcionário desassociado com sucesso!");
+      fecharModalAssociar();
+    } catch (error: any) {
+      alert("Erro ao desassociar funcionário: " + error.message);
+    } finally {
+      processando = false;
+    }
+  }
 
   async function executarAcao() {
     if (!usuarioSelecionado) return;
@@ -140,10 +217,11 @@
     <div class="card-body">
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div class="form-control">
-          <label class="label">
+          <label class="label" for="buscar-usuario-input">
             <span class="label-text">Buscar por nome, matrícula ou email</span>
           </label>
           <input 
+            id="buscar-usuario-input"
             type="text" 
             bind:value={filtroNome}
             placeholder="Digite para buscar..." 
@@ -152,10 +230,10 @@
         </div>
         
         <div class="form-control">
-          <label class="label">
+          <label class="label" for="filtro-status-select">
             <span class="label-text">Filtrar por status</span>
           </label>
-          <select bind:value={filtroStatus} class="select select-bordered">
+          <select id="filtro-status-select" bind:value={filtroStatus} class="select select-bordered">
             <option value="todos">Todos</option>
             <option value="ativo">Ativos</option>
             <option value="bloqueado">Bloqueados</option>
@@ -180,6 +258,7 @@
               <th>Matrícula</th>
               <th>Nome</th>
               <th>Email</th>
+              <th>Funcionário</th>
               <th>Status</th>
               <th>Ações</th>
             </tr>
@@ -190,11 +269,40 @@
                 <td class="font-mono">{usuario.matricula}</td>
                 <td>{usuario.nome}</td>
                 <td>{usuario.email || "-"}</td>
+                <td>
+                  {#if usuario.funcionarioId}
+                    <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>
+                  {: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>
-                  <div class="flex gap-2">
+                  <div class="flex gap-2 flex-wrap">
+                    <!-- Botão Associar Funcionário -->
+                    <button 
+                      class="btn btn-sm btn-info"
+                      onclick={() => abrirModalAssociar(usuario)}
+                      title={usuario.funcionarioId ? "Alterar funcionário associado" : "Associar funcionário"}
+                    >
+                      <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                      </svg>
+                      {usuario.funcionarioId ? "Alterar" : "Associar"}
+                    </button>
+                    
                     {#if usuario.bloqueado}
                       <button 
                         class="btn btn-sm btn-success"
@@ -261,10 +369,11 @@
 
       {#if modalAcao === "bloquear"}
         <div class="form-control mb-4">
-          <label class="label">
+          <label class="label" for="motivo-bloqueio-textarea">
             <span class="label-text">Motivo do bloqueio *</span>
           </label>
           <textarea 
+            id="motivo-bloqueio-textarea"
             bind:value={motivo}
             class="textarea textarea-bordered" 
             placeholder="Digite o motivo..."
@@ -302,7 +411,126 @@
         </button>
       </div>
     </div>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div class="modal-backdrop" onclick={fecharModal}></div>
   </div>
 {/if}
 
+<!-- Modal Associar Funcionário -->
+{#if modalAssociarAberto && usuarioParaAssociar}
+  <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> {usuarioParaAssociar.nome} ({usuarioParaAssociar.matricula})
+        </p>
+        
+        {#if usuarioParaAssociar.funcionarioId}
+          <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>
+
+      <!-- Busca de Funcionários -->
+      <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>
+
+      <!-- Lista de Funcionários -->
+      <div class="form-control mb-6">
+        <div class="label">
+          <span class="label-text">Selecione o Funcionário *</span>
+        </div>
+        
+        <div class="border rounded-lg max-h-96 overflow-y-auto">
+          {#if funcionariosFiltrados.length === 0}
+            <div class="p-4 text-center text-base-content/60">
+              {buscaFuncionario ? "Nenhum funcionário encontrado com esse critério" : "Carregando funcionários..."}
+            </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>
+
+      <!-- Ações -->
+      <div class="modal-action">
+        <button 
+          class="btn btn-ghost" 
+          onclick={fecharModalAssociar}
+          disabled={processando}
+        >
+          Cancelar
+        </button>
+        
+        {#if usuarioParaAssociar.funcionarioId}
+          <button 
+            class="btn btn-error"
+            onclick={desassociarFuncionario}
+            disabled={processando}
+          >
+            {#if processando}
+              <span class="loading loading-spinner loading-sm"></span>
+            {/if}
+            Desassociar
+          </button>
+        {/if}
+        
+        <button 
+          class="btn btn-primary"
+          onclick={associarFuncionario}
+          disabled={processando || !funcionarioSelecionadoId}
+        >
+          {#if processando}
+            <span class="loading loading-spinner loading-sm"></span>
+          {/if}
+          {usuarioParaAssociar.funcionarioId ? "Alterar" : "Associar"}
+        </button>
+      </div>
+    </div>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="modal-backdrop" onclick={fecharModalAssociar}></div>
+  </div>
+{/if}
+