From b8a2e67f3a89253d90b83792140ca56ed46a5274 Mon Sep 17 00:00:00 2001
From: killer-cf <costa.kilder@live.com>
Date: Sat, 22 Nov 2025 10:25:43 -0300
Subject: [PATCH] refactor: Update email configuration page to load data once
 and improve error handling, and add Svelte agent rules documentation.

---
 .agent/rules/svelte-rules.md                  |   28 +
 .../ti/configuracoes-email/+page.svelte       | 1034 ++++++++---------
 2 files changed, 530 insertions(+), 532 deletions(-)
 create mode 100644 .agent/rules/svelte-rules.md

diff --git a/.agent/rules/svelte-rules.md b/.agent/rules/svelte-rules.md
new file mode 100644
index 0000000..30b100a
--- /dev/null
+++ b/.agent/rules/svelte-rules.md
@@ -0,0 +1,28 @@
+---
+trigger: glob
+globs: **/*.svelte.ts,**/*.svelte
+---
+
+You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:
+
+## Available MCP Tools:
+
+### 1. list-sections
+
+Use this FIRST to discover all available documentation sections. Returns a structured list with titles, use_cases, and paths.
+When asked about Svelte or SvelteKit topics, ALWAYS use this tool at the start of the chat to find relevant sections.
+
+### 2. get-documentation
+
+Retrieves full documentation content for specific sections. Accepts single or multiple sections.
+After calling the list-sections tool, you MUST analyze the returned documentation sections (especially the use_cases field) and then use the get-documentation tool to fetch ALL documentation sections that are relevant for the user's task.
+
+### 3. svelte-autofixer
+
+Analyzes Svelte code and returns issues and suggestions.
+You MUST use this tool whenever writing Svelte code before sending it to the user. Keep calling it until no issues or suggestions are returned.
+
+### 4. playground-link
+
+Generates a Svelte Playground link with the provided code.
+After completing the code, ask the user if they want a playground link. Only call this tool after user confirmation and NEVER if code was written to files in their project.
diff --git a/apps/web/src/routes/(dashboard)/ti/configuracoes-email/+page.svelte b/apps/web/src/routes/(dashboard)/ti/configuracoes-email/+page.svelte
index 15a7f1a..3e316e6 100644
--- a/apps/web/src/routes/(dashboard)/ti/configuracoes-email/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/configuracoes-email/+page.svelte
@@ -1,574 +1,544 @@
 <script lang="ts">
-  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 { 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 type { FunctionReference } from 'convex/server';
 
-  const client = useConvexClient();
-  const currentUser = useQuery(api.auth.getCurrentUser, {});
-  const configAtual = useQuery(api.configuracaoEmail.obterConfigEmail, {});
+	const client = useConvexClient();
+	const currentUser = useQuery(api.auth.getCurrentUser as FunctionReference<'query'>);
+	const configAtual = useQuery(api.configuracaoEmail.obterConfigEmail);
 
-  let servidor = $state("");
-  let porta = $state(587);
-  let usuario = $state("");
-  let senha = $state("");
-  let emailRemetente = $state("");
-  let nomeRemetente = $state("");
-  let usarSSL = $state(false);
-  let usarTLS = $state(true);
-  let processando = $state(false);
-  let testando = $state(false);
-  let mensagem = $state<{ tipo: "success" | "error"; texto: string } | null>(
-    null,
-  );
+	let servidor = $state('');
+	let porta = $state(587);
+	let usuario = $state('');
+	let senha = $state('');
+	let emailRemetente = $state('');
+	let nomeRemetente = $state('');
+	let usarSSL = $state(false);
+	let usarTLS = $state(true);
+	let processando = $state(false);
+	let testando = $state(false);
+	let mensagem = $state<{ tipo: 'success' | 'error'; texto: string } | null>(null);
 
-  function mostrarMensagem(tipo: "success" | "error", texto: string) {
-    mensagem = { tipo, texto };
-    setTimeout(() => {
-      mensagem = null;
-    }, 5000);
-  }
+	function mostrarMensagem(tipo: 'success' | 'error', texto: string) {
+		mensagem = { tipo, texto };
+		setTimeout(() => {
+			mensagem = null;
+		}, 5000);
+	}
 
-  // Carregar config existente
-  $effect(() => {
-    if (configAtual?.data) {
-      servidor = configAtual.data.servidor || "";
-      porta = configAtual.data.porta || 587;
-      usuario = configAtual.data.usuario || "";
-      emailRemetente = configAtual.data.emailRemetente || "";
-      nomeRemetente = configAtual.data.nomeRemetente || "";
-      usarSSL = configAtual.data.usarSSL || false;
-      usarTLS = configAtual.data.usarTLS || true;
-    }
-  });
+	let dataLoaded = $state(false);
 
-  // Tornar SSL e TLS mutuamente exclusivos
-  $effect(() => {
-    if (usarSSL && usarTLS) {
-      // Se ambos estão marcados, priorizar TLS por padrão
-      usarSSL = false;
-    }
-  });
+	// Carregar config existente apenas uma vez
+	$effect(() => {
+		if (configAtual?.data && !dataLoaded) {
+			servidor = configAtual.data.servidor || '';
+			porta = configAtual.data.porta || 587;
+			usuario = configAtual.data.usuario || '';
+			emailRemetente = configAtual.data.emailRemetente || '';
+			nomeRemetente = configAtual.data.nomeRemetente || '';
+			usarSSL = configAtual.data.usarSSL || false;
+			usarTLS = configAtual.data.usarTLS || true;
+			dataLoaded = true;
+		}
+	});
 
-  function toggleSSL() {
-    usarSSL = !usarSSL;
-    if (usarSSL) {
-      usarTLS = false;
-    }
-  }
+	function toggleSSL() {
+		usarSSL = !usarSSL;
+		if (usarSSL) {
+			usarTLS = false;
+		}
+	}
 
-  function toggleTLS() {
-    usarTLS = !usarTLS;
-    if (usarTLS) {
-      usarSSL = false;
-    }
-  }
+	function toggleTLS() {
+		usarTLS = !usarTLS;
+		if (usarTLS) {
+			usarSSL = false;
+		}
+	}
 
-  async function salvarConfiguracao() {
-    // Validação de campos obrigatórios
-    if (
-      !servidor?.trim() ||
-      !porta ||
-      !usuario?.trim() ||
-      !emailRemetente?.trim() ||
-      !nomeRemetente?.trim()
-    ) {
-      mostrarMensagem("error", "Preencha todos os campos obrigatórios");
-      return;
-    }
+	async function salvarConfiguracao() {
+		// Validação de campos obrigatórios
+		if (
+			!servidor?.trim() ||
+			!porta ||
+			!usuario?.trim() ||
+			!emailRemetente?.trim() ||
+			!nomeRemetente?.trim()
+		) {
+			mostrarMensagem('error', 'Preencha todos os campos obrigatórios');
+			return;
+		}
 
-    // Validação de porta (1-65535)
-    const portaNum = Number(porta);
-    if (isNaN(portaNum) || portaNum < 1 || portaNum > 65535) {
-      mostrarMensagem("error", "Porta deve ser um número entre 1 e 65535");
-      return;
-    }
+		// Validação de porta (1-65535)
+		const portaNum = Number(porta);
+		if (isNaN(portaNum) || portaNum < 1 || portaNum > 65535) {
+			mostrarMensagem('error', 'Porta deve ser um número entre 1 e 65535');
+			return;
+		}
 
-    // Validação de formato de email
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(emailRemetente.trim())) {
-      mostrarMensagem("error", "Email remetente inválido");
-      return;
-    }
+		// Validação de formato de email
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailRegex.test(emailRemetente.trim())) {
+			mostrarMensagem('error', 'Email remetente inválido');
+			return;
+		}
 
-    // Validação de senha: obrigatória apenas se não houver configuração existente
-    const temConfigExistente = configAtual?.data?.ativo;
-    if (!temConfigExistente && !senha) {
-      mostrarMensagem("error", "Senha é obrigatória para nova configuração");
-      return;
-    }
+		// Validação de senha: obrigatória apenas se não houver configuração existente
+		const temConfigExistente = configAtual?.data?.ativo;
+		if (!temConfigExistente && !senha) {
+			mostrarMensagem('error', 'Senha é obrigatória para nova configuração');
+			return;
+		}
 
-    if (!currentUser?.data) {
-      mostrarMensagem("error", "Usuário não autenticado");
-      return;
-    }
+		if (!currentUser?.data) {
+			mostrarMensagem('error', 'Usuário não autenticado');
+			return;
+		}
 
-    processando = true;
-    try {
-      const resultado = await client.mutation(
-        api.configuracaoEmail.salvarConfigEmail,
-        {
-          servidor: servidor.trim(),
-          porta: portaNum,
-          usuario: usuario.trim(),
-          senha: senha || "", // Senha vazia será tratada no backend
-          emailRemetente: emailRemetente.trim(),
-          nomeRemetente: nomeRemetente.trim(),
-          usarSSL,
-          usarTLS,
-          configuradoPorId: currentUser.data._id as Id<"usuarios">,
-        },
-      );
+		processando = true;
+		try {
+			const resultado = await client.mutation(api.configuracaoEmail.salvarConfigEmail, {
+				servidor: servidor.trim(),
+				porta: portaNum,
+				usuario: usuario.trim(),
+				senha: senha || '', // Senha vazia será tratada no backend
+				emailRemetente: emailRemetente.trim(),
+				nomeRemetente: nomeRemetente.trim(),
+				usarSSL,
+				usarTLS,
+				configuradoPorId: currentUser.data._id as Id<'usuarios'>
+			});
 
-      if (resultado.sucesso) {
-        mostrarMensagem("success", "Configuração salva com sucesso!");
-        senha = ""; // Limpar senha
-      } else {
-        mostrarMensagem("error", resultado.erro);
-      }
-    } catch (error: any) {
-      console.error("Erro ao salvar configuração:", error);
-      mostrarMensagem("error", error.message || "Erro ao salvar configuração");
-    } finally {
-      processando = false;
-    }
-  }
+			if (resultado.sucesso) {
+				mostrarMensagem('success', 'Configuração salva com sucesso!');
+				senha = ''; // Limpar senha
+			} else {
+				mostrarMensagem('error', resultado.erro);
+			}
+		} catch (error) {
+			if (error instanceof Error) {
+				console.error('Erro ao salvar configuração:', error);
+				mostrarMensagem('error', error.message || 'Erro ao salvar configuração');
+			}
+		} finally {
+			processando = false;
+		}
+	}
 
-  async function testarConexao() {
-    if (!servidor?.trim() || !porta || !usuario?.trim() || !senha) {
-      mostrarMensagem("error", "Preencha os dados de conexão antes de testar");
-      return;
-    }
+	async function testarConexao() {
+		if (!servidor?.trim() || !porta || !usuario?.trim() || !senha) {
+			mostrarMensagem('error', 'Preencha os dados de conexão antes de testar');
+			return;
+		}
 
-    // Validação de porta
-    const portaNum = Number(porta);
-    if (isNaN(portaNum) || portaNum < 1 || portaNum > 65535) {
-      mostrarMensagem("error", "Porta deve ser um número entre 1 e 65535");
-      return;
-    }
+		// Validação de porta
+		const portaNum = Number(porta);
+		if (isNaN(portaNum) || portaNum < 1 || portaNum > 65535) {
+			mostrarMensagem('error', 'Porta deve ser um número entre 1 e 65535');
+			return;
+		}
 
-    testando = true;
-    try {
-      const resultado = await client.action(
-        api.configuracaoEmail.testarConexaoSMTP,
-        {
-          servidor: servidor.trim(),
-          porta: portaNum,
-          usuario: usuario.trim(),
-          senha: senha,
-          usarSSL,
-          usarTLS,
-        },
-      );
+		testando = true;
+		try {
+			const resultado = await client.action(api.configuracaoEmail.testarConexaoSMTP, {
+				servidor: servidor.trim(),
+				porta: portaNum,
+				usuario: usuario.trim(),
+				senha: senha,
+				usarSSL,
+				usarTLS
+			});
 
-      if (resultado.sucesso) {
-        mostrarMensagem(
-          "success",
-          "Conexão testada com sucesso! Servidor SMTP está respondendo.",
-        );
-      } else {
-        mostrarMensagem("error", `Erro ao testar conexão: ${resultado.erro}`);
-      }
-    } catch (error: any) {
-      console.error("Erro ao testar conexão:", error);
-      mostrarMensagem(
-        "error",
-        error.message || "Erro ao conectar com o servidor SMTP",
-      );
-    } finally {
-      testando = false;
-    }
-  }
+			if (resultado.sucesso) {
+				mostrarMensagem('success', 'Conexão testada com sucesso! Servidor SMTP está respondendo.');
+			} else {
+				mostrarMensagem('error', `Erro ao testar conexão: ${resultado.erro}`);
+			}
+		} catch (error) {
+			if (error instanceof Error) {
+				console.error('Erro ao testar conexão:', error);
+				mostrarMensagem('error', error.message || 'Erro ao conectar com o servidor SMTP');
+			}
+		} finally {
+			testando = false;
+		}
+	}
 
-  const statusConfig = $derived(
-    configAtual?.data?.ativo ? "Configurado" : "Não configurado",
-  );
+	const statusConfig = $derived(configAtual?.data?.ativo ? 'Configurado' : 'Não configurado');
 
-  const isLoading = $derived(configAtual === undefined);
-  const hasError = $derived(configAtual === null && !isLoading);
+	const isLoading = $derived(configAtual === undefined);
 </script>
 
-<div class="container mx-auto px-4 py-6 max-w-4xl">
-  <!-- Header -->
-  <div class="flex items-center justify-between mb-6">
-    <div class="flex items-center gap-4">
-      <div class="p-3 bg-secondary/10 rounded-xl">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-8 w-8 text-secondary"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-          />
-        </svg>
-      </div>
-      <div>
-        <h1 class="text-3xl font-bold text-base-content">
-          Configurações de Email (SMTP)
-        </h1>
-        <p class="text-base-content/60 mt-1">
-          Configurar servidor de email para envio de notificações
-        </p>
-      </div>
-    </div>
-  </div>
+<div class="container mx-auto max-w-4xl px-4 py-6">
+	<!-- Header -->
+	<div class="mb-6 flex items-center justify-between">
+		<div class="flex items-center gap-4">
+			<div class="bg-secondary/10 rounded-xl p-3">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="text-secondary h-8 w-8"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+					/>
+				</svg>
+			</div>
+			<div>
+				<h1 class="text-base-content text-3xl font-bold">Configurações de Email (SMTP)</h1>
+				<p class="text-base-content/60 mt-1">
+					Configurar servidor de email para envio de notificações
+				</p>
+			</div>
+		</div>
+	</div>
 
-  <!-- Mensagens -->
-  {#if mensagem}
-    <div
-      class="alert mb-6"
-      class:alert-success={mensagem.tipo === "success"}
-      class:alert-error={mensagem.tipo === "error"}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        {#if mensagem.tipo === "success"}
-          <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"
-          />
-        {:else}
-          <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"
-          />
-        {/if}
-      </svg>
-      <span>{mensagem.texto}</span>
-    </div>
-  {/if}
+	<!-- Mensagens -->
+	{#if mensagem}
+		<div
+			class="alert mb-6"
+			class:alert-success={mensagem.tipo === 'success'}
+			class:alert-error={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"
+			>
+				{#if mensagem.tipo === 'success'}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span>{mensagem.texto}</span>
+		</div>
+	{/if}
 
-  <!-- Loading State -->
-  {#if isLoading}
-    <div class="alert alert-info mb-6">
-      <span class="loading loading-spinner loading-sm"></span>
-      <span>Carregando configurações...</span>
-    </div>
-  {/if}
+	<!-- Loading State -->
+	{#if isLoading}
+		<div class="alert alert-info mb-6">
+			<span class="loading loading-spinner loading-sm"></span>
+			<span>Carregando configurações...</span>
+		</div>
+	{/if}
 
-  <!-- Status -->
-  {#if !isLoading}
-    <div
-      class="alert {configAtual?.data?.ativo
-        ? 'alert-success'
-        : 'alert-warning'} mb-6"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        class="stroke-current shrink-0 w-6 h-6"
-      >
-        {#if configAtual?.data?.ativo}
-          <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"
-          />
-        {:else}
-          <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"
-          />
-        {/if}
-      </svg>
-      <span>
-        <strong>Status:</strong>
-        {statusConfig}
-        {#if configAtual?.data?.testadoEm}
-          - Última conexão testada em {new Date(
-            configAtual.data.testadoEm,
-          ).toLocaleString("pt-BR")}
-        {/if}
-      </span>
-    </div>
-  {/if}
+	<!-- Status -->
+	{#if !isLoading}
+		<div class="alert {configAtual?.data?.ativo ? 'alert-success' : 'alert-warning'} mb-6">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				class="h-6 w-6 shrink-0 stroke-current"
+			>
+				{#if configAtual?.data?.ativo}
+					<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"
+					/>
+				{:else}
+					<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"
+					/>
+				{/if}
+			</svg>
+			<span>
+				<strong>Status:</strong>
+				{statusConfig}
+				{#if configAtual?.data?.testadoEm}
+					- Última conexão testada em {new Date(configAtual.data.testadoEm).toLocaleString('pt-BR')}
+				{/if}
+			</span>
+		</div>
+	{/if}
 
-  <!-- Formulário -->
-  {#if !isLoading}
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Dados do Servidor SMTP</h2>
+	<!-- Formulário -->
+	{#if !isLoading}
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Dados do Servidor SMTP</h2>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <!-- Servidor -->
-          <div class="form-control md:col-span-1">
-            <label class="label" for="smtp-servidor">
-              <span class="label-text font-medium">Servidor SMTP *</span>
-            </label>
-            <input
-              id="smtp-servidor"
-              type="text"
-              bind:value={servidor}
-              placeholder="smtp.exemplo.com"
-              class="input input-bordered"
-            />
-            <div class="label">
-              <span class="label-text-alt"
-                >Ex: smtp.gmail.com, smtp.office365.com</span
-              >
-            </div>
-          </div>
+				<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+					<!-- Servidor -->
+					<div class="form-control md:col-span-1">
+						<label class="label" for="smtp-servidor">
+							<span class="label-text font-medium">Servidor SMTP *</span>
+						</label>
+						<input
+							id="smtp-servidor"
+							type="text"
+							bind:value={servidor}
+							placeholder="smtp.exemplo.com"
+							class="input input-bordered"
+						/>
+						<div class="label">
+							<span class="label-text-alt">Ex: smtp.gmail.com, smtp.office365.com</span>
+						</div>
+					</div>
 
-          <!-- Porta -->
-          <div class="form-control">
-            <label class="label" for="smtp-porta">
-              <span class="label-text font-medium">Porta *</span>
-            </label>
-            <input
-              id="smtp-porta"
-              type="number"
-              bind:value={porta}
-              placeholder="587"
-              class="input input-bordered"
-            />
-            <div class="label">
-              <span class="label-text-alt">Comum: 587 (TLS), 465 (SSL), 25</span
-              >
-            </div>
-          </div>
+					<!-- Porta -->
+					<div class="form-control">
+						<label class="label" for="smtp-porta">
+							<span class="label-text font-medium">Porta *</span>
+						</label>
+						<input
+							id="smtp-porta"
+							type="number"
+							bind:value={porta}
+							placeholder="587"
+							class="input input-bordered"
+						/>
+						<div class="label">
+							<span class="label-text-alt">Comum: 587 (TLS), 465 (SSL), 25</span>
+						</div>
+					</div>
 
-          <!-- Usuário -->
-          <div class="form-control">
-            <label class="label" for="smtp-usuario">
-              <span class="label-text font-medium">Usuário/Email *</span>
-            </label>
-            <input
-              id="smtp-usuario"
-              type="text"
-              bind:value={usuario}
-              placeholder="usuario@exemplo.com"
-              class="input input-bordered"
-            />
-          </div>
+					<!-- Usuário -->
+					<div class="form-control">
+						<label class="label" for="smtp-usuario">
+							<span class="label-text font-medium">Usuário/Email *</span>
+						</label>
+						<input
+							id="smtp-usuario"
+							type="text"
+							bind:value={usuario}
+							placeholder="usuario@exemplo.com"
+							class="input input-bordered"
+						/>
+					</div>
 
-          <!-- Senha -->
-          <div class="form-control">
-            <label class="label" for="smtp-senha">
-              <span class="label-text font-medium">Senha *</span>
-            </label>
-            <input
-              id="smtp-senha"
-              type="password"
-              bind:value={senha}
-              placeholder="••••••••"
-              class="input input-bordered"
-            />
-            <div class="label">
-              <span class="label-text-alt text-warning">
-                {#if configAtual?.data?.ativo}
-                  Deixe em branco para manter a senha atual
-                {:else}
-                  Digite a senha da conta de email
-                {/if}
-              </span>
-            </div>
-          </div>
+					<!-- Senha -->
+					<div class="form-control">
+						<label class="label" for="smtp-senha">
+							<span class="label-text font-medium">Senha *</span>
+						</label>
+						<input
+							id="smtp-senha"
+							type="password"
+							bind:value={senha}
+							placeholder="••••••••"
+							class="input input-bordered"
+						/>
+						<div class="label">
+							<span class="label-text-alt text-warning">
+								{#if configAtual?.data?.ativo}
+									Deixe em branco para manter a senha atual
+								{:else}
+									Digite a senha da conta de email
+								{/if}
+							</span>
+						</div>
+					</div>
 
-          <!-- Email Remetente -->
-          <div class="form-control">
-            <label class="label" for="smtp-email-remetente">
-              <span class="label-text font-medium">Email Remetente *</span>
-            </label>
-            <input
-              id="smtp-email-remetente"
-              type="email"
-              bind:value={emailRemetente}
-              placeholder="noreply@sgse.pe.gov.br"
-              class="input input-bordered"
-            />
-          </div>
+					<!-- Email Remetente -->
+					<div class="form-control">
+						<label class="label" for="smtp-email-remetente">
+							<span class="label-text font-medium">Email Remetente *</span>
+						</label>
+						<input
+							id="smtp-email-remetente"
+							type="email"
+							bind:value={emailRemetente}
+							placeholder="noreply@sgse.pe.gov.br"
+							class="input input-bordered"
+						/>
+					</div>
 
-          <!-- Nome Remetente -->
-          <div class="form-control">
-            <label class="label" for="smtp-nome-remetente">
-              <span class="label-text font-medium">Nome Remetente *</span>
-            </label>
-            <input
-              id="smtp-nome-remetente"
-              type="text"
-              bind:value={nomeRemetente}
-              placeholder="SGSE - Sistema de Gerenciamento de Secretaria"
-              class="input input-bordered"
-            />
-          </div>
-        </div>
+					<!-- Nome Remetente -->
+					<div class="form-control">
+						<label class="label" for="smtp-nome-remetente">
+							<span class="label-text font-medium">Nome Remetente *</span>
+						</label>
+						<input
+							id="smtp-nome-remetente"
+							type="text"
+							bind:value={nomeRemetente}
+							placeholder="SGSE - Sistema de Gerenciamento de Secretaria"
+							class="input input-bordered"
+						/>
+					</div>
+				</div>
 
-        <!-- Opções de Segurança -->
-        <div class="divider"></div>
-        <h3 class="font-bold mb-2">Configurações de Segurança</h3>
+				<!-- Opções de Segurança -->
+				<div class="divider"></div>
+				<h3 class="mb-2 font-bold">Configurações de Segurança</h3>
 
-        <div class="flex flex-wrap gap-6">
-          <div class="form-control">
-            <label class="label cursor-pointer gap-3">
-              <input
-                type="checkbox"
-                checked={usarSSL}
-                onchange={toggleSSL}
-                class="checkbox checkbox-primary"
-              />
-              <span class="label-text">Usar SSL (porta 465)</span>
-            </label>
-          </div>
+				<div class="flex flex-wrap gap-6">
+					<div class="form-control">
+						<label class="label cursor-pointer gap-3">
+							<input
+								type="checkbox"
+								checked={usarSSL}
+								onchange={toggleSSL}
+								class="checkbox checkbox-primary"
+							/>
+							<span class="label-text">Usar SSL (porta 465)</span>
+						</label>
+					</div>
 
-          <div class="form-control">
-            <label class="label cursor-pointer gap-3">
-              <input
-                type="checkbox"
-                checked={usarTLS}
-                onchange={toggleTLS}
-                class="checkbox checkbox-primary"
-              />
-              <span class="label-text">Usar TLS (porta 587)</span>
-            </label>
-          </div>
-        </div>
+					<div class="form-control">
+						<label class="label cursor-pointer gap-3">
+							<input
+								type="checkbox"
+								checked={usarTLS}
+								onchange={toggleTLS}
+								class="checkbox checkbox-primary"
+							/>
+							<span class="label-text">Usar TLS (porta 587)</span>
+						</label>
+					</div>
+				</div>
 
-        <!-- Ações -->
-        <div class="card-actions justify-end mt-6 gap-3">
-          <button
-            class="btn btn-outline btn-info"
-            onclick={testarConexao}
-            disabled={testando || processando}
-          >
-            {#if testando}
-              <span class="loading loading-spinner loading-sm"></span>
-            {:else}
-              <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-              </svg>
-            {/if}
-            Testar Conexão
-          </button>
+				<!-- Ações -->
+				<div class="card-actions mt-6 justify-end gap-3">
+					<button
+						class="btn btn-outline btn-info"
+						onclick={testarConexao}
+						disabled={testando || processando}
+					>
+						{#if testando}
+							<span class="loading loading-spinner loading-sm"></span>
+						{:else}
+							<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+						{/if}
+						Testar Conexão
+					</button>
 
-          <button
-            class="btn btn-primary"
-            onclick={salvarConfiguracao}
-            disabled={processando || testando}
-          >
-            {#if processando}
-              <span class="loading loading-spinner loading-sm"></span>
-            {:else}
-              <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
-                />
-              </svg>
-            {/if}
-            Salvar Configuração
-          </button>
-        </div>
-      </div>
-    </div>
-  {/if}
+					<button
+						class="btn btn-primary"
+						onclick={salvarConfiguracao}
+						disabled={processando || testando}
+					>
+						{#if processando}
+							<span class="loading loading-spinner loading-sm"></span>
+						{:else}
+							<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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+								/>
+							</svg>
+						{/if}
+						Salvar Configuração
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
 
-  <!-- Exemplos Comuns -->
-  <div class="card bg-base-100 shadow-xl mt-6">
-    <div class="card-body">
-      <h2 class="card-title mb-4">Exemplos de Configuração</h2>
+	<!-- Exemplos Comuns -->
+	<div class="card bg-base-100 mt-6 shadow-xl">
+		<div class="card-body">
+			<h2 class="card-title mb-4">Exemplos de Configuração</h2>
 
-      <div class="overflow-x-auto">
-        <table class="table table-sm">
-          <thead>
-            <tr>
-              <th>Provedor</th>
-              <th>Servidor</th>
-              <th>Porta</th>
-              <th>Segurança</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><strong>Gmail</strong></td>
-              <td>smtp.gmail.com</td>
-              <td>587</td>
-              <td>TLS</td>
-            </tr>
-            <tr>
-              <td><strong>Outlook/Office365</strong></td>
-              <td>smtp.office365.com</td>
-              <td>587</td>
-              <td>TLS</td>
-            </tr>
-            <tr>
-              <td><strong>Yahoo</strong></td>
-              <td>smtp.mail.yahoo.com</td>
-              <td>465</td>
-              <td>SSL</td>
-            </tr>
-            <tr>
-              <td><strong>SendGrid</strong></td>
-              <td>smtp.sendgrid.net</td>
-              <td>587</td>
-              <td>TLS</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
+			<div class="overflow-x-auto">
+				<table class="table-sm table">
+					<thead>
+						<tr>
+							<th>Provedor</th>
+							<th>Servidor</th>
+							<th>Porta</th>
+							<th>Segurança</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td><strong>Gmail</strong></td>
+							<td>smtp.gmail.com</td>
+							<td>587</td>
+							<td>TLS</td>
+						</tr>
+						<tr>
+							<td><strong>Outlook/Office365</strong></td>
+							<td>smtp.office365.com</td>
+							<td>587</td>
+							<td>TLS</td>
+						</tr>
+						<tr>
+							<td><strong>Yahoo</strong></td>
+							<td>smtp.mail.yahoo.com</td>
+							<td>465</td>
+							<td>SSL</td>
+						</tr>
+						<tr>
+							<td><strong>SendGrid</strong></td>
+							<td>smtp.sendgrid.net</td>
+							<td>587</td>
+							<td>TLS</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+		</div>
+	</div>
 
-  <!-- Avisos -->
-  <div class="alert alert-info mt-6">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      class="stroke-current shrink-0 w-6 h-6"
-    >
-      <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>
-    <div>
-      <p>
-        <strong>Dica de Segurança:</strong> Para Gmail e outros provedores, você
-        pode precisar gerar uma "senha de app" específica em vez de usar sua senha
-        principal.
-      </p>
-      <p class="text-sm mt-1">
-        Gmail: Conta Google → Segurança → Verificação em duas etapas → Senhas de
-        app
-      </p>
-    </div>
-  </div>
+	<!-- Avisos -->
+	<div class="alert alert-info mt-6">
+		<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>
+		<div>
+			<p>
+				<strong>Dica de Segurança:</strong> Para Gmail e outros provedores, você pode precisar gerar
+				uma "senha de app" específica em vez de usar sua senha principal.
+			</p>
+			<p class="mt-1 text-sm">
+				Gmail: Conta Google → Segurança → Verificação em duas etapas → Senhas de app
+			</p>
+		</div>
+	</div>
 </div>