feat: enhance vacation approval process by adding notification system for employees, including email alerts and in-app notifications; improve error handling and user feedback during vacation management

apps/web/src/routes/(dashboard)/ti/erros-servidor/+page.svelte

@@ -26,8 +26,8 @@
 	let copiado = $state(false);
 
 	// Filtros
-	let filtroStatusCode = $state<number | undefined>(undefined);
-	let filtroNotificado = $state<boolean | undefined>(undefined);
+	let filtroStatusCode = $state<string>('');
+	let filtroNotificado = $state<string>('');
 	let filtroDataInicio = $state<string>('');
 	let filtroDataFim = $state<string>('');
 
@@ -36,8 +36,8 @@
 	// Argumentos para as queries (usando $derived para reatividade)
 	const argsErros = $derived({
 		limite,
-		statusCode: filtroStatusCode,
-		notificado: filtroNotificado,
+		statusCode: filtroStatusCode ? Number(filtroStatusCode) : undefined,
+		notificado: filtroNotificado === '' ? undefined : filtroNotificado === 'true',
 		dataInicio: filtroDataInicio ? new Date(filtroDataInicio).getTime() : undefined,
 		dataFim: filtroDataFim ? new Date(filtroDataFim + 'T23:59:59').getTime() : undefined
 	});
@@ -132,8 +132,8 @@
 	}
 
 	function limparFiltros() {
-		filtroStatusCode = undefined;
-		filtroNotificado = undefined;
+		filtroStatusCode = '';
+		filtroNotificado = '';
 		filtroDataInicio = '';
 		filtroDataFim = '';
 	}
@@ -248,33 +248,20 @@
 							<label class="label">
 								<span class="label-text">Código HTTP</span>
 							</label>
-							<select
-								class="select select-bordered"
-								bind:value={filtroStatusCode}
-								onchange={(e) => {
-									filtroStatusCode = e.target.value ? Number(e.target.value) : undefined;
-								}}
-							>
-								<option value={undefined}>Todos</option>
-								<option value={404}>404 - Não Encontrado</option>
-								<option value={500}>500 - Erro Interno</option>
+							<select class="select select-bordered" bind:value={filtroStatusCode}>
+								<option value="">Todos</option>
+								<option value="404">404 - Não Encontrado</option>
+								<option value="500">500 - Erro Interno</option>
 							</select>
 						</div>
 						<div class="form-control">
 							<label class="label">
 								<span class="label-text">Status Notificação</span>
 							</label>
-							<select
-								class="select select-bordered"
-								bind:value={filtroNotificado}
-								onchange={(e) => {
-									filtroNotificado =
-										e.target.value === '' ? undefined : e.target.value === 'true';
-								}}
-							>
-								<option value={undefined}>Todos</option>
-								<option value={true}>Notificados</option>
-								<option value={false}>Não Notificados</option>
+							<select class="select select-bordered" bind:value={filtroNotificado}>
+								<option value="">Todos</option>
+								<option value="true">Notificados</option>
+								<option value="false">Não Notificados</option>
 							</select>
 						</div>
 						<div class="form-control">

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

@@ -1,7 +1,25 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import SystemMonitorCardLocal from '$lib/components/ti/SystemMonitorCardLocal.svelte';
+	import AlertDiagnosticsCard from '$lib/components/ti/AlertDiagnosticsCard.svelte';
 	import { Monitor, ArrowLeft } from 'lucide-svelte';
+	import { onMount } from 'svelte';
+
+	let error = $state<Error | null>(null);
+	let hasError = $derived(!!error);
+
+	onMount(() => {
+		// Capturar erros não tratados
+		window.addEventListener('error', (event) => {
+			console.error('Erro capturado na página de monitoramento:', event.error);
+			error = event.error;
+		});
+
+		window.addEventListener('unhandledrejection', (event) => {
+			console.error('Promise rejeitada na página de monitoramento:', event.reason);
+			error = event.reason instanceof Error ? event.reason : new Error(String(event.reason));
+		});
+	});
 </script>
 
 <div class="container mx-auto max-w-7xl px-4 py-6">
@@ -26,6 +44,38 @@
 		</a>
 	</div>
 
+	{#if hasError}
+		<div class="alert alert-error mb-6">
+			<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>
+			<div>
+				<h3 class="font-bold">Erro ao carregar página</h3>
+				<div class="text-sm">{error?.message || 'Erro desconhecido'}</div>
+			</div>
+			<button class="btn btn-sm" onclick={() => (error = null)}>Fechar</button>
+		</div>
+	{/if}
+
+	<!-- Diagnóstico de Configuração -->
+	<div class="mb-6">
+		{#if !hasError}
+			<AlertDiagnosticsCard />
+		{/if}
+	</div>
+
 	<!-- Card de Monitoramento -->
-	<SystemMonitorCardLocal />
+	{#if !hasError}
+		<SystemMonitorCardLocal />
+	{/if}
 </div>