From 9f523d99a5b6912186ef9af1cca5cc6dc70987ae Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Wed, 10 Dec 2025 06:44:29 -0300
Subject: [PATCH] refactor: update modal z-index for improved visibility and
 enhance alert deletion confirmation with additional messaging and logging;
 ensure fallback for user data in diagnostics card

---
 apps/web/src/lib/components/AlertModal.svelte |  2 +-
 .../src/lib/components/ConfirmModal.svelte    |  2 +-
 .../lib/components/ti/AlertConfigModal.svelte | 13 ++++++--
 .../components/ti/AlertDiagnosticsCard.svelte | 30 +++++++++++++------
 .../(dashboard)/ti/monitoramento/+page.svelte | 14 ++++-----
 5 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/apps/web/src/lib/components/AlertModal.svelte b/apps/web/src/lib/components/AlertModal.svelte
index 1ed192a..873c80f 100644
--- a/apps/web/src/lib/components/AlertModal.svelte
+++ b/apps/web/src/lib/components/AlertModal.svelte
@@ -25,7 +25,7 @@
 
 {#if open}
 	<div
-		class="pointer-events-none fixed inset-0 z-50"
+		class="pointer-events-none fixed inset-0 z-[9999]"
 		style="animation: fadeIn 0.2s ease-out;"
 		role="dialog"
 		aria-modal="true"
diff --git a/apps/web/src/lib/components/ConfirmModal.svelte b/apps/web/src/lib/components/ConfirmModal.svelte
index 9609a5b..b7fdc22 100644
--- a/apps/web/src/lib/components/ConfirmModal.svelte
+++ b/apps/web/src/lib/components/ConfirmModal.svelte
@@ -34,7 +34,7 @@
 
 {#if open}
 	<div
-		class="pointer-events-none fixed inset-0 z-50"
+		class="pointer-events-none fixed inset-0 z-[9999]"
 		style="animation: fadeIn 0.2s ease-out;"
 		role="dialog"
 		aria-modal="true"
diff --git a/apps/web/src/lib/components/ti/AlertConfigModal.svelte b/apps/web/src/lib/components/ti/AlertConfigModal.svelte
index b92fd75..f2e8e44 100644
--- a/apps/web/src/lib/components/ti/AlertConfigModal.svelte
+++ b/apps/web/src/lib/components/ti/AlertConfigModal.svelte
@@ -114,14 +114,19 @@
 	}
 
 	function handleDeleteClick(alertId: Id<'alertConfigurations'>) {
-		confirmMessage = 'Tem certeza que deseja deletar este alerta?';
+		confirmMessage = 'Tem certeza que deseja deletar este alerta? Esta ação não pode ser desfeita.';
 		confirmCallback = () => deleteAlert(alertId);
 		showConfirmModal = true;
+		console.log('Modal de confirmação aberto para deletar alerta:', alertId);
 	}
 
 	async function deleteAlert(alertId: Id<'alertConfigurations'>) {
 		try {
+			console.log('Deletando alerta:', alertId);
 			await client.mutation(api.monitoramento.deletarAlerta, { alertId });
+			console.log('Alerta deletado com sucesso');
+			// Aguardar um pouco para garantir que a query seja atualizada
+			await new Promise(resolve => setTimeout(resolve, 200));
 		} catch (error) {
 			console.error('Erro ao deletar alerta:', error);
 			alertMessage = 'Erro ao deletar alerta. Tente novamente.';
@@ -557,12 +562,14 @@
 	message={confirmMessage}
 	confirmText="Deletar"
 	cancelText="Cancelar"
-	onConfirm={() => {
+	onConfirm={async () => {
 		if (confirmCallback) {
-			confirmCallback();
+			await confirmCallback();
 			confirmCallback = null;
 		}
 		showConfirmModal = false;
+		// Aguardar um pouco para garantir que a query seja atualizada
+		await new Promise(resolve => setTimeout(resolve, 200));
 	}}
 	onCancel={() => {
 		confirmCallback = null;
diff --git a/apps/web/src/lib/components/ti/AlertDiagnosticsCard.svelte b/apps/web/src/lib/components/ti/AlertDiagnosticsCard.svelte
index ba76d57..db6c483 100644
--- a/apps/web/src/lib/components/ti/AlertDiagnosticsCard.svelte
+++ b/apps/web/src/lib/components/ti/AlertDiagnosticsCard.svelte
@@ -38,7 +38,19 @@
 				<span>Erro ao carregar diagnóstico</span>
 			</div>
 		{:else}
-			{@const config = configQuery}
+			{@const config = configQuery || {
+				templateExiste: false,
+				templateInfo: null,
+				roleTiMasterExiste: false,
+				usuariosTiMaster: [],
+				configSmtpAtiva: false,
+				configSmtpInfo: null,
+				emailsPendentes: 0,
+				emailsFalha: 0,
+				alertasAtivos: 0,
+				alertasComEmail: 0
+			}}
+			{@const usuariosTiMaster = Array.isArray(config.usuariosTiMaster) ? config.usuariosTiMaster : []}
 			
 			<!-- Template -->
 			<div class="divider">Template de Email</div>
@@ -80,7 +92,7 @@
 					<div class="flex-1">
 						<p class="font-semibold text-success">Perfil TI_MASTER encontrado</p>
 						<p class="text-sm text-base-content/70">
-							{config.usuariosTiMaster.length} usuário(s) com este perfil
+							{usuariosTiMaster?.length || 0} usuário(s) com este perfil
 						</p>
 					</div>
 				{:else}
@@ -98,18 +110,18 @@
 			</div>
 
 			<!-- Usuários TI_MASTER -->
-			{#if config.usuariosTiMaster.length > 0}
+			{#if usuariosTiMaster.length > 0}
 				<div class="ml-10 mt-2 space-y-2">
-					{#each config.usuariosTiMaster as usuario}
+					{#each usuariosTiMaster as usuario}
 						<div class="flex items-center gap-2">
-							{#if usuario.temEmail}
+							{#if usuario?.temEmail}
 								<CheckCircle class="h-4 w-4 text-success" />
 							{:else}
 								<XCircle class="h-4 w-4 text-error" />
 							{/if}
 							<span class="text-sm">
-								{usuario.nome}
-								{#if usuario.email}
+								{usuario?.nome || 'Usuário desconhecido'}
+								{#if usuario?.email}
 									<span class="text-base-content/60">({usuario.email})</span>
 								{:else}
 									<span class="text-error"> - Sem email cadastrado</span>
@@ -179,8 +191,8 @@
 
 			<!-- Resumo -->
 			<div class="divider">Resumo</div>
-			<div class="alert {config.templateExiste && config.roleTiMasterExiste && config.usuariosTiMaster.some(u => u.temEmail) && config.configSmtpAtiva ? 'alert-success' : 'alert-warning'}">
-				{#if config.templateExiste && config.roleTiMasterExiste && config.usuariosTiMaster.some(u => u.temEmail) && config.configSmtpAtiva}
+			<div class="alert {config.templateExiste && config.roleTiMasterExiste && usuariosTiMaster.some(u => u?.temEmail) && config.configSmtpAtiva ? 'alert-success' : 'alert-warning'}">
+				{#if config.templateExiste && config.roleTiMasterExiste && usuariosTiMaster.some(u => u?.temEmail) && config.configSmtpAtiva}
 					<CheckCircle class="h-6 w-6" />
 					<div>
 						<p class="font-semibold">✅ Sistema configurado corretamente</p>
diff --git a/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte b/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte
index 35a0e6a..112d37b 100644
--- a/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/monitoramento/+page.svelte
@@ -67,15 +67,15 @@
 		</div>
 	{/if}
 
-	<!-- Diagnóstico de Configuração -->
-	<div class="mb-6">
-		{#if !hasError}
-			<AlertDiagnosticsCard />
-		{/if}
-	</div>
-
 	<!-- Card de Monitoramento -->
 	{#if !hasError}
 		<SystemMonitorCardLocal />
 	{/if}
+
+	<!-- Diagnóstico de Configuração -->
+	<div class="mb-6 mt-6">
+		{#if !hasError}
+			<AlertDiagnosticsCard />
+		{/if}
+	</div>
 </div>