From b503045b41d35d17885e6864f606ba5eb87a916c Mon Sep 17 00:00:00 2001
From: killer-cf <costa.kilder@live.com>
Date: Fri, 14 Nov 2025 16:15:21 -0300
Subject: [PATCH] refactor: integrate ProtectedRoute component across dashboard
 pages

- Added the ProtectedRoute component to various dashboard pages to enforce authentication and role-based access control.
- Updated allowedRoles and maxLevel parameters for specific routes to align with the new permission management structure.
- Enhanced user experience by ensuring consistent access checks across the application.
---
 .../src/lib/components/ProtectedRoute.svelte  | 129 +++++++++---------
 apps/web/src/routes/(dashboard)/+page.svelte  |   3 +
 .../routes/(dashboard)/compras/+page.svelte   |   3 +
 .../(dashboard)/comunicacao/+page.svelte      |   3 +
 .../(dashboard)/controladoria/+page.svelte    |   3 +
 .../(dashboard)/financeiro/+page.svelte       |   3 +
 .../routes/(dashboard)/juridico/+page.svelte  |   3 +
 .../(dashboard)/licitacoes/+page.svelte       |   3 +
 .../routes/(dashboard)/perfil/+page.svelte    |   3 +
 .../programas-esportivos/+page.svelte         |   3 +
 .../routes/(dashboard)/ti/perfis/+page.svelte |   2 +-
 .../ti/personalizar-permissoes/+page.svelte   |   2 +-
 .../ti/solicitacoes-acesso/+page.svelte       |   2 +-
 .../routes/(dashboard)/ti/times/+page.svelte  |   2 +-
 .../(dashboard)/ti/usuarios/+page.svelte      |   2 +-
 15 files changed, 95 insertions(+), 71 deletions(-)

diff --git a/apps/web/src/lib/components/ProtectedRoute.svelte b/apps/web/src/lib/components/ProtectedRoute.svelte
index e12eace..6bcf57a 100644
--- a/apps/web/src/lib/components/ProtectedRoute.svelte
+++ b/apps/web/src/lib/components/ProtectedRoute.svelte
@@ -1,80 +1,77 @@
 <script lang="ts">
-  import { useQuery } from "convex-svelte";
-  import { api } from "@sgse-app/backend/convex/_generated/api";
-  import { onMount } from "svelte";
-  import { page } from "$app/stores";
-  import type { Snippet } from "svelte";
+	import { useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import { onMount } from 'svelte';
+	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 {
+		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);
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
+	let isChecking = $state(true);
+	let hasAccess = $state(false);
+	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-  onMount(() => {
-    checkAccess();
-  });
+	onMount(() => {
+		checkAccess();
+	});
 
-  function checkAccess() {
-    isChecking = true;
+	function checkAccess() {
+		isChecking = true;
 
-    // Aguardar um pouco para o authStore carregar do localStorage
-    setTimeout(() => {
-      // Verificar autenticação
-      if (requireAuth && !currentUser?.data) {
-        const currentPath = window.location.pathname;
-        window.location.href = `${redirectTo}?error=auth_required&redirect=${encodeURIComponent(currentPath)}`;
-        return;
-      }
+		// Aguardar um pouco para o authStore carregar do localStorage
+		setTimeout(() => {
+			// Verificar autenticação
+			if (requireAuth && !currentUser?.data) {
+				const currentPath = window.location.pathname;
+				window.location.href = `${redirectTo}?error=auth_required&redirect=${encodeURIComponent(currentPath)}`;
+				return;
+			}
 
-      // Verificar roles
-      if (allowedRoles.length > 0 && currentUser?.data) {
-        const hasRole = allowedRoles.includes(
-          currentUser.data.role?.nome ?? "",
-        );
-        if (!hasRole) {
-          const currentPath = window.location.pathname;
-          window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
-          return;
-        }
-      }
+			// Verificar roles
+			if (allowedRoles.length > 0 && currentUser?.data) {
+				const hasRole = allowedRoles.includes(currentUser.data.role?.nome ?? '');
+				if (!hasRole) {
+					const currentPath = window.location.pathname;
+					window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
+					return;
+				}
+			}
 
-      // Verificar nível
-      if (
-        currentUser?.data &&
-        currentUser.data.role?.nivel &&
-        currentUser.data.role.nivel > maxLevel
-      ) {
-        const currentPath = window.location.pathname;
-        window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
-        return;
-      }
+			// Verificar nível
+			if (
+				currentUser?.data &&
+				currentUser.data.role?.nivel &&
+				currentUser.data.role.nivel > maxLevel
+			) {
+				const currentPath = window.location.pathname;
+				window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
+				return;
+			}
 
-      hasAccess = true;
-      isChecking = false;
-    }, 100);
-  }
+			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>
+	<div class="flex min-h-screen items-center justify-center">
+		<div class="text-center">
+			<span class="loading loading-spinner loading-lg text-primary"></span>
+			<p class="text-base-content/70 mt-4">Verificando permissões...</p>
+		</div>
+	</div>
 {:else if hasAccess}
-  {@render children()}
+	{@render children()}
 {/if}
diff --git a/apps/web/src/routes/(dashboard)/+page.svelte b/apps/web/src/routes/(dashboard)/+page.svelte
index 0c7070b..fa79b22 100644
--- a/apps/web/src/routes/(dashboard)/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/+page.svelte
@@ -7,6 +7,7 @@
   import { resolve } from "$app/paths";
   import { UserPlus, Mail } from "lucide-svelte";
   import { useAuth } from "@mmailaender/convex-better-auth-svelte/svelte";
+  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
 
   let { data } = $props();
 
@@ -128,6 +129,7 @@
   }
 </script>
 
+<ProtectedRoute>
 <main class="container mx-auto px-4 py-4">
   <!-- Alerta de Acesso Negado / Autenticação -->
   {#if showAlert}
@@ -823,6 +825,7 @@
     </div>
   {/if}
 </main>
+</ProtectedRoute>
 
 <style>
   @keyframes fadeIn {
diff --git a/apps/web/src/routes/(dashboard)/compras/+page.svelte b/apps/web/src/routes/(dashboard)/compras/+page.svelte
index e6497f9..53bee00 100644
--- a/apps/web/src/routes/(dashboard)/compras/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/compras/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { ShoppingCart, ShoppingBag, Plus } from "lucide-svelte";
   import { resolve } from "$app/paths";
+  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
 </script>
 
+<ProtectedRoute>
 <main class="container mx-auto px-4 py-4">
   <div class="text-sm breadcrumbs mb-4">
     <ul>
@@ -41,4 +43,5 @@
     </div>
   </div>
 </main>
+</ProtectedRoute>
 
diff --git a/apps/web/src/routes/(dashboard)/comunicacao/+page.svelte b/apps/web/src/routes/(dashboard)/comunicacao/+page.svelte
index 2166880..b7ac2fd 100644
--- a/apps/web/src/routes/(dashboard)/comunicacao/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/comunicacao/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { Megaphone, Edit, Plus } from "lucide-svelte";
   import { resolve } from "$app/paths";
+  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
 </script>
 
+<ProtectedRoute>
 <main class="container mx-auto px-4 py-4">
   <div class="text-sm breadcrumbs mb-4">
     <ul>
@@ -41,4 +43,5 @@
     </div>
   </div>
 </main>
+</ProtectedRoute>
 
diff --git a/apps/web/src/routes/(dashboard)/controladoria/+page.svelte b/apps/web/src/routes/(dashboard)/controladoria/+page.svelte
index 74917ac..66e9454 100644
--- a/apps/web/src/routes/(dashboard)/controladoria/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/controladoria/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { BarChart3, ClipboardCheck, Plus, CheckCircle2, Clock, TrendingUp } from "lucide-svelte";
   import { resolve } from "$app/paths";
+  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
 </script>
 
+<ProtectedRoute>
 <main class="container mx-auto px-4 py-4">
   <!-- Breadcrumb -->
   <div class="text-sm breadcrumbs mb-4">
@@ -86,4 +88,5 @@
     </div>
   </div>
 </main>
+</ProtectedRoute>
 
diff --git a/apps/web/src/routes/(dashboard)/financeiro/+page.svelte b/apps/web/src/routes/(dashboard)/financeiro/+page.svelte
index fbe4fd7..94aa47d 100644
--- a/apps/web/src/routes/(dashboard)/financeiro/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/financeiro/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { DollarSign, Building2, Plus, Calculator, TrendingUp, FileText } from "lucide-svelte";
   import { resolve } from "$app/paths";
+  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
 </script>
 
+<ProtectedRoute>
 <main class="container mx-auto px-4 py-4">
   <!-- Breadcrumb -->
   <div class="text-sm breadcrumbs mb-4">
@@ -86,4 +88,5 @@
     </div>
   </div>
 </main>
+</ProtectedRoute>
 
diff --git a/apps/web/src/routes/(dashboard)/juridico/+page.svelte b/apps/web/src/routes/(dashboard)/juridico/+page.svelte
index 29d279f..bc9bb5d 100644
--- a/apps/web/src/routes/(dashboard)/juridico/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/juridico/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { Scale, BookOpen, Plus } from "lucide-svelte";
   import { resolve } from "$app/paths";
+  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
 </script>
 
+<ProtectedRoute>
 <main class="container mx-auto px-4 py-4">
   <div class="text-sm breadcrumbs mb-4">
     <ul>
@@ -41,4 +43,5 @@
     </div>
   </div>
 </main>
+</ProtectedRoute>
 
diff --git a/apps/web/src/routes/(dashboard)/licitacoes/+page.svelte b/apps/web/src/routes/(dashboard)/licitacoes/+page.svelte
index 65b2844..6b130f5 100644
--- a/apps/web/src/routes/(dashboard)/licitacoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/licitacoes/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { FileText, ClipboardCopy, Plus, Users, FileDoc } from "lucide-svelte";
   import { resolve } from "$app/paths";
+  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
 </script>
 
+<ProtectedRoute>
 <main class="container mx-auto px-4 py-4">
   <!-- Breadcrumb -->
   <div class="text-sm breadcrumbs mb-4">
@@ -86,4 +88,5 @@
     </div>
   </div>
 </main>
+</ProtectedRoute>
 
diff --git a/apps/web/src/routes/(dashboard)/perfil/+page.svelte b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
index f11477c..e1f799c 100644
--- a/apps/web/src/routes/(dashboard)/perfil/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
@@ -7,6 +7,7 @@
 	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
 	import CalendarioAusencias from '$lib/components/ausencias/CalendarioAusencias.svelte';
 	import { generateAvatarGallery } from '$lib/utils/avatars';
+	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { X, Calendar } from 'lucide-svelte';
 	import type { FunctionReturnType } from 'convex/server';
@@ -365,6 +366,7 @@
 	}
 </script>
 
+<ProtectedRoute>
 <main class="min-h-screen pb-12">
 	<!-- BANNER HERO PREMIUM -->
 	<div class="relative mb-8 overflow-hidden">
@@ -2264,6 +2266,7 @@
 		</dialog>
 	{/if}
 </main>
+</ProtectedRoute>
 
 <!-- Modal Wizard Solicitação de Férias -->
 {#if mostrarWizard && funcionarioIdDisponivel}
diff --git a/apps/web/src/routes/(dashboard)/programas-esportivos/+page.svelte b/apps/web/src/routes/(dashboard)/programas-esportivos/+page.svelte
index 60340ef..eed8a11 100644
--- a/apps/web/src/routes/(dashboard)/programas-esportivos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/programas-esportivos/+page.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { Trophy, Award, Plus } from "lucide-svelte";
   import { resolve } from "$app/paths";
+  import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
 </script>
 
+<ProtectedRoute>
 <main class="container mx-auto px-4 py-4">
   <div class="text-sm breadcrumbs mb-4">
     <ul>
@@ -41,4 +43,5 @@
     </div>
   </div>
 </main>
+</ProtectedRoute>
 
diff --git a/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte b/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
index 8958def..544b7a4 100644
--- a/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
@@ -138,7 +138,7 @@
 	);
 </script>
 
-<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
 	<div class="container mx-auto max-w-7xl px-4 py-6">
 		<!-- Header -->
 		<div class="mb-8 flex items-center justify-between">
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 51ca3c6..2599cda 100644
--- a/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
@@ -4,7 +4,7 @@
 	import { resolve } from '$app/paths';
 </script>
 
-<ProtectedRoute allowedRoles={['admin', 'ti']} maxLevel={1}>
+<ProtectedRoute allowedRoles={['ti_master', 'admin']} maxLevel={1}>
 	<!-- Breadcrumb -->
 	<div class="breadcrumbs mb-4 text-sm">
 		<ul>
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..7cd4ac9 100644
--- a/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
@@ -257,7 +257,7 @@
 	}
 </script>
 
-<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
 	<div class="container mx-auto max-w-7xl px-4 py-6">
 		<!-- Mensagem de Feedback -->
 		{#if mensagem}
diff --git a/apps/web/src/routes/(dashboard)/ti/times/+page.svelte b/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
index 668f23b..bd48da8 100644
--- a/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/times/+page.svelte
@@ -278,7 +278,7 @@
 	}
 </script>
 
-<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={2}>
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
 	<main class="container mx-auto max-w-7xl px-4 py-6">
 		<!-- Breadcrumb -->
 		<div class="breadcrumbs mb-4 text-sm">
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
index f2dc39f..2b478fe 100644
--- a/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
@@ -535,7 +535,7 @@
 	}
 </script>
 
-<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
+<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
 	<div class="container mx-auto max-w-7xl px-4 py-6">
 		<!-- Header -->
 		<div class="mb-6 flex items-center justify-between">