feat: enhance file upload component and backend schema

- Updated the FileUpload component to improve file handling and state management, including better cancellation logic and input handling.
- Added a new alias in the Svelte configuration for easier backend access.
- Enhanced the backend schema to include a gestorSuperiorId for better team management and query capabilities.
- Refactored queries and mutations in the backend to support the new structure and improve data retrieval for subordinate teams.

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

@@ -32,7 +32,7 @@
 
   const client = useConvexClient();
 
-  let fileInput: HTMLInputElement;
+  let fileInput: HTMLInputElement | null = null;
   let uploading = $state(false);
   let error = $state<string | null>(null);
   let fileName = $state<string>("");
@@ -50,31 +50,52 @@
 
 	// Buscar URL do arquivo quando houver um storageId
 	$effect(() => {
-		if (value && !fileName) {
-			// Tem storageId mas não é um upload recente
-			loadExistingFile(value);
+		if (!value || fileName) {
+			return;
 		}
+
+		let cancelled = false;
+		const storageId = value;
+
+		(async () => {
+			try {
+				const url = await client.storage.getUrl(storageId as any);
+				if (!url || cancelled) {
+					return;
+				}
+
+				fileUrl = url;
+
+				const path = url.split('?')[0] ?? '';
+				const nameFromUrl = path.split('/').pop() ?? 'arquivo';
+				fileName = decodeURIComponent(nameFromUrl);
+
+				const extension = fileName.toLowerCase().split('.').pop();
+				const isPdf =
+					extension === 'pdf' || url.includes('.pdf') || url.includes('application/pdf');
+
+				if (isPdf) {
+					fileType = 'application/pdf';
+					previewUrl = null;
+				} else {
+					fileType = 'image/jpeg';
+					previewUrl = url;
+				}
+			} catch (err) {
+				if (!cancelled) {
+					console.error('Erro ao carregar arquivo existente:', err);
+				}
+			}
+		})();
+
+		return () => {
+			cancelled = true;
+		};
 	});
 
-	async function loadExistingFile(storageId: string) {
-		try {
-			const url = await client.storage.getUrl(storageId as any);
-			if (url) {
   async function handleFileSelect(event: Event) {
     const target = event.target as HTMLInputElement;
     const file = target.files?.[0];
-				// Detectar tipo pelo URL ou assumir PDF
-				if (url.includes('.pdf') || url.includes('application/pdf')) {
-					fileType = 'application/pdf';
-				} else {
-					fileType = 'image/jpeg';
-					previewUrl = url; // Para imagens, a URL serve como preview
-				}
-			}
-		} catch (err) {
-			console.error('Erro ao carregar arquivo existente:', err);
-		}
-	}
 
     error = null;
 
@@ -144,6 +165,17 @@
   function openFileDialog() {
     fileInput?.click();
   }
+
+  function setFileInput(node: HTMLInputElement) {
+    fileInput = node;
+    return {
+      destroy() {
+        if (fileInput === node) {
+          fileInput = null;
+        }
+      },
+    };
+  }
 </script>
 
 <div class="form-control w-full">
@@ -175,7 +207,7 @@
   <input
     id="file-upload-input"
     type="file"
-    bind:this={fileInput}
+    use:setFileInput
     onchange={handleFileSelect}
     accept=".pdf,.jpg,.jpeg,.png"
     class="hidden"
@@ -194,7 +226,7 @@
 					</div>
 				{:else}
 					<div class="bg-success/10 flex h-12 w-12 items-center justify-center rounded">
-						<File class="text-success h-6 w-6" strokeWidth={2} />
+						<FileIcon class="text-success h-6 w-6" strokeWidth={2} />
 					</div>
 				{/if}
 			</div>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { FileText, ClipboardCopy, Plus, Users, FileDoc } from "lucide-svelte";
+  import { FileText, ClipboardCopy, Plus, Users, File } from "lucide-svelte";
   import { resolve } from "$app/paths";
 </script>
 
@@ -30,7 +30,7 @@
     <div class="card-body">
       <div class="flex flex-col items-center justify-center py-12 text-center">
         <div class="mb-6">
-          <FileDoc class="h-24 w-24 text-base-content/20" strokeWidth={1.5} />
+          <File class="h-24 w-24 text-base-content/20" strokeWidth={1.5} />
         </div>
         <h2 class="text-2xl font-bold mb-2">Módulo em Desenvolvimento</h2>
         <p class="text-base-content/70 max-w-md mb-6">
@@ -76,7 +76,7 @@
         <div class="card-body">
           <div class="flex items-center gap-3 mb-2">
             <div class="p-2 bg-primary/10 rounded-lg">
-              <FileDoc class="h-6 w-6 text-primary" strokeWidth={2} />
+              <File class="h-6 w-6 text-primary" strokeWidth={2} />
             </div>
             <h4 class="font-semibold">Documentação</h4>
           </div>

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

@@ -1,18 +1,27 @@
 <script lang="ts">
-	import { useConvexClient, useQuery } from 'convex-svelte';
-	import { api } from '@sgse-app/backend/convex/_generated/api';
+import { useConvexClient, useQuery } from 'convex-svelte';
+import { api } from '@sgse-app/backend/convex/_generated/api';
 	import AprovarFerias from '$lib/components/AprovarFerias.svelte';
 	import WizardSolicitacaoFerias from '$lib/components/ferias/WizardSolicitacaoFerias.svelte';
 	import WizardSolicitacaoAusencia from '$lib/components/ausencias/WizardSolicitacaoAusencia.svelte';
 	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
 	import CalendarioAusencias from '$lib/components/ausencias/CalendarioAusencias.svelte';
 	import { generateAvatarGallery } from '$lib/utils/avatars';
-	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+import type { FunctionReturnType } from 'convex/server';
 	import { X, Calendar } from 'lucide-svelte';
-	import type { FunctionReturnType } from 'convex/server';
 
-	const client = useConvexClient();
-	const currentUser = useQuery(api.auth.getCurrentUser, {});
+const client = useConvexClient();
+const currentUser = useQuery(api.auth.getCurrentUser, {});
+
+type FuncionarioAtual = FunctionReturnType<typeof api.funcionarios.getCurrent>;
+type TimeAtual = FunctionReturnType<typeof api.times.obterTimeFuncionario>;
+type MinhasSolicitacoes = FunctionReturnType<typeof api.ferias.listarMinhasSolicitacoes>;
+type MinhasAusencias = FunctionReturnType<typeof api.ausencias.listarMinhasSolicitacoes>;
+let funcionarioEstavel = $state<FuncionarioAtual | null>(null);
+let meuTimeEstavel = $state<TimeAtual | null>(null);
+let minhasSolicitacoesEstaveis = $state<MinhasSolicitacoes>([]);
+let minhasAusenciasEstaveis = $state<MinhasAusencias>([]);
 
 	let abaAtiva = $state<
 		'meu-perfil' | 'minhas-ferias' | 'minhas-ausencias' | 'aprovar-ferias' | 'aprovar-ausencias'
@@ -44,126 +53,101 @@
 	// FuncionarioId disponível diretamente do usuário atual
 	const funcionarioIdDisponivel = $derived(currentUser?.data?.funcionarioId ?? null);
 
-	// Queries
-	const funcionarioQuery = $derived(
-		currentUser?.data?.funcionarioId ? useQuery(api.funcionarios.getCurrent, {}) : { data: null }
+// Queries
+const funcionarioQuery = $derived(
+	currentUser?.data?.funcionarioId ? useQuery(api.funcionarios.getCurrent, {}) : { data: null }
+);
+
+$effect(() => {
+	if (funcionarioQuery?.data) {
+		funcionarioEstavel = funcionarioQuery.data;
+	} else if (!currentUser?.data?.funcionarioId) {
+		funcionarioEstavel = null;
+	}
+});
+
+const solicitacoesSubordinadosQuery = $derived(
+	currentUser?.data?._id
+		? useQuery(api.ferias.listarSolicitacoesSubordinados, {
+				gestorId: currentUser.data._id as Id<'usuarios'>
+			})
+		: { data: [] }
+);
+
+const ausenciasSubordinadosQuery = $derived(
+	currentUser?.data?._id
+		? useQuery(api.ausencias.listarSolicitacoesSubordinados, {
+				gestorId: currentUser.data._id as Id<'usuarios'>
+			})
+		: { data: [] }
+);
+
+const minhasSolicitacoesQuery = $derived(
+	funcionarioEstavel?._id
+		? useQuery(api.ferias.listarMinhasSolicitacoes, {
+				funcionarioId: funcionarioEstavel._id
+			})
+		: { data: [] }
+);
+
+const minhasAusenciasQuery = $derived(
+	funcionarioEstavel?._id
+		? useQuery(api.ausencias.listarMinhasSolicitacoes, {
+				funcionarioId: funcionarioEstavel._id
+			})
+		: { data: [] }
+);
+
+const meuTimeQuery = $derived(
+	funcionarioEstavel?._id
+		? useQuery(api.times.obterTimeFuncionario, {
+				funcionarioId: funcionarioEstavel._id
+			})
+		: { data: null }
+);
+
+$effect(() => {
+	if (meuTimeQuery?.data) {
+		meuTimeEstavel = meuTimeQuery.data;
+	} else if (!funcionarioEstavel?._id) {
+		meuTimeEstavel = null;
+	}
+});
+
+const funcionario = $derived(funcionarioEstavel);
+const solicitacoesSubordinados = $derived(solicitacoesSubordinadosQuery?.data || []);
+const ausenciasSubordinados = $derived(ausenciasSubordinadosQuery?.data || []);
+const meuTime = $derived(meuTimeEstavel);
+
+$effect(() => {
+	if (Array.isArray(minhasSolicitacoesQuery?.data)) {
+		minhasSolicitacoesEstaveis = minhasSolicitacoesQuery.data;
+	} else if (!funcionarioEstavel?._id) {
+		minhasSolicitacoesEstaveis = [];
+	}
+});
+
+$effect(() => {
+	if (Array.isArray(minhasAusenciasQuery?.data)) {
+		minhasAusenciasEstaveis = minhasAusenciasQuery.data;
+	} else if (!funcionarioEstavel?._id) {
+		minhasAusenciasEstaveis = [];
+	}
+});
+
+const minhasSolicitacoes = $derived(minhasSolicitacoesEstaveis);
+const minhasAusencias = $derived(minhasAusenciasEstaveis);
+
+const timesSubordinadosQuery = $derived(useQuery(api.times.listarSubordinadosDoGestorAtual, {}));
+const timesSubordinados = $derived(timesSubordinadosQuery?.data || []);
+// Times gerenciados usam a query que já infere o gestor logado
+const meusTimesGestor = $derived(timesSubordinados);
+
+	const rolePermiteAprovacao = $derived(
+		currentUser?.data?.role?.nome === 'TI_MASTER' || currentUser?.data?.role?.nome === 'TI_ADMIN'
 	);
 
-	const solicitacoesSubordinadosQuery = $derived(
-		currentUser?.data?._id
-			? useQuery(api.ferias.listarSolicitacoesSubordinados, {
-					gestorId: currentUser.data._id as Id<'usuarios'>
-				})
-			: { data: [] }
-	);
-
-	const ausenciasSubordinadosQuery = $derived(
-		currentUser?.data?._id
-			? useQuery(api.ausencias.listarSolicitacoesSubordinados, {
-					gestorId: currentUser.data._id as Id<'usuarios'>
-				})
-			: { data: [] }
-	);
-
-	const minhasSolicitacoesQuery = $derived(
-		funcionarioQuery.data
-			? useQuery(api.ferias.listarMinhasSolicitacoes, {
-					funcionarioId: funcionarioQuery.data._id
-				})
-			: { data: [] }
-	);
-
-	const minhasAusenciasQuery = $derived(
-		funcionarioQuery.data
-			? useQuery(api.ausencias.listarMinhasSolicitacoes, {
-					funcionarioId: funcionarioQuery.data._id
-				})
-			: { data: [] }
-	);
-
-	const meuTimeQuery = $derived(
-		funcionarioQuery.data
-			? useQuery(api.times.obterTimeFuncionario, {
-					funcionarioId: funcionarioQuery.data._id
-				})
-			: { data: null }
-	);
-
-	// Query para times onde o usuário é gestor - usando $derived para garantir reatividade
-	const meusTimesGestorQuery = $derived(
-		currentUser?.data?._id
-			? useQuery(api.times.listarPorGestor, {
-					gestorId: currentUser.data._id as Id<'usuarios'>
-				})
-			: { data: [] }
-	);
-
-	const funcionario = $derived(funcionarioQuery.data);
-	const solicitacoesSubordinados = $derived(solicitacoesSubordinadosQuery?.data || []);
-	const ausenciasSubordinados = $derived(ausenciasSubordinadosQuery?.data || []);
-	const minhasSolicitacoes = $derived(minhasSolicitacoesQuery?.data || []);
-	const minhasAusencias = $derived(minhasAusenciasQuery?.data || []);
-	const meuTime = $derived(meuTimeQuery?.data);
-	
-	// Extração de meusTimesGestor
-	const meusTimesGestor = $derived(meusTimesGestorQuery?.data || []);
-
-	// Estado estável para controlar se é gestor (evita desaparecimento das abas)
-	let ehGestorEstavel = $state(false);
-	let ultimaVerificacaoGestor = $state<number | null>(null);
-
-	// Calcular se é gestor - com lógica mais robusta (sem atualizar estado aqui)
-	const ehGestorCalculado = $derived.by(() => {
-		// Verificar se tem times como gestor
-		const temTimesComoGestor = (meusTimesGestor || []).length > 0;
-		
-		// Verificar se tem role de TI que pode aprovar (TI_MASTER, TI_ADMIN)
-		const rolePermiteAprovacao = currentUser?.data?.role?.nome === 'TI_MASTER' || 
-		                             currentUser?.data?.role?.nome === 'TI_ADMIN';
-		
-		// Verificar se tem solicitações de subordinados (indica que é gestor)
-		const temSolicitacoesSubordinados = (solicitacoesSubordinados || []).length > 0 || 
-		                                     (ausenciasSubordinados || []).length > 0;
-		
-		// É gestor se: tem times OU tem role de TI OU tem solicitações de subordinados
-		return temTimesComoGestor || rolePermiteAprovacao || temSolicitacoesSubordinados;
-	});
-
-	// Efeito para atualizar o estado estável (evita desaparecimento das abas)
-	$effect(() => {
-		const resultado = ehGestorCalculado;
-		
-		// Log para depuração (apenas quando mudar)
-		if (import.meta.env.DEV && resultado !== ehGestorEstavel) {
-			console.log('🔍 [Perfil] Status de gestor mudou:', {
-				temTimesComoGestor: (meusTimesGestor || []).length > 0,
-				rolePermiteAprovacao: currentUser?.data?.role?.nome === 'TI_MASTER' || currentUser?.data?.role?.nome === 'TI_ADMIN',
-				role: currentUser?.data?.role?.nome,
-				temSolicitacoesSubordinados: (solicitacoesSubordinados || []).length > 0 || (ausenciasSubordinados || []).length > 0,
-				resultado,
-				meusTimesGestor: meusTimesGestor?.length || 0,
-				timestamp: new Date().toISOString()
-			});
-		}
-		
-		// Atualizar estado estável apenas se o resultado for true (para manter as abas visíveis)
-		// ou se já passou tempo suficiente desde a última verificação
-		const agora = Date.now();
-		if (resultado) {
-			ehGestorEstavel = true;
-			ultimaVerificacaoGestor = agora;
-		} else if (ultimaVerificacaoGestor === null || (agora - ultimaVerificacaoGestor) > 5000) {
-			// Só atualiza para false se passou mais de 5 segundos desde a última verificação positiva
-			// Isso evita que as abas desapareçam durante atualizações temporárias das queries
-			ehGestorEstavel = resultado;
-			if (!resultado) {
-				ultimaVerificacaoGestor = agora;
-			}
-		}
-	});
-
-	// Valor final usado para renderizar as abas
-	const ehGestor = $derived(ehGestorEstavel);
+	const ehGestor = $derived((timesSubordinados || []).length > 0 || rolePermiteAprovacao);
 
 	// Filtrar minhas solicitações
 	const solicitacoesFiltradas = $derived(
@@ -195,7 +179,8 @@
 		total: minhasSolicitacoes.length,
 		aguardando: minhasSolicitacoes.filter((s) => s.status === 'aguardando_aprovacao').length,
 		aprovadas: minhasSolicitacoes.filter(
-			(s) => s.status === 'aprovado' || s.status === 'data_ajustada_aprovada' || s.status === 'EmFérias'
+			(s) =>
+				s.status === 'aprovado' || s.status === 'data_ajustada_aprovada' || s.status === 'EmFérias'
 		).length,
 		reprovadas: minhasSolicitacoes.filter((s) => s.status === 'reprovado').length,
 		emFerias: funcionario?.statusFerias === 'em_ferias' ? 1 : 0
@@ -1396,7 +1381,9 @@
 											<tr>
 												<td>{periodo.anoReferencia}</td>
 												<td>
-													{formatarDataString(periodo.dataInicio)} - {formatarDataString(periodo.dataFim)}
+													{formatarDataString(periodo.dataInicio)} - {formatarDataString(
+														periodo.dataFim
+													)}
 												</td>
 												<td class="font-bold">{periodo.diasFerias} dias</td>
 												<td>
@@ -1773,9 +1760,8 @@
 												{#if periodo.time}
 													<div
 														class="badge badge-lg font-semibold"
-														style="background-color: {periodo.time
-															.cor}20; border-color: {periodo.time.cor}; color: {periodo.time
-															.cor}"
+														style="background-color: {periodo.time.cor}20; border-color: {periodo
+															.time.cor}; color: {periodo.time.cor}"
 													>
 														{periodo.time.nome}
 													</div>
@@ -1783,7 +1769,9 @@
 											</td>
 											<td class="font-semibold">{periodo.anoReferencia}</td>
 											<td class="font-semibold">
-												{formatarDataString(periodo.dataInicio)} - {formatarDataString(periodo.dataFim)}
+												{formatarDataString(periodo.dataInicio)} - {formatarDataString(
+													periodo.dataFim
+												)}
 											</td>
 											<td class="text-lg font-bold">{periodo.diasFerias}</td>
 											<td>
@@ -2286,9 +2274,18 @@
 				/>
 			</div>
 		</div>
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="modal-backdrop" onclick={() => (mostrarWizard = false)}></div>
+		<div
+			class="modal-backdrop"
+			role="button"
+			tabindex="0"
+			onclick={() => (mostrarWizard = false)}
+			onkeydown={(event) => {
+				if (event.key === 'Enter' || event.key === ' ') {
+					event.preventDefault();
+					mostrarWizard = false;
+				}
+			}}
+		></div>
 	</dialog>
 {/if}
 

apps/web/svelte.config.js

@@ -12,6 +12,9 @@ const config = {
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
 		adapter: adapter(),
+		alias: {
+			'@sgse-app/backend': '../../packages/backend',
+		},
 	},
 };