diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
index 4c467d2..133e4dc 100644
--- a/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
@@ -1,184 +1,31 @@
 <script lang="ts">
 	import { api } from '@sgse-app/backend/convex/_generated/api';
-	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { useConvexClient, useQuery } from 'convex-svelte';
-	import { format } from 'date-fns';
-	import { ptBR } from 'date-fns/locale';
-	import { resolve } from '$app/paths';
 	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
-	import UserStatusBadge from '$lib/components/ti/UserStatusBadge.svelte';
-
-	type AvisoUsuario = {
-		tipo: 'erro' | 'aviso' | 'info';
-		mensagem: string;
-	};
-
-	type RoleUsuario = {
-		_id: Id<'roles'>;
-		nome: string;
-		admin?: boolean;
-		descricao: string;
-		erro?: boolean;
-	};
-
-	type Usuario = {
-		_id: Id<'usuarios'>;
-		matricula: string;
-		nome: string;
-		email: string;
-		ativo: boolean;
-		bloqueado?: boolean;
-		motivoBloqueio?: string;
-		primeiroAcesso: boolean;
-		ultimoAcesso?: number;
-		criadoEm: number;
-		role: RoleUsuario;
-		funcionario?: {
-			_id: Id<'funcionarios'>;
-			nome: string;
-			matricula?: string;
-			descricaoCargo?: string;
-			simboloTipo: 'cargo_comissionado' | 'funcao_gratificada';
-		};
-		avisos?: AvisoUsuario[];
-	};
-
-	type Funcionario = {
-		_id: Id<'funcionarios'>;
-		nome: string;
-		matricula?: string;
-		cpf?: string;
-		descricaoCargo?: string;
-	};
-
-	type Mensagem = {
-		tipo: 'success' | 'error' | 'info';
-		texto: string;
-	};
+	import Header from './components/Header.svelte';
+	import UserFilters from './components/UserFilters.svelte';
+	import UserList from './components/UserList.svelte';
+	import EditRoleModal from './components/EditRoleModal.svelte';
+	import AssociateEmployeeModal from './components/AssociateEmployeeModal.svelte';
+	import BlockUserModal from './components/BlockUserModal.svelte';
+	import type { Usuario, Mensagem } from './components/types';
+	import { SvelteDate, SvelteSet } from 'svelte/reactivity';
 
 	const client = useConvexClient();
-	const currentUser = useQuery(api.auth.getCurrentUser, {});
-
-	// Usar useQuery reativo - seguindo padrão usado em ti/times/+page.svelte
 	const usuariosQuery = useQuery(api.usuarios.listar, {});
+	// TODO: Replace with useCurrentUser once available globally or import specific query
+	const currentUserQuery = useQuery(api.auth.getCurrentUser, {});
 
-	// Extrair dados e determinar estado de carregamento
-	let usuarios = $derived.by(() => {
-		// Se usuariosQuery é undefined ou null, está carregando
-		if (usuariosQuery === undefined || usuariosQuery === null) {
-			return [];
-		}
+	// State for Modals
+	let selectedUser = $state<Usuario | null>(null);
+	let isEditRoleOpen = $state(false);
+	let isAssociateOpen = $state(false);
+	let isBlockOpen = $state(false);
 
-		// Se usuariosQuery é um objeto vazio {}, está carregando
-		if (typeof usuariosQuery === 'object' && Object.keys(usuariosQuery).length === 0) {
-			return [];
-		}
-
-		// Se tem propriedade data, usar os dados
-		if ('data' in usuariosQuery && usuariosQuery.data !== undefined) {
-			return Array.isArray(usuariosQuery.data) ? usuariosQuery.data : [];
-		}
-
-		// Se usuariosQuery é diretamente um array (caso não tenha .data)
-		if (Array.isArray(usuariosQuery)) {
-			return usuariosQuery;
-		}
-
-		// Caso padrão: ainda carregando ou sem dados
-		return [];
-	});
-
-	let carregandoUsuarios = $derived.by(() => {
-		// Se é undefined/null, está carregando
-		if (usuariosQuery === undefined || usuariosQuery === null) {
-			return true;
-		}
-
-		// Se é um objeto vazio {}, está carregando
-		if (typeof usuariosQuery === 'object' && Object.keys(usuariosQuery).length === 0) {
-			return true;
-		}
-
-		// Se não tem propriedade data, está carregando
-		if (!('data' in usuariosQuery)) {
-			return true;
-		}
-
-		// Se data é undefined, está carregando
-		if (usuariosQuery.data === undefined) {
-			return true;
-		}
-
-		// Caso contrário, dados estão prontos
-		return false;
-	});
-
-	let erroUsuarios = $state<string | null>(null);
-
-	// Monitorar erros e estado da query
-	$effect(() => {
-		try {
-			// Detectar se há erro na query
-			if (usuariosQuery && typeof usuariosQuery === 'object') {
-				// Verificar se há propriedade de erro
-				if ('error' in usuariosQuery) {
-					const error = (usuariosQuery as { error?: unknown }).error;
-					if (error !== undefined && error !== null) {
-						erroUsuarios = error instanceof Error ? error.message : String(error);
-						console.error('❌ [ERROR] Erro na query de usuários:', error);
-					} else {
-						// Se error existe mas é undefined/null, limpar erro
-						erroUsuarios = null;
-					}
-				} else if ('data' in usuariosQuery) {
-					const queryData = usuariosQuery as { data?: Usuario[] };
-					if (queryData.data !== undefined) {
-						// Se tem dados, limpar erro
-						erroUsuarios = null;
-					}
-				}
-			}
-
-			// Debug para identificar problemas (apenas em desenvolvimento)
-			if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-				console.log('🔍 [DEBUG] usuariosQuery:', usuariosQuery);
-				console.log('🔍 [DEBUG] typeof usuariosQuery:', typeof usuariosQuery);
-				if (usuariosQuery && typeof usuariosQuery === 'object') {
-					console.log('🔍 [DEBUG] Object.keys(usuariosQuery):', Object.keys(usuariosQuery));
-					console.log(
-						'🔍 [DEBUG] usuariosQuery?.data:',
-						(usuariosQuery as { data?: unknown }).data
-					);
-					console.log("🔍 [DEBUG] 'data' in usuariosQuery:", 'data' in usuariosQuery);
-					console.log("🔍 [DEBUG] 'error' in usuariosQuery:", 'error' in usuariosQuery);
-				}
-				console.log('🔍 [DEBUG] usuarios (extraídos):', usuarios);
-				console.log('🔍 [DEBUG] quantidade:', usuarios.length);
-				console.log('🔍 [DEBUG] carregandoUsuarios:', carregandoUsuarios);
-				console.log('🔍 [DEBUG] erroUsuarios:', erroUsuarios);
-			}
-		} catch (error) {
-			// Tratamento de erro no próprio effect
-			console.error('❌ [ERROR] Erro ao processar estado da query:', error);
-			if (error instanceof Error) {
-				erroUsuarios = `Erro inesperado: ${error.message}`;
-			}
-		}
-	});
-
-	let funcionarios = $state<Funcionario[]>([]);
-	let carregandoFuncionarios = $state(false);
-
-	let usuarioSelecionado = $state<Usuario | null>(null);
-	let modalAssociarAberto = $state(false);
-	let funcionarioSelecionadoId = $state<Id<'funcionarios'> | ''>('');
-	let buscaFuncionario = $state('');
-
-	let modalExcluirAberto = $state(false);
-	let processando = $state(false);
+	// State for Messages (Toast)
 	let mensagem = $state<Mensagem | null>(null);
 
-	// Filtros
+	// State for Filters
 	let filtroNome = $state('');
 	let filtroMatricula = $state('');
 	let filtroSetor = $state('');
@@ -188,83 +35,53 @@
 	let filtroUltimoAcessoInicio = $state('');
 	let filtroUltimoAcessoFim = $state('');
 
-	// Função para recarregar usuários (mantida para compatibilidade com mutações)
-	async function carregarUsuarios() {
-		// Como estamos usando useQuery reativo, os dados serão atualizados automaticamente
-		// Esta função pode ser chamada após mutações, mas não precisa fazer nada
-		// O useQuery já atualizará automaticamente
-	}
+	// Derived Data
+	let usuarios = $derived.by(() => {
+		if (usuariosQuery === undefined || usuariosQuery === null) return [];
+		if (typeof usuariosQuery === 'object' && Object.keys(usuariosQuery).length === 0) return [];
 
-	async function carregarFuncionarios() {
-		if (carregandoFuncionarios) return;
-		carregandoFuncionarios = true;
+		const data = 'data' in usuariosQuery ? usuariosQuery.data : usuariosQuery;
+		if (data === undefined) return [];
 
-		try {
-			const resposta = await client.query(api.funcionarios.getAll, {});
-			// Suportar ambos formatos (array direto ou objeto com .data), dependendo do hook/cliente
-			const lista = Array.isArray(resposta)
-				? resposta
-				: resposta &&
-					  typeof resposta === 'object' &&
-					  Array.isArray((resposta as { data?: unknown }).data)
-					? (resposta as { data: unknown[] }).data
-					: [];
-
-			funcionarios = lista as Funcionario[];
-		} catch (error: unknown) {
-			console.error('Erro ao carregar funcionários:', error);
-			funcionarios = [];
-		} finally {
-			carregandoFuncionarios = false;
-		}
-	}
-
-	function mostrarMensagem(tipo: Mensagem['tipo'], texto: string) {
-		mensagem = { tipo, texto };
-		setTimeout(() => {
-			mensagem = null;
-		}, 4000);
-	}
-
-	let funcionariosFiltrados = $derived.by(() => {
-		if (!buscaFuncionario) {
-			return [...funcionarios].sort((a, b) => a.nome.localeCompare(b.nome));
-		}
-
-		const buscaNormalizada = buscaFuncionario.toLowerCase();
-		return funcionarios
-			.filter((f) => {
-				return (
-					f.nome.toLowerCase().includes(buscaNormalizada) ||
-					f.cpf?.toLowerCase().includes(buscaNormalizada) ||
-					f.matricula?.toLowerCase().includes(buscaNormalizada)
-				);
-			})
-			.sort((a, b) => a.nome.localeCompare(b.nome));
+		return Array.isArray(data) ? (data as Usuario[]) : [];
 	});
 
-	// Verificar se há usuários com problemas
-	let usuariosComProblemas = $derived.by(() => {
-		return usuarios.filter((u) => u.role?.erro === true || (u.avisos && u.avisos.length > 0));
+	let loading = $derived(
+		usuariosQuery === undefined ||
+			(!('data' in (usuariosQuery as object)) && !Array.isArray(usuariosQuery))
+	);
+
+	let usuariosComProblemas = $derived(
+		usuarios.filter((u) => u.role?.erro === true || (u.avisos && u.avisos.length > 0))
+	);
+
+	let setoresDisponiveis = $derived.by(() => {
+		const setoresSet = new SvelteSet<string>();
+		usuarios.forEach((u) => {
+			if (u.role?.setor) {
+				setoresSet.add(u.role.setor);
+			}
+		});
+		return Array.from(setoresSet).sort();
 	});
 
-	// Lógica de filtros reativos
 	let usuariosFiltrados = $derived.by(() => {
 		let resultado = usuarios;
 
-		// Filtro por nome
 		if (filtroNome.trim()) {
-			const buscaNome = filtroNome.toLowerCase();
-			resultado = resultado.filter((u) => u.nome.toLowerCase().includes(buscaNome));
+			const busca = filtroNome.toLowerCase();
+			resultado = resultado.filter((u) => u.nome.toLowerCase().includes(busca));
 		}
 
-		// Filtro por matrícula
 		if (filtroMatricula.trim()) {
-			const buscaMatricula = filtroMatricula.toLowerCase();
-			resultado = resultado.filter((u) => u.matricula.toLowerCase().includes(buscaMatricula));
+			const busca = filtroMatricula.toLowerCase();
+			resultado = resultado.filter((u) => u.matricula.toLowerCase().includes(busca));
+		}
+
+		if (filtroSetor) {
+			resultado = resultado.filter((u) => u.role?.setor === filtroSetor);
 		}
 
-		// Filtro por status
 		if (filtroStatus !== 'todos') {
 			if (filtroStatus === 'ativo') {
 				resultado = resultado.filter((u) => u.ativo && !u.bloqueado);
@@ -275,308 +92,111 @@
 			}
 		}
 
-		// Filtro por data de criação
 		if (filtroDataCriacaoInicio) {
-			const dataInicio = new Date(filtroDataCriacaoInicio);
+			const dataInicio = new SvelteDate(filtroDataCriacaoInicio);
 			dataInicio.setHours(0, 0, 0, 0);
 			resultado = resultado.filter((u) => u.criadoEm >= dataInicio.getTime());
 		}
 		if (filtroDataCriacaoFim) {
-			const dataFim = new Date(filtroDataCriacaoFim);
+			const dataFim = new SvelteDate(filtroDataCriacaoFim);
 			dataFim.setHours(23, 59, 59, 999);
 			resultado = resultado.filter((u) => u.criadoEm <= dataFim.getTime());
 		}
 
-		// Filtro por último acesso
 		if (filtroUltimoAcessoInicio) {
-			const dataInicio = new Date(filtroUltimoAcessoInicio);
+			const dataInicio = new SvelteDate(filtroUltimoAcessoInicio);
 			dataInicio.setHours(0, 0, 0, 0);
-			resultado = resultado.filter((u) => {
-				if (!u.ultimoAcesso) return false;
-				return u.ultimoAcesso >= dataInicio.getTime();
-			});
+			resultado = resultado.filter((u) => u.ultimoAcesso && u.ultimoAcesso >= dataInicio.getTime());
 		}
 		if (filtroUltimoAcessoFim) {
-			const dataFim = new Date(filtroUltimoAcessoFim);
+			const dataFim = new SvelteDate(filtroUltimoAcessoFim);
 			dataFim.setHours(23, 59, 59, 999);
-			resultado = resultado.filter((u) => {
-				if (!u.ultimoAcesso) return false;
-				return u.ultimoAcesso <= dataFim.getTime();
-			});
+			resultado = resultado.filter((u) => u.ultimoAcesso && u.ultimoAcesso <= dataFim.getTime());
 		}
 
 		return resultado;
 	});
 
-	function formatarData(timestamp: number | undefined): string {
-		if (!timestamp) return 'Nunca';
-		try {
-			return format(new Date(timestamp), 'dd/MM/yyyy HH:mm', { locale: ptBR });
-		} catch {
-			return 'Data inválida';
+	// Actions
+	function mostrarMensagem(tipo: Mensagem['tipo'], texto: string) {
+		mensagem = { tipo, texto };
+		setTimeout(() => {
+			mensagem = null;
+		}, 4000);
+	}
+
+	function handleEditRole(u: Usuario) {
+		selectedUser = u;
+		isEditRoleOpen = true;
+	}
+
+	function handleAssociateEmployee(u: Usuario) {
+		selectedUser = u;
+		isAssociateOpen = true;
+	}
+
+	function handleBlockToggle(u: Usuario) {
+		if (u.bloqueado) {
+			handleUnblock(u);
+		} else {
+			selectedUser = u;
+			isBlockOpen = true;
 		}
 	}
 
-	function limparFiltros() {
-		filtroNome = '';
-		filtroMatricula = '';
-		filtroStatus = 'todos';
-		filtroDataCriacaoInicio = '';
-		filtroDataCriacaoFim = '';
-		filtroUltimoAcessoInicio = '';
-		filtroUltimoAcessoFim = '';
-	}
+	async function handleUnblock(u: Usuario) {
+		if (!confirm(`Deseja realmente desbloquear o usuário ${u.nome}?`)) return;
 
-	function obterSetoresDisponiveis(): string[] {
-		const setoresSet = new Set<string>();
-		usuarios.forEach((u) => {
-			if (u.role.setor) {
-				setoresSet.add(u.role.setor);
-			}
-		});
-		return Array.from(setoresSet).sort();
-	}
-
-	async function ativarDesativarUsuario(usuario: Usuario) {
-		const confirmar = window.confirm(
-			`Deseja realmente ${usuario.ativo ? 'desativar' : 'ativar'} o usuário ${usuario.nome}?`
-		);
-		if (!confirmar) return;
-
-		processando = true;
-		try {
-			await client.mutation(api.usuarios.alterarStatus, {
-				usuarioId: usuario._id,
-				ativo: !usuario.ativo
-			});
-
-			mostrarMensagem(
-				'success',
-				`Usuário ${usuario.ativo ? 'desativado' : 'ativado'} com sucesso!`
-			);
-			await carregarUsuarios();
-		} catch (error: unknown) {
-			const message = error instanceof Error ? error.message : 'Erro ao alterar status do usuário.';
-			mostrarMensagem('error', message);
-		} finally {
-			processando = false;
-		}
-	}
-
-	function abrirModalAssociar(usuario: Usuario) {
-		usuarioSelecionado = usuario;
-		funcionarioSelecionadoId = usuario.funcionario?._id ?? '';
-		buscaFuncionario = '';
-		modalAssociarAberto = true;
-
-		if (funcionarios.length === 0 && !carregandoFuncionarios) {
-			void carregarFuncionarios();
-		}
-	}
-
-	function fecharModalAssociar() {
-		modalAssociarAberto = false;
-		usuarioSelecionado = null;
-		funcionarioSelecionadoId = '';
-		buscaFuncionario = '';
-	}
-
-	async function associarFuncionario() {
-		if (!usuarioSelecionado || !funcionarioSelecionadoId || funcionarioSelecionadoId === '') {
-			return;
-		}
-
-		processando = true;
-		try {
-			await client.mutation(api.usuarios.associarFuncionario, {
-				usuarioId: usuarioSelecionado._id,
-				funcionarioId: funcionarioSelecionadoId
-			});
-
-			mostrarMensagem('success', 'Funcionário associado com sucesso!');
-			fecharModalAssociar();
-			await carregarUsuarios();
-		} catch (error: unknown) {
-			const message =
-				error instanceof Error ? error.message : 'Não foi possível associar o funcionário.';
-			mostrarMensagem('error', message);
-		} finally {
-			processando = false;
-		}
-	}
-
-	async function desassociarFuncionario() {
-		if (!usuarioSelecionado) {
-			return;
-		}
-
-		const confirmar = window.confirm('Deseja realmente desassociar o funcionário deste usuário?');
-		if (!confirmar) return;
-
-		processando = true;
-		try {
-			await client.mutation(api.usuarios.desassociarFuncionario, {
-				usuarioId: usuarioSelecionado._id
-			});
-
-			mostrarMensagem('success', 'Funcionário desassociado com sucesso!');
-			fecharModalAssociar();
-			await carregarUsuarios();
-		} catch (error: unknown) {
-			const message =
-				error instanceof Error ? error.message : 'Não foi possível desassociar o funcionário.';
-			mostrarMensagem('error', message);
-		} finally {
-			processando = false;
-		}
-	}
-
-	async function bloquearUsuario(usuario: Usuario) {
-		const motivo = window.prompt('Digite o motivo do bloqueio:', usuario.motivoBloqueio || '');
-
-		if (!motivo || motivo.trim() === '') {
-			return;
-		}
-
-		if (!currentUser?.data) {
+		const currentUser = currentUserQuery.data;
+		if (!currentUser) {
 			mostrarMensagem('error', 'Usuário não autenticado');
 			return;
 		}
 
-		processando = true;
 		try {
-			const resultado = await client.mutation(api.usuarios.bloquearUsuario, {
-				usuarioId: usuario._id,
-				motivo: motivo.trim(),
-				bloqueadoPorId: currentUser.data._id as Id<'usuarios'>
+			await client.mutation(api.usuarios.desbloquearUsuario, {
+				usuarioId: u._id,
+				desbloqueadoPorId: currentUser._id
 			});
-
-			if (resultado.sucesso) {
-				mostrarMensagem('success', 'Usuário bloqueado com sucesso!');
-				await carregarUsuarios();
-			} else {
-				mostrarMensagem('error', resultado.erro);
-			}
-		} catch (error: unknown) {
-			const message = error instanceof Error ? error.message : 'Erro ao bloquear usuário.';
-			mostrarMensagem('error', message);
-		} finally {
-			processando = false;
+			mostrarMensagem('success', 'Usuário desbloqueado com sucesso!');
+		} catch (err) {
+			mostrarMensagem('error', err instanceof Error ? err.message : 'Erro ao desbloquear usuário');
 		}
 	}
 
-	async function desbloquearUsuario(usuario: Usuario) {
-		if (!currentUser?.data) {
-			mostrarMensagem('error', 'Usuário não autenticado');
-			return;
-		}
+	async function handleDelete(u: Usuario) {
+		if (!confirm(`TEM CERTEZA? Isso excluirá permanentemente o usuário ${u.nome}.`)) return;
 
-		const confirmar = window.confirm(`Deseja realmente desbloquear o usuário ${usuario.nome}?`);
-		if (!confirmar) return;
-
-		processando = true;
-		try {
-			const resultado = await client.mutation(api.usuarios.desbloquearUsuario, {
-				usuarioId: usuario._id,
-				desbloqueadoPorId: currentUser.data._id as Id<'usuarios'>
-			});
-
-			if (resultado.sucesso) {
-				mostrarMensagem('success', 'Usuário desbloqueado com sucesso!');
-				await carregarUsuarios();
-			} else {
-				mostrarMensagem('error', resultado.erro);
-			}
-		} catch (error: unknown) {
-			const message = error instanceof Error ? error.message : 'Erro ao desbloquear usuário.';
-			mostrarMensagem('error', message);
-		} finally {
-			processando = false;
-		}
-	}
-
-	function abrirModalExcluir(usuario: Usuario) {
-		usuarioSelecionado = usuario;
-		modalExcluirAberto = true;
-	}
-
-	function fecharModalExcluir() {
-		modalExcluirAberto = false;
-		usuarioSelecionado = null;
-	}
-
-	async function excluirUsuario() {
-		if (!usuarioSelecionado) {
-			return;
-		}
-
-		processando = true;
 		try {
 			await client.mutation(api.usuarios.excluir, {
-				usuarioId: usuarioSelecionado._id
+				usuarioId: u._id
 			});
-
 			mostrarMensagem('success', 'Usuário excluído com sucesso!');
-			fecharModalExcluir();
-			await carregarUsuarios();
-		} catch (error: unknown) {
-			const message = error instanceof Error ? error.message : 'Erro ao excluir usuário.';
-			mostrarMensagem('error', message);
-		} finally {
-			processando = false;
+		} catch (err) {
+			mostrarMensagem('error', err instanceof Error ? err.message : 'Erro ao excluir usuário');
 		}
 	}
+
+	// Modal Success Handlers
+	function onRoleSuccess() {
+		mostrarMensagem('success', 'Perfil alterado com sucesso!');
+	}
+
+	function onAssociateSuccess() {
+		mostrarMensagem('success', 'Associação atualizada com sucesso!');
+	}
+
+	function onBlockSuccess() {
+		mostrarMensagem('success', 'Usuário bloqueado com sucesso!');
+	}
 </script>
 
 <ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']}>
 	<div class="container mx-auto max-w-7xl px-4 py-6">
-		<!-- Header -->
-		<div class="mb-6 flex items-center justify-between">
-			<div class="flex items-center gap-4">
-				<div class="bg-primary/10 rounded-xl p-3">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="text-primary h-8 w-8"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-						/>
-					</svg>
-				</div>
-				<div>
-					<h1 class="text-base-content text-3xl font-bold">Gestão de Usuários</h1>
-					<p class="text-base-content/60 mt-1">Administre os usuários do sistema</p>
-				</div>
-			</div>
-			<div class="flex gap-3">
-				<a href={resolve('/ti/usuarios/criar')} class="btn btn-primary">
-					<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="M12 4v16m8-8H4"
-						/>
-					</svg>
-					Criar Usuário
-				</a>
-			</div>
-		</div>
+		<Header />
 
 		<!-- Alerta de Usuários com Problemas -->
-		{#if !carregandoUsuarios && usuariosComProblemas.length > 0}
+		{#if !loading && usuariosComProblemas.length > 0}
 			<div class="alert alert-warning mb-6 shadow-lg">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -598,7 +218,7 @@
 							{usuariosComProblemas.length} usuário(s) possui(em) problemas que requerem atenção:
 						</p>
 						<ul class="mt-2 list-inside list-disc space-y-1">
-							{#each usuariosComProblemas.slice(0, 3) as usuario}
+							{#each usuariosComProblemas.slice(0, 3) as usuario (usuario._id)}
 								<li>
 									<strong>{usuario.nome}</strong> ({usuario.matricula})
 									{#if usuario.avisos && usuario.avisos.length > 0}
@@ -612,693 +232,65 @@
 								</li>
 							{/if}
 						</ul>
-						<p class="mt-2 font-semibold">
-							Por favor, corrija os perfis desses usuários para garantir acesso adequado ao sistema.
-						</p>
 					</div>
 				</div>
 			</div>
 		{/if}
 
-		<!-- Mensagens -->
+		<!-- Mensagens Toast -->
 		{#if mensagem}
-			<div
-				class="alert shadow-lg"
-				class:alert-success={mensagem.tipo === 'success'}
-				class:alert-error={mensagem.tipo === 'error'}
-				class:alert-info={mensagem.tipo === 'info'}
-			>
-				{#if mensagem.tipo === 'success'}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-6 w-6 shrink-0 stroke-current"
-						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 if mensagem.tipo === 'error'}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-6 w-6 shrink-0 stroke-current"
-						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>
-				{:else}
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-6 w-6 shrink-0 stroke-current"
-						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>
-				{/if}
-				<span class="font-semibold">{mensagem.texto}</span>
-			</div>
-		{/if}
-
-		<!-- Filtros -->
-		{#if !carregandoUsuarios && usuarios.length > 0}
-			<div class="card bg-base-100 mb-6 shadow-xl">
-				<div class="card-body">
-					<div class="mb-4 flex items-center justify-between">
-						<h2 class="card-title">Filtros de Busca</h2>
-						<button type="button" class="btn btn-sm btn-outline" onclick={limparFiltros}>
-							<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="M6 18L18 6M6 6l12 12"
-								/>
-							</svg>
-							Limpar Filtros
-						</button>
-					</div>
-
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-						<!-- Nome -->
-						<div class="form-control">
-							<label class="label" for="filtro-nome">
-								<span class="label-text font-medium">Nome</span>
-							</label>
-							<input
-								id="filtro-nome"
-								type="text"
-								bind:value={filtroNome}
-								placeholder="Buscar por nome..."
-								class="input input-bordered input-sm"
-							/>
-						</div>
-
-						<!-- Matrícula -->
-						<div class="form-control">
-							<label class="label" for="filtro-matricula">
-								<span class="label-text font-medium">Matrícula</span>
-							</label>
-							<input
-								id="filtro-matricula"
-								type="text"
-								bind:value={filtroMatricula}
-								placeholder="Buscar por matrícula..."
-								class="input input-bordered input-sm"
-							/>
-						</div>
-
-						<!-- Setor -->
-						<div class="form-control">
-							<label class="label" for="filtro-setor">
-								<span class="label-text font-medium">Setor</span>
-							</label>
-							<select
-								id="filtro-setor"
-								bind:value={filtroSetor}
-								class="select select-bordered select-sm"
-							>
-								<option value="">Todos os setores</option>
-								{#each obterSetoresDisponiveis() as setor}
-									<option value={setor}>{setor}</option>
-								{/each}
-							</select>
-						</div>
-
-						<!-- Status -->
-						<div class="form-control">
-							<label class="label" for="filtro-status">
-								<span class="label-text font-medium">Status</span>
-							</label>
-							<select
-								id="filtro-status"
-								bind:value={filtroStatus}
-								class="select select-bordered select-sm"
-							>
-								<option value="todos">Todos</option>
-								<option value="ativo">Ativo</option>
-								<option value="inativo">Inativo</option>
-								<option value="bloqueado">Bloqueado</option>
-							</select>
-						</div>
-
-						<!-- Data de Criação Início -->
-						<div class="form-control">
-							<label class="label" for="filtro-data-criacao-inicio">
-								<span class="label-text font-medium">Data de Criação (Início)</span>
-							</label>
-							<input
-								id="filtro-data-criacao-inicio"
-								type="date"
-								bind:value={filtroDataCriacaoInicio}
-								class="input input-bordered input-sm"
-							/>
-						</div>
-
-						<!-- Data de Criação Fim -->
-						<div class="form-control">
-							<label class="label" for="filtro-data-criacao-fim">
-								<span class="label-text font-medium">Data de Criação (Fim)</span>
-							</label>
-							<input
-								id="filtro-data-criacao-fim"
-								type="date"
-								bind:value={filtroDataCriacaoFim}
-								class="input input-bordered input-sm"
-							/>
-						</div>
-
-						<!-- Último Acesso Início -->
-						<div class="form-control">
-							<label class="label" for="filtro-ultimo-acesso-inicio">
-								<span class="label-text font-medium">Último Acesso (Início)</span>
-							</label>
-							<input
-								id="filtro-ultimo-acesso-inicio"
-								type="date"
-								bind:value={filtroUltimoAcessoInicio}
-								class="input input-bordered input-sm"
-							/>
-						</div>
-
-						<!-- Último Acesso Fim -->
-						<div class="form-control">
-							<label class="label" for="filtro-ultimo-acesso-fim">
-								<span class="label-text font-medium">Último Acesso (Fim)</span>
-							</label>
-							<input
-								id="filtro-ultimo-acesso-fim"
-								type="date"
-								bind:value={filtroUltimoAcessoFim}
-								class="input input-bordered input-sm"
-							/>
-						</div>
-					</div>
-
-					<div class="text-base-content/60 mt-4 text-sm">
-						Mostrando {usuariosFiltrados.length} de {usuarios.length} usuário(s)
-					</div>
-				</div>
-			</div>
-		{/if}
-
-		<!-- Lista de Usuários -->
-		{#if carregandoUsuarios}
-			<div class="flex flex-col items-center justify-center py-20">
-				<span class="loading loading-spinner loading-lg text-primary"></span>
-				<p class="text-base-content/60 mt-4">Carregando usuários...</p>
-			</div>
-		{:else if erroUsuarios}
-			<div class="alert alert-error shadow-lg">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-6 w-6 shrink-0 stroke-current"
-					fill="none"
-					viewBox="0 0 24 24"
+			<div class="toast toast-end z-50">
+				<div
+					class="alert shadow-lg"
+					class:alert-success={mensagem.tipo === 'success'}
+					class:alert-error={mensagem.tipo === 'error'}
+					class:alert-info={mensagem.tipo === 'info'}
 				>
-					<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>
-				<div>
-					<h3 class="font-bold">Erro ao carregar usuários</h3>
-					<div class="mt-1 text-sm">{erroUsuarios}</div>
-					<div class="mt-2 text-xs">
-						Por favor, recarregue a página ou entre em contato com o suporte técnico se o problema
-						persistir.
-					</div>
-				</div>
-			</div>
-		{:else if usuarios.length === 0}
-			<div class="flex flex-col items-center justify-center py-16 text-center">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="text-base-content/30 h-16 w-16"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-					/>
-				</svg>
-				<h3 class="mt-4 text-xl font-semibold">Nenhum usuário encontrado</h3>
-				<p class="text-base-content/60 mt-2">
-					Cadastre um usuário para começar a gestão de acessos.
-				</p>
-			</div>
-		{:else}
-			<div class="card bg-base-100 shadow-xl">
-				<div class="card-body">
-					<h2 class="card-title mb-4 text-2xl">Usuários ({usuarios.length})</h2>
-
-					<div class="overflow-x-auto">
-						<table class="table-zebra table">
-							<thead>
-								<tr>
-									<th>Matrícula</th>
-									<th>Nome</th>
-									<th>Email</th>
-									<th>Role/Perfil</th>
-									<th>Setor</th>
-									<th>Funcionário Vinculado</th>
-									<th>Status</th>
-									<th>Primeiro Acesso</th>
-									<th>Último Acesso</th>
-									<th>Data de Criação</th>
-									<th>Ações</th>
-								</tr>
-							</thead>
-							<tbody>
-								{#each usuariosFiltrados as usuario}
-									<tr>
-										<td class="font-mono font-semibold">{usuario.matricula}</td>
-										<td class="font-semibold">{usuario.nome}</td>
-										<td>{usuario.email}</td>
-										<td>
-											<div class="space-y-1">
-												{#if usuario.role.erro}
-													<div class="badge badge-error gap-1">
-														<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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-															/>
-														</svg>
-														{usuario.role.descricao}
-													</div>
-													{#if usuario.avisos && usuario.avisos.length > 0}
-														<div
-															class="tooltip tooltip-error"
-															data-tip={usuario.avisos[0].mensagem}
-														>
-															<button
-																type="button"
-																class="btn btn-xs btn-error btn-circle"
-																onclick={(e) => {
-																	e.stopPropagation();
-																	mostrarMensagem('error', usuario.avisos![0].mensagem);
-																}}
-															>
-																!
-															</button>
-														</div>
-													{/if}
-												{:else}
-													<div class="badge badge-outline">
-														{usuario.role.nome}
-													</div>
-												{/if}
-											</div>
-										</td>
-										<td>{usuario.role.setor || '-'}</td>
-										<td>
-											{#if usuario.funcionario}
-												<div class="space-y-1">
-													<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>
-													<div class="text-sm font-medium">
-														{usuario.funcionario.nome}
-													</div>
-													{#if usuario.funcionario.matricula}
-														<div class="text-base-content/60 text-xs">
-															Mat: {usuario.funcionario.matricula}
-														</div>
-													{/if}
-												</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>
-											{#if usuario.primeiroAcesso}
-												<div class="badge badge-warning">Sim</div>
-											{:else}
-												<div class="badge badge-success">Não</div>
-											{/if}
-										</td>
-										<td>
-											<span class="text-sm">{formatarData(usuario.ultimoAcesso)}</span>
-										</td>
-										<td>
-											<span class="text-sm">{formatarData(usuario.criadoEm)}</span>
-										</td>
-										<td>
-											<div class="dropdown dropdown-end">
-												<button
-													type="button"
-													class="btn btn-sm btn-ghost"
-													aria-label="Menu de ações"
-												>
-													<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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-														/>
-													</svg>
-												</button>
-												<ul
-													role="menu"
-													class="dropdown-content menu bg-base-100 rounded-box z-[1] w-48 p-2 shadow"
-												>
-													<li>
-														<button
-															type="button"
-															onclick={() => ativarDesativarUsuario(usuario)}
-															disabled={processando}
-														>
-															{usuario.ativo ? 'Desativar' : 'Ativar'}
-														</button>
-													</li>
-													<li>
-														<button
-															type="button"
-															onclick={() => abrirModalAssociar(usuario)}
-															disabled={processando}
-														>
-															{usuario.funcionario ? 'Alterar Funcionário' : 'Associar Funcionário'}
-														</button>
-													</li>
-													<li>
-														{#if usuario.bloqueado}
-															<button
-																type="button"
-																onclick={() => desbloquearUsuario(usuario)}
-																disabled={processando}
-																class="text-success"
-															>
-																Desbloquear
-															</button>
-														{:else}
-															<button
-																type="button"
-																onclick={() => bloquearUsuario(usuario)}
-																disabled={processando}
-																class="text-error"
-															>
-																Bloquear
-															</button>
-														{/if}
-													</li>
-													<div class="divider my-0"></div>
-													<li>
-														<button
-															type="button"
-															onclick={() => abrirModalExcluir(usuario)}
-															disabled={processando}
-															class="text-error"
-														>
-															Excluir
-														</button>
-													</li>
-												</ul>
-											</div>
-										</td>
-									</tr>
-								{/each}
-							</tbody>
-						</table>
-					</div>
+					<span>{mensagem.texto}</span>
 				</div>
 			</div>
 		{/if}
+
+		<UserFilters
+			bind:filtroNome
+			bind:filtroMatricula
+			bind:filtroSetor
+			bind:filtroStatus
+			bind:filtroDataCriacaoInicio
+			bind:filtroDataCriacaoFim
+			bind:filtroUltimoAcessoInicio
+			bind:filtroUltimoAcessoFim
+			{setoresDisponiveis}
+		/>
+
+		<UserList
+			usuarios={usuariosFiltrados}
+			{loading}
+			onEditRole={handleEditRole}
+			onAssociateEmployee={handleAssociateEmployee}
+			onBlockToggle={handleBlockToggle}
+			onDelete={handleDelete}
+		/>
+
+		<EditRoleModal
+			bind:open={isEditRoleOpen}
+			usuario={selectedUser}
+			onclose={() => (isEditRoleOpen = false)}
+			onsuccess={onRoleSuccess}
+		/>
+
+		<AssociateEmployeeModal
+			bind:open={isAssociateOpen}
+			usuario={selectedUser}
+			onclose={() => (isAssociateOpen = false)}
+			onsuccess={onAssociateSuccess}
+		/>
+
+		<BlockUserModal
+			bind:open={isBlockOpen}
+			usuario={selectedUser}
+			onclose={() => (isBlockOpen = false)}
+			onsuccess={onBlockSuccess}
+		/>
 	</div>
-
-	<!-- Modal Associar Funcionário -->
-	{#if modalAssociarAberto && usuarioSelecionado}
-		<div class="modal modal-open">
-			<div class="modal-box max-w-2xl">
-				<h3 class="mb-4 text-lg font-bold">Associar Funcionário ao Usuário</h3>
-
-				<div class="mb-6">
-					<p class="text-base-content/80 mb-2">
-						<strong>Usuário:</strong>
-						{usuarioSelecionado.nome} ({usuarioSelecionado.matricula})
-					</p>
-
-					{#if usuarioSelecionado.funcionario}
-						<div class="alert alert-info">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-								class="h-6 w-6 shrink-0 stroke-current"
-							>
-								<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>
-
-				<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>
-
-				<div class="form-control mb-6">
-					<div class="label">
-						<span class="label-text">Selecione o Funcionário *</span>
-					</div>
-
-					<div class="max-h-96 overflow-y-auto rounded-lg border">
-						{#if carregandoFuncionarios}
-							<div class="text-base-content/60 flex items-center justify-center gap-3 p-4">
-								<span class="loading loading-spinner loading-sm"></span>
-								Carregando funcionários disponíveis...
-							</div>
-						{:else if funcionariosFiltrados.length === 0}
-							<div class="text-base-content/60 p-4 text-center">
-								{buscaFuncionario
-									? 'Nenhum funcionário encontrado com esse critério'
-									: 'Nenhum funcionário disponível para associação.'}
-							</div>
-						{:else}
-							{#each funcionariosFiltrados as func}
-								<label
-									class="hover:bg-base-200 flex cursor-pointer items-center gap-3 border-b p-3 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-base-content/70 text-sm">
-											CPF: {func.cpf || 'N/A'}
-											{#if func.matricula}
-												| Matrícula: {func.matricula}
-											{/if}
-										</div>
-										{#if func.descricaoCargo}
-											<div class="text-base-content/60 text-xs">
-												{func.descricaoCargo}
-											</div>
-										{/if}
-									</div>
-								</label>
-							{/each}
-						{/if}
-					</div>
-				</div>
-
-				<div class="modal-action">
-					<button type="button" class="btn" onclick={fecharModalAssociar} disabled={processando}>
-						Cancelar
-					</button>
-
-					{#if usuarioSelecionado.funcionario}
-						<button
-							type="button"
-							class="btn btn-error"
-							onclick={desassociarFuncionario}
-							disabled={processando}
-						>
-							{#if processando}
-								<span class="loading loading-spinner loading-sm"></span>
-							{/if}
-							Desassociar
-						</button>
-					{/if}
-
-					<button
-						type="button"
-						class="btn btn-primary"
-						onclick={associarFuncionario}
-						disabled={processando || !funcionarioSelecionadoId || funcionarioSelecionadoId === ''}
-					>
-						{#if processando}
-							<span class="loading loading-spinner loading-sm"></span>
-						{/if}
-						{usuarioSelecionado.funcionario ? 'Alterar' : 'Associar'}
-					</button>
-				</div>
-			</div>
-			<div class="modal-backdrop">
-				<button
-					type="button"
-					onclick={fecharModalAssociar}
-					onkeydown={(e) => e.key === 'Escape' && fecharModalAssociar()}
-					aria-label="Fechar modal"
-					class="sr-only">Fechar</button
-				>
-			</div>
-		</div>
-	{/if}
-
-	<!-- Modal Excluir Usuário -->
-	{#if modalExcluirAberto && usuarioSelecionado}
-		<div class="modal modal-open">
-			<div class="modal-box">
-				<h3 class="text-error mb-4 text-lg font-bold">Excluir Usuário</h3>
-
-				<div class="mb-4">
-					<p class="text-base-content/80 mb-2">
-						<strong>Usuário:</strong>
-						{usuarioSelecionado.nome} ({usuarioSelecionado.matricula})
-					</p>
-					<div class="alert alert-error">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							class="h-6 w-6 shrink-0 stroke-current"
-						>
-							<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"
-							></path>
-						</svg>
-						<span>
-							Esta ação não pode ser desfeita. O usuário será permanentemente excluído do sistema.
-						</span>
-					</div>
-				</div>
-
-				<div class="modal-action">
-					<button type="button" class="btn" onclick={fecharModalExcluir} disabled={processando}>
-						Cancelar
-					</button>
-					<button
-						type="button"
-						class="btn btn-error"
-						onclick={excluirUsuario}
-						disabled={processando}
-					>
-						{#if processando}
-							<span class="loading loading-spinner loading-sm"></span>
-						{/if}
-						Excluir
-					</button>
-				</div>
-			</div>
-			<div class="modal-backdrop">
-				<button
-					type="button"
-					onclick={fecharModalExcluir}
-					onkeydown={(e) => e.key === 'Escape' && fecharModalExcluir()}
-					aria-label="Fechar modal"
-					class="sr-only">Fechar</button
-				>
-			</div>
-		</div>
-	{/if}
 </ProtectedRoute>
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/components/AssociateEmployeeModal.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/components/AssociateEmployeeModal.svelte
new file mode 100644
index 0000000..e0c36a5
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/components/AssociateEmployeeModal.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import type { Usuario, Funcionario } from './types';
+
+	type Props = {
+		open: boolean;
+		usuario: Usuario | null;
+		onclose: () => void;
+		onsuccess: () => void;
+	};
+
+	let { open = $bindable(false), usuario, onclose, onsuccess }: Props = $props();
+
+	const client = useConvexClient();
+	// We load all employees. In a real scenario with thousands, we might want to paginate or search on server.
+	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+
+	let funcionarios = $derived(
+		funcionariosQuery.data
+			? Array.isArray(funcionariosQuery.data)
+				? funcionariosQuery.data
+				: (funcionariosQuery.data as { data: Funcionario[] }).data
+			: []
+	);
+
+	let selectedFuncionarioId = $state<Id<'funcionarios'> | ''>('');
+	let processing = $state(false);
+	let error = $state<string | null>(null);
+	let searchTerm = $state('');
+
+	// Reset state when modal opens
+	$effect(() => {
+		if (open && usuario) {
+			selectedFuncionarioId = usuario.funcionario?._id ?? '';
+			searchTerm = '';
+			error = null;
+		}
+	});
+
+	let filteredFuncionarios = $derived.by(() => {
+		if (!funcionarios) return [];
+		if (!searchTerm) return [...funcionarios].sort((a, b) => a.nome.localeCompare(b.nome));
+
+		const searchLower = searchTerm.toLowerCase();
+		return funcionarios
+			.filter(
+				(f) =>
+					f.nome.toLowerCase().includes(searchLower) ||
+					f.matricula?.toLowerCase().includes(searchLower) ||
+					f.cpf?.toLowerCase().includes(searchLower)
+			)
+			.sort((a, b) => a.nome.localeCompare(b.nome));
+	});
+
+	async function handleSubmit(action: 'associar' | 'desassociar') {
+		if (!usuario) return;
+
+		processing = true;
+		error = null;
+
+		try {
+			if (action === 'associar') {
+				if (!selectedFuncionarioId) return;
+				await client.mutation(api.usuarios.associarFuncionario, {
+					usuarioId: usuario._id,
+					funcionarioId: selectedFuncionarioId as Id<'funcionarios'>
+				});
+			} else {
+				await client.mutation(api.usuarios.desassociarFuncionario, {
+					usuarioId: usuario._id
+				});
+			}
+
+			onsuccess();
+			open = false;
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Erro ao atualizar associação';
+		} finally {
+			processing = false;
+		}
+	}
+</script>
+
+{#if open}
+	<div class="modal modal-open">
+		<div class="modal-box w-11/12 max-w-2xl">
+			<h3 class="text-lg font-bold">Associar Funcionário</h3>
+
+			{#if usuario}
+				<p class="py-4">
+					Gerenciar vínculo de funcionário para o usuário <strong>{usuario.nome}</strong>
+				</p>
+
+				{#if error}
+					<div class="alert alert-error mb-4">
+						<span>{error}</span>
+					</div>
+				{/if}
+
+				<div class="form-control mb-4 w-full">
+					<label class="label" for="search-employee">
+						<span class="label-text">Buscar Funcionário</span>
+					</label>
+					<input
+						id="search-employee"
+						type="text"
+						class="input input-bordered w-full"
+						placeholder="Nome, matrícula ou CPF..."
+						bind:value={searchTerm}
+					/>
+				</div>
+
+				<div class="form-control h-64 w-full overflow-y-auto rounded-lg border p-2">
+					{#if filteredFuncionarios.length === 0}
+						<div class="text-base-content/50 flex h-full items-center justify-center">
+							Nenhum funcionário encontrado
+						</div>
+					{:else}
+						<ul class="menu w-full p-0">
+							{#each filteredFuncionarios as func (func._id)}
+								<li>
+									<button
+										type="button"
+										class={selectedFuncionarioId === func._id ? 'active' : ''}
+										onclick={() => (selectedFuncionarioId = func._id)}
+									>
+										<div class="flex flex-col items-start gap-1">
+											<span class="font-medium">{func.nome}</span>
+											<span class="text-xs opacity-70">
+												{func.descricaoCargo || 'Sem cargo'} • Mat: {func.matricula || 'N/A'}
+											</span>
+										</div>
+									</button>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</div>
+			{/if}
+
+			<div class="modal-action justify-between">
+				<button
+					type="button"
+					class="btn btn-error btn-outline"
+					onclick={() => handleSubmit('desassociar')}
+					disabled={processing || !usuario?.funcionario}
+				>
+					Remover Associação
+				</button>
+
+				<div class="flex gap-2">
+					<button type="button" class="btn" onclick={onclose} disabled={processing}>
+						Cancelar
+					</button>
+					<button
+						type="button"
+						class="btn btn-primary"
+						onclick={() => handleSubmit('associar')}
+						disabled={processing ||
+							!selectedFuncionarioId ||
+							selectedFuncionarioId === usuario?.funcionario?._id}
+					>
+						{#if processing}
+							<span class="loading loading-spinner loading-xs"></span>
+						{/if}
+						Associar Selecionado
+					</button>
+				</div>
+			</div>
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button onclick={onclose}>close</button>
+		</form>
+	</div>
+{/if}
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/components/BlockUserModal.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/components/BlockUserModal.svelte
new file mode 100644
index 0000000..76dcafb
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/components/BlockUserModal.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Usuario } from './types';
+	import { useQuery } from 'convex-svelte';
+
+	type Props = {
+		open: boolean;
+		usuario: Usuario | null;
+		onclose: () => void;
+		onsuccess: () => void;
+	};
+
+	let { open = $bindable(false), usuario, onclose, onsuccess }: Props = $props();
+
+	const client = useConvexClient();
+	const currentUserQuery = useQuery(api.auth.getCurrentUser, {});
+
+	let motivo = $state('');
+	let processing = $state(false);
+	let error = $state<string | null>(null);
+
+	// Reset state when modal opens
+	$effect(() => {
+		if (open && usuario) {
+			motivo = usuario.motivoBloqueio || '';
+			error = null;
+		}
+	});
+
+	async function handleSubmit() {
+		if (!usuario || !motivo.trim()) return;
+
+		const currentUser = currentUserQuery.data;
+		if (!currentUser) {
+			error = 'Você precisa estar logado para realizar esta ação.';
+			return;
+		}
+
+		processing = true;
+		error = null;
+
+		try {
+			await client.mutation(api.usuarios.bloquearUsuario, {
+				usuarioId: usuario._id,
+				motivo: motivo.trim(),
+				bloqueadoPorId: currentUser._id
+			});
+			onsuccess();
+			open = false;
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Erro ao bloquear usuário';
+		} finally {
+			processing = false;
+		}
+	}
+</script>
+
+{#if open}
+	<div class="modal modal-open">
+		<div class="modal-box">
+			<h3 class="text-lg font-bold">Bloquear Usuário</h3>
+
+			{#if usuario}
+				<p class="py-4">
+					Informe o motivo do bloqueio para o usuário <strong>{usuario.nome}</strong>. O usuário
+					perderá acesso imediato ao sistema.
+				</p>
+
+				{#if error}
+					<div class="alert alert-error mb-4">
+						<span>{error}</span>
+					</div>
+				{/if}
+
+				<div class="form-control w-full">
+					<label class="label" for="block-reason">
+						<span class="label-text">Motivo do Bloqueio</span>
+					</label>
+					<textarea
+						id="block-reason"
+						class="textarea textarea-bordered h-24"
+						placeholder="Descreva o motivo..."
+						bind:value={motivo}
+						disabled={processing}
+					></textarea>
+				</div>
+			{/if}
+
+			<div class="modal-action">
+				<button type="button" class="btn" onclick={onclose} disabled={processing}>
+					Cancelar
+				</button>
+				<button
+					type="button"
+					class="btn btn-error"
+					onclick={handleSubmit}
+					disabled={processing || !motivo.trim()}
+				>
+					{#if processing}
+						<span class="loading loading-spinner loading-xs"></span>
+					{/if}
+					Bloquear Usuário
+				</button>
+			</div>
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button onclick={onclose}>close</button>
+		</form>
+	</div>
+{/if}
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/components/EditRoleModal.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/components/EditRoleModal.svelte
new file mode 100644
index 0000000..273f816
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/components/EditRoleModal.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+	import { useConvexClient, useQuery } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import type { Usuario } from './types';
+
+	type Props = {
+		open: boolean;
+		usuario: Usuario | null;
+		onclose: () => void;
+		onsuccess: () => void;
+	};
+
+	let { open = $bindable(false), usuario, onclose, onsuccess }: Props = $props();
+
+	const client = useConvexClient();
+	const rolesQuery = useQuery(api.roles.listar, {});
+
+	let roles = $derived(rolesQuery.data || []);
+	let selectedRoleId = $state<Id<'roles'> | ''>('');
+	let processing = $state(false);
+	let error = $state<string | null>(null);
+
+	// Reset state when modal opens/changes user
+	$effect(() => {
+		if (open && usuario) {
+			selectedRoleId = usuario.role._id;
+			error = null;
+		}
+	});
+
+	async function handleSubmit() {
+		if (!usuario || !selectedRoleId) return;
+
+		processing = true;
+		error = null;
+
+		try {
+			await client.mutation(api.usuarios.alterarRole, {
+				usuarioId: usuario._id,
+				novaRoleId: selectedRoleId as Id<'roles'>
+			});
+			onsuccess();
+			open = false;
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Erro ao alterar perfil';
+		} finally {
+			processing = false;
+		}
+	}
+</script>
+
+{#if open}
+	<div class="modal modal-open">
+		<div class="modal-box">
+			<h3 class="text-lg font-bold">Alterar Perfil de Usuário</h3>
+
+			{#if usuario}
+				<p class="py-4">
+					Selecione o novo perfil para o usuário <strong>{usuario.nome}</strong>
+				</p>
+
+				{#if error}
+					<div class="alert alert-error mb-4">
+						<span>{error}</span>
+					</div>
+				{/if}
+
+				<div class="form-control w-full">
+					<label class="label" for="role-select">
+						<span class="label-text">Perfil de Acesso</span>
+					</label>
+					<select
+						id="role-select"
+						class="select select-bordered w-full"
+						bind:value={selectedRoleId}
+						disabled={processing}
+					>
+						{#each roles as role (role._id)}
+							<option value={role._id}>
+								{role.nome}
+								{role.admin ? '(Admin)' : ''}
+							</option>
+						{/each}
+					</select>
+					<div class="label">
+						<span class="label-text-alt text-base-content/60">
+							{#if selectedRoleId}
+								{@const selectedRole = roles.find((r) => r._id === selectedRoleId)}
+								{selectedRole?.descricao}
+							{/if}
+						</span>
+					</div>
+				</div>
+			{/if}
+
+			<div class="modal-action">
+				<button type="button" class="btn" onclick={onclose} disabled={processing}>
+					Cancelar
+				</button>
+				<button
+					type="button"
+					class="btn btn-primary"
+					onclick={handleSubmit}
+					disabled={processing || !selectedRoleId || selectedRoleId === usuario?.role._id}
+				>
+					{#if processing}
+						<span class="loading loading-spinner loading-xs"></span>
+					{/if}
+					Salvar Alterações
+				</button>
+			</div>
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button onclick={onclose}>close</button>
+		</form>
+	</div>
+{/if}
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/components/Header.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/components/Header.svelte
new file mode 100644
index 0000000..df02ecf
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/components/Header.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+</script>
+
+<div class="mb-6 flex items-center justify-between">
+	<div class="flex items-center gap-4">
+		<div class="bg-primary/10 rounded-xl p-3">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="text-primary h-8 w-8"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+				/>
+			</svg>
+		</div>
+		<div>
+			<h1 class="text-base-content text-3xl font-bold">Gestão de Usuários</h1>
+			<p class="text-base-content/60 mt-1">Administre os usuários do sistema</p>
+		</div>
+	</div>
+	<div class="flex gap-3">
+		<a href={resolve('/ti/usuarios/criar')} class="btn btn-primary">
+			<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="M12 4v16m8-8H4" />
+			</svg>
+			Criar Usuário
+		</a>
+	</div>
+</div>
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/components/UserActions.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/components/UserActions.svelte
new file mode 100644
index 0000000..6e35038
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/components/UserActions.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Usuario } from './types';
+	import {
+		EllipsisVertical,
+		Pencil,
+		UserCheck,
+		UserPlus,
+		Lock,
+		LockOpen,
+		Trash2
+	} from 'lucide-svelte';
+
+	type Props = {
+		usuario: Usuario;
+		onEditRole: (u: Usuario) => void;
+		onAssociateEmployee: (u: Usuario) => void;
+		onBlockToggle: (u: Usuario) => void;
+		onDelete: (u: Usuario) => void;
+	};
+
+	let { usuario, onEditRole, onAssociateEmployee, onBlockToggle, onDelete }: Props = $props();
+</script>
+
+<div class="dropdown dropdown-end">
+	<div tabindex="0" role="button" class="btn btn-ghost btn-sm">
+		<EllipsisVertical class="inline-block h-5 w-5 stroke-current" />
+	</div>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow">
+		<li>
+			<button class="text-left" onclick={() => onEditRole(usuario)}>
+				<Pencil class="h-4 w-4" />
+				Editar Perfil
+			</button>
+		</li>
+		<li>
+			<button class="text-left" onclick={() => onAssociateEmployee(usuario)}>
+				{#if usuario.funcionario}
+					<UserCheck class="h-4 w-4" />
+					Gerenciar Vínculo
+				{:else}
+					<UserPlus class="h-4 w-4" />
+					Associar Funcionário
+				{/if}
+			</button>
+		</li>
+		<li>
+			<button class="text-left" onclick={() => onBlockToggle(usuario)}>
+				{#if usuario.bloqueado}
+					<LockOpen class="text-success h-4 w-4" />
+					Desbloquear
+				{:else}
+					<Lock class="text-warning h-4 w-4" />
+					Bloquear
+				{/if}
+			</button>
+		</li>
+		<li class="bg-error/10 text-error rounded-md">
+			<button class="text-left" onclick={() => onDelete(usuario)}>
+				<Trash2 class="h-4 w-4" />
+				Excluir
+			</button>
+		</li>
+	</ul>
+</div>
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/components/UserFilters.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/components/UserFilters.svelte
new file mode 100644
index 0000000..d661387
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/components/UserFilters.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+	type Props = {
+		filtroNome: string;
+		filtroMatricula: string;
+		filtroSetor: string;
+		filtroStatus: 'todos' | 'ativo' | 'inativo' | 'bloqueado';
+		filtroDataCriacaoInicio: string;
+		filtroDataCriacaoFim: string;
+		filtroUltimoAcessoInicio: string;
+		filtroUltimoAcessoFim: string;
+		setoresDisponiveis: string[];
+	};
+
+	let {
+		filtroNome = $bindable(),
+		filtroMatricula = $bindable(),
+		filtroSetor = $bindable(),
+		filtroStatus = $bindable(),
+		filtroDataCriacaoInicio = $bindable(),
+		filtroDataCriacaoFim = $bindable(),
+		filtroUltimoAcessoInicio = $bindable(),
+		filtroUltimoAcessoFim = $bindable(),
+		setoresDisponiveis
+	}: Props = $props();
+
+	function limparFiltros() {
+		filtroNome = '';
+		filtroMatricula = '';
+		filtroSetor = '';
+		filtroStatus = 'todos';
+		filtroDataCriacaoInicio = '';
+		filtroDataCriacaoFim = '';
+		filtroUltimoAcessoInicio = '';
+		filtroUltimoAcessoFim = '';
+	}
+</script>
+
+<div class="card bg-base-100 mb-6 shadow-xl">
+	<div class="card-body">
+		<div class="mb-4 flex items-center justify-between">
+			<h2 class="card-title">Filtros de Busca</h2>
+			<button type="button" class="btn btn-sm btn-outline" onclick={limparFiltros}>
+				<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="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+				Limpar Filtros
+			</button>
+		</div>
+
+		<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+			<!-- Nome -->
+			<div class="form-control">
+				<label class="label" for="filtro-nome">
+					<span class="label-text font-medium">Nome</span>
+				</label>
+				<input
+					id="filtro-nome"
+					type="text"
+					bind:value={filtroNome}
+					placeholder="Buscar por nome..."
+					class="input input-bordered input-sm"
+				/>
+			</div>
+
+			<!-- Matrícula -->
+			<div class="form-control">
+				<label class="label" for="filtro-matricula">
+					<span class="label-text font-medium">Matrícula</span>
+				</label>
+				<input
+					id="filtro-matricula"
+					type="text"
+					bind:value={filtroMatricula}
+					placeholder="Buscar por matrícula..."
+					class="input input-bordered input-sm"
+				/>
+			</div>
+
+			<!-- Setor -->
+			<div class="form-control">
+				<label class="label" for="filtro-setor">
+					<span class="label-text font-medium">Setor</span>
+				</label>
+				<select id="filtro-setor" bind:value={filtroSetor} class="select select-bordered select-sm">
+					<option value="">Todos os setores</option>
+					{#each setoresDisponiveis as setor (setor)}
+						<option value={setor}>{setor}</option>
+					{/each}
+				</select>
+			</div>
+
+			<!-- Status -->
+			<div class="form-control">
+				<label class="label" for="filtro-status">
+					<span class="label-text font-medium">Status</span>
+				</label>
+				<select
+					id="filtro-status"
+					bind:value={filtroStatus}
+					class="select select-bordered select-sm"
+				>
+					<option value="todos">Todos</option>
+					<option value="ativo">Ativo</option>
+					<option value="inativo">Inativo</option>
+					<option value="bloqueado">Bloqueado</option>
+				</select>
+			</div>
+
+			<!-- Data de Criação Início -->
+			<div class="form-control">
+				<label class="label" for="filtro-data-criacao-inicio">
+					<span class="label-text font-medium">Data de Criação (Início)</span>
+				</label>
+				<input
+					id="filtro-data-criacao-inicio"
+					type="date"
+					bind:value={filtroDataCriacaoInicio}
+					class="input input-bordered input-sm"
+				/>
+			</div>
+
+			<!-- Data de Criação Fim -->
+			<div class="form-control">
+				<label class="label" for="filtro-data-criacao-fim">
+					<span class="label-text font-medium">Data de Criação (Fim)</span>
+				</label>
+				<input
+					id="filtro-data-criacao-fim"
+					type="date"
+					bind:value={filtroDataCriacaoFim}
+					class="input input-bordered input-sm"
+				/>
+			</div>
+
+			<!-- Último Acesso Início -->
+			<div class="form-control">
+				<label class="label" for="filtro-ultimo-acesso-inicio">
+					<span class="label-text font-medium">Último Acesso (Início)</span>
+				</label>
+				<input
+					id="filtro-ultimo-acesso-inicio"
+					type="date"
+					bind:value={filtroUltimoAcessoInicio}
+					class="input input-bordered input-sm"
+				/>
+			</div>
+
+			<!-- Último Acesso Fim -->
+			<div class="form-control">
+				<label class="label" for="filtro-ultimo-acesso-fim">
+					<span class="label-text font-medium">Último Acesso (Fim)</span>
+				</label>
+				<input
+					id="filtro-ultimo-acesso-fim"
+					type="date"
+					bind:value={filtroUltimoAcessoFim}
+					class="input input-bordered input-sm"
+				/>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/components/UserList.svelte b/apps/web/src/routes/(dashboard)/ti/usuarios/components/UserList.svelte
new file mode 100644
index 0000000..cfcc201
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/components/UserList.svelte
@@ -0,0 +1,138 @@
+<script lang="ts">
+	import UserStatusBadge from '$lib/components/ti/UserStatusBadge.svelte';
+	import UserActions from './UserActions.svelte';
+	import type { Usuario } from './types';
+	import { format } from 'date-fns';
+	import { ptBR } from 'date-fns/locale';
+
+	type Props = {
+		usuarios: Usuario[];
+		loading: boolean;
+		onEditRole: (u: Usuario) => void;
+		onAssociateEmployee: (u: Usuario) => void;
+		onBlockToggle: (u: Usuario) => void;
+		onDelete: (u: Usuario) => void;
+	};
+
+	let {
+		usuarios = [],
+		loading = false,
+		onEditRole,
+		onAssociateEmployee,
+		onBlockToggle,
+		onDelete
+	}: Props = $props();
+
+	function formatarData(timestamp: number | undefined): string {
+		if (!timestamp) return 'Nunca';
+		try {
+			return format(new Date(timestamp), 'dd/MM/yyyy HH:mm', { locale: ptBR });
+		} catch {
+			return 'Data inválida';
+		}
+	}
+</script>
+
+{#if loading}
+	<div class="flex h-64 items-center justify-center">
+		<span class="loading loading-spinner loading-lg text-primary"></span>
+	</div>
+{:else if usuarios.length === 0}
+	<div class="alert alert-info shadow-sm">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="h-6 w-6 shrink-0 stroke-current"
+		>
+			<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>Nenhum usuário encontrado com os filtros atuais.</span>
+	</div>
+{:else}
+	<div class="overflow-x-auto">
+		<table class="table w-full">
+			<thead>
+				<tr class="bg-base-200/50">
+					<th>Usuário</th>
+					<th>Role</th>
+					<th>Funcionário Associado</th>
+					<th>Status</th>
+					<th>Criado em</th>
+					<th>Último Acesso</th>
+					<th class="text-right">Ações</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each usuarios as usuario (usuario._id)}
+					<tr class="hover">
+						<td>
+							<div class="flex items-center space-x-3">
+								<div class="avatar placeholder">
+									<div class="bg-neutral text-neutral-content w-10 rounded-full">
+										<span class="text-xs uppercase">{usuario.nome.slice(0, 2)}</span>
+									</div>
+								</div>
+								<div>
+									<div class="font-bold">{usuario.nome}</div>
+									<div class="text-sm opacity-50">{usuario.email}</div>
+								</div>
+							</div>
+						</td>
+						<td>
+							<div class="flex flex-col gap-1">
+								<span class="badge badge-ghost gap-1">
+									{usuario.role.nome}
+									{#if usuario.role.admin}
+										<span class="text-primary text-[10px] font-bold" title="Administrador">★</span>
+									{/if}
+								</span>
+								{#if usuario.role.erro}
+									<span class="text-error text-xs font-bold">Perfil inválido/apagado</span>
+								{/if}
+							</div>
+						</td>
+						<td>
+							{#if usuario.funcionario}
+								<div class="flex flex-col">
+									<span class="font-semibold">{usuario.funcionario.nome}</span>
+									<span class="text-xs opacity-70">
+										{usuario.funcionario.descricaoCargo || 'Sem cargo'}
+									</span>
+								</div>
+							{:else}
+								<span class="text-base-content/40 text-sm italic">Não associado</span>
+							{/if}
+						</td>
+						<td>
+							<UserStatusBadge {usuario} />
+						</td>
+						<td class="text-sm">
+							{formatarData(usuario.criadoEm)}
+						</td>
+						<td class="text-sm">
+							{formatarData(usuario.ultimoAcesso)}
+						</td>
+						<td class="text-right">
+							<UserActions
+								{usuario}
+								{onEditRole}
+								{onAssociateEmployee}
+								{onBlockToggle}
+								{onDelete}
+							/>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+	<div class="text-base-content/60 py-4 text-center text-sm">
+		Exibindo {usuarios.length} usuário(s)
+	</div>
+{/if}
diff --git a/apps/web/src/routes/(dashboard)/ti/usuarios/components/types.ts b/apps/web/src/routes/(dashboard)/ti/usuarios/components/types.ts
new file mode 100644
index 0000000..80fed8c
--- /dev/null
+++ b/apps/web/src/routes/(dashboard)/ti/usuarios/components/types.ts
@@ -0,0 +1,50 @@
+import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+
+export type AvisoUsuario = {
+	tipo: 'erro' | 'aviso' | 'info';
+	mensagem: string;
+};
+
+export type RoleUsuario = {
+	_id: Id<'roles'>;
+	nome: string;
+	admin?: boolean;
+	descricao: string;
+	erro?: boolean;
+	setor?: string;
+};
+
+export type Usuario = {
+	_id: Id<'usuarios'>;
+	matricula: string;
+	nome: string;
+	email: string;
+	ativo: boolean;
+	bloqueado?: boolean;
+	motivoBloqueio?: string;
+	primeiroAcesso: boolean;
+	ultimoAcesso?: number;
+	criadoEm: number;
+	role: RoleUsuario;
+	funcionario?: {
+		_id: Id<'funcionarios'>;
+		nome: string;
+		matricula?: string;
+		descricaoCargo?: string;
+		simboloTipo: 'cargo_comissionado' | 'funcao_gratificada';
+	};
+	avisos?: AvisoUsuario[];
+};
+
+export type Funcionario = {
+	_id: Id<'funcionarios'>;
+	nome: string;
+	matricula?: string;
+	cpf?: string;
+	descricaoCargo?: string;
+};
+
+export type Mensagem = {
+	tipo: 'success' | 'error' | 'info';
+	texto: string;
+};