feat: enhance employee and symbol management with new features, improved UI components, and backend schema updates

apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte

@@ -0,0 +1,383 @@
+<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";
+
+  const client = useConvexClient();
+
+  let matriculaBusca = $state("");
+  let usuarioEncontrado = $state<any>(null);
+  let buscando = $state(false);
+  let salvando = $state(false);
+  let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(null);
+
+  // Buscar permissões personalizadas do usuário
+  const permissoesQuery = $derived(
+    usuarioEncontrado
+      ? useQuery(api.menuPermissoes.listarPermissoesPersonalizadas, {
+          matricula: usuarioEncontrado.matricula,
+        })
+      : null
+  );
+
+  // Buscar menus disponíveis
+  const menusQuery = useQuery(api.menuPermissoes.listarMenus, {});
+
+  async function buscarUsuario() {
+    if (!matriculaBusca.trim()) {
+      mensagem = { tipo: "error", texto: "Digite uma matrícula para buscar" };
+      return;
+    }
+
+    try {
+      buscando = true;
+      const usuario = await client.query(api.menuPermissoes.buscarUsuarioPorMatricula, {
+        matricula: matriculaBusca.trim(),
+      });
+
+      if (usuario) {
+        usuarioEncontrado = usuario;
+        mensagem = null;
+      } else {
+        usuarioEncontrado = null;
+        mensagem = { tipo: "error", texto: "Usuário não encontrado com esta matrícula" };
+      }
+    } catch (e: any) {
+      mensagem = { tipo: "error", texto: e.message || "Erro ao buscar usuário" };
+    } finally {
+      buscando = false;
+    }
+  }
+
+  async function atualizarPermissao(
+    menuPath: string,
+    campo: "podeAcessar" | "podeConsultar" | "podeGravar",
+    valor: boolean
+  ) {
+    if (!usuarioEncontrado) return;
+
+    try {
+      salvando = true;
+
+      // Obter permissão atual do menu
+      const permissaoAtual = permissoesQuery?.data?.find((p) => p.menuPath === menuPath);
+
+      let podeAcessar = valor;
+      let podeConsultar = false;
+      let podeGravar = false;
+
+      // Aplicar lógica de dependências
+      if (campo === "podeGravar" && valor) {
+        podeAcessar = true;
+        podeConsultar = true;
+        podeGravar = true;
+      } else if (campo === "podeConsultar" && valor) {
+        podeAcessar = true;
+        podeConsultar = true;
+        podeGravar = permissaoAtual?.podeGravar || false;
+      } else if (campo === "podeAcessar" && !valor) {
+        podeAcessar = false;
+        podeConsultar = false;
+        podeGravar = false;
+      } else if (campo === "podeConsultar" && !valor) {
+        podeAcessar = permissaoAtual?.podeAcessar !== undefined ? permissaoAtual.podeAcessar : false;
+        podeConsultar = false;
+        podeGravar = false;
+      } else if (campo === "podeGravar" && !valor) {
+        podeAcessar = permissaoAtual?.podeAcessar !== undefined ? permissaoAtual.podeAcessar : false;
+        podeConsultar = permissaoAtual?.podeConsultar !== undefined ? permissaoAtual.podeConsultar : false;
+        podeGravar = false;
+      } else if (permissaoAtual) {
+        podeAcessar = permissaoAtual.podeAcessar;
+        podeConsultar = permissaoAtual.podeConsultar;
+        podeGravar = permissaoAtual.podeGravar;
+      }
+
+      await client.mutation(api.menuPermissoes.atualizarPermissaoPersonalizada, {
+        matricula: usuarioEncontrado.matricula,
+        menuPath,
+        podeAcessar,
+        podeConsultar,
+        podeGravar,
+      });
+
+      mensagem = { tipo: "success", texto: "Permissão personalizada atualizada!" };
+      setTimeout(() => {
+        mensagem = null;
+      }, 3000);
+    } catch (e: any) {
+      mensagem = { tipo: "error", texto: e.message || "Erro ao atualizar permissão" };
+    } finally {
+      salvando = false;
+    }
+  }
+
+  function limparBusca() {
+    matriculaBusca = "";
+    usuarioEncontrado = null;
+    mensagem = null;
+  }
+</script>
+
+<ProtectedRoute allowedRoles={["admin", "ti"]} maxLevel={1}>
+  <!-- Breadcrumb -->
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li>
+        <a href="/" class="text-primary hover:text-primary-focus">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+          </svg>
+          Dashboard
+        </a>
+      </li>
+      <li>
+        <a href="/ti" class="text-primary hover:text-primary-focus">TI</a>
+      </li>
+      <li class="font-semibold">Personalizar Permissões</li>
+    </ul>
+  </div>
+
+  <!-- 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">Personalizar Permissões por Matrícula</h1>
+        <p class="text-base-content/60 mt-1">Configure permissões específicas para usuários individuais</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>
+
+  <!-- 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}
+
+  <!-- Card de Busca -->
+  <div class="card bg-base-100 shadow-xl mb-6">
+    <div class="card-body">
+      <h2 class="card-title">Buscar Usuário</h2>
+      <p class="text-sm text-base-content/60">Digite a matrícula do usuário para personalizar suas permissões</p>
+      
+      <div class="flex gap-4 mt-4">
+        <div class="form-control flex-1">
+          <label class="label" for="matricula-busca">
+            <span class="label-text font-semibold">Matrícula</span>
+          </label>
+          <input
+            id="matricula-busca"
+            type="text"
+            class="input input-bordered input-primary w-full"
+            placeholder="Digite a matrícula..."
+            bind:value={matriculaBusca}
+            disabled={buscando}
+            onkeydown={(e) => e.key === "Enter" && buscarUsuario()}
+          />
+        </div>
+        
+        <div class="flex items-end gap-2">
+          <button
+            class="btn btn-primary"
+            onclick={buscarUsuario}
+            disabled={buscando || !matriculaBusca.trim()}
+          >
+            {#if buscando}
+              <span class="loading loading-spinner loading-sm"></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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            {/if}
+            Buscar
+          </button>
+          
+          {#if usuarioEncontrado}
+            <button class="btn btn-ghost" onclick={limparBusca}>
+              <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>
+              Limpar
+            </button>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Informações do Usuário -->
+  {#if usuarioEncontrado}
+    <div class="card bg-gradient-to-br from-info/10 to-info/5 shadow-xl mb-6 border-2 border-info/20">
+      <div class="card-body">
+        <div class="flex items-center gap-4">
+          <div class="avatar placeholder">
+            <div class="bg-info text-info-content rounded-full w-16">
+              <span class="text-2xl font-bold">{usuarioEncontrado.nome.charAt(0)}</span>
+            </div>
+          </div>
+          
+          <div class="flex-1">
+            <h3 class="text-xl font-bold">{usuarioEncontrado.nome}</h3>
+            <div class="flex gap-4 mt-1 text-sm">
+              <span class="flex items-center 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="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>
+                <strong>Matrícula:</strong> {usuarioEncontrado.matricula}
+              </span>
+              <span class="flex items-center 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="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>
+                <strong>Email:</strong> {usuarioEncontrado.email}
+              </span>
+            </div>
+          </div>
+          
+          <div class="text-right">
+            <div class="badge badge-primary badge-lg">
+              Nível {usuarioEncontrado.role.nivel}
+            </div>
+            <p class="text-sm mt-1">{usuarioEncontrado.role.descricao}</p>
+            <div class="badge mt-2" class:badge-success={usuarioEncontrado.ativo} class:badge-error={!usuarioEncontrado.ativo}>
+              {usuarioEncontrado.ativo ? "Ativo" : "Inativo"}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tabela de Permissões -->
+    <div class="card bg-base-100 shadow-xl">
+      <div class="card-body">
+        <h2 class="card-title">Permissões Personalizadas</h2>
+        <div class="alert alert-info 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <div>
+            <p class="text-sm">
+              <strong>Permissões personalizadas sobrepõem as permissões da função.</strong><br />
+              Configure apenas os menus que deseja personalizar para este usuário.
+            </p>
+          </div>
+        </div>
+
+        {#if menusQuery.isLoading}
+          <div class="flex justify-center py-12">
+            <span class="loading loading-spinner loading-lg text-primary"></span>
+          </div>
+        {:else if menusQuery.data}
+          <div class="overflow-x-auto">
+            <table class="table table-zebra table-sm">
+              <thead class="bg-base-200">
+                <tr>
+                  <th class="w-1/3">Menu</th>
+                  <th class="text-center">
+                    <div class="flex items-center justify-center 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="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>
+                      Acessar
+                    </div>
+                  </th>
+                  <th class="text-center">
+                    <div class="flex items-center justify-center 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                      </svg>
+                      Consultar
+                    </div>
+                  </th>
+                  <th class="text-center">
+                    <div class="flex items-center justify-center 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="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>
+                      Gravar
+                    </div>
+                  </th>
+                  <th class="text-center">Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {#each menusQuery.data as menu}
+                  {@const permissao = permissoesQuery?.data?.find((p) => p.menuPath === menu.path)}
+                  <tr class="hover">
+                    <td>
+                      <div class="flex flex-col">
+                        <span class="font-semibold">{menu.nome}</span>
+                        <span class="text-xs text-base-content/60">{menu.path}</span>
+                      </div>
+                    </td>
+                    <td class="text-center">
+                      <input
+                        type="checkbox"
+                        class="checkbox checkbox-primary"
+                        checked={permissao?.podeAcessar || false}
+                        disabled={salvando}
+                        onchange={(e) =>
+                          atualizarPermissao(menu.path, "podeAcessar", e.currentTarget.checked)}
+                      />
+                    </td>
+                    <td class="text-center">
+                      <input
+                        type="checkbox"
+                        class="checkbox checkbox-info"
+                        checked={permissao?.podeConsultar || false}
+                        disabled={salvando || !permissao?.podeAcessar}
+                        onchange={(e) =>
+                          atualizarPermissao(menu.path, "podeConsultar", e.currentTarget.checked)}
+                      />
+                    </td>
+                    <td class="text-center">
+                      <input
+                        type="checkbox"
+                        class="checkbox checkbox-success"
+                        checked={permissao?.podeGravar || false}
+                        disabled={salvando || !permissao?.podeConsultar}
+                        onchange={(e) =>
+                          atualizarPermissao(menu.path, "podeGravar", e.currentTarget.checked)}
+                      />
+                    </td>
+                    <td class="text-center">
+                      {#if permissao}
+                        <div class="badge badge-warning badge-sm">Personalizado</div>
+                      {:else}
+                        <div class="badge badge-ghost badge-sm">Padrão da Função</div>
+                      {/if}
+                    </td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</ProtectedRoute>
+