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

apps/web/src/lib/components/MenuProtection.svelte

@@ -0,0 +1,154 @@
+<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 { authStore } from "$lib/stores/auth.svelte";
+  import { loginModalStore } from "$lib/stores/loginModal.svelte";
+  import { onMount } from "svelte";
+  import { goto } from "$app/navigation";
+
+  interface MenuProtectionProps {
+    menuPath: string;
+    requireGravar?: boolean;
+    children?: any;
+    redirectTo?: string;
+  }
+
+  let {
+    menuPath,
+    requireGravar = false,
+    children,
+    redirectTo = "/",
+  }: MenuProtectionProps = $props();
+
+  let verificando = $state(true);
+  let temPermissao = $state(false);
+  let motivoNegacao = $state("");
+
+  // Query para verificar permissões (só executa se o usuário estiver autenticado)
+  const permissaoQuery = $derived(
+    authStore.usuario
+      ? useQuery(api.menuPermissoes.verificarAcesso, {
+          usuarioId: authStore.usuario._id as Id<"usuarios">,
+          menuPath: menuPath,
+        })
+      : null
+  );
+
+  onMount(() => {
+    verificarPermissoes();
+  });
+
+  $effect(() => {
+    // Re-verificar quando o status de autenticação mudar
+    if (authStore.autenticado !== undefined) {
+      verificarPermissoes();
+    }
+  });
+
+  $effect(() => {
+    // Re-verificar quando a query carregar
+    if (permissaoQuery?.data) {
+      verificarPermissoes();
+    }
+  });
+
+  function verificarPermissoes() {
+    // Dashboard e Solicitar Acesso são públicos
+    if (menuPath === "/" || menuPath === "/solicitar-acesso") {
+      verificando = false;
+      temPermissao = true;
+      return;
+    }
+
+    // Se não está autenticado
+    if (!authStore.autenticado) {
+      verificando = false;
+      temPermissao = false;
+      motivoNegacao = "auth_required";
+      
+      // Abrir modal de login e salvar rota de redirecionamento
+      const currentPath = window.location.pathname;
+      loginModalStore.open(currentPath);
+      
+      // NÃO redirecionar, apenas mostrar o modal
+      // O usuário verá a mensagem "Verificando permissões..." enquanto o modal está aberto
+      return;
+    }
+
+    // Se está autenticado, verificar permissões
+    if (permissaoQuery?.data) {
+      const permissao = permissaoQuery.data;
+
+      // Se não pode acessar
+      if (!permissao.podeAcessar) {
+        verificando = false;
+        temPermissao = false;
+        motivoNegacao = "access_denied";
+        
+        const currentPath = window.location.pathname;
+        window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
+        return;
+      }
+
+      // Se requer gravação mas não tem permissão
+      if (requireGravar && !permissao.podeGravar) {
+        verificando = false;
+        temPermissao = false;
+        motivoNegacao = "write_denied";
+        
+        const currentPath = window.location.pathname;
+        window.location.href = `${redirectTo}?error=write_denied&route=${encodeURIComponent(currentPath)}`;
+        return;
+      }
+
+      // Tem permissão!
+      verificando = false;
+      temPermissao = true;
+    } else if (permissaoQuery?.error) {
+      verificando = false;
+      temPermissao = false;
+      motivoNegacao = "error";
+    }
+  }
+</script>
+
+{#if verificando}
+  <div class="flex items-center justify-center min-h-screen">
+    <div class="text-center">
+      {#if motivoNegacao === "auth_required"}
+        <div class="p-4 bg-warning/10 rounded-full inline-block mb-4">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-warning" 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>
+        </div>
+        <h2 class="text-2xl font-bold text-base-content mb-2">Acesso Restrito</h2>
+        <p class="text-base-content/70 mb-4">
+          Esta área requer autenticação.<br />
+          Por favor, faça login para continuar.
+        </p>
+      {:else}
+        <span class="loading loading-spinner loading-lg text-primary"></span>
+        <p class="mt-4 text-base-content/70">Verificando permissões...</p>
+      {/if}
+    </div>
+  </div>
+{:else if temPermissao}
+  {@render children?.()}
+{:else}
+  <div class="flex items-center justify-center min-h-screen">
+    <div class="text-center">
+      <div class="p-4 bg-error/10 rounded-full inline-block mb-4">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-error" 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>
+      </div>
+      <h2 class="text-2xl font-bold text-base-content mb-2">Acesso Negado</h2>
+      <p class="text-base-content/70 mb-4">Você não tem permissão para acessar esta página.</p>
+      <button class="btn btn-primary" onclick={() => goto(redirectTo)}>
+        Voltar ao Dashboard
+      </button>
+    </div>
+  </div>
+{/if}
+

apps/web/src/lib/components/ProtectedRoute.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { authStore } from "$lib/stores/auth.svelte";
+  import { goto } from "$app/navigation";
+  import { onMount } from "svelte";
+  import { page } from "$app/stores";
+  import type { Snippet } from "svelte";
+
+  let { 
+    children,
+    requireAuth = true,
+    allowedRoles = [],
+    maxLevel = 3,
+    redirectTo = "/"
+  }: {
+    children: Snippet;
+    requireAuth?: boolean;
+    allowedRoles?: string[];
+    maxLevel?: number;
+    redirectTo?: string;
+  } = $props();
+
+  let isChecking = $state(true);
+  let hasAccess = $state(false);
+
+  onMount(() => {
+    checkAccess();
+  });
+
+  function checkAccess() {
+    isChecking = true;
+
+    // Aguardar um pouco para o authStore carregar do localStorage
+    setTimeout(() => {
+      // Verificar autenticação
+      if (requireAuth && !authStore.autenticado) {
+        const currentPath = window.location.pathname;
+        window.location.href = `${redirectTo}?error=auth_required&redirect=${encodeURIComponent(currentPath)}`;
+        return;
+      }
+
+      // Verificar roles
+      if (allowedRoles.length > 0 && authStore.usuario) {
+        const hasRole = allowedRoles.includes(authStore.usuario.role.nome);
+        if (!hasRole) {
+          const currentPath = window.location.pathname;
+          window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
+          return;
+        }
+      }
+
+      // Verificar nível
+      if (authStore.usuario && authStore.usuario.role.nivel > maxLevel) {
+        const currentPath = window.location.pathname;
+        window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
+        return;
+      }
+
+      hasAccess = true;
+      isChecking = false;
+    }, 100);
+  }
+</script>
+
+{#if isChecking}
+  <div class="flex justify-center items-center min-h-screen">
+    <div class="text-center">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+      <p class="mt-4 text-base-content/70">Verificando permissões...</p>
+    </div>
+  </div>
+{:else if hasAccess}
+  {@render children()}
+{/if}
+

apps/web/src/lib/components/Sidebar.svelte

@@ -1,10 +1,17 @@
 <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 { authStore } from "$lib/stores/auth.svelte";
+  import { loginModalStore } from "$lib/stores/loginModal.svelte";
+  import { useConvexClient } from "convex-svelte";
+  import { api } from "@sgse-app/backend/convex/_generated/api";
 
   let { children }: { children: Snippet } = $props();
 
+  const convex = useConvexClient();
+
   const setores = [
     { nome: "Recursos Humanos", link: "/recursos-humanos" },
     { nome: "Financeiro", link: "/financeiro" },
@@ -13,6 +20,7 @@
     { 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",
@@ -20,12 +28,97 @@
     },
     { nome: "Tecnologia da Informação", link: "/ti" },
   ];
+
+  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 = "";
+    }
+  });
+
+  function openLoginModal() {
+    loginModalStore.open();
+    matricula = "";
+    senha = "";
+    erroLogin = "";
+  }
+
+  function closeLoginModal() {
+    loginModalStore.close();
+    matricula = "";
+    senha = "";
+    erroLogin = "";
+  }
+
+  function openAboutModal() {
+    showAboutModal = true;
+  }
+
+  function closeAboutModal() {
+    showAboutModal = false;
+  }
+
+  async function handleLogin(e: Event) {
+    e.preventDefault();
+    erroLogin = "";
+    carregandoLogin = true;
+
+    try {
+      const resultado = await convex.mutation(api.autenticacao.login, {
+        matricula: matricula.trim(),
+        senha: senha,
+      });
+
+      if (resultado.sucesso) {
+        authStore.login(resultado.usuario, resultado.token);
+        closeLoginModal();
+        
+        // Redirecionar baseado no role
+        if (resultado.usuario.role.nome === "ti" || resultado.usuario.role.nivel === 0) {
+          goto("/ti/painel-administrativo");
+        } else if (resultado.usuario.role.nome === "rh") {
+          goto("/recursos-humanos");
+        } else {
+          goto("/");
+        }
+      } else {
+        erroLogin = resultado.erro || "Erro ao fazer login";
+      }
+    } catch (error) {
+      console.error("Erro ao fazer login:", error);
+      erroLogin = "Erro ao conectar com o servidor. Tente novamente.";
+    } finally {
+      carregandoLogin = false;
+    }
+  }
+
+  async function handleLogout() {
+    if (authStore.token) {
+      try {
+        await convex.mutation(api.autenticacao.logout, {
+          token: authStore.token,
+        });
+      } catch (error) {
+        console.error("Erro ao fazer logout:", error);
+      }
+    }
+    authStore.logout();
+    goto("/");
+  }
 </script>
 
 <!-- Header Fixo acima de tudo -->
-<div class="navbar bg-primary/20 shadow-md px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-24">
+<div class="navbar bg-gradient-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="btn btn-square btn-ghost">
+    <label for="my-drawer-3" class="btn btn-square btn-ghost hover:bg-primary/20">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
@@ -41,15 +134,81 @@
       </svg>
     </label>
   </div>
-  <div class="flex-1 flex items-center gap-4">
-    <img src={logo} alt="Logo do Governo de PE" class="h-14 lg:h-16 w-auto hidden lg:block" />
+  <div class="flex-1 flex items-center gap-4 lg:gap-6">
+    <div class="avatar">
+      <div class="w-16 lg:w-20 rounded-lg shadow-md bg-white p-2">
+        <img src={logo} alt="Logo do Governo de PE" class="w-full h-full object-contain" />
+      </div>
+    </div>
     <div class="flex flex-col">
-      <h1 class="text-xl lg:text-3xl font-bold text-primary">SGSE</h1>
-      <p class="text-base lg:text-2xl text-base-content/70 hidden sm:block font-semibold">
-        Sistema de Gerenciamento da Secretaria de Esportes
+      <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">
+    {#if authStore.autenticado}
+      <div class="hidden lg:flex flex-col items-end">
+        <span class="text-sm font-semibold text-primary">{authStore.usuario?.nome}</span>
+        <span class="text-xs text-base-content/60">{authStore.usuario?.role.nome}</span>
+      </div>
+      <div class="dropdown dropdown-end">
+        <button
+          type="button"
+          tabindex="0"
+          class="btn btn-primary btn-circle btn-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
+          aria-label="Menu do usuário"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2.5"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              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>
+        </button>
+        <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">{authStore.usuario?.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-primary btn-circle btn-lg shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
+        onclick={() => openLoginModal()}
+        aria-label="Login"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2.5"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            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>
+      </button>
+    {/if}
+  </div>
 </div>
 
 <div class="drawer lg:drawer-open" style="margin-top: 96px;">
@@ -61,35 +220,41 @@
     </div>
 
     <!-- Footer -->
-    <footer class="footer footer-center bg-primary/20 text-base-content p-4 border-t border-base-300 flex-shrink-0">
-      <div class="grid grid-flow-col gap-4">
-        <a href="/" class="link link-hover text-sm">Sobre</a>
-        <a href="/" class="link link-hover text-sm">Contato</a>
-        <a href="/" class="link link-hover text-sm">Suporte</a>
-        <a href="/" class="link link-hover text-sm">Política de Privacidade</a>
+    <footer class="footer footer-center bg-gradient-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 flex-shrink-0 shadow-inner">
+      <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 flex-col items-center gap-2">
-        <div class="flex items-center gap-2">
-          <img src={logo} alt="Logo" class="h-8 w-auto" />
-          <span class="font-semibold">Governo do Estado de Pernambuco</span>
+      <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>
-        <p class="text-sm text-base-content/70">
-          Secretaria de Esportes © {new Date().getFullYear()} - Todos os direitos reservados
-        </p>
       </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-primary/20 w-72 p-4 flex flex-col gap-2 h-[calc(100vh-96px)] overflow-y-auto">
+    <div class="menu bg-gradient-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="font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors">
+          <a href="/" class="group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 border-primary/30 bg-gradient-to-br from-base-100 to-base-200 hover:from-primary hover:to-primary/80 active:from-primary/90 active:to-primary text-base-content hover:text-white active:text-white transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105">
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              class="h-5 w-5"
+              class="h-5 w-5 group-hover:scale-110 transition-transform"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -110,14 +275,14 @@
               href={s.link}
               class:active={page.url.pathname.startsWith(s.link)}
               aria-current={page.url.pathname.startsWith(s.link) ? "page" : undefined}
-              class="font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors"
+              class="group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 border-primary/30 bg-gradient-to-br from-base-100 to-base-200 hover:from-primary hover:to-primary/80 active:from-primary/90 active:to-primary text-base-content hover:text-white active:text-white transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105"
             >
               <span>{s.nome}</span>
             </a>
           </li>
         {/each}
         <li class="rounded-xl mt-auto">
-          <a href="/" class="font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors">
+          <a href="/solicitar-acesso" class="group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 border-success/30 bg-gradient-to-br from-success/10 to-success/20 hover:from-success hover:to-success/80 active:from-success/90 active:to-success text-base-content hover:text-white active:text-white transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               class="h-5 w-5"
@@ -139,3 +304,197 @@
     </div>
   </div>
 </div>
+
+<!-- Modal de Login -->
+{#if loginModalStore.showModal}
+  <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="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">
+            <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>{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</span>
+            </label>
+            <input
+              id="login-matricula"
+              type="text"
+              placeholder="Digite sua matrícula"
+              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}
+                <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 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+                </svg>
+                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-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>
+    <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 max-w-2xl relative overflow-hidden bg-gradient-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="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>
+
+        <!-- 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">
+            <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>
+            <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">
+            <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 6v6m0 0v6m0-6h6m-6 0H6" />
+            </svg>
+            Em Desenvolvimento
+          </div>
+        </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>
+
+        <!-- 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 w-full max-w-xs mx-auto shadow-lg hover:shadow-xl transition-all duration-300"
+            onclick={closeAboutModal}
+          >
+            <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>
+            OK
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop" onclick={closeAboutModal} role="button" tabindex="0" onkeydown={(e) => e.key === 'Escape' && closeAboutModal()}>
+    </div>
+  </dialog>
+{/if}
+