feat: enhance notification bell component by refactoring notification fetching logic, improving type safety, and updating UI elements for better user experience

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

@@ -2,6 +2,8 @@
 	import { resolve } from '$app/paths';
 	import logo from '$lib/assets/logo_governo_PE.png';
 	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+	import { aplicarTemaDaisyUI } from '$lib/utils/temas';
 
 	type HeaderProps = {
 		left?: Snippet;
@@ -9,6 +11,43 @@
 	};
 
 	const { left, right }: HeaderProps = $props();
+
+	let themeSelectEl: HTMLSelectElement | null = null;
+
+	function safeGetThemeLS(): string | null {
+		try {
+			const t = localStorage.getItem('theme');
+			return t && t.trim() ? t : null;
+		} catch {
+			return null;
+		}
+	}
+
+	onMount(() => {
+		const persisted = safeGetThemeLS();
+		if (persisted) {
+			// Sincroniza UI + HTML com o valor persistido (evita select ficar "aqua" indevido)
+			if (themeSelectEl && themeSelectEl.value !== persisted) {
+				themeSelectEl.value = persisted;
+			}
+			aplicarTemaDaisyUI(persisted);
+		}
+	});
+
+	function onThemeChange(e: Event) {
+		const nextValue = (e.currentTarget as HTMLSelectElement | null)?.value ?? null;
+
+		// Se o theme-change não atualizar (caso comum após login/logout),
+		// garantimos aqui a persistência + aplicação imediata.
+		if (nextValue) {
+			try {
+				localStorage.setItem('theme', nextValue);
+			} catch {
+				// ignore
+			}
+			aplicarTemaDaisyUI(nextValue);
+		}
+	}
 </script>
 
 <header
@@ -36,9 +75,11 @@
 
 		<div class="flex items-center gap-2">
 			<select
+				bind:this={themeSelectEl}
 				class="select select-sm bg-base-100 border-base-300 w-40"
 				aria-label="Selecionar tema"
 				data-choose-theme
+				onchange={onThemeChange}
 			>
 				<option value="aqua">Aqua</option>
 				<option value="sgse-blue">Azul</option>

apps/web/src/lib/components/chat/NotificationBell.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { useQuery, useConvexClient } from 'convex-svelte';
 	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { notificacoesCount } from '$lib/stores/chatStore';
 	import { formatDistanceToNow } from 'date-fns';
 	import { ptBR } from 'date-fns/locale';
@@ -18,9 +20,10 @@
 	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
 	let modalOpen = $state(false);
+	let usuarioId = $derived((currentUser?.data?._id as Id<'usuarios'> | undefined) ?? null);
 	let notificacoesFerias = $state<
 		Array<{
-			_id: string;
+			_id: Id<'notificacoesFerias'>;
 			mensagem: string;
 			tipo: string;
 			_creationTime: number;
@@ -28,7 +31,7 @@
 	>([]);
 	let notificacoesAusencias = $state<
 		Array<{
-			_id: string;
+			_id: Id<'notificacoesAusencias'>;
 			mensagem: string;
 			tipo: string;
 			_creationTime: number;
@@ -47,43 +50,40 @@
 	// Separar notificações lidas e não lidas
 	let notificacoesNaoLidas = $derived(todasNotificacoes.filter((n) => !n.lida));
 	let notificacoesLidas = $derived(todasNotificacoes.filter((n) => n.lida));
+	let totalCount = $derived(count + (notificacoesFerias?.length || 0));
 
 	// Atualizar contador no store
 	$effect(() => {
 		const totalNotificacoes =
 			count + (notificacoesFerias?.length || 0) + (notificacoesAusencias?.length || 0);
-		notificacoesCount.set(totalNotificacoes);
+		$notificacoesCount = totalNotificacoes;
 	});
 
 	// Buscar notificações de férias
-	async function buscarNotificacoesFerias() {
+	async function buscarNotificacoesFerias(id: Id<'usuarios'> | null) {
 		try {
-			const usuarioId = currentUser?.data?._id;
-			if (usuarioId) {
+			if (!id) return;
 			const notifsFerias = await client.query(api.ferias.obterNotificacoesNaoLidas, {
-					usuarioId
+				usuarioId: id
 			});
 			notificacoesFerias = notifsFerias || [];
-			}
 		} catch (e) {
 			console.error('Erro ao buscar notificações de férias:', e);
 		}
 	}
 
 	// Buscar notificações de ausências
-	async function buscarNotificacoesAusencias() {
+	async function buscarNotificacoesAusencias(id: Id<'usuarios'> | null) {
 		try {
-			const usuarioId = currentUser?.data?._id;
-			if (usuarioId) {
+			if (!id) return;
 			try {
 				const notifsAusencias = await client.query(api.ausencias.obterNotificacoesNaoLidas, {
-						usuarioId
+					usuarioId: id
 				});
 				notificacoesAusencias = notifsAusencias || [];
 			} catch (queryError: unknown) {
 				// Silenciar erros de timeout e função não encontrada
-					const errorMessage =
-						queryError instanceof Error ? queryError.message : String(queryError);
+				const errorMessage = queryError instanceof Error ? queryError.message : String(queryError);
 				const isTimeout = errorMessage.includes('timed out') || errorMessage.includes('timeout');
 				const isFunctionNotFound = errorMessage.includes('Could not find public function');
 
@@ -92,7 +92,6 @@
 				}
 				notificacoesAusencias = [];
 			}
-			}
 		} catch (e) {
 			// Erro geral - silenciar se for sobre função não encontrada ou timeout
 			const errorMessage = e instanceof Error ? e.message : String(e);
@@ -106,13 +105,15 @@
 	}
 
 	// Atualizar notificações periodicamente
-	$effect(() => {
-		buscarNotificacoesFerias();
-		buscarNotificacoesAusencias();
+	onMount(() => {
+		void buscarNotificacoesFerias(usuarioId);
+		void buscarNotificacoesAusencias(usuarioId);
+
 		const interval = setInterval(() => {
-			buscarNotificacoesFerias();
-			buscarNotificacoesAusencias();
+			void buscarNotificacoesFerias(usuarioId);
+			void buscarNotificacoesAusencias(usuarioId);
 		}, 30000); // A cada 30s
+
 		return () => clearInterval(interval);
 	});
 
@@ -127,30 +128,12 @@
 		}
 	}
 
-	async function handleMarcarTodasLidas() {
-		await client.mutation(api.chat.marcarTodasNotificacoesLidas, {});
-		// Marcar todas as notificações de férias como lidas
-		for (const notif of notificacoesFerias) {
-			await client.mutation(api.ferias.marcarComoLida, {
-				notificacaoId: notif._id
-			});
-		}
-		// Marcar todas as notificações de ausências como lidas
-		for (const notif of notificacoesAusencias) {
-			await client.mutation(api.ausencias.marcarComoLida, {
-				notificacaoId: notif._id
-			});
-		}
-		await buscarNotificacoesFerias();
-		await buscarNotificacoesAusencias();
-	}
-
 	async function handleLimparTodasNotificacoes() {
 		limpandoNotificacoes = true;
 		try {
 			await client.mutation(api.chat.limparTodasNotificacoes, {});
-			await buscarNotificacoesFerias();
-			await buscarNotificacoesAusencias();
+			await buscarNotificacoesFerias(usuarioId);
+			await buscarNotificacoesAusencias(usuarioId);
 		} catch (error) {
 			console.error('Erro ao limpar notificações:', error);
 		} finally {
@@ -162,8 +145,8 @@
 		limpandoNotificacoes = true;
 		try {
 			await client.mutation(api.chat.limparNotificacoesNaoLidas, {});
-			await buscarNotificacoesFerias();
-			await buscarNotificacoesAusencias();
+			await buscarNotificacoesFerias(usuarioId);
+			await buscarNotificacoesAusencias(usuarioId);
 		} catch (error) {
 			console.error('Erro ao limpar notificações não lidas:', error);
 		} finally {
@@ -173,24 +156,24 @@
 
 	async function handleClickNotificacao(notificacaoId: string) {
 		await client.mutation(api.chat.marcarNotificacaoLida, {
-			notificacaoId: notificacaoId as any
+			notificacaoId: notificacaoId as Id<'notificacoes'>
 		});
 	}
 
-	async function handleClickNotificacaoFerias(notificacaoId: string) {
+	async function handleClickNotificacaoFerias(notificacaoId: Id<'notificacoesFerias'>) {
 		await client.mutation(api.ferias.marcarComoLida, {
 			notificacaoId: notificacaoId
 		});
-		await buscarNotificacoesFerias();
+		await buscarNotificacoesFerias(usuarioId);
 		// Redirecionar para a página de férias
 		window.location.href = '/recursos-humanos/ferias';
 	}
 
-	async function handleClickNotificacaoAusencias(notificacaoId: string) {
+	async function handleClickNotificacaoAusencias(notificacaoId: Id<'notificacoesAusencias'>) {
 		await client.mutation(api.ausencias.marcarComoLida, {
 			notificacaoId: notificacaoId
 		});
-		await buscarNotificacoesAusencias();
+		await buscarNotificacoesAusencias(usuarioId);
 		// Redirecionar para a página de perfil na aba de ausências
 		window.location.href = '/perfil?aba=minhas-ausencias';
 	}
@@ -204,19 +187,19 @@
 	}
 
 	// Fechar popup ao clicar fora ou pressionar Escape
-	$effect(() => {
-		if (!modalOpen) return;
-
+	onMount(() => {
 		function handleClickOutside(event: MouseEvent) {
+			if (!modalOpen) return;
 			const target = event.target as HTMLElement;
 			if (!target.closest('.notification-popup') && !target.closest('.notification-bell')) {
-				modalOpen = false;
+				closeModal();
 			}
 		}
 
 		function handleEscape(event: KeyboardEvent) {
+			if (!modalOpen) return;
 			if (event.key === 'Escape') {
-				modalOpen = false;
+				closeModal();
 			}
 		}
 
@@ -230,56 +213,32 @@
 </script>
 
 <div class="notification-bell relative">
-	<!-- Botão de Notificação ULTRA MODERNO (igual ao perfil) -->
-	<button
-		type="button"
-		tabindex="0"
-		class="group relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
-		style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
-		onclick={openModal}
-		aria-label="Notificações"
-	>
-		<!-- Efeito de brilho no hover -->
-		<div
-			class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-		></div>
-
-		<!-- Anel de pulso sutil -->
-		<div
-			class="absolute inset-0 rounded-2xl"
-			style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
-		></div>
-
-		<!-- Glow effect quando tem notificações -->
-		{#if count && count > 0}
-			<div class="bg-error/30 absolute inset-0 animate-pulse rounded-2xl blur-lg"></div>
-		{/if}
-
-		<!-- Ícone do sino PREENCHIDO moderno -->
-		<Bell
-			class="relative z-10 h-7 w-7 text-white transition-all duration-300 group-hover:scale-110"
-			style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); animation: {count && count > 0
-				? 'bell-ring 2s ease-in-out infinite'
-				: 'none'};"
-			fill="currentColor"
-		/>
-
-		<!-- Badge premium MODERNO com gradiente -->
-		{#if count + (notificacoesFerias?.length || 0) > 0}
-			{@const totalCount = count + (notificacoesFerias?.length || 0)}
-			<span
-				class="absolute -top-1 -right-1 z-20 flex h-6 w-6 items-center justify-center rounded-full text-[10px] font-black text-white shadow-xl ring-2 ring-white"
-				style="background: linear-gradient(135deg, #ff416c, #ff4b2b); box-shadow: 0 8px 24px -4px rgba(255, 65, 108, 0.6), 0 4px 12px -2px rgba(255, 75, 43, 0.4); animation: badge-bounce 2s ease-in-out infinite;"
-			>
+	<!-- Botão de Notificação (padrão do tema) -->
+	<div class="indicator">
+		{#if totalCount > 0}
+			<span class="indicator-item badge badge-error badge-sm">
 				{totalCount > 9 ? '9+' : totalCount}
 			</span>
 		{/if}
+		<button
+			type="button"
+			tabindex="0"
+			class="btn ring-base-200 hover:ring-primary/50 size-10 p-0 ring-2 ring-offset-2 transition-all"
+			onclick={openModal}
+			aria-label="Notificações"
+			aria-expanded={modalOpen}
+		>
+			<Bell
+				class="size-6 transition-colors {totalCount > 0 ? 'text-primary' : 'text-base-content/70'}"
+				style="animation: {totalCount > 0 ? 'bell-ring 2s ease-in-out infinite' : 'none'};"
+			/>
 		</button>
+	</div>
 
 	<!-- Popup Flutuante de Notificações -->
 	{#if modalOpen}
 		<div
-			class="notification-popup bg-base-100 border-base-300 fixed top-24 right-4 z-[100] flex max-h-[calc(100vh-7rem)] w-[calc(100vw-2rem)] max-w-2xl flex-col overflow-hidden rounded-2xl border shadow-2xl backdrop-blur-sm"
+			class="notification-popup bg-base-100 border-base-300 fixed top-24 right-4 z-100 flex max-h-[calc(100vh-7rem)] w-[calc(100vw-2rem)] max-w-2xl flex-col overflow-hidden rounded-2xl border shadow-2xl backdrop-blur-sm"
 			style="animation: slideDown 0.2s ease-out;"
 		>
 			<!-- Header -->
@@ -310,7 +269,7 @@
 							Limpar todas
 						</button>
 					{/if}
-					<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={closeModal}>
+					<button type="button" class="btn btn-sm btn-circle" onclick={closeModal}>
 						<X class="h-5 w-5" />
 					</button>
 				</div>
@@ -439,17 +398,17 @@
 					<!-- Notificações de Férias -->
 					{#if notificacoesFerias.length > 0}
 						<div class="mb-4">
-							<h4 class="mb-2 px-2 text-sm font-semibold text-purple-600">Férias</h4>
+							<h4 class="text-secondary mb-2 px-2 text-sm font-semibold">Férias</h4>
 							{#each notificacoesFerias as notificacao (notificacao._id)}
 								<button
 									type="button"
-									class="hover:bg-base-200 mb-2 w-full rounded-lg border-l-4 border-purple-600 px-4 py-3 text-left transition-colors"
+									class="hover:bg-base-200 border-secondary mb-2 w-full rounded-lg border-l-4 px-4 py-3 text-left transition-colors"
 									onclick={() => handleClickNotificacaoFerias(notificacao._id)}
 								>
 									<div class="flex items-start gap-3">
 										<!-- Ícone -->
 										<div class="mt-1 shrink-0">
-											<Calendar class="h-5 w-5 text-purple-600" strokeWidth={2} />
+											<Calendar class="text-secondary h-5 w-5" strokeWidth={2} />
 										</div>
 
 										<!-- Conteúdo -->
@@ -464,7 +423,7 @@
 
 										<!-- Badge -->
 										<div class="shrink-0">
-											<div class="badge badge-primary badge-xs"></div>
+											<div class="badge badge-secondary badge-xs"></div>
 										</div>
 									</div>
 								</button>
@@ -475,17 +434,17 @@
 					<!-- Notificações de Ausências -->
 					{#if notificacoesAusencias.length > 0}
 						<div class="mb-4">
-							<h4 class="mb-2 px-2 text-sm font-semibold text-orange-600">Ausências</h4>
+							<h4 class="text-warning mb-2 px-2 text-sm font-semibold">Ausências</h4>
 							{#each notificacoesAusencias as notificacao (notificacao._id)}
 								<button
 									type="button"
-									class="hover:bg-base-200 mb-2 w-full rounded-lg border-l-4 border-orange-600 px-4 py-3 text-left transition-colors"
+									class="hover:bg-base-200 border-warning mb-2 w-full rounded-lg border-l-4 px-4 py-3 text-left transition-colors"
 									onclick={() => handleClickNotificacaoAusencias(notificacao._id)}
 								>
 									<div class="flex items-start gap-3">
 										<!-- Ícone -->
 										<div class="mt-1 shrink-0">
-											<Clock class="h-5 w-5 text-orange-600" strokeWidth={2} />
+											<Clock class="text-warning h-5 w-5" strokeWidth={2} />
 										</div>
 
 										<!-- Conteúdo -->
@@ -539,28 +498,6 @@
 </div>
 
 <style>
-	@keyframes badge-bounce {
-		0%,
-		100% {
-			transform: scale(1);
-		}
-		50% {
-			transform: scale(1.1);
-		}
-	}
-
-	@keyframes pulse-ring-subtle {
-		0%,
-		100% {
-			opacity: 0.1;
-			transform: scale(1);
-		}
-		50% {
-			opacity: 0.3;
-			transform: scale(1.05);
-		}
-	}
-
 	@keyframes bell-ring {
 		0%,
 		100% {

apps/web/src/lib/components/dashboard/DashboardHeaderActions.svelte

@@ -40,9 +40,6 @@
 		if (result.error) {
 			console.error('Sign out error:', result.error);
 		}
-		// Resetar tema para padrão ao fazer logout
-		const { aplicarTemaPadrao } = await import('$lib/utils/temas');
-		aplicarTemaPadrao();
 		goto(resolve('/home'));
 	}
 </script>

apps/web/src/lib/components/ui/Button.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import ShineEffect from '$lib/components/ShineEffect.svelte';
+
+	type Size = 'sm' | 'md' | 'lg' | 'icon';
+	type Variant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'danger' | 'link';
+
+	type Classes = Partial<{
+		button: string;
+		content: string;
+		spinner: string;
+	}>;
+
+	interface Props {
+		type?: HTMLButtonAttributes['type'];
+		disabled?: boolean;
+		loading?: boolean;
+		loadingText?: string;
+
+		size?: Size;
+		variant?: Variant;
+		fullWidth?: boolean;
+		shine?: boolean;
+
+		left?: Snippet;
+		right?: Snippet;
+		children?: Snippet;
+
+		classes?: Classes;
+		class?: string;
+	}
+
+	let {
+		type = 'button',
+		disabled = false,
+		loading = false,
+		loadingText,
+
+		size = 'md',
+		variant = 'primary',
+		fullWidth = false,
+		shine = false,
+
+		left,
+		right,
+		children,
+
+		classes,
+		class: className = ''
+	}: Props = $props();
+
+	const isDisabled = $derived(disabled || loading);
+
+	const sizeClass = $derived(
+		size === 'sm'
+			? 'px-3 py-2 text-sm'
+			: size === 'lg'
+				? 'px-5 py-4 text-base'
+				: size === 'icon'
+					? 'p-2'
+					: 'px-4 py-3.5 text-sm'
+	);
+
+	const base =
+		'relative inline-flex items-center justify-center gap-2 rounded-xl font-bold transition-all duration-300 overflow-hidden';
+
+	const variantClass = $derived(
+		variant === 'primary'
+			? 'bg-primary hover:bg-primary-focus hover:shadow-primary/25 text-primary-content shadow-lg'
+			: variant === 'secondary'
+				? 'bg-base-200 hover:bg-base-300 text-base-content'
+				: variant === 'ghost'
+					? 'bg-transparent hover:bg-base-200/60 text-base-content'
+					: variant === 'outline'
+						? 'border-base-content/20 hover:bg-base-200/40 text-base-content border'
+						: variant === 'danger'
+							? 'bg-error hover:bg-error/90 text-error-content shadow-lg'
+							: 'bg-transparent hover:underline text-primary px-0 py-0 rounded-none'
+	);
+
+	const widthClass = $derived(fullWidth ? 'w-full' : '');
+	const disabledClass = 'disabled:cursor-not-allowed disabled:opacity-50';
+
+	const buttonClass = $derived(
+		[base, sizeClass, variantClass, widthClass, disabledClass, classes?.button, className]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<button {type} class={buttonClass} disabled={isDisabled}>
+	<div
+		class={['relative z-10 flex items-center justify-center gap-2', classes?.content].filter(
+			Boolean
+		)}
+	>
+		{#if loading}
+			<span
+				class={[
+					'border-primary-content/30 border-t-primary-content h-5 w-5 animate-spin rounded-full border-2',
+					classes?.spinner
+				].filter(Boolean)}
+			></span>
+			{#if loadingText}
+				<span>{loadingText}</span>
+			{/if}
+		{:else}
+			{#if left}
+				<span class="[&_svg]:h-4 [&_svg]:w-4">
+					{@render left()}
+				</span>
+			{/if}
+
+			{@render children?.()}
+
+			{#if right}
+				<span class="[&_svg]:h-4 [&_svg]:w-4">
+					{@render right()}
+				</span>
+			{/if}
+		{/if}
+	</div>
+
+	{#if shine}
+		<ShineEffect />
+	{/if}
+</button>

apps/web/src/lib/components/ui/Input.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type Size = 'sm' | 'md' | 'lg';
+	type Variant = 'filled' | 'outline';
+
+	type Classes = Partial<{
+		root: string;
+		labelRow: string;
+		label: string;
+		control: string;
+		input: string;
+		helperText: string;
+		errorText: string;
+	}>;
+
+	interface Props {
+		id: string;
+		label: string;
+		value?: string;
+
+		type?: HTMLInputAttributes['type'];
+		name?: string;
+		placeholder?: string;
+		autocomplete?: HTMLInputAttributes['autocomplete'];
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+
+		error?: string | null;
+		helperText?: string | null;
+
+		size?: Size;
+		variant?: Variant;
+		fullWidth?: boolean;
+
+		left?: Snippet;
+		right?: Snippet;
+
+		inputProps?: Omit<
+			HTMLInputAttributes,
+			| 'id'
+			| 'type'
+			| 'name'
+			| 'placeholder'
+			| 'autocomplete'
+			| 'disabled'
+			| 'required'
+			| 'readOnly'
+			| 'value'
+		>;
+
+		classes?: Classes;
+		class?: string;
+	}
+
+	let {
+		id,
+		label,
+		value = $bindable(''),
+
+		type = 'text',
+		name,
+		placeholder = '',
+		autocomplete,
+		disabled = false,
+		readonly = false,
+		required = false,
+
+		error = null,
+		helperText = null,
+
+		size = 'md',
+		variant = 'filled',
+		fullWidth = true,
+
+		left,
+		right,
+
+		inputProps,
+		classes,
+		class: className = ''
+	}: Props = $props();
+
+	const invalid = $derived(!!error);
+	const hasLeft = $derived(!!left);
+	const hasRight = $derived(!!right);
+
+	const paddingY = $derived(size === 'sm' ? 'py-2.5' : size === 'lg' ? 'py-3.5' : 'py-3');
+	const paddingX = 'px-4';
+	const paddingLeft = $derived(hasLeft ? 'pl-11' : '');
+	const paddingRight = $derived(hasRight ? 'pr-11' : '');
+
+	const baseInput =
+		'border-base-content/10 bg-base-200/25 text-base-content placeholder-base-content/40 focus:border-primary/50 focus:bg-base-200/35 focus:ring-primary/20 w-full rounded-xl border transition-all duration-300 focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60';
+
+	const variantClass = $derived(variant === 'outline' ? 'bg-transparent' : 'bg-base-200/25');
+
+	const inputClass = $derived(
+		[
+			baseInput,
+			variantClass,
+			fullWidth ? 'w-full' : '',
+			paddingX,
+			paddingY,
+			paddingLeft,
+			paddingRight,
+			classes?.input
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<Field.Root {invalid} {required} {disabled} class={['space-y-2', classes?.root, className]}>
+	<div class={['flex items-center justify-between gap-3', classes?.labelRow].filter(Boolean)}>
+		<Field.Label
+			for={id}
+			class={[
+				'text-base-content/60 text-xs font-semibold tracking-wider uppercase',
+				classes?.label
+			].filter(Boolean)}
+		>
+			{label}
+		</Field.Label>
+		{@render right?.()}
+	</div>
+
+	<div class={['group relative', classes?.control].filter(Boolean)}>
+		{#if left}
+			<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
+				<div class="text-base-content/50 [&_svg]:h-4 [&_svg]:w-4">
+					{@render left()}
+				</div>
+			</div>
+		{/if}
+
+		<Field.Input
+			{id}
+			{type}
+			{name}
+			{placeholder}
+			{disabled}
+			{readonly}
+			{autocomplete}
+			{required}
+			bind:value
+			{...inputProps}
+			class={inputClass}
+		/>
+
+		{#if right}
+			<div class="absolute inset-y-0 right-0 flex items-center pr-4">
+				<div class="text-base-content/70 [&_svg]:h-4 [&_svg]:w-4">
+					{@render right()}
+				</div>
+			</div>
+		{/if}
+	</div>
+
+	{#if helperText && !error}
+		<Field.HelperText class={['text-base-content/50 text-sm', classes?.helperText].filter(Boolean)}>
+			{helperText}
+		</Field.HelperText>
+	{/if}
+
+	{#if error}
+		<Field.ErrorText class={['text-error text-sm font-medium', classes?.errorText].filter(Boolean)}>
+			{error}
+		</Field.ErrorText>
+	{/if}
+</Field.Root>

apps/web/src/lib/components/ui/Select.svelte

@@ -0,0 +1,287 @@
+<script lang="ts">
+	import { Field } from '@ark-ui/svelte/field';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { Select, createListCollection } from '@ark-ui/svelte/select';
+	import type { Snippet } from 'svelte';
+	import { Check, ChevronDown, X } from 'lucide-svelte';
+
+	type Size = 'sm' | 'md' | 'lg';
+	type Variant = 'filled' | 'outline';
+
+	export interface SelectItem {
+		label: string;
+		value: string;
+		disabled?: boolean;
+		group?: string;
+	}
+
+	type Classes = Partial<{
+		root: string;
+		labelRow: string;
+		label: string;
+		control: string;
+		trigger: string;
+		content: string;
+		item: string;
+		helperText: string;
+		errorText: string;
+	}>;
+
+	interface Props {
+		id: string;
+		label: string;
+		items: SelectItem[];
+
+		value?: string[];
+		name?: string;
+		placeholder?: string;
+
+		disabled?: boolean;
+		readOnly?: boolean;
+		required?: boolean;
+		error?: string | null;
+		helperText?: string | null;
+
+		size?: Size;
+		variant?: Variant;
+		fullWidth?: boolean;
+
+		multiple?: boolean;
+		clearable?: boolean;
+		maxSelected?: number;
+
+		positioning?: Select.RootProps<SelectItem>['positioning'];
+
+		/** Slot ao lado do label (ex.: link, ação, etc.) */
+		labelRight?: Snippet;
+		/** Slot antes do texto no trigger (ex.: ícone) */
+		triggerLeft?: Snippet;
+
+		classes?: Classes;
+		class?: string;
+	}
+
+	let {
+		id,
+		label,
+		items,
+		value = $bindable<string[]>([]),
+		name,
+		placeholder = 'Selecione...',
+
+		disabled = false,
+		readOnly = false,
+		required = false,
+		error = null,
+		helperText = null,
+
+		size = 'md',
+		variant = 'filled',
+		fullWidth = true,
+
+		multiple = false,
+		clearable = true,
+		maxSelected,
+		positioning,
+
+		labelRight,
+		triggerLeft,
+		classes,
+		class: className = ''
+	}: Props = $props();
+
+	const invalid = $derived(!!error);
+	const hasGroups = $derived(items.some((i) => i.group));
+	const canClear = $derived(clearable && value.length > 0 && !disabled && !readOnly);
+
+	const collection = $derived(
+		createListCollection<SelectItem>({
+			items
+		})
+	);
+
+	const groups = $derived.by(() => {
+		if (!hasGroups) return [];
+		const record: Record<string, SelectItem[]> = {};
+		for (const item of items) {
+			const key = item.group ?? 'Opções';
+			const arr = record[key] ?? [];
+			arr.push(item);
+			record[key] = arr;
+		}
+		return Object.entries(record);
+	});
+
+	const paddingY = $derived(size === 'sm' ? 'py-2.5' : size === 'lg' ? 'py-3.5' : 'py-3');
+	const paddingX = 'px-4';
+
+	const baseTrigger =
+		'border-base-content/10 bg-base-200/25 text-base-content focus:border-primary/50 focus:bg-base-200/35 focus:ring-primary/20 w-full rounded-xl border transition-all duration-300 focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60';
+
+	const variantClass = $derived(variant === 'outline' ? 'bg-transparent' : 'bg-base-200/25');
+
+	const triggerClass = $derived(
+		[
+			baseTrigger,
+			variantClass,
+			fullWidth ? 'w-full' : '',
+			'flex items-center justify-between gap-3 text-left',
+			paddingX,
+			paddingY,
+			classes?.trigger
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const contentClass = $derived(
+		[
+			'bg-base-100 border-base-200 w-[var(--reference-width)] overflow-hidden rounded-xl border shadow-lg',
+			'max-h-72',
+			'z-50',
+			classes?.content
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	function handleValueChange(details: { value: string[] }) {
+		let next = details.value;
+		if (
+			typeof maxSelected === 'number' &&
+			maxSelected >= 0 &&
+			multiple &&
+			next.length > maxSelected
+		) {
+			next = next.slice(0, maxSelected);
+		}
+		value = next;
+	}
+</script>
+
+<Field.Root {invalid} {required} {disabled} class={['space-y-2', classes?.root, className]}>
+	<div class={['flex items-center justify-between gap-3', classes?.labelRow].filter(Boolean)}>
+		<Field.Label
+			for={id}
+			class={[
+				'text-base-content/60 text-xs font-semibold tracking-wider uppercase',
+				classes?.label
+			].filter(Boolean)}
+		>
+			{label}
+		</Field.Label>
+		{@render labelRight?.()}
+	</div>
+
+	<Select.Root
+		{collection}
+		{disabled}
+		{required}
+		{readOnly}
+		{invalid}
+		{multiple}
+		{positioning}
+		{value}
+		onValueChange={handleValueChange}
+	>
+		<Select.Control class={classes?.control}>
+			<Select.Trigger {id} class={triggerClass}>
+				<div class="flex min-w-0 flex-1 items-center gap-2">
+					{#if triggerLeft}
+						<span class="text-base-content/60 shrink-0 [&_svg]:h-4 [&_svg]:w-4">
+							{@render triggerLeft()}
+						</span>
+					{/if}
+					<Select.ValueText
+						{placeholder}
+						class="text-base-content/90 data-placeholder-shown:text-base-content/40 truncate"
+					/>
+				</div>
+
+				<div class="flex shrink-0 items-center gap-2">
+					{#if canClear}
+						<Select.ClearTrigger
+							aria-label="Limpar seleção"
+							class="text-base-content/50 hover:text-base-content/80 inline-flex items-center justify-center rounded-md p-1 transition-colors"
+						>
+							<X class="h-4 w-4" />
+						</Select.ClearTrigger>
+					{/if}
+					<Select.Indicator class="text-base-content/60 [&_svg]:h-4 [&_svg]:w-4">
+						<ChevronDown />
+					</Select.Indicator>
+				</div>
+			</Select.Trigger>
+		</Select.Control>
+
+		<Portal>
+			<Select.Positioner>
+				<Select.Content class={contentClass}>
+					<div class="p-1">
+						{#if hasGroups}
+							{#each groups as [groupLabel, groupItems] (groupLabel)}
+								<Select.ItemGroup class="mb-1 last:mb-0">
+									<Select.ItemGroupLabel
+										class="text-base-content/50 px-3 py-2 text-xs font-semibold tracking-wider uppercase"
+									>
+										{groupLabel}
+									</Select.ItemGroupLabel>
+									{#each groupItems as item (item.value)}
+										<Select.Item
+											{item}
+											class={[
+												'text-base-content relative flex cursor-pointer items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm',
+												'data-highlighted:bg-base-200 data-highlighted:text-base-content',
+												'data-[state=checked]:bg-primary/10',
+												'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+												classes?.item
+											].filter(Boolean)}
+										>
+											<Select.ItemText class="min-w-0 flex-1 truncate">{item.label}</Select.ItemText
+											>
+											<Select.ItemIndicator class="text-primary shrink-0">
+												<Check class="h-4 w-4" />
+											</Select.ItemIndicator>
+										</Select.Item>
+									{/each}
+								</Select.ItemGroup>
+							{/each}
+						{:else}
+							{#each items as item (item.value)}
+								<Select.Item
+									{item}
+									class={[
+										'text-base-content relative flex cursor-pointer items-center justify-between gap-3 rounded-lg px-3 py-2 text-sm',
+										'data-highlighted:bg-base-200 data-highlighted:text-base-content',
+										'data-[state=checked]:bg-primary/10',
+										'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+										classes?.item
+									].filter(Boolean)}
+								>
+									<Select.ItemText class="min-w-0 flex-1 truncate">{item.label}</Select.ItemText>
+									<Select.ItemIndicator class="text-primary shrink-0">
+										<Check class="h-4 w-4" />
+									</Select.ItemIndicator>
+								</Select.Item>
+							{/each}
+						{/if}
+					</div>
+				</Select.Content>
+			</Select.Positioner>
+		</Portal>
+
+		<Select.HiddenSelect {name} />
+	</Select.Root>
+
+	{#if helperText && !error}
+		<Field.HelperText class={['text-base-content/50 text-sm', classes?.helperText].filter(Boolean)}>
+			{helperText}
+		</Field.HelperText>
+	{/if}
+
+	{#if error}
+		<Field.ErrorText class={['text-error text-sm font-medium', classes?.errorText].filter(Boolean)}>
+			{error}
+		</Field.ErrorText>
+	{/if}
+</Field.Root>

apps/web/src/lib/utils/temas.ts

@@ -144,6 +144,52 @@ export function obterNomeDaisyUI(id: TemaId | string | null | undefined): string
 	return temaParaDaisyUI[tema.id] || 'aqua';
 }
 
+/**
+ * Lê o tema persistido pelo `theme-change` (chave "theme") no localStorage.
+ * Retorna o nome do tema do DaisyUI (ex.: "dark", "light", "aqua", "sgse-blue").
+ */
+export function obterTemaPersistidoNoLocalStorage(chave: string = 'theme'): string | null {
+	if (typeof window === 'undefined') return null;
+	try {
+		const tema = window.localStorage.getItem(chave);
+		return tema && tema.trim() ? tema : null;
+	} catch {
+		return null;
+	}
+}
+
+/**
+ * Aplica diretamente um tema do DaisyUI no `<html data-theme="...">`.
+ * (Não altera o localStorage)
+ */
+export function aplicarTemaDaisyUI(tema: string): void {
+	if (typeof document === 'undefined') return;
+	const htmlElement = document.documentElement;
+	if (!htmlElement) return;
+
+	// Normaliza qualquer estado anterior
+	htmlElement.removeAttribute('data-theme');
+	// Evita que `body[data-theme]` sobrescreva o tema do `<html>`
+	if (document.body) document.body.removeAttribute('data-theme');
+
+	htmlElement.setAttribute('data-theme', tema);
+	// Forçar reflow para garantir que o CSS seja aplicado
+	void htmlElement.offsetHeight;
+}
+
+/**
+ * Garante que o tema do `<html>` reflita SEMPRE o valor persistido no localStorage.
+ * Se não houver tema persistido, aplica o tema padrão.
+ */
+export function aplicarTemaDoLocalStorage(): void {
+	const temaPersistido = obterTemaPersistidoNoLocalStorage('theme');
+	if (temaPersistido) {
+		aplicarTemaDaisyUI(temaPersistido);
+		return;
+	}
+	aplicarTemaPadrao();
+}
+
 /**
  * Aplicar tema ao documento HTML
  * NÃO salva no localStorage - apenas no banco de dados do usuário

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

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import { Building2, FileText, Package, ShoppingCart } 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="breadcrumbs mb-4 text-sm">
 		<ul>
@@ -95,4 +93,3 @@
 		</a>
 	</div>
 </main>
-</ProtectedRoute>

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

@@ -2,7 +2,8 @@
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { useConvexClient, useQuery } from 'convex-svelte';
-	import { Pencil, Plus, Trash2, X, Search, Check } from 'lucide-svelte';
+	import { Pencil, Plus, Trash2, X, Search, Check, FileText } from 'lucide-svelte';
+	import { resolve } from '$app/paths';
 
 	const client = useConvexClient();
 
@@ -189,140 +190,173 @@
 	}
 </script>
 
-<div class="container mx-auto p-6">
-	<div class="mb-6 flex items-center justify-between">
-		<h1 class="text-2xl font-bold">Atas de Registro de Preços</h1>
+<main class="container mx-auto flex max-w-7xl flex-col px-4 py-4">
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li><a href={resolve('/')} class="text-primary hover:underline">Dashboard</a></li>
+			<li><a href={resolve('/compras')} class="text-primary hover:underline">Compras</a></li>
+			<li>Atas</li>
+		</ul>
+	</div>
+
+	<div class="mb-6">
+		<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+			<div class="flex items-center gap-4">
+				<div class="bg-accent/10 rounded-xl p-3">
+					<FileText class="text-accent h-8 w-8" strokeWidth={2} />
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Atas de Registro de Preços</h1>
+					<p class="text-base-content/70">Gerencie atas, vigência, empresa e anexos</p>
+				</div>
+			</div>
 			<button
+				class="btn btn-primary gap-2 shadow-md transition-all hover:shadow-lg"
 				onclick={() => openModal()}
-			class="flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
 			>
-			<Plus size={20} />
+				<Plus class="h-5 w-5" strokeWidth={2} />
 				Nova Ata
 			</button>
 		</div>
+	</div>
 
 	{#if loadingAtas}
-		<p>Carregando...</p>
+		<div class="flex items-center justify-center py-10">
+			<span class="loading loading-spinner loading-lg"></span>
+		</div>
 	{:else if errorAtas}
-		<p class="text-red-600">{errorAtas}</p>
+		<div class="alert alert-error">
+			<span>{errorAtas}</span>
+		</div>
 	{:else}
-		<div class="overflow-hidden rounded-lg bg-white shadow-md">
-			<table class="min-w-full divide-y divide-gray-200">
-				<thead class="bg-gray-50">
+		<div class="card bg-base-100/90 border-base-300 border shadow-xl backdrop-blur-sm">
+			<div class="card-body p-0">
+				<div class="overflow-x-auto">
+					<table class="table-zebra table w-full">
+						<thead class="from-base-300 to-base-200 sticky top-0 z-10 bg-linear-to-r shadow-md">
 							<tr>
-						<th
-							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+								<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
 									>Número</th
 								>
-						<th
-							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+								<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
 									>SEI</th
 								>
-						<th
-							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+								<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
 									>Empresa</th
 								>
-						<th
-							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+								<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
 									>Vigência</th
 								>
 								<th
-							class="px-6 py-3 text-right text-xs font-medium tracking-wider text-gray-500 uppercase"
+									class="text-base-content border-base-400 border-b text-right font-bold whitespace-nowrap"
 									>Ações</th
 								>
 							</tr>
 						</thead>
-				<tbody class="divide-y divide-gray-200 bg-white">
-					{#each atas as ata (ata._id)}
+						<tbody>
+							{#if atas.length === 0}
 								<tr>
-							<td class="px-6 py-4 font-medium whitespace-nowrap">{ata.numero}</td>
-							<td class="px-6 py-4 whitespace-nowrap">{ata.numeroSei}</td>
+									<td colspan="5" class="py-12 text-center">
+										<div class="text-base-content/60 flex flex-col items-center gap-2">
+											<p class="text-lg font-semibold">Nenhuma ata cadastrada</p>
+											<p class="text-sm">Clique em “Nova Ata” para cadastrar.</p>
+										</div>
+									</td>
+								</tr>
+							{:else}
+								{#each atas as ata (ata._id)}
+									<tr class="hover:bg-base-200/50 transition-colors">
+										<td class="font-medium whitespace-nowrap">{ata.numero}</td>
+										<td class="whitespace-nowrap">{ata.numeroSei}</td>
 										<td
-								class="max-w-md truncate px-6 py-4 whitespace-nowrap"
+											class="max-w-md truncate whitespace-nowrap"
 											title={getEmpresaNome(ata.empresaId)}
 										>
 											{getEmpresaNome(ata.empresaId)}
 										</td>
-							<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
+										<td class="text-base-content/70 whitespace-nowrap">
 											{ata.dataInicio || '-'} a {ata.dataFim || '-'}
 										</td>
-							<td class="px-6 py-4 text-right text-sm font-medium whitespace-nowrap">
+										<td class="text-right whitespace-nowrap">
+											<div class="flex items-center justify-end gap-1">
 												<button
+													type="button"
+													class="btn btn-ghost btn-sm"
+													aria-label="Editar ata"
 													onclick={() => openModal(ata)}
-									class="mr-4 text-indigo-600 hover:text-indigo-900"
 												>
 													<Pencil size={18} />
 												</button>
 												<button
+													type="button"
+													class="btn btn-ghost btn-sm text-error"
+													aria-label="Excluir ata"
 													onclick={() => handleDelete(ata._id)}
-									class="text-red-600 hover:text-red-900"
 												>
 													<Trash2 size={18} />
 												</button>
+											</div>
 										</td>
 									</tr>
 								{/each}
-					{#if atas.length === 0}
-						<tr>
-							<td colspan="5" class="px-6 py-4 text-center text-gray-500"
-								>Nenhuma ata cadastrada.</td
-							>
-						</tr>
 							{/if}
 						</tbody>
 					</table>
 				</div>
+			</div>
+		</div>
 	{/if}
 
 	{#if showModal}
-		<div
-			class="fixed inset-0 z-50 flex h-full w-full items-center justify-center overflow-y-auto bg-black/40"
-		>
-			<div class="relative my-8 w-full max-w-2xl rounded-lg bg-white p-8 shadow-xl">
+		<div class="modal modal-open">
+			<div class="modal-box max-w-4xl">
 				<button
+					type="button"
+					class="btn btn-sm btn-circle absolute top-2 right-2"
 					onclick={closeModal}
-					class="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
+					aria-label="Fechar modal"
 				>
-					<X size={24} />
+					<X class="h-5 w-5" />
 				</button>
-				<h2 class="mb-6 text-xl font-bold">{editingId ? 'Editar' : 'Nova'} Ata</h2>
 
-				<form onsubmit={handleSubmit}>
+				<h3 class="text-lg font-bold">{editingId ? 'Editar' : 'Nova'} Ata</h3>
+
+				<form class="mt-6 space-y-6" onsubmit={handleSubmit}>
 					<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-						<div>
-							<div class="mb-4">
-								<label class="mb-2 block text-sm font-bold text-gray-700" for="numero">
-									Número da Ata
+						<div class="space-y-4">
+							<div class="form-control w-full">
+								<label class="label" for="numero">
+									<span class="label-text font-semibold">Número da Ata</span>
 								</label>
 								<input
-									class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 									id="numero"
+									class="input input-bordered focus:input-primary w-full"
 									type="text"
 									bind:value={formData.numero}
 									required
 								/>
 							</div>
 
-							<div class="mb-4">
-								<label class="mb-2 block text-sm font-bold text-gray-700" for="numeroSei">
-									Número SEI
+							<div class="form-control w-full">
+								<label class="label" for="numeroSei">
+									<span class="label-text font-semibold">Número SEI</span>
 								</label>
 								<input
-									class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 									id="numeroSei"
+									class="input input-bordered focus:input-primary w-full"
 									type="text"
 									bind:value={formData.numeroSei}
 									required
 								/>
 							</div>
 
-							<div class="mb-4">
-								<label class="mb-2 block text-sm font-bold text-gray-700" for="empresa">
-									Empresa
+							<div class="form-control w-full">
+								<label class="label" for="empresa">
+									<span class="label-text font-semibold">Empresa</span>
 								</label>
 								<select
-									class="focus:shadow-outline w-full rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 									id="empresa"
+									class="select select-bordered focus:select-primary w-full"
 									bind:value={formData.empresaId}
 									required
 								>
@@ -333,25 +367,25 @@
 								</select>
 							</div>
 
-							<div class="mb-4 grid grid-cols-2 gap-4">
-								<div>
-									<label class="mb-2 block text-sm font-bold text-gray-700" for="dataInicio">
-										Data Início
+							<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+								<div class="form-control w-full">
+									<label class="label" for="dataInicio">
+										<span class="label-text font-semibold">Data Início</span>
 									</label>
 									<input
-										class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 										id="dataInicio"
+										class="input input-bordered focus:input-primary w-full"
 										type="date"
 										bind:value={formData.dataInicio}
 									/>
 								</div>
-								<div>
-									<label class="mb-2 block text-sm font-bold text-gray-700" for="dataFim">
-										Data Fim
+								<div class="form-control w-full">
+									<label class="label" for="dataFim">
+										<span class="label-text font-semibold">Data Fim</span>
 									</label>
 									<input
-										class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 										id="dataFim"
+										class="input input-bordered focus:input-primary w-full"
 										type="date"
 										bind:value={formData.dataFim}
 									/>
@@ -359,81 +393,89 @@
 							</div>
 						</div>
 
-						<div class="flex flex-col">
-							<label class="mb-2 block text-sm font-bold text-gray-700" for="objetos">
-								Objetos Vinculados ({selectedObjetos.length})
-							</label>
+						<div class="space-y-4">
+							<div class="flex items-center justify-between">
+								<div class="font-semibold">Objetos Vinculados</div>
+								<span class="badge badge-outline">{selectedObjetos.length}</span>
+							</div>
 
-							<div class="relative mb-2">
+							<div class="form-control w-full">
+								<label class="label" for="buscar_objeto">
+									<span class="label-text font-semibold">Buscar objetos</span>
+								</label>
+								<div class="relative">
 									<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-									<Search size={16} class="text-gray-400" />
+										<Search size={16} class="text-base-content/40" />
 									</div>
 									<input
+										id="buscar_objeto"
 										type="text"
-									placeholder="Buscar objetos..."
-									class="focus:shadow-outline w-full rounded border py-2 pr-3 pl-10 text-sm leading-tight text-gray-700 shadow focus:outline-none"
+										placeholder="Digite para filtrar..."
+										class="input input-bordered focus:input-primary w-full pl-10"
 										bind:value={searchObjeto}
 									/>
 								</div>
+							</div>
 
-							<div
-								class="mb-4 flex-1 overflow-y-auto rounded border bg-gray-50 p-2"
-								style="max-height: 200px;"
-							>
+							<div class="border-base-300 max-h-52 overflow-y-auto rounded-lg border p-2">
 								{#if filteredObjetos.length === 0}
-									<p class="py-4 text-center text-sm text-gray-500">Nenhum objeto encontrado.</p>
+									<p class="text-base-content/60 px-2 py-3 text-center text-sm">
+										Nenhum objeto encontrado.
+									</p>
 								{:else}
-									<div class="space-y-1">
 									{#each filteredObjetos as objeto (objeto._id)}
-											<button
-												type="button"
-												class="flex w-full items-center justify-between rounded px-3 py-2 text-left text-sm hover:bg-gray-200 {selectedObjetos.includes(
-													objeto._id
-												)
-													? 'bg-blue-50 text-blue-700'
+										{@const isSelected = selectedObjetos.includes(objeto._id)}
+										<label
+											class="hover:bg-base-200/50 flex cursor-pointer items-center gap-3 rounded-md px-2 py-2 {isSelected
+												? 'bg-primary/5'
 												: ''}"
-												onclick={() => toggleObjeto(objeto._id)}
 										>
-												<span class="truncate">{objeto.nome}</span>
-												{#if selectedObjetos.includes(objeto._id)}
-													<Check size={16} class="text-blue-600" />
+											<input
+												type="checkbox"
+												class="checkbox checkbox-primary checkbox-sm"
+												checked={isSelected}
+												onchange={() => toggleObjeto(objeto._id)}
+												aria-label="Vincular objeto {objeto.nome}"
+											/>
+											<span class="flex-1 truncate text-sm">{objeto.nome}</span>
+											{#if isSelected}
+												<Check size={16} class="text-primary" />
 											{/if}
-											</button>
+										</label>
 									{/each}
-									</div>
 								{/if}
 							</div>
 
-							<div class="border-t pt-4">
-								<label class="mb-2 block text-sm font-bold text-gray-700" for="anexos">
-									Anexos
-								</label>
+							<div class="border-base-300 border-t pt-4">
+								<div class="font-semibold">Anexos</div>
+								<div class="mt-2 space-y-2">
 									<input
-									class="focus:shadow-outline mb-2 w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 										id="anexos"
 										type="file"
 										multiple
+										class="file-input file-input-bordered w-full"
 										onchange={handleAttachmentsSelect}
 									/>
 
 									{#if attachments.length > 0}
-									<div class="mt-2 max-h-40 space-y-2 overflow-y-auto">
-										{#each attachments as doc (doc._id)}
 										<div
-												class="flex items-center justify-between rounded bg-gray-100 p-2 text-sm"
+											class="border-base-300 max-h-40 space-y-2 overflow-y-auto rounded-lg border p-2"
 										>
+											{#each attachments as doc (doc._id)}
+												<div class="flex items-center justify-between gap-2 text-sm">
 													<a
 														href={doc.url}
 														target="_blank"
 														rel="noopener noreferrer"
-													class="max-w-[150px] truncate text-blue-600 hover:underline"
+														class="link link-primary max-w-[260px] truncate"
 													>
 														{doc.nome}
 													</a>
 													<button
 														type="button"
+														class="btn btn-ghost btn-xs text-error"
 														onclick={() => handleDeleteAttachment(doc._id)}
-													class="text-red-500 hover:text-red-700"
+														aria-label="Excluir anexo"
 													>
 														<X size={16} />
 													</button>
@@ -444,25 +486,23 @@
 								</div>
 							</div>
 						</div>
+					</div>
 
-					<div class="mt-6 flex items-center justify-end border-t pt-4">
-						<button
-							type="button"
-							onclick={closeModal}
-							class="mr-2 rounded bg-gray-300 px-4 py-2 font-bold text-gray-800 hover:bg-gray-400"
-						>
+					<div class="modal-action">
+						<button type="button" class="btn" onclick={closeModal} disabled={saving || uploading}>
 							Cancelar
 						</button>
-						<button
-							type="submit"
-							disabled={saving || uploading}
-							class="focus:shadow-outline rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none disabled:opacity-50"
-						>
+						<button type="submit" class="btn btn-primary" disabled={saving || uploading}>
+							{#if saving || uploading}
+								<span class="loading loading-spinner loading-sm"></span>
+							{/if}
 							{saving || uploading ? 'Salvando...' : 'Salvar'}
 						</button>
 					</div>
 				</form>
 			</div>
+			<button type="button" class="modal-backdrop" onclick={closeModal} aria-label="Fechar modal"
+			></button>
 		</div>
 	{/if}
-</div>
+</main>

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

@@ -2,8 +2,9 @@
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { useConvexClient, useQuery } from 'convex-svelte';
-	import { Pencil, Plus, Trash2, X } from 'lucide-svelte';
+	import { Pencil, Plus, Trash2, X, Package } from 'lucide-svelte';
 	import { maskCurrencyBRL } from '$lib/utils/masks';
+	import { resolve } from '$app/paths';
 
 	const client = useConvexClient();
 
@@ -116,56 +117,86 @@
 	}
 </script>
 
-<div class="container mx-auto p-6">
-	<div class="mb-6 flex items-center justify-between">
-		<h1 class="text-2xl font-bold">Objetos</h1>
+<main class="container mx-auto flex max-w-7xl flex-col px-4 py-4">
+	<div class="breadcrumbs mb-4 text-sm">
+		<ul>
+			<li><a href={resolve('/')} class="text-primary hover:underline">Dashboard</a></li>
+			<li><a href={resolve('/compras')} class="text-primary hover:underline">Compras</a></li>
+			<li>Objetos</li>
+		</ul>
+	</div>
+
+	<div class="mb-6">
+		<div class="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
+			<div class="flex items-center gap-4">
+				<div class="bg-primary/10 rounded-xl p-3">
+					<Package class="text-primary h-8 w-8" strokeWidth={2} />
+				</div>
+				<div>
+					<h1 class="text-primary text-3xl font-bold">Objetos</h1>
+					<p class="text-base-content/70">Cadastro e gestão de objetos e serviços</p>
+				</div>
+			</div>
 			<button
+				class="btn btn-primary gap-2 shadow-md transition-all hover:shadow-lg"
 				onclick={() => openModal()}
-			class="flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
 			>
-			<Plus size={20} />
+				<Plus class="h-5 w-5" strokeWidth={2} />
 				Novo Objeto
 			</button>
 		</div>
+	</div>
 
 	{#if loading}
-		<p>Carregando...</p>
+		<div class="flex items-center justify-center py-10">
+			<span class="loading loading-spinner loading-lg"></span>
+		</div>
 	{:else if error}
-		<p class="text-red-600">{error}</p>
+		<div class="alert alert-error">
+			<span>{error}</span>
+		</div>
 	{:else}
-		<div class="overflow-hidden rounded-lg bg-white shadow-md">
-			<table class="min-w-full divide-y divide-gray-200">
-				<thead class="bg-gray-50">
+		<div class="card bg-base-100/90 border-base-300 border shadow-xl backdrop-blur-sm">
+			<div class="card-body p-0">
+				<div class="overflow-x-auto">
+					<table class="table-zebra table w-full">
+						<thead class="from-base-300 to-base-200 sticky top-0 z-10 bg-linear-to-r shadow-md">
 							<tr>
-						<th
-							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+								<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
 									>Nome</th
 								>
-						<th
-							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+								<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
 									>Tipo</th
 								>
-						<th
-							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+								<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
 									>Unidade</th
 								>
-						<th
-							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
+								<th class="text-base-content border-base-400 border-b font-bold whitespace-nowrap"
 									>Valor Estimado</th
 								>
 								<th
-							class="px-6 py-3 text-right text-xs font-medium tracking-wider text-gray-500 uppercase"
+									class="text-base-content border-base-400 border-b text-right font-bold whitespace-nowrap"
 									>Ações</th
 								>
 							</tr>
 						</thead>
-				<tbody class="divide-y divide-gray-200 bg-white">
-					{#each objetos as objeto (objeto._id)}
+						<tbody>
+							{#if objetos.length === 0}
 								<tr>
-							<td class="px-6 py-4 whitespace-nowrap">
+									<td colspan="5" class="py-12 text-center">
+										<div class="text-base-content/60 flex flex-col items-center gap-2">
+											<p class="text-lg font-semibold">Nenhum objeto cadastrado</p>
+											<p class="text-sm">Clique em “Novo Objeto” para cadastrar.</p>
+										</div>
+									</td>
+								</tr>
+							{:else}
+								{#each objetos as objeto (objeto._id)}
+									<tr class="hover:bg-base-200/50 transition-colors">
+										<td>
 											<div class="flex flex-col">
 												<span class="font-medium">{objeto.nome}</span>
-									<span class="text-xs text-gray-500">
+												<span class="text-base-content/60 text-xs">
 													Efisco: {objeto.codigoEfisco}
 													{#if objeto.codigoCatmat}
 														| Catmat: {objeto.codigoCatmat}{/if}
@@ -174,92 +205,99 @@
 												</span>
 											</div>
 										</td>
-							<td class="px-6 py-4 whitespace-nowrap">
+										<td class="whitespace-nowrap">
 											<span
-									class="inline-flex rounded-full px-2 text-xs leading-5 font-semibold
-                  {objeto.tipo === 'servico'
-										? 'bg-green-100 text-green-800'
-										: 'bg-blue-100 text-blue-800'}"
+												class="badge badge-sm {objeto.tipo === 'servico'
+													? 'badge-success'
+													: 'badge-info'}"
 											>
 												{objeto.tipo === 'material' ? 'Material' : 'Serviço'}
 											</span>
 										</td>
-							<td class="px-6 py-4 whitespace-nowrap">{objeto.unidade}</td>
-							<td class="px-6 py-4 whitespace-nowrap">
+										<td class="whitespace-nowrap">{objeto.unidade}</td>
+										<td class="whitespace-nowrap">
 											{maskCurrencyBRL(objeto.valorEstimado) || 'R$ 0,00'}
 										</td>
-							<td class="px-6 py-4 text-right text-sm font-medium whitespace-nowrap">
+										<td class="text-right whitespace-nowrap">
+											<div class="flex items-center justify-end gap-1">
 												<button
+													type="button"
+													class="btn btn-ghost btn-sm"
+													aria-label="Editar objeto"
 													onclick={() => openModal(objeto)}
-									class="mr-4 text-indigo-600 hover:text-indigo-900"
 												>
 													<Pencil size={18} />
 												</button>
 												<button
+													type="button"
+													class="btn btn-ghost btn-sm text-error"
+													aria-label="Excluir objeto"
 													onclick={() => handleDelete(objeto._id)}
-									class="text-red-600 hover:text-red-900"
 												>
 													<Trash2 size={18} />
 												</button>
+											</div>
 										</td>
 									</tr>
 								{/each}
-					{#if objetos.length === 0}
-						<tr>
-							<td colspan="5" class="px-6 py-4 text-center text-gray-500"
-								>Nenhum objeto cadastrado.</td
-							>
-						</tr>
 							{/if}
 						</tbody>
 					</table>
 				</div>
+			</div>
+		</div>
 	{/if}
 
 	{#if showModal}
-		<div
-			class="fixed inset-0 z-50 flex h-full w-full items-center justify-center overflow-y-auto bg-black/40"
-		>
-			<div class="relative w-full max-w-md rounded-lg bg-white p-8 shadow-xl">
+		<div class="modal modal-open">
+			<div class="modal-box max-w-2xl">
 				<button
+					type="button"
+					class="btn btn-sm btn-circle absolute top-2 right-2"
 					onclick={closeModal}
-					class="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
+					aria-label="Fechar modal"
 				>
-					<X size={24} />
+					<X class="h-5 w-5" />
 				</button>
-				<h2 class="mb-6 text-xl font-bold">{editingId ? 'Editar' : 'Novo'} Objeto</h2>
 
-				<form onsubmit={handleSubmit}>
-					<div class="mb-4">
-						<label class="mb-2 block text-sm font-bold text-gray-700" for="nome"> Nome </label>
+				<h3 class="text-lg font-bold">{editingId ? 'Editar' : 'Novo'} Objeto</h3>
+
+				<form class="mt-6 space-y-4" onsubmit={handleSubmit}>
+					<div class="form-control w-full">
+						<label class="label" for="nome">
+							<span class="label-text font-semibold">Nome</span>
+						</label>
 						<input
-							class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 							id="nome"
+							class="input input-bordered focus:input-primary w-full"
 							type="text"
 							bind:value={formData.nome}
 							required
 						/>
 					</div>
 
-					<div class="mb-4 grid grid-cols-2 gap-4">
-						<div>
-							<label class="mb-2 block text-sm font-bold text-gray-700" for="tipo"> Tipo </label>
+					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+						<div class="form-control w-full">
+							<label class="label" for="tipo">
+								<span class="label-text font-semibold">Tipo</span>
+							</label>
 							<select
-								class="focus:shadow-outline w-full rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 								id="tipo"
+								class="select select-bordered focus:select-primary w-full"
 								bind:value={formData.tipo}
 							>
 								<option value="material">Material</option>
 								<option value="servico">Serviço</option>
 							</select>
 						</div>
-						<div>
-							<label class="mb-2 block text-sm font-bold text-gray-700" for="unidade">
-								Unidade
+
+						<div class="form-control w-full">
+							<label class="label" for="unidade">
+								<span class="label-text font-semibold">Unidade</span>
 							</label>
 							<input
-								class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 								id="unidade"
+								class="input input-bordered focus:input-primary w-full"
 								type="text"
 								bind:value={formData.unidade}
 								required
@@ -267,13 +305,13 @@
 						</div>
 					</div>
 
-					<div class="mb-4">
-						<label class="mb-2 block text-sm font-bold text-gray-700" for="codigoEfisco">
-							Código Efisco
+					<div class="form-control w-full">
+						<label class="label" for="codigoEfisco">
+							<span class="label-text font-semibold">Código Efisco</span>
 						</label>
 						<input
-							class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 							id="codigoEfisco"
+							class="input input-bordered focus:input-primary w-full"
 							type="text"
 							bind:value={formData.codigoEfisco}
 							required
@@ -281,88 +319,86 @@
 					</div>
 
 					{#if formData.tipo === 'material'}
-						<div class="mb-4">
-							<label class="mb-2 block text-sm font-bold text-gray-700" for="codigoCatmat">
-								Código Catmat
+						<div class="form-control w-full">
+							<label class="label" for="codigoCatmat">
+								<span class="label-text font-semibold">Código Catmat</span>
 							</label>
 							<input
-								class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 								id="codigoCatmat"
+								class="input input-bordered focus:input-primary w-full"
 								type="text"
 								bind:value={formData.codigoCatmat}
 							/>
 						</div>
 					{:else}
-						<div class="mb-4">
-							<label class="mb-2 block text-sm font-bold text-gray-700" for="codigoCatserv">
-								Código Catserv
+						<div class="form-control w-full">
+							<label class="label" for="codigoCatserv">
+								<span class="label-text font-semibold">Código Catserv</span>
 							</label>
 							<input
-								class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 								id="codigoCatserv"
+								class="input input-bordered focus:input-primary w-full"
 								type="text"
 								bind:value={formData.codigoCatserv}
 							/>
 						</div>
 					{/if}
 
-					<div class="mb-6">
-						<label class="mb-2 block text-sm font-bold text-gray-700" for="valor">
-							Valor Estimado
+					<div class="form-control w-full">
+						<label class="label" for="valor">
+							<span class="label-text font-semibold">Valor Estimado</span>
 						</label>
 						<input
-							class="focus:shadow-outline w-full appearance-none rounded border px-3 py-2 leading-tight text-gray-700 shadow focus:outline-none"
 							id="valor"
+							class="input input-bordered focus:input-primary w-full"
 							type="text"
+							placeholder="R$ 0,00"
 							bind:value={formData.valorEstimado}
 							oninput={(e) => (formData.valorEstimado = maskCurrencyBRL(e.currentTarget.value))}
-							placeholder="R$ 0,00"
 						/>
 					</div>
 
-					<div class="mb-6">
-						<label class="mb-2 block text-sm font-bold text-gray-700" for="atas">
-							Vincular Atas
+					<div class="form-control w-full">
+						<label class="label" for="atas">
+							<span class="label-text font-semibold">Vincular Atas</span>
 						</label>
-						<div class="max-h-40 overflow-y-auto rounded border p-2">
+						<div class="border-base-300 max-h-48 overflow-y-auto rounded-lg border p-2">
+							{#if atas.length === 0}
+								<p class="text-base-content/60 px-2 py-3 text-sm">Nenhuma ata disponível.</p>
+							{:else}
 								{#each atas as ata (ata._id)}
-								<div class="mb-2 flex items-center">
+									<label
+										class="hover:bg-base-200/50 flex cursor-pointer items-center gap-3 rounded-md px-2 py-2"
+									>
 										<input
 											type="checkbox"
-										id={`ata-${ata._id}`}
+											class="checkbox checkbox-primary checkbox-sm"
 											checked={formData.atas.includes(ata._id)}
 											onchange={() => toggleAtaSelection(ata._id)}
-										class="mr-2 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+											aria-label="Vincular ata {ata.numero}"
 										/>
-									<label for={`ata-${ata._id}`} class="text-sm text-gray-700">
-										{ata.numero} ({ata.numeroSei})
+										<span class="text-sm">{ata.numero} ({ata.numeroSei})</span>
 									</label>
-								</div>
 								{/each}
-							{#if atas.length === 0}
-								<p class="text-sm text-gray-500">Nenhuma ata disponível.</p>
 							{/if}
 						</div>
 					</div>
 
-					<div class="flex items-center justify-end">
-						<button
-							type="button"
-							onclick={closeModal}
-							class="mr-2 rounded bg-gray-300 px-4 py-2 font-bold text-gray-800 hover:bg-gray-400"
-						>
+					<div class="modal-action">
+						<button type="button" class="btn" onclick={closeModal} disabled={saving}>
 							Cancelar
 						</button>
-						<button
-							type="submit"
-							disabled={saving}
-							class="focus:shadow-outline rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none disabled:opacity-50"
-						>
+						<button type="submit" class="btn btn-primary" disabled={saving}>
+							{#if saving}
+								<span class="loading loading-spinner loading-sm"></span>
+							{/if}
 							{saving ? 'Salvando...' : 'Salvar'}
 						</button>
 					</div>
 				</form>
 			</div>
+			<button type="button" class="modal-backdrop" onclick={closeModal} aria-label="Fechar modal"
+			></button>
 		</div>
 	{/if}
-</div>
+</main>

apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/excluir/+page.svelte

@@ -14,7 +14,7 @@
 		Users,
 		Inbox,
 		Search,
-		AlertTriangle,
+		TriangleAlert,
 		User
 	} from 'lucide-svelte';
 	import type { FunctionReturnType } from 'convex/server';
@@ -30,6 +30,7 @@
 	const list = $derived(funcionariosQuery.data ?? []);
 
 	let funcionarioToDelete = $derived<Funcionario | null>(null);
+	let deleting = $state(false);
 
 	let filtro = $state('');
 	let notice: { kind: 'success' | 'error'; text: string } | null = $state(null);
@@ -48,6 +49,7 @@
 		if (!funcionarioToDelete) return;
 
 		try {
+			deleting = true;
 			await client.mutation(api.funcionarios.remove, { id: funcionarioToDelete._id });
 			closeDeleteModal();
 			notice = {
@@ -56,6 +58,8 @@
 			};
 		} catch {
 			notice = { kind: 'error', text: 'Erro ao excluir cadastro. Tente novamente.' };
+		} finally {
+			deleting = false;
 		}
 	}
 
@@ -243,12 +247,12 @@
 <dialog id="delete_modal_func_excluir" class="modal">
 	<div class="modal-box max-w-md">
 		<h3 class="text-error mb-4 flex items-center gap-2 text-2xl font-bold">
-			<AlertTriangle class="h-7 w-7" strokeWidth={2} />
+			<TriangleAlert class="h-7 w-7" strokeWidth={2} />
 			Confirmar Exclusão
 		</h3>
 
 		<div class="alert alert-warning mb-4">
-			<AlertTriangle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
+			<TriangleAlert class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
 			<div>
 				<span class="font-bold">Atenção!</span>
 				<p class="text-sm">Esta ação não pode ser desfeita!</p>
@@ -280,16 +284,16 @@
 		{/if}
 
 		<div class="modal-action justify-between">
-			<button class="btn gap-2" onclick={closeDeleteModal} disabled={funcionarioToDelete !== null}>
+			<button class="btn gap-2" onclick={closeDeleteModal} disabled={deleting}>
 				<X class="h-5 w-5" strokeWidth={2} />
 				Cancelar
 			</button>
 			<button
 				class="btn btn-error gap-2"
 				onclick={confirmDelete}
-				disabled={funcionarioToDelete !== null}
+				disabled={deleting || funcionarioToDelete === null}
 			>
-				{#if funcionarioToDelete}
+				{#if deleting}
 					<span class="loading loading-spinner loading-sm"></span>
 					Excluindo...
 				{:else}