From ce94eb53b363579a1c8d7a116e39013af7773722 Mon Sep 17 00:00:00 2001
From: killer-cf <costa.kilder@live.com>
Date: Fri, 21 Nov 2025 14:02:22 -0300
Subject: [PATCH 01/13] generated file

---
 packages/backend/convex/_generated/api.d.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/backend/convex/_generated/api.d.ts b/packages/backend/convex/_generated/api.d.ts
index 14944ae..eab189a 100644
--- a/packages/backend/convex/_generated/api.d.ts
+++ b/packages/backend/convex/_generated/api.d.ts
@@ -29,8 +29,8 @@ import type * as cursos from "../cursos.js";
 import type * as dashboard from "../dashboard.js";
 import type * as documentos from "../documentos.js";
 import type * as email from "../email.js";
-import type * as enderecosMarcacao from "../enderecosMarcacao.js";
 import type * as empresas from "../empresas.js";
+import type * as enderecosMarcacao from "../enderecosMarcacao.js";
 import type * as ferias from "../ferias.js";
 import type * as funcionarioEnderecos from "../funcionarioEnderecos.js";
 import type * as funcionarios from "../funcionarios.js";
@@ -84,8 +84,8 @@ declare const fullApi: ApiFromModules<{
   dashboard: typeof dashboard;
   documentos: typeof documentos;
   email: typeof email;
-  enderecosMarcacao: typeof enderecosMarcacao;
   empresas: typeof empresas;
+  enderecosMarcacao: typeof enderecosMarcacao;
   ferias: typeof ferias;
   funcionarioEnderecos: typeof funcionarioEnderecos;
   funcionarios: typeof funcionarios;
-- 
2.49.1


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 02/13] 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>
-- 
2.49.1


From 90e81e46675cc69abdb08dac6c76492e8128c5b3 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 22:40:30 -0300
Subject: [PATCH 03/13] feat: add "Controle de Ponto" section with management
 options for employee time records

- Introduced a new section for "Controle de Ponto" in the recursos-humanos page, allowing users to manage employee time records.
- Added options for viewing and managing point records, editing records, and handling dispensations, enhancing functionality for HR management.
---
 .../(dashboard)/recursos-humanos/+page.svelte | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte
index 60992a0..41844a9 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte
@@ -77,6 +77,34 @@
         },
       ],
     },
+    {
+      categoria: "Controle de Ponto",
+      descricao: "Gerencie registros de ponto dos funcionários",
+      Icon: Clock,
+      gradient: "from-cyan-500/10 to-cyan-600/20",
+      accentColor: "text-cyan-600",
+      bgIcon: "bg-cyan-500/20",
+      opcoes: [
+        {
+          nome: "Registro de Pontos",
+          descricao: "Visualizar e gerenciar registros de ponto",
+          href: "/recursos-humanos/registro-pontos",
+          Icon: Clock,
+        },
+        {
+          nome: "Homologação de Registro",
+          descricao: "Edite registros de ponto e ajuste banco de horas",
+          href: "/recursos-humanos/controle-ponto/homologacao",
+          Icon: CheckCircle2,
+        },
+        {
+          nome: "Dispensa de Registro",
+          descricao: "Gerencie períodos de dispensa de registro de ponto",
+          href: "/recursos-humanos/controle-ponto/dispensa",
+          Icon: XCircle,
+        },
+      ],
+    },
     {
       categoria: "Gestão de Férias e Licenças",
       descricao: "Controle de férias, atestados e licenças",
@@ -121,34 +149,6 @@
         },
       ],
     },
-    {
-      categoria: "Controle de Ponto",
-      descricao: "Gerencie registros de ponto dos funcionários",
-      Icon: Clock,
-      gradient: "from-cyan-500/10 to-cyan-600/20",
-      accentColor: "text-cyan-600",
-      bgIcon: "bg-cyan-500/20",
-      opcoes: [
-        {
-          nome: "Registro de Pontos",
-          descricao: "Visualizar e gerenciar registros de ponto",
-          href: "/recursos-humanos/registro-pontos",
-          Icon: Clock,
-        },
-        {
-          nome: "Homologação de Registro",
-          descricao: "Edite registros de ponto e ajuste banco de horas",
-          href: "/recursos-humanos/controle-ponto/homologacao",
-          Icon: CheckCircle2,
-        },
-        {
-          nome: "Dispensa de Registro",
-          descricao: "Gerencie períodos de dispensa de registro de ponto",
-          href: "/recursos-humanos/controle-ponto/dispensa",
-          Icon: XCircle,
-        },
-      ],
-    },
   ];
 </script>
 
-- 
2.49.1


From 467e04b605286b743de6f6ea8fbef9a4db1d05ab Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 22 Nov 2025 23:57:05 -0300
Subject: [PATCH 04/13] feat: enhance RegistroPonto and WebcamCapture
 components for improved data handling and user experience

- Added a refresh mechanism in the RegistroPonto component to ensure queries are updated after point registration, improving data accuracy.
- Expanded the WebcamCapture component to prevent multiple simultaneous play calls, enhancing video playback reliability.
- Updated the registro-pontos page to default the date range to the last 30 days for better visibility and user convenience.
- Introduced debug logging for queries and data handling to assist in development and troubleshooting.
---
 .../components/ponto/ComprovantePonto.svelte  | 76 ++++++++++++++-
 .../lib/components/ponto/RegistroPonto.svelte | 39 +++++++-
 .../lib/components/ponto/WebcamCapture.svelte | 92 ++++++++++++-------
 .../registro-pontos/+page.svelte              | 32 ++++++-
 packages/backend/convex/pontos.ts             | 88 +++++++++++++++---
 5 files changed, 269 insertions(+), 58 deletions(-)

diff --git a/apps/web/src/lib/components/ponto/ComprovantePonto.svelte b/apps/web/src/lib/components/ponto/ComprovantePonto.svelte
index aabb54f..4656d4e 100644
--- a/apps/web/src/lib/components/ponto/ComprovantePonto.svelte
+++ b/apps/web/src/lib/components/ponto/ComprovantePonto.svelte
@@ -237,18 +237,36 @@
 	}
 </script>
 
-<div class="modal modal-open" style="display: flex; align-items: center; justify-content: center;">
-	<div class="modal-box max-w-2xl w-[95%] max-h-[85vh] overflow-hidden flex flex-col" style="margin: auto; max-height: 85vh;">
+<div 
+	class="fixed inset-0 z-50 flex items-center justify-center p-4"
+	style="animation: fadeIn 0.2s ease-out;"
+	onkeydown={(e) => e.key === 'Escape' && onClose()}
+	role="dialog"
+	aria-modal="true"
+	aria-labelledby="modal-comprovante-title"
+>
+	<!-- Backdrop com blur -->
+	<div 
+		class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-200"
+		onclick={onClose}
+	></div>
+	
+	<!-- Modal Box -->
+	<div 
+		class="relative bg-base-100 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col z-10 transform transition-all duration-300"
+		style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
+		onclick={(e) => e.stopPropagation()}
+	>
 		<!-- Header fixo -->
 		<div class="flex items-center justify-between mb-4 pb-4 border-b border-base-300 flex-shrink-0">
-			<h3 class="font-bold text-lg">Comprovante de Registro de Ponto</h3>
+			<h3 id="modal-comprovante-title" class="font-bold text-lg">Comprovante de Registro de Ponto</h3>
 			<button class="btn btn-sm btn-circle btn-ghost hover:bg-base-300" onclick={onClose}>
 				<X class="h-5 w-5" />
 			</button>
 		</div>
 
 		<!-- Conteúdo com rolagem -->
-		<div class="flex-1 overflow-y-auto pr-2">
+		<div class="flex-1 overflow-y-auto pr-2 modal-scroll">
 			{#if registroQuery === undefined}
 				<div class="flex justify-center items-center py-8">
 					<span class="loading loading-spinner loading-lg"></span>
@@ -339,6 +357,54 @@
 			<button class="btn btn-outline" onclick={onClose}>Fechar</button>
 		</div>
 	</div>
-	<div class="modal-backdrop" onclick={onClose}></div>
 </div>
 
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	/* Scrollbar customizada para os modais */
+	:global(.modal-scroll) {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--bc) / 0.3) transparent;
+		scroll-behavior: smooth;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar) {
+		width: 8px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-track) {
+		background: transparent;
+		border-radius: 4px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb) {
+		background-color: hsl(var(--bc) / 0.3);
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb:hover) {
+		background-color: hsl(var(--bc) / 0.5);
+	}
+</style>
+
diff --git a/apps/web/src/lib/components/ponto/RegistroPonto.svelte b/apps/web/src/lib/components/ponto/RegistroPonto.svelte
index d06a0fc..b6c3432 100644
--- a/apps/web/src/lib/components/ponto/RegistroPonto.svelte
+++ b/apps/web/src/lib/components/ponto/RegistroPonto.svelte
@@ -21,17 +21,26 @@
 
 	const client = useConvexClient();
 
+	// Chave de refresh para forçar atualização das queries após registro
+	let refreshKey = $state(0);
+
 	// Queries
 	const currentUser = useQuery(api.auth.getCurrentUser, {});
 	const configQuery = useQuery(api.configuracaoPonto.obterConfiguracao, {});
-	const registrosHojeQuery = useQuery(api.pontos.listarRegistrosDia, {});
 	
 	// Query para histórico e saldo do dia
 	const funcionarioId = $derived(currentUser?.data?.funcionarioId ?? null);
 	const dataHoje = $derived(new Date().toISOString().split('T')[0]!);
+	
+	// Usar refreshKey para forçar atualização após registro
+	const registrosHojeQuery = useQuery(
+		api.pontos.listarRegistrosDia, 
+		{ data: dataHoje, _refresh: refreshKey }
+	);
+	
 	const historicoSaldoQuery = useQuery(
 		api.pontos.obterHistoricoESaldoDia,
-		funcionarioId && dataHoje ? { funcionarioId, data: dataHoje } : 'skip'
+		funcionarioId && dataHoje ? { funcionarioId, data: dataHoje, _refresh: refreshKey } : 'skip'
 	);
 
 	// Query para verificar dispensa ativa
@@ -284,6 +293,19 @@
 			justificativa = ''; // Limpar justificativa após registro
 			mostrandoModalConfirmacao = false;
 
+			// Forçar atualização das queries para mostrar o novo registro
+			refreshKey++;
+			
+			if (import.meta.env.DEV) {
+				console.log('[RegistroPonto] Registro bem-sucedido, refreshKey incrementado:', refreshKey);
+			}
+			
+			// Aguardar um pouco para garantir que o backend processou o registro
+			await new Promise(resolve => setTimeout(resolve, 500));
+			
+			// Forçar mais uma atualização após o delay para garantir sincronização
+			refreshKey++;
+
 			// Mostrar comprovante após 1 segundo
 			setTimeout(() => {
 				mostrandoComprovante = true;
@@ -799,7 +821,7 @@
 			{ tipo: 'saida', horario: config.horarioSaida, label: config.nomeSaida || 'Saída 2' }
 		];
 
-		return horarios.map((h) => {
+		const resultado = horarios.map((h) => {
 			const registro = registrosHoje.find((r) => r.tipo === h.tipo);
 			return {
 				...h,
@@ -808,6 +830,17 @@
 				dentroDoPrazo: registro?.dentroDoPrazo ?? null
 			};
 		});
+
+		// Log para debug (apenas em desenvolvimento)
+		if (import.meta.env.DEV) {
+			console.log('[RegistroPonto] mapaHorarios atualizado:', {
+				totalRegistrosHoje: registrosHoje.length,
+				horariosComRegistro: resultado.filter(h => h.registrado).length,
+				registrosHoje: registrosHoje.map(r => ({ tipo: r.tipo, hora: `${r.hora}:${r.minuto}` }))
+			});
+		}
+
+		return resultado;
 	});
 
 	// Dados do histórico e saldo
diff --git a/apps/web/src/lib/components/ponto/WebcamCapture.svelte b/apps/web/src/lib/components/ponto/WebcamCapture.svelte
index 1bb93a3..8cbef37 100644
--- a/apps/web/src/lib/components/ponto/WebcamCapture.svelte
+++ b/apps/web/src/lib/components/ponto/WebcamCapture.svelte
@@ -22,18 +22,29 @@
 	let previewUrl = $state<string | null>(null);
 	let videoReady = $state(false);
 
+	// Flag para evitar múltiplas chamadas de play() simultâneas
+	let playEmAndamento = $state(false);
+
 	// Efeito para garantir que o vídeo seja exibido quando o stream for atribuído
 	$effect(() => {
-		if (stream && videoElement) {
+		if (stream && videoElement && !playEmAndamento) {
 			// Sempre atualizar srcObject quando o stream mudar
 			if (videoElement.srcObject !== stream) {
 				videoElement.srcObject = stream;
 			}
 			
-			// Tentar reproduzir se ainda não estiver pronto
+			// Tentar reproduzir se ainda não estiver pronto e não houver outra chamada em andamento
 			if (!videoReady && videoElement.readyState < 2) {
+				// Verificar se já não está reproduzindo
+				if (!videoElement.paused && videoElement.readyState >= 2) {
+					videoReady = true;
+					return;
+				}
+
+				playEmAndamento = true;
 				videoElement.play()
 					.then(() => {
+						playEmAndamento = false;
 						// Aguardar um pouco para garantir que o vídeo esteja realmente reproduzindo
 						setTimeout(() => {
 							if (videoElement && videoElement.readyState >= 2 && videoElement.videoWidth > 0) {
@@ -42,7 +53,11 @@
 						}, 300);
 					})
 					.catch((err) => {
-						console.warn('Erro ao reproduzir vídeo no effect:', err);
+						playEmAndamento = false;
+						// Ignorar AbortError - é esperado quando há uma nova requisição de load
+						if (err.name !== 'AbortError') {
+							console.warn('Erro ao reproduzir vídeo no effect:', err);
+						}
 					});
 			} else if (videoElement.readyState >= 2 && videoElement.videoWidth > 0) {
 				videoReady = true;
@@ -219,35 +234,50 @@
 					videoElement.addEventListener('playing', onPlaying);
 					videoElement.addEventListener('error', onError);
 
-					// Tentar reproduzir
-					videoElement.play()
-						.then(() => {
-							console.log('Vídeo iniciado, readyState:', videoElement?.readyState);
-							// Se já tiver metadata e dimensões, resolver imediatamente
-							if (videoElement && videoElement.readyState >= 2 && videoElement.videoWidth > 0) {
-								setTimeout(() => {
-									onLoadedMetadata();
-								}, 300);
-							}
-						})
-						.catch((err) => {
-							console.warn('Erro ao reproduzir vídeo:', err);
-							// Continuar mesmo assim se já tiver metadata e dimensões
-							if (videoElement && videoElement.readyState >= 2 && videoElement.videoWidth > 0) {
-								setTimeout(() => {
-									onLoadedMetadata();
-								}, 300);
-							} else {
-								// Aguardar um pouco mais antes de dar erro
-								setTimeout(() => {
-									if (videoElement && videoElement.videoWidth > 0) {
+					// Tentar reproduzir apenas se não estiver já reproduzindo
+					if (videoElement.paused) {
+						playEmAndamento = true;
+						videoElement.play()
+							.then(() => {
+								playEmAndamento = false;
+								console.log('Vídeo iniciado, readyState:', videoElement?.readyState);
+								// Se já tiver metadata e dimensões, resolver imediatamente
+								if (videoElement && videoElement.readyState >= 2 && videoElement.videoWidth > 0) {
+									setTimeout(() => {
 										onLoadedMetadata();
-									} else {
-										onError();
-									}
-								}, 1000);
-							}
-						});
+									}, 300);
+								}
+							})
+							.catch((err) => {
+								playEmAndamento = false;
+								// Ignorar AbortError - é esperado quando há uma nova requisição de load
+								if (err.name !== 'AbortError') {
+									console.warn('Erro ao reproduzir vídeo:', err);
+								}
+								// Continuar mesmo assim se já tiver metadata e dimensões
+								if (videoElement && videoElement.readyState >= 2 && videoElement.videoWidth > 0) {
+									setTimeout(() => {
+										onLoadedMetadata();
+									}, 300);
+								} else {
+									// Aguardar um pouco mais antes de dar erro
+									setTimeout(() => {
+										if (videoElement && videoElement.videoWidth > 0) {
+											onLoadedMetadata();
+										} else {
+											onError();
+										}
+									}, 1000);
+								}
+							});
+					} else {
+						// Já está reproduzindo, apenas verificar se está pronto
+						if (videoElement.readyState >= 2 && videoElement.videoWidth > 0) {
+							setTimeout(() => {
+								onLoadedMetadata();
+							}, 300);
+						}
+					}
 				});
 
 				console.log('Vídeo pronto, dimensões:', videoElement.videoWidth, 'x', videoElement.videoHeight);
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index 9778a74..a03d425 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -20,8 +20,13 @@
 	const client = useConvexClient();
 
 	// Estados
-	let dataInicio = $state(new Date().toISOString().split('T')[0]!);
-	let dataFim = $state(new Date().toISOString().split('T')[0]!);
+	// Expandir período padrão para últimos 30 dias para facilitar visualização
+	const hoje = new Date();
+	const trintaDiasAtras = new Date(hoje);
+	trintaDiasAtras.setDate(hoje.getDate() - 30);
+	
+	let dataInicio = $state(trintaDiasAtras.toISOString().split('T')[0]!);
+	let dataFim = $state(hoje.toISOString().split('T')[0]!);
 	let funcionarioIdFiltro = $state<Id<'funcionarios'> | ''>('');
 	let statusFiltro = $state<'todos' | 'dentro' | 'fora'>('todos');
 	let localizacaoFiltro = $state<'todos' | 'dentro' | 'fora'>('todos');
@@ -56,6 +61,21 @@
 	const estatisticas = $derived(estatisticasQuery?.data);
 	const config = $derived(configQuery?.data);
 
+	// Debug: Log dos dados recebidos
+	$effect(() => {
+		if (registrosQuery !== undefined) {
+			console.log('[Frontend] registrosQuery:', {
+				isLoading: registrosQuery?.isLoading,
+				error: registrosQuery?.error,
+				dataLength: registrosQuery?.data?.length ?? 0,
+				params: registrosParams
+			});
+		}
+		if (registros && registros.length > 0) {
+			console.log('[Frontend] Primeiros registros:', registros.slice(0, 3));
+		}
+	});
+
 
 	// Dados do gráfico baseados nas estatísticas
 	const chartData = $derived.by(() => {
@@ -514,8 +534,12 @@
 
 	// Função para limpar todos os filtros
 	function limparFiltros() {
-		dataInicio = new Date().toISOString().split('T')[0]!;
-		dataFim = new Date().toISOString().split('T')[0]!;
+		const hoje = new Date();
+		const trintaDiasAtras = new Date(hoje);
+		trintaDiasAtras.setDate(hoje.getDate() - 30);
+		
+		dataInicio = trintaDiasAtras.toISOString().split('T')[0]!;
+		dataFim = hoje.toISOString().split('T')[0]!;
 		funcionarioIdFiltro = '';
 		statusFiltro = 'todos';
 		localizacaoFiltro = 'todos';
diff --git a/packages/backend/convex/pontos.ts b/packages/backend/convex/pontos.ts
index c05c7e8..9e6f9e7 100644
--- a/packages/backend/convex/pontos.ts
+++ b/packages/backend/convex/pontos.ts
@@ -791,6 +791,7 @@ export const registrarPonto = mutation({
 export const listarRegistrosDia = query({
 	args: {
 		data: v.optional(v.string()), // YYYY-MM-DD, se não fornecido usa hoje
+		_refresh: v.optional(v.number()), // Parâmetro usado pelo frontend para forçar refresh
 	},
 	handler: async (ctx, args) => {
 		const usuario = await getCurrentUserFunction(ctx);
@@ -801,12 +802,22 @@ export const listarRegistrosDia = query({
 		const funcionarioId = usuario.funcionarioId; // Garantir que não é undefined
 		const data = args.data || new Date().toISOString().split('T')[0]!;
 
+		console.log('[listarRegistrosDia] Buscando registros:', { funcionarioId, data });
+
 		const registros = await ctx.db
 			.query('registrosPonto')
 			.withIndex('by_funcionario_data', (q) => q.eq('funcionarioId', funcionarioId).eq('data', data))
 			.order('asc')
 			.collect();
 
+		console.log('[listarRegistrosDia] Registros encontrados:', registros.length, registros.map(r => ({
+			_id: r._id,
+			tipo: r.tipo,
+			data: r.data,
+			hora: r.hora,
+			minuto: r.minuto
+		})));
+
 		return registros;
 	},
 });
@@ -862,7 +873,7 @@ export const listarRegistrosPeriodo = query({
 	handler: async (ctx, args) => {
 		const usuario = await getCurrentUserFunction(ctx);
 		if (!usuario) {
-			// Retornar array vazio quando não autenticado
+			console.warn('[listarRegistrosPeriodo] Usuário não autenticado');
 			return [];
 		}
 
@@ -872,15 +883,27 @@ export const listarRegistrosPeriodo = query({
 
 		// Validar formato das datas
 		if (!args.dataInicio || !args.dataFim) {
+			console.warn('[listarRegistrosPeriodo] Datas não fornecidas');
 			return [];
 		}
 
 		// Validar formato YYYY-MM-DD
 		const dataInicioRegex = /^\d{4}-\d{2}-\d{2}$/;
 		if (!dataInicioRegex.test(args.dataInicio) || !dataInicioRegex.test(args.dataFim)) {
+			console.warn('[listarRegistrosPeriodo] Formato de data inválido', { 
+				dataInicio: args.dataInicio, 
+				dataFim: args.dataFim 
+			});
 			return [];
 		}
 
+		console.log('[listarRegistrosPeriodo] Buscando registros', {
+			dataInicio: args.dataInicio,
+			dataFim: args.dataFim,
+			funcionarioId: args.funcionarioId,
+			usuarioId: usuario._id
+		});
+
 		let registrosFiltrados;
 		
 		// Se funcionário foi especificado, usar índice por funcionário e data (mais eficiente)
@@ -901,21 +924,41 @@ export const listarRegistrosPeriodo = query({
 			});
 		} else {
 			// Se não há funcionário especificado, buscar todos e filtrar (menos eficiente, mas necessário)
-			// Usar comparação de strings diretamente para datas no formato YYYY-MM-DD
-			const registros = await ctx.db
-				.query('registrosPonto')
-				.withIndex('by_data', (q) => 
-					q.gte('data', args.dataInicio).lte('data', args.dataFim)
-				)
-				.collect();
-			
-			// Garantir que as datas estão no formato correto e filtrar novamente para garantir
-			registrosFiltrados = registros.filter((r) => {
-				// Comparação de strings funciona para formato YYYY-MM-DD
-				return r.data >= args.dataInicio && r.data <= args.dataFim;
-			});
+			try {
+				// Tentar usar índice por data primeiro
+				const registros = await ctx.db
+					.query('registrosPonto')
+					.withIndex('by_data', (q) => 
+						q.gte('data', args.dataInicio).lte('data', args.dataFim)
+					)
+					.collect();
+				
+				console.log('[listarRegistrosPeriodo] Registros do índice by_data:', registros.length);
+				
+				// Garantir que as datas estão no formato correto e filtrar novamente para garantir
+				registrosFiltrados = registros.filter((r) => {
+					// Comparação de strings funciona para formato YYYY-MM-DD
+					return r.data >= args.dataInicio && r.data <= args.dataFim;
+				});
+				
+				console.log('[listarRegistrosPeriodo] Registros após filtro:', registrosFiltrados.length);
+			} catch (error) {
+				console.error('[listarRegistrosPeriodo] Erro ao buscar registros:', error);
+				// Fallback: buscar todos e filtrar manualmente
+				const todosRegistros = await ctx.db
+					.query('registrosPonto')
+					.collect();
+				
+				registrosFiltrados = todosRegistros.filter((r) => {
+					return r.data >= args.dataInicio && r.data <= args.dataFim;
+				});
+				
+				console.log('[listarRegistrosPeriodo] Fallback - registros encontrados:', registrosFiltrados.length);
+			}
 		}
 
+		console.log('[listarRegistrosPeriodo] Registros encontrados antes de buscar funcionários:', registrosFiltrados.length);
+
 		// Buscar informações dos funcionários
 		const funcionariosIds = new Set(registrosFiltrados.map((r) => r.funcionarioId));
 		const funcionarios = await Promise.all(
@@ -940,6 +983,8 @@ export const listarRegistrosPeriodo = query({
 			}
 		}
 
+		console.log('[listarRegistrosPeriodo] Total de registros a retornar:', registrosFiltrados.length);
+
 		return registrosFiltrados.map((registro) => {
 			const funcionario = funcionarios.find((f) => f?._id === registro.funcionarioId);
 			const chave = `${registro.funcionarioId}-${registro.data}`;
@@ -1225,11 +1270,19 @@ export const obterHistoricoESaldoDia = query({
 	args: {
 		funcionarioId: v.id('funcionarios'),
 		data: v.string(), // YYYY-MM-DD
+		_refresh: v.optional(v.number()), // Parâmetro usado pelo frontend para forçar refresh
 	},
 	handler: async (ctx, args) => {
 		const usuario = await getCurrentUserFunction(ctx);
 		if (!usuario || !usuario.funcionarioId) {
-			throw new Error('Usuário não autenticado');
+			console.warn('[obterHistoricoESaldoDia] Usuário não autenticado ou sem funcionarioId');
+			// Retornar dados vazios em vez de lançar erro
+			return {
+				registros: [],
+				cargaHorariaDiaria: 0,
+				horasTrabalhadas: 0,
+				saldoMinutos: 0,
+			};
 		}
 
 		// Verificar se é o próprio funcionário ou tem permissão
@@ -1245,6 +1298,11 @@ export const obterHistoricoESaldoDia = query({
 			)
 			.order('asc')
 			.collect();
+		
+		console.log('[obterHistoricoESaldoDia] Registros encontrados:', registros.length, {
+			funcionarioId: args.funcionarioId,
+			data: args.data
+		});
 
 		// Buscar configuração de ponto
 		const config = await ctx.db
-- 
2.49.1


From 095f041891c4d25e956b0082ff762d8dc8dec967 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 23 Nov 2025 04:58:38 -0300
Subject: [PATCH 05/13] feat: update CSS theming and enhance variable
 application for improved UI consistency

- Refactored CSS styles to utilize HSL color values for better theme adaptability.
- Added custom light and dark themes with comprehensive variable definitions to ensure consistent styling across the application.
- Implemented a mechanism to force CSS variable updates, ensuring that custom themes are applied correctly during runtime.
---
 apps/web/src/app.css            | 99 +++++++++++++++++++++++++++++++--
 apps/web/src/lib/utils/temas.ts |  8 +++
 2 files changed, 102 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index cacf989..5af36f7 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -34,9 +34,9 @@
   inset: -2px;
   border-radius: 1.15rem;
   box-shadow:
-    0 0 0 1px rgba(15, 23, 42, 0.04),
-    0 14px 32px -22px rgba(15, 23, 42, 0.45),
-    0 6px 18px -16px rgba(102, 126, 234, 0.35);
+    0 0 0 1px hsl(var(--bc) / 0.04),
+    0 14px 32px -22px hsl(var(--bc) / 0.45),
+    0 6px 18px -16px hsl(var(--p) / 0.35);
   opacity: 0.55;
   transition: opacity 220ms ease, transform 220ms ease;
   pointer-events: none;
@@ -48,7 +48,7 @@
   position: absolute;
   inset: 0;
   border-radius: 1rem;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
+  background: linear-gradient(135deg, hsl(var(--p) / 0.12), hsl(var(--s) / 0.12));
   opacity: 0;
   transform: scale(0.96);
   transition: opacity 220ms ease, transform 220ms ease;
@@ -58,7 +58,7 @@
 
 :where(.card, .card-hover):hover {
   transform: translateY(-6px);
-  box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.35);
+  box-shadow: 0 20px 45px -20px hsl(var(--bc) / 0.35);
 }
 
 :where(.card, .card-hover):hover::before {
@@ -156,6 +156,15 @@ html[data-theme="sgse-blue"] body,
   --tab-radius: 0.5rem;
 }
 
+/* Garantir que todas as variáveis CSS sejam aplicadas em todos os elementos */
+html[data-theme] {
+  color-scheme: var(--color-scheme, light);
+}
+
+html[data-theme] * {
+  color-scheme: inherit;
+}
+
 html[data-theme="sgse-green"],
 html[data-theme="sgse-green"] body,
 [data-theme="sgse-green"] {
@@ -388,4 +397,84 @@ html[data-theme="sgse-corporate"] body,
   --border-btn: 1px;
   --tab-border: 1px;
   --tab-radius: 0.5rem;
+}
+
+/* Tema Light customizado para garantir funcionamento completo */
+html[data-theme="light"],
+html[data-theme="light"] body,
+[data-theme="light"] {
+  color-scheme: light;
+  --p: 217 91% 60%;
+  --pf: 217 91% 50%;
+  --pc: 0 0% 100%;
+  --s: 217 91% 60%;
+  --sf: 217 91% 50%;
+  --sc: 0 0% 100%;
+  --a: 217 91% 60%;
+  --af: 217 91% 50%;
+  --ac: 0 0% 100%;
+  --n: 217 20% 17%;
+  --nf: 217 20% 10%;
+  --nc: 0 0% 100%;
+  --b1: 0 0% 100%;
+  --b2: 217 20% 95%;
+  --b3: 217 20% 90%;
+  --bc: 217 20% 17%;
+  --in: 217 91% 60%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
+}
+
+/* Tema Dark customizado para garantir funcionamento completo */
+html[data-theme="dark"],
+html[data-theme="dark"] body,
+[data-theme="dark"] {
+  color-scheme: dark;
+  --p: 217 91% 60%;
+  --pf: 217 91% 50%;
+  --pc: 0 0% 100%;
+  --s: 217 91% 60%;
+  --sf: 217 91% 50%;
+  --sc: 0 0% 100%;
+  --a: 217 91% 60%;
+  --af: 217 91% 50%;
+  --ac: 0 0% 100%;
+  --n: 217 30% 15%;
+  --nf: 217 30% 8%;
+  --nc: 0 0% 100%;
+  --b1: 217 30% 10%;
+  --b2: 217 30% 15%;
+  --b3: 217 30% 20%;
+  --bc: 217 10% 90%;
+  --in: 217 91% 60%;
+  --inc: 0 0% 100%;
+  --su: 142 76% 36%;
+  --suc: 0 0% 100%;
+  --wa: 38 92% 50%;
+  --wac: 0 0% 100%;
+  --er: 0 84% 60%;
+  --erc: 0 0% 100%;
+  --rounded-box: 1rem;
+  --rounded-btn: 0.5rem;
+  --rounded-badge: 1.9rem;
+  --animation-btn: 0.25s;
+  --animation-input: 0.2s;
+  --btn-focus-scale: 0.95;
+  --border-btn: 1px;
+  --tab-border: 1px;
+  --tab-radius: 0.5rem;
 }
\ No newline at end of file
diff --git a/apps/web/src/lib/utils/temas.ts b/apps/web/src/lib/utils/temas.ts
index 9e9d43e..da4c782 100644
--- a/apps/web/src/lib/utils/temas.ts
+++ b/apps/web/src/lib/utils/temas.ts
@@ -171,6 +171,14 @@ export function aplicarTema(temaId: TemaId | string | null | undefined): void {
 		// Forçar reflow para garantir que o CSS seja aplicado
 		void htmlElement.offsetHeight;
 		
+		// Forçar atualização de todas as variáveis CSS
+		// Isso garante que os temas customizados sejam aplicados corretamente
+		if (typeof window !== 'undefined' && window.getComputedStyle) {
+			const computedStyle = window.getComputedStyle(htmlElement);
+			// Forçar recálculo das variáveis CSS
+			computedStyle.getPropertyValue('--p');
+		}
+		
 		// Disparar evento customizado para notificar mudança de tema
 		if (typeof window !== 'undefined') {
 			window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: nomeDaisyUI } }));
-- 
2.49.1


From ac8e8f56b8ef0ae371bb47b4bd51286416223e05 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 23 Nov 2025 05:52:01 -0300
Subject: [PATCH 06/13] feat: implement saldo calculation for entry/exit pairs
 in registro-pontos page

- Added a new function `calcularSaldosPorPar` to compute balances for entry and exit pairs, returning a map of balances indexed by record.
- Updated the table data generation to display daily balances per pair, enhancing visibility of time management.
- Implemented logic to handle incomplete pairs and display appropriate messages in the UI, improving user experience.
---
 .../registro-pontos/+page.svelte              | 257 +++++++++++++-----
 1 file changed, 194 insertions(+), 63 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index a03d425..687ed2a 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -527,6 +527,75 @@
 		};
 	}
 
+	/**
+	 * Calcula saldos por par entrada/saída
+	 * Retorna um mapa com o índice do registro e informações do saldo do par
+	 */
+	function calcularSaldosPorPar(registros: Array<{ tipo: string; hora: number; minuto: number }>): Map<number, { saldoMinutos: number; horas: number; minutos: number; parIndex: number; tamanhoPar: number }> {
+		const saldos = new Map<number, { saldoMinutos: number; horas: number; minutos: number; parIndex: number; tamanhoPar: number }>();
+		
+		if (registros.length === 0) return saldos;
+
+		// Ordenar registros por hora e minuto
+		const registrosOrdenados = [...registros].sort((a, b) => {
+			if (a.hora !== b.hora) {
+				return a.hora - b.hora;
+			}
+			return a.minuto - b.minuto;
+		});
+
+		let parIndex = 0;
+		let entradaAtual: { tipo: string; hora: number; minuto: number; index: number } | null = null;
+		let indicesPar: number[] = [];
+
+		for (let i = 0; i < registrosOrdenados.length; i++) {
+			const reg = registrosOrdenados[i];
+			
+			// Identificar início de um par (entrada ou retorno_almoco)
+			if (reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco') {
+				// Se havia um par anterior incompleto, limpar
+				if (entradaAtual && indicesPar.length > 0) {
+					indicesPar = [];
+				}
+				entradaAtual = { ...reg, index: i };
+				indicesPar = [i];
+			}
+			// Identificar fim de um par (saida_almoco ou saida)
+			else if ((reg.tipo === 'saida_almoco' || reg.tipo === 'saida') && entradaAtual) {
+				indicesPar.push(i);
+				
+				// Calcular saldo do par (saída - entrada)
+				const minutosEntrada = entradaAtual.hora * 60 + entradaAtual.minuto;
+				const minutosSaida = reg.hora * 60 + reg.minuto;
+				
+				let saldoMinutos = minutosSaida - minutosEntrada;
+				if (saldoMinutos < 0) {
+					saldoMinutos += 24 * 60; // Adicionar um dia em minutos
+				}
+
+				const horas = Math.floor(saldoMinutos / 60);
+				const minutos = saldoMinutos % 60;
+
+				// Associar saldo a todos os registros do par
+				for (const idx of indicesPar) {
+					saldos.set(idx, {
+						saldoMinutos,
+						horas,
+						minutos,
+						parIndex,
+						tamanhoPar: indicesPar.length
+					});
+				}
+
+				parIndex++;
+				entradaAtual = null;
+				indicesPar = [];
+			}
+		}
+
+		return saldos;
+	}
+
 	function abrirModalImpressao(funcionarioId: Id<'funcionarios'>) {
 		funcionarioParaImprimir = funcionarioId;
 		mostrarModalImpressao = true;
@@ -816,16 +885,25 @@
 					});
 				}
 
-				// Criar dados da tabela com saldo diário
+				// Criar dados da tabela com saldo diário por par
 				for (const [data, regs] of Object.entries(registrosPorData)) {
 					// Formatar data para exibição usando função centralizada (DD/MM/AAAA)
 					const dataFormatada = formatarDataDDMMAAAA(data);
 					
-					// Calcular saldo diário como diferença entre saída e entrada
-					const saldoDiarioDia = calcularSaldoDiario(regs);
+					// Ordenar registros por hora e minuto para garantir ordem correta
+					const regsOrdenados = [...regs].sort((a, b) => {
+						if (a.hora !== b.hora) {
+							return a.hora - b.hora;
+						}
+						return a.minuto - b.minuto;
+					});
 					
-					for (const reg of regs) {
-						const linha: string[] = [
+					// Calcular saldos por par entrada/saída
+					const saldosPorPar = calcularSaldosPorPar(regsOrdenados);
+					
+					for (let i = 0; i < regsOrdenados.length; i++) {
+						const reg = regsOrdenados[i];
+						const linha: any[] = [
 							dataFormatada,
 							config
 								? getTipoRegistroLabel(reg.tipo as 'entrada' | 'saida_almoco' | 'retorno_almoco' | 'saida', {
@@ -838,42 +916,29 @@
 							formatarHoraPonto(reg.hora, reg.minuto),
 						];
 
-						// Saldo Diário sempre após Horário
+						// Saldo Diário por par entrada/saída
 						if (sections.saldoDiario) {
-							if (saldoDiarioDia) {
-								const sinal = saldoDiarioDia.positivo ? '+' : '-';
-								linha.push(`${sinal}${saldoDiarioDia.horas}h ${saldoDiarioDia.minutos}min`);
+							const saldoPar = saldosPorPar.get(i);
+							if (saldoPar) {
+								// Verificar se é o primeiro registro do par (entrada ou retorno_almoco)
+								const isInicioPar = reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco';
+								
+								if (isInicioPar) {
+									// Primeira linha do par: adicionar saldo com rowspan
+									linha.push({
+										content: `+${saldoPar.horas}h ${saldoPar.minutos}min`,
+										rowSpan: saldoPar.tamanhoPar
+									});
+								}
+								// Outras linhas do par (saida_almoco ou saida): não adicionar coluna (o rowspan cobre)
 							} else {
+								// Registro sem par completo: mostrar "-" em célula individual
 								linha.push('-');
 							}
 						}
 
-						// Adicionar localização (geofencing)
-						if (reg.dentroRaioPermitido === true) {
-							linha.push('✅ Dentro do Raio');
-						} else if (reg.dentroRaioPermitido === false) {
-							linha.push('⚠️ Fora do Raio');
-						} else {
-							linha.push('❓ Não Validado');
-						}
-
 						linha.push(reg.dentroDoPrazo ? 'Sim' : 'Não');
 
-						// Adicionar dados de acelerômetro (se disponível)
-						if (reg.acelerometroX !== undefined || reg.sensorDisponivel !== undefined) {
-							if (reg.sensorDisponivel === false && !reg.acelerometroX) {
-								linha.push('Sensor: Não disponível');
-							} else if (reg.acelerometroX !== undefined) {
-								const movimento = reg.movimentoDetectado ? 'Sim' : 'Não';
-								const magnitude = reg.magnitudeMovimento !== undefined ? reg.magnitudeMovimento.toFixed(2) : 'N/A';
-								linha.push(`Mov: ${movimento} | Mag: ${magnitude} m/s²`);
-							} else {
-								linha.push('Sensor: N/A');
-							}
-						} else {
-							linha.push('-');
-						}
-
 						tableData.push(linha);
 					}
 				}
@@ -882,9 +947,7 @@
 				if (sections.saldoDiario) {
 					headers.push('Saldo Diário');
 				}
-				headers.push('Localização');
 				headers.push('Dentro do Prazo');
-				headers.push('Acelerômetro');
 
 				// Salvar a posição Y antes da tabela
 				const yPosAntesTabela = yPosition;
@@ -923,15 +986,42 @@
 					funcionarioId,
 				});
 
+				// Calcular saldo do período selecionado
+				let saldoPeriodoMinutos = 0;
+				const registrosPorDataPeriodo: Record<string, Array<{ tipo: string; hora: number; minuto: number }>> = {};
+				
+				for (const r of registrosFuncionario) {
+					const dataKey = r.data;
+					if (!registrosPorDataPeriodo[dataKey]) {
+						registrosPorDataPeriodo[dataKey] = [];
+					}
+					registrosPorDataPeriodo[dataKey]!.push({
+						tipo: r.tipo,
+						hora: r.hora,
+						minuto: r.minuto,
+					});
+				}
+
+				// Somar todos os saldos diários do período
+				for (const regs of Object.values(registrosPorDataPeriodo)) {
+					const saldoDiario = calcularSaldoDiario(regs);
+					if (saldoDiario) {
+						saldoPeriodoMinutos += saldoDiario.saldoMinutos;
+					}
+				}
+
+				const horasPeriodo = Math.floor(Math.abs(saldoPeriodoMinutos) / 60);
+				const minutosPeriodo = Math.abs(saldoPeriodoMinutos) % 60;
+				const sinalPeriodo = saldoPeriodoMinutos >= 0 ? '+' : '-';
+				const saldoPeriodoFormatado = `${sinalPeriodo}${horasPeriodo}h ${minutosPeriodo}min`;
+
 				doc.setFontSize(12);
 				doc.setFont('helvetica', 'bold');
 				doc.setTextColor(41, 128, 185);
 				doc.text('RESUMO DO BANCO DE HORAS', 15, yPosition);
 				doc.setFont('helvetica', 'normal');
 				doc.setTextColor(0, 0, 0);
-
 				yPosition += 10;
-				doc.setFontSize(10);
 
 				if (bancoHoras) {
 					const saldoMinutos = bancoHoras.saldoAcumuladoMinutos;
@@ -940,40 +1030,81 @@
 					const sinal = saldoMinutos >= 0 ? '+' : '-';
 					const saldoFormatado = `${sinal}${horas}h ${minutos}min`;
 
-					doc.setFont('helvetica', 'bold');
-					doc.text('Saldo Atual:', 15, yPosition);
-					doc.setFont('helvetica', 'normal');
-					doc.text(saldoFormatado, 60, yPosition);
-					yPosition += 8;
+					// Preparar dados da tabela
+					const bancoHorasData: string[][] = [
+						['Saldo Atual', saldoFormatado],
+						['Saldo do Período Selecionado', saldoPeriodoFormatado]
+					];
 
 					if (saldoMinutos > 0) {
-						doc.setFont('helvetica', 'bold');
-						doc.setTextColor(0, 128, 0);
-						doc.text('Horas Excedentes:', 15, yPosition);
-						doc.setFont('helvetica', 'normal');
-						doc.text(`${horas}h ${minutos}min`, 75, yPosition);
-						doc.setTextColor(0, 0, 0);
-						yPosition += 8;
+						bancoHorasData.push(['Horas Excedentes', `${horas}h ${minutos}min`]);
 					}
 
 					if (saldoMinutos < 0) {
-						doc.setFont('helvetica', 'bold');
-						doc.setTextColor(200, 0, 0);
-						doc.text('Horas a Pagar:', 15, yPosition);
-						doc.setFont('helvetica', 'normal');
-						doc.text(`${horas}h ${minutos}min`, 70, yPosition);
-						doc.setTextColor(0, 0, 0);
-						yPosition += 8;
+						bancoHorasData.push(['Horas a Pagar', `${horas}h ${minutos}min`]);
 					}
 
-					doc.setFont('helvetica', 'bold');
-					doc.text('Total de Dias com Registro:', 15, yPosition);
-					doc.setFont('helvetica', 'normal');
-					doc.text(`${bancoHoras.totalDias} dias`, 95, yPosition);
-					yPosition += 10;
+					bancoHorasData.push(['Total de Dias com Registro', `${bancoHoras.totalDias} dias`]);
+
+					// Criar tabela no mesmo estilo das outras seções
+					autoTable(doc, {
+						startY: yPosition,
+						head: [['Campo', 'Valor']],
+						body: bancoHorasData,
+						theme: 'grid',
+						headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+						styles: { fontSize: 9 },
+						columnStyles: {
+							0: { fontStyle: 'bold', cellWidth: 80 },
+							1: { cellWidth: 'auto' }
+						},
+						didParseCell: function(data) {
+							const campo = data.cell.text[0];
+							// Destacar "Saldo do Período Selecionado" em vermelho se negativo
+							if (campo === 'Saldo do Período Selecionado' && saldoPeriodoMinutos < 0) {
+								data.cell.styles.textColor = [200, 0, 0];
+								if (data.column.index === 1) {
+									data.cell.styles.fontStyle = 'bold';
+								}
+							}
+							// Destacar "Horas a Pagar" em vermelho se saldo negativo
+							if (campo === 'Horas a Pagar' && saldoMinutos < 0) {
+								data.cell.styles.textColor = [200, 0, 0];
+								if (data.column.index === 1) {
+									data.cell.styles.fontStyle = 'bold';
+								}
+							}
+						}
+					});
+
+					// Calcular posição Y após a tabela
+					const lastPage = doc.getNumberOfPages();
+					doc.setPage(lastPage);
+					const finalY = (doc as { lastAutoTable?: { finalY: number } }).lastAutoTable?.finalY;
+					if (finalY) {
+						yPosition = finalY + 10;
+					} else {
+						yPosition += bancoHorasData.length * 7 + 10;
+					}
 				} else {
-					doc.text('Banco de horas não disponível', 15, yPosition);
-					yPosition += 10;
+					// Se não houver banco de horas, criar tabela vazia com mensagem
+					autoTable(doc, {
+						startY: yPosition,
+						head: [['Campo', 'Valor']],
+						body: [['Banco de horas', 'Não disponível']],
+						theme: 'grid',
+						headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
+						styles: { fontSize: 9 },
+					});
+
+					const lastPage = doc.getNumberOfPages();
+					doc.setPage(lastPage);
+					const finalY = (doc as { lastAutoTable?: { finalY: number } }).lastAutoTable?.finalY;
+					if (finalY) {
+						yPosition = finalY + 10;
+					} else {
+						yPosition += 20;
+					}
 				}
 			}
 
-- 
2.49.1


From dfc975cb8f8173bd387bb8876dd8df44fe70e98c Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 23 Nov 2025 06:06:22 -0300
Subject: [PATCH 07/13] feat: enhance registro-pontos page with date range
 handling and expected record generation

- Introduced functions to generate all dates within a selected period and to create expected records based on user configuration.
- Updated the logic to process daily records, combining real and expected entries, and calculating daily balances.
- Enhanced table rendering to visually distinguish between marked and unmarked records, improving user experience and clarity in time management.
---
 .../registro-pontos/+page.svelte              | 382 ++++++++++++++++--
 1 file changed, 338 insertions(+), 44 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index 687ed2a..ee2ce3b 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -596,6 +596,55 @@
 		return saldos;
 	}
 
+	/**
+	 * Gera array de todas as datas do período selecionado
+	 */
+	function gerarDiasPeriodo(dataInicio: string, dataFim: string): string[] {
+		const dias: string[] = [];
+		const inicio = new Date(dataInicio);
+		const fim = new Date(dataFim);
+		
+		for (let d = new Date(inicio); d <= fim; d.setDate(d.getDate() + 1)) {
+			dias.push(d.toISOString().split('T')[0]!);
+		}
+		
+		return dias;
+	}
+
+	/**
+	 * Gera registros esperados para um dia baseado na configuração
+	 */
+	function gerarRegistrosEsperados(data: string, config: {
+		horarioEntrada: string;
+		horarioSaidaAlmoco: string;
+		horarioRetornoAlmoco: string;
+		horarioSaida: string;
+	}): Array<{ tipo: string; hora: number; minuto: number; data: string }> {
+		const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number);
+		const [horaSaidaAlmoco, minutoSaidaAlmoco] = config.horarioSaidaAlmoco.split(':').map(Number);
+		const [horaRetornoAlmoco, minutoRetornoAlmoco] = config.horarioRetornoAlmoco.split(':').map(Number);
+		const [horaSaida, minutoSaida] = config.horarioSaida.split(':').map(Number);
+
+		return [
+			{ tipo: 'entrada', hora: horaEntrada, minuto: minutoEntrada, data },
+			{ tipo: 'saida_almoco', hora: horaSaidaAlmoco, minuto: minutoSaidaAlmoco, data },
+			{ tipo: 'retorno_almoco', hora: horaRetornoAlmoco, minuto: minutoRetornoAlmoco, data },
+			{ tipo: 'saida', hora: horaSaida, minuto: minutoSaida, data },
+		];
+	}
+
+	/**
+	 * Verifica se um registro esperado foi marcado
+	 */
+	function registroFoiMarcado(
+		registroEsperado: { tipo: string; hora: number; minuto: number },
+		registrosReais: Array<{ tipo: string; hora: number; minuto: number }>
+	): boolean {
+		return registrosReais.some(
+			(r) => r.tipo === registroEsperado.tipo
+		);
+	}
+
 	function abrirModalImpressao(funcionarioId: Id<'funcionarios'>) {
 		funcionarioParaImprimir = funcionarioId;
 		mostrarModalImpressao = true;
@@ -840,12 +889,19 @@
 				}
 			}
 
+			// Variável para armazenar saldos diários (usada no resumo do banco de horas)
+			const saldosDiariosPorData: Record<string, number> = {};
+
 			// Tabela de registros
 			if (sections.registrosPonto) {
 				const config = await client.query(api.configuracaoPonto.obterConfiguracao, {});
-				const tableData: string[][] = [];
+				if (!config) {
+					throw new Error('Configuração de ponto não encontrada');
+				}
 
-				// Agrupar por data para incluir saldo diário
+				const tableData: any[][] = [];
+
+				// Agrupar registros reais por data
 				const registrosPorData: Record<
 					string,
 					Array<{
@@ -885,24 +941,152 @@
 					});
 				}
 
-				// Criar dados da tabela com saldo diário por par
-				for (const [data, regs] of Object.entries(registrosPorData)) {
-					// Formatar data para exibição usando função centralizada (DD/MM/AAAA)
+				// Gerar todos os dias do período
+				const diasPeriodo = gerarDiasPeriodo(dataInicio, dataFim);
+
+				// Processar cada dia do período
+				for (const data of diasPeriodo) {
 					const dataFormatada = formatarDataDDMMAAAA(data);
-					
-					// Ordenar registros por hora e minuto para garantir ordem correta
-					const regsOrdenados = [...regs].sort((a, b) => {
+					const regsReais = registrosPorData[data] || [];
+					const regsEsperados = gerarRegistrosEsperados(data, config);
+
+					// Combinar registros reais e esperados
+					const todosRegistros: Array<{
+						tipo: string;
+						hora: number;
+						minuto: number;
+						real: boolean;
+						dentroDoPrazo?: boolean;
+					}> = [];
+
+					// Adicionar registros reais
+					for (const reg of regsReais) {
+						todosRegistros.push({
+							tipo: reg.tipo,
+							hora: reg.hora,
+							minuto: reg.minuto,
+							real: true,
+							dentroDoPrazo: reg.dentroDoPrazo,
+						});
+					}
+
+					// Adicionar registros esperados não marcados (em vermelho)
+					for (const regEsperado of regsEsperados) {
+						if (!registroFoiMarcado(regEsperado, regsReais)) {
+							todosRegistros.push({
+								tipo: regEsperado.tipo,
+								hora: regEsperado.hora,
+								minuto: regEsperado.minuto,
+								real: false,
+							});
+						}
+					}
+
+					// Ordenar todos os registros por hora e minuto
+					todosRegistros.sort((a, b) => {
 						if (a.hora !== b.hora) {
 							return a.hora - b.hora;
 						}
 						return a.minuto - b.minuto;
 					});
+
+					// Calcular saldos por par entrada/saída (apenas com registros reais)
+					const regsReaisOrdenados = [...regsReais].sort((a, b) => {
+						if (a.hora !== b.hora) return a.hora - b.hora;
+						return a.minuto - b.minuto;
+					});
+					const saldosPorPar = calcularSaldosPorPar(regsReaisOrdenados);
+
+					// Calcular saldos esperados para pares incompletos ou dias sem registros
+					const saldosEsperadosPorPar: Map<number, { saldoMinutos: number; horas: number; minutos: number; tamanhoPar: number; incompleto: boolean }> = new Map();
 					
-					// Calcular saldos por par entrada/saída
-					const saldosPorPar = calcularSaldosPorPar(regsOrdenados);
+					// Identificar pares incompletos e calcular saldos esperados
+					for (let i = 0; i < todosRegistros.length; i++) {
+						const reg = todosRegistros[i];
+						
+						// Se é entrada ou retorno_almoco (início de par) e é real
+						if ((reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco') && reg.real) {
+							// Verificar se há saída correspondente real
+							const tipoSaidaEsperado = reg.tipo === 'entrada' ? 'saida_almoco' : 'saida';
+							const saidaEncontrada = regsReais.find(r => r.tipo === tipoSaidaEsperado);
+
+							if (!saidaEncontrada) {
+								// Par incompleto: calcular saldo esperado baseado na configuração
+								const regEsperado = regsEsperados.find(r => r.tipo === tipoSaidaEsperado);
+								if (regEsperado) {
+									const minutosEntrada = reg.hora * 60 + reg.minuto;
+									const minutosSaidaEsperada = regEsperado.hora * 60 + regEsperado.minuto;
+									let saldoMinutos = minutosSaidaEsperada - minutosEntrada;
+									if (saldoMinutos < 0) {
+										saldoMinutos += 24 * 60;
+									}
+
+									const horas = Math.floor(saldoMinutos / 60);
+									const minutos = saldoMinutos % 60;
+									
+									// Contar quantos registros fazem parte deste par na lista todosRegistros
+									// Encontrar índice do registro na lista ordenada todosRegistros
+									const indexNaListaTodos = todosRegistros.findIndex(
+										(r, idx) => idx >= i && r.tipo === reg.tipo && r.hora === reg.hora && r.minuto === reg.minuto
+									);
+									
+									// Contar registros do par (entrada + saída esperada)
+									let tamanhoPar = 1; // entrada
+									const saidaEsperadaNaLista = todosRegistros.find(
+										(r, idx) => idx > indexNaListaTodos && r.tipo === tipoSaidaEsperado && !r.real
+									);
+									if (saidaEsperadaNaLista) {
+										tamanhoPar++; // saída faltante já está na lista
+									}
+
+									if (indexNaListaTodos >= 0) {
+										saldosEsperadosPorPar.set(indexNaListaTodos, {
+											saldoMinutos,
+											horas,
+											minutos,
+											tamanhoPar,
+											incompleto: true
+										});
+									}
+								}
+							}
+						}
+					}
+
+					// Calcular saldo diário total (soma de todos os pares reais)
+					let saldoDiarioTotalMinutos = 0;
+					for (const saldo of saldosPorPar.values()) {
+						saldoDiarioTotalMinutos += saldo.saldoMinutos;
+					}
 					
-					for (let i = 0; i < regsOrdenados.length; i++) {
-						const reg = regsOrdenados[i];
+					// Se não há registros reais, calcular saldo esperado baseado na configuração
+					if (regsReais.length === 0) {
+						// Calcular saldo esperado do dia completo
+						const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number);
+						const [horaSaidaAlmoco, minutoSaidaAlmoco] = config.horarioSaidaAlmoco.split(':').map(Number);
+						const [horaRetornoAlmoco, minutoRetornoAlmoco] = config.horarioRetornoAlmoco.split(':').map(Number);
+						const [horaSaida, minutoSaida] = config.horarioSaida.split(':').map(Number);
+
+						// Par 1: entrada -> saida_almoco
+						const minutosPar1Entrada = horaEntrada * 60 + minutoEntrada;
+						const minutosPar1Saida = horaSaidaAlmoco * 60 + minutoSaidaAlmoco;
+						let saldoPar1 = minutosPar1Saida - minutosPar1Entrada;
+						if (saldoPar1 < 0) saldoPar1 += 24 * 60;
+
+						// Par 2: retorno_almoco -> saida
+						const minutosPar2Entrada = horaRetornoAlmoco * 60 + minutoRetornoAlmoco;
+						const minutosPar2Saida = horaSaida * 60 + minutoSaida;
+						let saldoPar2 = minutosPar2Saida - minutosPar2Entrada;
+						if (saldoPar2 < 0) saldoPar2 += 24 * 60;
+
+						saldoDiarioTotalMinutos = saldoPar1 + saldoPar2;
+					}
+					
+					saldosDiariosPorData[data] = saldoDiarioTotalMinutos;
+
+					// Criar linhas da tabela
+					for (let i = 0; i < todosRegistros.length; i++) {
+						const reg = todosRegistros[i];
 						const linha: any[] = [
 							dataFormatada,
 							config
@@ -916,28 +1100,110 @@
 							formatarHoraPonto(reg.hora, reg.minuto),
 						];
 
+						// Marcar linha como não marcada para aplicar cor vermelha depois
+						if (!reg.real) {
+							linha._naoMarcado = true;
+						}
+
 						// Saldo Diário por par entrada/saída
 						if (sections.saldoDiario) {
-							const saldoPar = saldosPorPar.get(i);
-							if (saldoPar) {
-								// Verificar se é o primeiro registro do par (entrada ou retorno_almoco)
+							const isInicioPar = reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco';
+							
+							if (reg.real && isInicioPar) {
+								const indexReal = regsReaisOrdenados.findIndex(
+									(r) => r.tipo === reg.tipo && r.hora === reg.hora && r.minuto === reg.minuto
+								);
+
+								// Verificar se há saldo esperado (par incompleto)
+								const saldoEsperado = saldosEsperadosPorPar.get(i);
+								if (saldoEsperado) {
+									// Par incompleto: mostrar saldo esperado em vermelho
+									linha._saldoVermelho = true;
+									linha.push({
+										content: `+${saldoEsperado.horas}h ${saldoEsperado.minutos}min`,
+										rowSpan: saldoEsperado.tamanhoPar
+									});
+								} else if (indexReal >= 0) {
+									const saldoPar = saldosPorPar.get(indexReal);
+									if (saldoPar) {
+										linha.push({
+											content: `+${saldoPar.horas}h ${saldoPar.minutos}min`,
+											rowSpan: saldoPar.tamanhoPar
+										});
+									} else {
+										linha.push('-');
+									}
+								} else {
+									linha.push('-');
+								}
+							} else if (reg.real) {
+								// Saída real: não adicionar (já coberto pelo rowspan da entrada)
+								// Mas verificar se precisa adicionar '-' se não houver par completo
+								const tipoEntradaEsperado = reg.tipo === 'saida_almoco' ? 'entrada' : 'retorno_almoco';
+								const entradaReal = regsReais.find(r => r.tipo === tipoEntradaEsperado);
+								if (!entradaReal) {
+									linha.push('-');
+								}
+							} else {
+								// Registro não marcado: verificar se faz parte de um par incompleto ou dia sem registros
 								const isInicioPar = reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco';
 								
 								if (isInicioPar) {
-									// Primeira linha do par: adicionar saldo com rowspan
-									linha.push({
-										content: `+${saldoPar.horas}h ${saldoPar.minutos}min`,
-										rowSpan: saldoPar.tamanhoPar
-									});
+									// Verificar se há saldo esperado para este par
+									const saldoEsperado = saldosEsperadosPorPar.get(i);
+									if (saldoEsperado) {
+										// Par incompleto: mostrar saldo esperado em vermelho
+										linha._saldoVermelho = true;
+										linha.push({
+											content: `+${saldoEsperado.horas}h ${saldoEsperado.minutos}min`,
+											rowSpan: saldoEsperado.tamanhoPar
+										});
+									} else if (regsReais.length === 0) {
+										// Dia sem registros: calcular saldo esperado completo
+										if (reg.tipo === 'entrada') {
+											// Par 1 completo esperado
+											const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number);
+											const [horaSaidaAlmoco, minutoSaidaAlmoco] = config.horarioSaidaAlmoco.split(':').map(Number);
+											const minutosEntrada = horaEntrada * 60 + minutoEntrada;
+											const minutosSaida = horaSaidaAlmoco * 60 + minutoSaidaAlmoco;
+											let saldoMinutos = minutosSaida - minutosEntrada;
+											if (saldoMinutos < 0) saldoMinutos += 24 * 60;
+											const horas = Math.floor(saldoMinutos / 60);
+											const minutos = saldoMinutos % 60;
+											linha._saldoVermelho = true;
+											linha.push({
+												content: `+${horas}h ${minutos}min`,
+												rowSpan: 2 // entrada + saida_almoco
+											});
+										} else if (reg.tipo === 'retorno_almoco') {
+											// Par 2 completo esperado
+											const [horaRetornoAlmoco, minutoRetornoAlmoco] = config.horarioRetornoAlmoco.split(':').map(Number);
+											const [horaSaida, minutoSaida] = config.horarioSaida.split(':').map(Number);
+											const minutosEntrada = horaRetornoAlmoco * 60 + minutoRetornoAlmoco;
+											const minutosSaida = horaSaida * 60 + minutoSaida;
+											let saldoMinutos = minutosSaida - minutosEntrada;
+											if (saldoMinutos < 0) saldoMinutos += 24 * 60;
+											const horas = Math.floor(saldoMinutos / 60);
+											const minutos = saldoMinutos % 60;
+											linha._saldoVermelho = true;
+											linha.push({
+												content: `+${horas}h ${minutos}min`,
+												rowSpan: 2 // retorno_almoco + saida
+											});
+										} else {
+											linha.push('-');
+										}
+									} else {
+										linha.push('-');
+									}
+								} else {
+									// Saída sem entrada correspondente: não tem saldo
+									linha.push('-');
 								}
-								// Outras linhas do par (saida_almoco ou saida): não adicionar coluna (o rowspan cobre)
-							} else {
-								// Registro sem par completo: mostrar "-" em célula individual
-								linha.push('-');
 							}
 						}
 
-						linha.push(reg.dentroDoPrazo ? 'Sim' : 'Não');
+						linha.push(reg.real ? (reg.dentroDoPrazo ? 'Sim' : 'Não') : 'Não marcado');
 
 						tableData.push(linha);
 					}
@@ -959,6 +1225,23 @@
 					theme: 'grid',
 					headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
 					styles: { fontSize: 9 },
+					didParseCell: function(data) {
+						// Aplicar cor vermelha para registros não marcados
+						if (data.row.raw && (data.row.raw as any)._naoMarcado) {
+							// Aplicar cor vermelha nas colunas Tipo e Horário
+							if (data.column.index === 1 || data.column.index === 2) {
+								data.cell.styles.textColor = [200, 0, 0];
+							}
+						}
+						// Aplicar cor vermelha na coluna de saldo diário quando marcado
+						if (data.row.raw && (data.row.raw as any)._saldoVermelho) {
+							// Coluna de saldo diário (índice 3 se saldoDiario estiver ativo)
+							const indiceSaldoDiario = sections.saldoDiario ? 3 : -1;
+							if (data.column.index === indiceSaldoDiario) {
+								data.cell.styles.textColor = [200, 0, 0];
+							}
+						}
+					}
 				});
 
 				// Calcular posição Y após a tabela
@@ -986,27 +1269,34 @@
 					funcionarioId,
 				});
 
-				// Calcular saldo do período selecionado
+				// Calcular saldo do período selecionado baseado nos saldos diários calculados
 				let saldoPeriodoMinutos = 0;
-				const registrosPorDataPeriodo: Record<string, Array<{ tipo: string; hora: number; minuto: number }>> = {};
-				
-				for (const r of registrosFuncionario) {
-					const dataKey = r.data;
-					if (!registrosPorDataPeriodo[dataKey]) {
-						registrosPorDataPeriodo[dataKey] = [];
+				if (sections.registrosPonto && Object.keys(saldosDiariosPorData).length > 0) {
+					// Somar todos os saldos diários do período
+					for (const saldoMinutos of Object.values(saldosDiariosPorData)) {
+						saldoPeriodoMinutos += saldoMinutos;
+					}
+				} else {
+					// Fallback: calcular a partir dos registros se não tiver saldos diários
+					const registrosPorDataPeriodo: Record<string, Array<{ tipo: string; hora: number; minuto: number }>> = {};
+					
+					for (const r of registrosFuncionario) {
+						const dataKey = r.data;
+						if (!registrosPorDataPeriodo[dataKey]) {
+							registrosPorDataPeriodo[dataKey] = [];
+						}
+						registrosPorDataPeriodo[dataKey]!.push({
+							tipo: r.tipo,
+							hora: r.hora,
+							minuto: r.minuto,
+						});
 					}
-					registrosPorDataPeriodo[dataKey]!.push({
-						tipo: r.tipo,
-						hora: r.hora,
-						minuto: r.minuto,
-					});
-				}
 
-				// Somar todos os saldos diários do período
-				for (const regs of Object.values(registrosPorDataPeriodo)) {
-					const saldoDiario = calcularSaldoDiario(regs);
-					if (saldoDiario) {
-						saldoPeriodoMinutos += saldoDiario.saldoMinutos;
+					for (const regs of Object.values(registrosPorDataPeriodo)) {
+						const saldoDiario = calcularSaldoDiario(regs);
+						if (saldoDiario) {
+							saldoPeriodoMinutos += saldoDiario.saldoMinutos;
+						}
 					}
 				}
 
@@ -1015,6 +1305,10 @@
 				const sinalPeriodo = saldoPeriodoMinutos >= 0 ? '+' : '-';
 				const saldoPeriodoFormatado = `${sinalPeriodo}${horasPeriodo}h ${minutosPeriodo}min`;
 
+				// Calcular total de dias do período selecionado
+				const diasPeriodo = gerarDiasPeriodo(dataInicio, dataFim);
+				const totalDiasPeriodo = diasPeriodo.length;
+
 				doc.setFontSize(12);
 				doc.setFont('helvetica', 'bold');
 				doc.setTextColor(41, 128, 185);
@@ -1044,7 +1338,7 @@
 						bancoHorasData.push(['Horas a Pagar', `${horas}h ${minutos}min`]);
 					}
 
-					bancoHorasData.push(['Total de Dias com Registro', `${bancoHoras.totalDias} dias`]);
+					bancoHorasData.push(['Total de Dias do Período', `${totalDiasPeriodo} dias`]);
 
 					// Criar tabela no mesmo estilo das outras seções
 					autoTable(doc, {
-- 
2.49.1


From e0b01cff0a94beac50a921162d286bef56848584 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 23 Nov 2025 08:29:38 -0300
Subject: [PATCH 08/13] feat: implement comparative balance calculation for
 entry/exit pairs in registro-pontos page

- Added a new function `calcularSaldoComparativoPorPar` to compute comparative balances for entry and exit pairs, enhancing the accuracy of time management.
- Updated the logic to handle expected and actual records, allowing for better visibility of discrepancies in worked hours.
- Enhanced the table rendering to display comparative balances, improving user experience and clarity in time tracking.
---
 .../registro-pontos/+page.svelte              | 715 ++++++++++++++++--
 1 file changed, 644 insertions(+), 71 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index ee2ce3b..962e565 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -596,6 +596,149 @@
 		return saldos;
 	}
 
+	/**
+	 * Calcula saldos comparativos por par entrada/saída
+	 * Compara horários reais com horários esperados configurados
+	 * Retorna mapa com saldo trabalhado, esperado e diferença
+	 */
+	function calcularSaldoComparativoPorPar(
+		registros: Array<{ tipo: string; hora: number; minuto: number }>,
+		config: {
+			horarioEntrada: string;
+			horarioSaidaAlmoco: string;
+			horarioRetornoAlmoco: string;
+			horarioSaida: string;
+		}
+	): Map<number, {
+		trabalhadoMinutos: number;
+		trabalhadoHoras: number;
+		trabalhadoMinutosResto: number;
+		esperadoMinutos: number;
+		esperadoHoras: number;
+		esperadoMinutosResto: number;
+		diferencaMinutos: number;
+		diferencaHoras: number;
+		diferencaMinutosResto: number;
+		parIndex: number;
+		tamanhoPar: number;
+	}> {
+		const saldos = new Map<number, {
+			trabalhadoMinutos: number;
+			trabalhadoHoras: number;
+			trabalhadoMinutosResto: number;
+			esperadoMinutos: number;
+			esperadoHoras: number;
+			esperadoMinutosResto: number;
+			diferencaMinutos: number;
+			diferencaHoras: number;
+			diferencaMinutosResto: number;
+			parIndex: number;
+			tamanhoPar: number;
+		}>();
+
+		if (registros.length === 0) return saldos;
+
+		// Parsear horários esperados da configuração
+		const [horaEntradaEsperada, minutoEntradaEsperado] = config.horarioEntrada.split(':').map(Number);
+		const [horaSaidaAlmocoEsperada, minutoSaidaAlmocoEsperado] = config.horarioSaidaAlmoco.split(':').map(Number);
+		const [horaRetornoAlmocoEsperado, minutoRetornoAlmocoEsperado] = config.horarioRetornoAlmoco.split(':').map(Number);
+		const [horaSaidaEsperada, minutoSaidaEsperado] = config.horarioSaida.split(':').map(Number);
+
+		// Ordenar registros por hora e minuto
+		const registrosOrdenados = [...registros].sort((a, b) => {
+			if (a.hora !== b.hora) {
+				return a.hora - b.hora;
+			}
+			return a.minuto - b.minuto;
+		});
+
+		let parIndex = 0;
+		let entradaAtual: { tipo: string; hora: number; minuto: number; index: number } | null = null;
+		let indicesPar: number[] = [];
+
+		for (let i = 0; i < registrosOrdenados.length; i++) {
+			const reg = registrosOrdenados[i];
+
+			// Identificar início de um par (entrada ou retorno_almoco)
+			if (reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco') {
+				// Se havia um par anterior incompleto, limpar
+				if (entradaAtual && indicesPar.length > 0) {
+					indicesPar = [];
+				}
+				entradaAtual = { ...reg, index: i };
+				indicesPar = [i];
+			}
+			// Identificar fim de um par (saida_almoco ou saida)
+			else if ((reg.tipo === 'saida_almoco' || reg.tipo === 'saida') && entradaAtual) {
+				indicesPar.push(i);
+
+				// Calcular tempo trabalhado real (saída - entrada)
+				const minutosEntradaReal = entradaAtual.hora * 60 + entradaAtual.minuto;
+				const minutosSaidaReal = reg.hora * 60 + reg.minuto;
+				let trabalhadoMinutos = minutosSaidaReal - minutosEntradaReal;
+				if (trabalhadoMinutos < 0) {
+					trabalhadoMinutos += 24 * 60;
+				}
+
+				// Calcular tempo esperado baseado no tipo de par
+				let esperadoMinutos: number;
+				if (entradaAtual.tipo === 'entrada') {
+					// Par 1: entrada -> saida_almoco
+					const minutosEntradaEsperada = horaEntradaEsperada * 60 + minutoEntradaEsperado;
+					const minutosSaidaEsperada = horaSaidaAlmocoEsperada * 60 + minutoSaidaAlmocoEsperado;
+					esperadoMinutos = minutosSaidaEsperada - minutosEntradaEsperada;
+					if (esperadoMinutos < 0) {
+						esperadoMinutos += 24 * 60;
+					}
+				} else {
+					// Par 2: retorno_almoco -> saida
+					const minutosEntradaEsperada = horaRetornoAlmocoEsperado * 60 + minutoRetornoAlmocoEsperado;
+					const minutosSaidaEsperada = horaSaidaEsperada * 60 + minutoSaidaEsperado;
+					esperadoMinutos = minutosSaidaEsperada - minutosEntradaEsperada;
+					if (esperadoMinutos < 0) {
+						esperadoMinutos += 24 * 60;
+					}
+				}
+
+				// Calcular diferença (trabalhado - esperado)
+				const diferencaMinutos = trabalhadoMinutos - esperadoMinutos;
+
+				// Converter para horas e minutos
+				const trabalhadoHoras = Math.floor(trabalhadoMinutos / 60);
+				const trabalhadoMinutosResto = trabalhadoMinutos % 60;
+
+				const esperadoHoras = Math.floor(esperadoMinutos / 60);
+				const esperadoMinutosResto = esperadoMinutos % 60;
+
+				const diferencaHoras = Math.floor(Math.abs(diferencaMinutos) / 60);
+				const diferencaMinutosResto = Math.abs(diferencaMinutos) % 60;
+
+				// Associar saldo a todos os registros do par
+				for (const idx of indicesPar) {
+					saldos.set(idx, {
+						trabalhadoMinutos,
+						trabalhadoHoras,
+						trabalhadoMinutosResto,
+						esperadoMinutos,
+						esperadoHoras,
+						esperadoMinutosResto,
+						diferencaMinutos,
+						diferencaHoras,
+						diferencaMinutosResto,
+						parIndex,
+						tamanhoPar: indicesPar.length
+					});
+				}
+
+				parIndex++;
+				entradaAtual = null;
+				indicesPar = [];
+			}
+		}
+
+		return saldos;
+	}
+
 	/**
 	 * Gera array de todas as datas do período selecionado
 	 */
@@ -868,9 +1011,17 @@
 
 			if (sections.alteracoesGestor) {
 				try {
-					homologacoes = await client.query(api.pontos.listarHomologacoes, {
+					const todasHomologacoes = await client.query(api.pontos.listarHomologacoes, {
 						funcionarioId,
 					}) || [];
+					
+					// Filtrar homologações pelo período selecionado
+					const dataInicioTimestamp = new Date(dataInicio + 'T00:00:00').getTime();
+					const dataFimTimestamp = new Date(dataFim + 'T23:59:59').getTime();
+					
+					homologacoes = todasHomologacoes.filter((h) => {
+						return h.criadoEm >= dataInicioTimestamp && h.criadoEm <= dataFimTimestamp;
+					});
 				} catch (error) {
 					console.warn('Erro ao buscar homologações:', error);
 					// Continuar mesmo se houver erro ao buscar homologações
@@ -879,10 +1030,22 @@
 
 			if (sections.dispensasRegistro) {
 				try {
-					dispensas = await client.query(api.pontos.listarDispensas, {
+					const todasDispensas = await client.query(api.pontos.listarDispensas, {
 						funcionarioId,
 						apenasAtivas: false,
 					}) || [];
+					
+					// Filtrar dispensas que têm interseção com o período selecionado
+					const dataInicioPeriodo = new Date(dataInicio + 'T00:00:00');
+					const dataFimPeriodo = new Date(dataFim + 'T23:59:59');
+					
+					dispensas = todasDispensas.filter((d) => {
+						const dispensaInicio = new Date(d.dataInicio + 'T00:00:00');
+						const dispensaFim = new Date(d.dataFim + 'T23:59:59');
+						
+						// Verificar se há interseção entre os períodos
+						return dispensaInicio <= dataFimPeriodo && dispensaFim >= dataInicioPeriodo;
+					});
 				} catch (error) {
 					console.warn('Erro ao buscar dispensas:', error);
 					// Continuar mesmo se houver erro ao buscar dispensas
@@ -890,7 +1053,11 @@
 			}
 
 			// Variável para armazenar saldos diários (usada no resumo do banco de horas)
-			const saldosDiariosPorData: Record<string, number> = {};
+			const saldosDiariosPorData: Record<string, {
+				diferencaMinutos: number;
+				trabalhadoMinutos: number;
+				esperadoMinutos: number;
+			}> = {};
 
 			// Tabela de registros
 			if (sections.registrosPonto) {
@@ -990,42 +1157,134 @@
 						return a.minuto - b.minuto;
 					});
 
-					// Calcular saldos por par entrada/saída (apenas com registros reais)
+					// Calcular saldos comparativos por par entrada/saída (apenas com registros reais)
 					const regsReaisOrdenados = [...regsReais].sort((a, b) => {
 						if (a.hora !== b.hora) return a.hora - b.hora;
 						return a.minuto - b.minuto;
 					});
-					const saldosPorPar = calcularSaldosPorPar(regsReaisOrdenados);
+					const saldosComparativosPorPar = calcularSaldoComparativoPorPar(regsReaisOrdenados, config);
 
 					// Calcular saldos esperados para pares incompletos ou dias sem registros
-					const saldosEsperadosPorPar: Map<number, { saldoMinutos: number; horas: number; minutos: number; tamanhoPar: number; incompleto: boolean }> = new Map();
+					const saldosEsperadosPorPar: Map<number, {
+						trabalhadoMinutos: number;
+						trabalhadoHoras: number;
+						trabalhadoMinutosResto: number;
+						esperadoMinutos: number;
+						esperadoHoras: number;
+						esperadoMinutosResto: number;
+						diferencaMinutos: number;
+						diferencaHoras: number;
+						diferencaMinutosResto: number;
+						tamanhoPar: number;
+						incompleto: boolean;
+					}> = new Map();
+					
+					// Calcular saldo diário total (diferença acumulada de todos os pares)
+					// Declarar variáveis ANTES de usá-las
+					let saldoDiarioTotalDiferencaMinutos = 0;
+					let saldoDiarioTotalTrabalhadoMinutos = 0;
+					let saldoDiarioTotalEsperadoMinutos = 0;
+					
+					// Criar conjunto de chaves de registros que já foram processados como completos
+					// Isso será usado tanto para evitar criar pares incompletos quanto para evitar somar duplicados
+					const chavesProcessadasCompletas = new Set<string>();
+					const paresCompletosProcessados = new Set<number>(); // Rastrear parIndex já processados
+					
+					// Criar conjunto de chaves e somar saldos dos pares completos
+					// IMPORTANTE: saldosComparativosPorPar associa o saldo a AMBOS os registros do par (entrada + saída)
+					// Então precisamos garantir que somamos apenas UMA VEZ por par, não uma vez por registro
+					for (const [index, saldo] of saldosComparativosPorPar.entries()) {
+						const regEntrada = regsReaisOrdenados[index];
+						if (regEntrada) {
+							// Verificar se este parIndex já foi processado
+							if (!paresCompletosProcessados.has(saldo.parIndex)) {
+								// Primeira vez processando este par, somar o saldo
+								saldoDiarioTotalDiferencaMinutos += saldo.diferencaMinutos;
+								saldoDiarioTotalTrabalhadoMinutos += saldo.trabalhadoMinutos;
+								saldoDiarioTotalEsperadoMinutos += saldo.esperadoMinutos;
+								paresCompletosProcessados.add(saldo.parIndex);
+							}
+							
+							// Adicionar chaves para evitar processamento duplicado depois
+							const chaveEntrada = `${regEntrada.tipo}-${regEntrada.hora}-${regEntrada.minuto}`;
+							chavesProcessadasCompletas.add(chaveEntrada);
+							// Encontrar saída correspondente
+							const tipoSaidaEsperado = regEntrada.tipo === 'entrada' ? 'saida_almoco' : 'saida';
+							for (let j = index + 1; j < regsReaisOrdenados.length; j++) {
+								const regSaida = regsReaisOrdenados[j];
+								if (regSaida && regSaida.tipo === tipoSaidaEsperado) {
+									const chaveSaida = `${regSaida.tipo}-${regSaida.hora}-${regSaida.minuto}`;
+									chavesProcessadasCompletas.add(chaveSaida);
+									break;
+								}
+							}
+						}
+					}
 					
 					// Identificar pares incompletos e calcular saldos esperados
+					// IMPORTANTE: Só processar pares que NÃO foram processados como completos
 					for (let i = 0; i < todosRegistros.length; i++) {
 						const reg = todosRegistros[i];
 						
 						// Se é entrada ou retorno_almoco (início de par) e é real
 						if ((reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco') && reg.real) {
+							// Verificar se este registro já foi processado como par completo
+							const chaveRegistro = `${reg.tipo}-${reg.hora}-${reg.minuto}`;
+							if (chavesProcessadasCompletas.has(chaveRegistro)) {
+								continue; // Já foi processado como par completo, pular
+							}
+							
 							// Verificar se há saída correspondente real
 							const tipoSaidaEsperado = reg.tipo === 'entrada' ? 'saida_almoco' : 'saida';
 							const saidaEncontrada = regsReais.find(r => r.tipo === tipoSaidaEsperado);
+							
+							// Se há saída correspondente, verificar se ela também está em chavesProcessadasCompletas
+							// Se estiver, significa que este par já foi processado como completo
+							if (saidaEncontrada) {
+								const chaveSaida = `${saidaEncontrada.tipo}-${saidaEncontrada.hora}-${saidaEncontrada.minuto}`;
+								if (chavesProcessadasCompletas.has(chaveSaida)) {
+									continue; // Par completo já processado, pular
+								}
+							}
 
 							if (!saidaEncontrada) {
-								// Par incompleto: calcular saldo esperado baseado na configuração
+								// Par incompleto: entrada real sem saída correspondente
+								// NÃO calcular tempo trabalhado aqui porque não há saída marcada
+								// O tempo trabalhado será 0, e a diferença será negativa (0 - esperado)
 								const regEsperado = regsEsperados.find(r => r.tipo === tipoSaidaEsperado);
 								if (regEsperado) {
-									const minutosEntrada = reg.hora * 60 + reg.minuto;
-									const minutosSaidaEsperada = regEsperado.hora * 60 + regEsperado.minuto;
-									let saldoMinutos = minutosSaidaEsperada - minutosEntrada;
-									if (saldoMinutos < 0) {
-										saldoMinutos += 24 * 60;
+									// Tempo trabalhado = 0 (não há saída marcada, então não podemos assumir tempo trabalhado)
+									const trabalhadoMinutos = 0;
+
+									// Calcular tempo esperado
+									let esperadoMinutos: number;
+									if (reg.tipo === 'entrada') {
+										const [horaEntradaEsperada, minutoEntradaEsperado] = config.horarioEntrada.split(':').map(Number);
+										const [horaSaidaAlmocoEsperada, minutoSaidaAlmocoEsperado] = config.horarioSaidaAlmoco.split(':').map(Number);
+										const minutosEntradaEsperada = horaEntradaEsperada * 60 + minutoEntradaEsperado;
+										const minutosSaidaEsperadaConfig = horaSaidaAlmocoEsperada * 60 + minutoSaidaAlmocoEsperado;
+										esperadoMinutos = minutosSaidaEsperadaConfig - minutosEntradaEsperada;
+										if (esperadoMinutos < 0) esperadoMinutos += 24 * 60;
+									} else {
+										const [horaRetornoAlmocoEsperado, minutoRetornoAlmocoEsperado] = config.horarioRetornoAlmoco.split(':').map(Number);
+										const [horaSaidaEsperada, minutoSaidaEsperado] = config.horarioSaida.split(':').map(Number);
+										const minutosEntradaEsperada = horaRetornoAlmocoEsperado * 60 + minutoRetornoAlmocoEsperado;
+										const minutosSaidaEsperadaConfig = horaSaidaEsperada * 60 + minutoSaidaEsperado;
+										esperadoMinutos = minutosSaidaEsperadaConfig - minutosEntradaEsperada;
+										if (esperadoMinutos < 0) esperadoMinutos += 24 * 60;
 									}
 
-									const horas = Math.floor(saldoMinutos / 60);
-									const minutos = saldoMinutos % 60;
-									
+									// Calcular diferença (0 - esperado = negativo)
+									const diferencaMinutos = -esperadoMinutos;
+
+									const trabalhadoHoras = 0;
+									const trabalhadoMinutosResto = 0;
+									const esperadoHoras = Math.floor(esperadoMinutos / 60);
+									const esperadoMinutosResto = esperadoMinutos % 60;
+									const diferencaHoras = Math.floor(Math.abs(diferencaMinutos) / 60);
+									const diferencaMinutosResto = Math.abs(diferencaMinutos) % 60;
+
 									// Contar quantos registros fazem parte deste par na lista todosRegistros
-									// Encontrar índice do registro na lista ordenada todosRegistros
 									const indexNaListaTodos = todosRegistros.findIndex(
 										(r, idx) => idx >= i && r.tipo === reg.tipo && r.hora === reg.hora && r.minuto === reg.minuto
 									);
@@ -1041,9 +1300,15 @@
 
 									if (indexNaListaTodos >= 0) {
 										saldosEsperadosPorPar.set(indexNaListaTodos, {
-											saldoMinutos,
-											horas,
-											minutos,
+											trabalhadoMinutos,
+											trabalhadoHoras,
+											trabalhadoMinutosResto,
+											esperadoMinutos,
+											esperadoHoras,
+											esperadoMinutosResto,
+											diferencaMinutos,
+											diferencaHoras,
+											diferencaMinutosResto,
 											tamanhoPar,
 											incompleto: true
 										});
@@ -1053,10 +1318,117 @@
 						}
 					}
 
-					// Calcular saldo diário total (soma de todos os pares reais)
-					let saldoDiarioTotalMinutos = 0;
-					for (const saldo of saldosPorPar.values()) {
-						saldoDiarioTotalMinutos += saldo.saldoMinutos;
+					// Identificar pares completamente não marcados (quando há registros reais mas um par completo não foi marcado)
+					if (regsReais.length > 0) {
+						for (let i = 0; i < todosRegistros.length; i++) {
+							const reg = todosRegistros[i];
+							
+							// Se é entrada ou retorno_almoco (início de par) e NÃO é real
+							if ((reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco') && !reg.real) {
+								// Verificar se a saída correspondente também não foi marcada
+								const tipoSaidaEsperado = reg.tipo === 'entrada' ? 'saida_almoco' : 'saida';
+								const saidaEsperada = todosRegistros.find(
+									(r, idx) => idx > i && r.tipo === tipoSaidaEsperado && !r.real
+								);
+
+								if (saidaEsperada) {
+									// Par completamente não marcado: calcular saldo negativo
+									// Tempo trabalhado = 0, tempo esperado = configurado, diferença = -esperado
+									let esperadoMinutos: number;
+									if (reg.tipo === 'entrada') {
+										const [horaEntradaEsperada, minutoEntradaEsperado] = config.horarioEntrada.split(':').map(Number);
+										const [horaSaidaAlmocoEsperada, minutoSaidaAlmocoEsperado] = config.horarioSaidaAlmoco.split(':').map(Number);
+										const minutosEntradaEsperada = horaEntradaEsperada * 60 + minutoEntradaEsperado;
+										const minutosSaidaEsperadaConfig = horaSaidaAlmocoEsperada * 60 + minutoSaidaAlmocoEsperado;
+										esperadoMinutos = minutosSaidaEsperadaConfig - minutosEntradaEsperada;
+										if (esperadoMinutos < 0) esperadoMinutos += 24 * 60;
+									} else {
+										const [horaRetornoAlmocoEsperado, minutoRetornoAlmocoEsperado] = config.horarioRetornoAlmoco.split(':').map(Number);
+										const [horaSaidaEsperada, minutoSaidaEsperado] = config.horarioSaida.split(':').map(Number);
+										const minutosEntradaEsperada = horaRetornoAlmocoEsperado * 60 + minutoRetornoAlmocoEsperado;
+										const minutosSaidaEsperadaConfig = horaSaidaEsperada * 60 + minutoSaidaEsperado;
+										esperadoMinutos = minutosSaidaEsperadaConfig - minutosEntradaEsperada;
+										if (esperadoMinutos < 0) esperadoMinutos += 24 * 60;
+									}
+
+									// Trabalhado = 0, diferença = -esperado
+									const trabalhadoMinutos = 0;
+									const diferencaMinutos = -esperadoMinutos;
+
+									const trabalhadoHoras = 0;
+									const trabalhadoMinutosResto = 0;
+									const esperadoHoras = Math.floor(esperadoMinutos / 60);
+									const esperadoMinutosResto = esperadoMinutos % 60;
+									const diferencaHoras = Math.floor(Math.abs(diferencaMinutos) / 60);
+									const diferencaMinutosResto = Math.abs(diferencaMinutos) % 60;
+
+									// Encontrar índice da saída esperada na lista
+									const indexSaidaEsperada = todosRegistros.findIndex(
+										(r, idx) => idx > i && r.tipo === tipoSaidaEsperado && !r.real
+									);
+
+									// Associar saldo negativo ao início do par (entrada)
+									saldosEsperadosPorPar.set(i, {
+										trabalhadoMinutos,
+										trabalhadoHoras,
+										trabalhadoMinutosResto,
+										esperadoMinutos,
+										esperadoHoras,
+										esperadoMinutosResto,
+										diferencaMinutos,
+										diferencaHoras,
+										diferencaMinutosResto,
+										tamanhoPar: indexSaidaEsperada >= 0 ? 2 : 1, // entrada + saída
+										incompleto: false // Par completo não marcado
+									});
+								}
+							}
+						}
+					}
+
+					// NOTA: Os saldos dos pares completos já foram somados acima quando criamos chavesProcessadasCompletas
+					// As variáveis saldoDiarioTotal* já foram declaradas e inicializadas acima
+
+					// Somar saldos dos pares completamente não marcados e incompletos
+					// IMPORTANTE: Não somar pares que já foram processados como completos acima
+					// Usar o conjunto chavesProcessadasCompletas criado anteriormente
+					for (const [indexNaListaTodos, saldo] of saldosEsperadosPorPar.entries()) {
+						const regNaListaTodos = todosRegistros[indexNaListaTodos];
+						
+						// Verificar se este registro real já foi processado como par completo
+						if (regNaListaTodos && regNaListaTodos.real) {
+							const chaveRegistro = `${regNaListaTodos.tipo}-${regNaListaTodos.hora}-${regNaListaTodos.minuto}`;
+							if (chavesProcessadasCompletas.has(chaveRegistro)) {
+								// Este registro está em chavesProcessadasCompletas
+								// Verificar se há uma saída correspondente que também está lá
+								// Se ambas estão, significa que o par completo já foi processado
+								const tipoSaidaEsperado = regNaListaTodos.tipo === 'entrada' ? 'saida_almoco' : 'saida';
+								
+								// Procurar saída correspondente em regsReais que também está em chavesProcessadasCompletas
+								const saidaCompletaEncontrada = regsReais.find(r => {
+									if (r.tipo !== tipoSaidaEsperado) return false;
+									const chaveSaida = `${r.tipo}-${r.hora}-${r.minuto}`;
+									return chavesProcessadasCompletas.has(chaveSaida);
+								});
+								
+								if (saidaCompletaEncontrada) {
+									continue; // Par completo já processado (entrada + saída estão em chavesProcessadasCompletas), não somar novamente
+								}
+							}
+						}
+						
+						if (saldo.trabalhadoMinutos === 0 && !saldo.incompleto) {
+							// Par completamente não marcado: adicionar diferença negativa
+							saldoDiarioTotalDiferencaMinutos += saldo.diferencaMinutos;
+							saldoDiarioTotalTrabalhadoMinutos += saldo.trabalhadoMinutos; // 0
+							saldoDiarioTotalEsperadoMinutos += saldo.esperadoMinutos;
+						} else if (saldo.incompleto) {
+							// Par incompleto: entrada real sem saída correspondente
+							// Só somar se não foi processado como completo acima
+							saldoDiarioTotalDiferencaMinutos += saldo.diferencaMinutos;
+							saldoDiarioTotalTrabalhadoMinutos += saldo.trabalhadoMinutos;
+							saldoDiarioTotalEsperadoMinutos += saldo.esperadoMinutos;
+						}
 					}
 					
 					// Se não há registros reais, calcular saldo esperado baseado na configuração
@@ -1079,10 +1451,17 @@
 						let saldoPar2 = minutosPar2Saida - minutosPar2Entrada;
 						if (saldoPar2 < 0) saldoPar2 += 24 * 60;
 
-						saldoDiarioTotalMinutos = saldoPar1 + saldoPar2;
+						saldoDiarioTotalTrabalhadoMinutos = 0; // Nenhum tempo trabalhado
+						saldoDiarioTotalEsperadoMinutos = saldoPar1 + saldoPar2;
+						saldoDiarioTotalDiferencaMinutos = -saldoDiarioTotalEsperadoMinutos; // Diferença negativa (0 - esperado)
 					}
 					
-					saldosDiariosPorData[data] = saldoDiarioTotalMinutos;
+					// Armazenar saldo diário completo (usado no resumo do banco de horas)
+					saldosDiariosPorData[data] = {
+						diferencaMinutos: saldoDiarioTotalDiferencaMinutos,
+						trabalhadoMinutos: saldoDiarioTotalTrabalhadoMinutos,
+						esperadoMinutos: saldoDiarioTotalEsperadoMinutos
+					};
 
 					// Criar linhas da tabela
 					for (let i = 0; i < todosRegistros.length; i++) {
@@ -1105,7 +1484,7 @@
 							linha._naoMarcado = true;
 						}
 
-						// Saldo Diário por par entrada/saída
+						// Saldo Diário por par entrada/saída com cálculo comparativo
 						if (sections.saldoDiario) {
 							const isInicioPar = reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco';
 							
@@ -1117,17 +1496,23 @@
 								// Verificar se há saldo esperado (par incompleto)
 								const saldoEsperado = saldosEsperadosPorPar.get(i);
 								if (saldoEsperado) {
-									// Par incompleto: mostrar saldo esperado em vermelho
+									// Par incompleto: mostrar saldo comparativo em vermelho
 									linha._saldoVermelho = true;
+									const sinalDiferenca = saldoEsperado.diferencaMinutos >= 0 ? '+' : '-';
 									linha.push({
-										content: `+${saldoEsperado.horas}h ${saldoEsperado.minutos}min`,
+										content: `+${saldoEsperado.trabalhadoHoras}h ${saldoEsperado.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`,
 										rowSpan: saldoEsperado.tamanhoPar
 									});
 								} else if (indexReal >= 0) {
-									const saldoPar = saldosPorPar.get(indexReal);
+									const saldoPar = saldosComparativosPorPar.get(indexReal);
 									if (saldoPar) {
+										const sinalDiferenca = saldoPar.diferencaMinutos >= 0 ? '+' : '-';
+										// Aplicar cor vermelha se diferença for negativa
+										if (saldoPar.diferencaMinutos < 0) {
+											linha._saldoVermelho = true;
+										}
 										linha.push({
-											content: `+${saldoPar.horas}h ${saldoPar.minutos}min`,
+											content: `+${saldoPar.trabalhadoHoras}h ${saldoPar.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoPar.diferencaHoras}h ${saldoPar.diferencaMinutosResto}min`,
 											rowSpan: saldoPar.tamanhoPar
 										});
 									} else {
@@ -1152,14 +1537,24 @@
 									// Verificar se há saldo esperado para este par
 									const saldoEsperado = saldosEsperadosPorPar.get(i);
 									if (saldoEsperado) {
-										// Par incompleto: mostrar saldo esperado em vermelho
+										// Par incompleto ou completamente não marcado: mostrar saldo em vermelho
 										linha._saldoVermelho = true;
-										linha.push({
-											content: `+${saldoEsperado.horas}h ${saldoEsperado.minutos}min`,
-											rowSpan: saldoEsperado.tamanhoPar
-										});
+										const sinalDiferenca = saldoEsperado.diferencaMinutos >= 0 ? '+' : '-';
+										
+										// Se par completamente não marcado (trabalhado = 0), mostrar apenas diferença negativa
+										if (saldoEsperado.trabalhadoMinutos === 0) {
+											linha.push({
+												content: `+0h 0min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`,
+												rowSpan: saldoEsperado.tamanhoPar
+											});
+										} else {
+											linha.push({
+												content: `+${saldoEsperado.trabalhadoHoras}h ${saldoEsperado.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`,
+												rowSpan: saldoEsperado.tamanhoPar
+											});
+										}
 									} else if (regsReais.length === 0) {
-										// Dia sem registros: calcular saldo esperado completo
+										// Dia sem registros: calcular saldo esperado completo com diferença negativa
 										if (reg.tipo === 'entrada') {
 											// Par 1 completo esperado
 											const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number);
@@ -1171,8 +1566,9 @@
 											const horas = Math.floor(saldoMinutos / 60);
 											const minutos = saldoMinutos % 60;
 											linha._saldoVermelho = true;
+											// Para dia sem registros, mostrar 0h trabalhado e diferença negativa
 											linha.push({
-												content: `+${horas}h ${minutos}min`,
+												content: `+0h 0min / -${horas}h ${minutos}min`,
 												rowSpan: 2 // entrada + saida_almoco
 											});
 										} else if (reg.tipo === 'retorno_almoco') {
@@ -1186,19 +1582,53 @@
 											const horas = Math.floor(saldoMinutos / 60);
 											const minutos = saldoMinutos % 60;
 											linha._saldoVermelho = true;
+											// Para dia sem registros, mostrar 0h trabalhado e diferença negativa
 											linha.push({
-												content: `+${horas}h ${minutos}min`,
+												content: `+0h 0min / -${horas}h ${minutos}min`,
 												rowSpan: 2 // retorno_almoco + saida
 											});
 										} else {
 											linha.push('-');
 										}
 									} else {
-										linha.push('-');
+										// Há registros reais mas este par não foi marcado completamente
+										// Verificar se é um par completamente não marcado
+										const tipoSaidaEsperado = reg.tipo === 'entrada' ? 'saida_almoco' : 'saida';
+										const saidaEsperadaExiste = todosRegistros.some(
+											(r, idx) => idx > i && r.tipo === tipoSaidaEsperado && !r.real
+										);
+										
+										if (saidaEsperadaExiste) {
+											// Par completamente não marcado: calcular saldo negativo
+											const saldoEsperadoCompleto = saldosEsperadosPorPar.get(i);
+											if (saldoEsperadoCompleto) {
+												linha._saldoVermelho = true;
+												const sinalDiferenca = saldoEsperadoCompleto.diferencaMinutos >= 0 ? '+' : '-';
+												linha.push({
+													content: `+0h 0min / ${sinalDiferenca}${saldoEsperadoCompleto.diferencaHoras}h ${saldoEsperadoCompleto.diferencaMinutosResto}min`,
+													rowSpan: saldoEsperadoCompleto.tamanhoPar
+												});
+											} else {
+												linha.push('-');
+											}
+										} else {
+											linha.push('-');
+										}
 									}
 								} else {
-									// Saída sem entrada correspondente: não tem saldo
-									linha.push('-');
+									// Saída não marcada: verificar se faz parte de um par completamente não marcado
+									// Se a entrada correspondente também não foi marcada, o saldo já foi adicionado na linha da entrada
+									// Então apenas não adicionar nada aqui (será coberto pelo rowspan)
+									const tipoEntradaEsperado = reg.tipo === 'saida_almoco' ? 'entrada' : 'retorno_almoco';
+									const entradaEsperadaExiste = todosRegistros.some(
+										(r, idx) => idx < i && r.tipo === tipoEntradaEsperado && !r.real
+									);
+									
+									if (!entradaEsperadaExiste) {
+										// Saída sem entrada correspondente esperada: não tem saldo
+										linha.push('-');
+									}
+									// Se entrada esperada existe, o saldo já foi adicionado com rowspan na linha da entrada
 								}
 							}
 						}
@@ -1269,12 +1699,48 @@
 					funcionarioId,
 				});
 
-				// Calcular saldo do período selecionado baseado nos saldos diários calculados
-				let saldoPeriodoMinutos = 0;
+				// Calcular total de dias do período selecionado
+				const diasPeriodo = gerarDiasPeriodo(dataInicio, dataFim);
+				const totalDiasPeriodo = diasPeriodo.length;
+
+				// Calcular carga horária diária esperada baseada na configuração
+				const [horaEntradaConfig, minutoEntradaConfig] = config.horarioEntrada.split(':').map(Number);
+				const [horaSaidaAlmocoConfig, minutoSaidaAlmocoConfig] = config.horarioSaidaAlmoco.split(':').map(Number);
+				const [horaRetornoAlmocoConfig, minutoRetornoAlmocoConfig] = config.horarioRetornoAlmoco.split(':').map(Number);
+				const [horaSaidaConfig, minutoSaidaConfig] = config.horarioSaida.split(':').map(Number);
+
+				// Par 1: entrada -> saida_almoco
+				const minutosPar1EsperadoConfig = (horaSaidaAlmocoConfig * 60 + minutoSaidaAlmocoConfig) - (horaEntradaConfig * 60 + minutoEntradaConfig);
+				const minutosPar1EsperadoAjustadoConfig = minutosPar1EsperadoConfig < 0 ? minutosPar1EsperadoConfig + 24 * 60 : minutosPar1EsperadoConfig;
+
+				// Par 2: retorno_almoco -> saida
+				const minutosPar2EsperadoConfig = (horaSaidaConfig * 60 + minutoSaidaConfig) - (horaRetornoAlmocoConfig * 60 + minutoRetornoAlmocoConfig);
+				const minutosPar2EsperadoAjustadoConfig = minutosPar2EsperadoConfig < 0 ? minutosPar2EsperadoConfig + 24 * 60 : minutosPar2EsperadoConfig;
+
+				const cargaHorariaDiariaEsperadaMinutos = minutosPar1EsperadoAjustadoConfig + minutosPar2EsperadoAjustadoConfig;
+				
+				// Calcular saldos do período selecionado baseado nos saldos diários calculados
+				let saldoPeriodoDiferencaMinutos = 0;
+				let saldoPeriodoTrabalhadoMinutos = 0;
+				let diasComSaldoPositivo = 0;
+				let diasComSaldoNegativo = 0;
+				let diasSemRegistros = 0;
+
 				if (sections.registrosPonto && Object.keys(saldosDiariosPorData).length > 0) {
 					// Somar todos os saldos diários do período
-					for (const saldoMinutos of Object.values(saldosDiariosPorData)) {
-						saldoPeriodoMinutos += saldoMinutos;
+					for (const saldo of Object.values(saldosDiariosPorData)) {
+						saldoPeriodoDiferencaMinutos += saldo.diferencaMinutos;
+						saldoPeriodoTrabalhadoMinutos += saldo.trabalhadoMinutos;
+						
+						if (saldo.diferencaMinutos > 0) {
+							diasComSaldoPositivo++;
+						} else if (saldo.diferencaMinutos < 0) {
+							diasComSaldoNegativo++;
+						}
+						
+						if (saldo.trabalhadoMinutos === 0 && saldo.esperadoMinutos > 0) {
+							diasSemRegistros++;
+						}
 					}
 				} else {
 					// Fallback: calcular a partir dos registros se não tiver saldos diários
@@ -1295,19 +1761,50 @@
 					for (const regs of Object.values(registrosPorDataPeriodo)) {
 						const saldoDiario = calcularSaldoDiario(regs);
 						if (saldoDiario) {
-							saldoPeriodoMinutos += saldoDiario.saldoMinutos;
+							saldoPeriodoDiferencaMinutos += saldoDiario.saldoMinutos;
+							saldoPeriodoTrabalhadoMinutos += saldoDiario.saldoMinutos;
 						}
 					}
 				}
 
-				const horasPeriodo = Math.floor(Math.abs(saldoPeriodoMinutos) / 60);
-				const minutosPeriodo = Math.abs(saldoPeriodoMinutos) % 60;
-				const sinalPeriodo = saldoPeriodoMinutos >= 0 ? '+' : '-';
-				const saldoPeriodoFormatado = `${sinalPeriodo}${horasPeriodo}h ${minutosPeriodo}min`;
+				// Calcular saldo esperado do período: carga horária diária × número de dias
+				const saldoPeriodoEsperadoMinutos = cargaHorariaDiariaEsperadaMinutos * totalDiasPeriodo;
 
-				// Calcular total de dias do período selecionado
-				const diasPeriodo = gerarDiasPeriodo(dataInicio, dataFim);
-				const totalDiasPeriodo = diasPeriodo.length;
+				// Calcular médias diárias
+				const mediaDiariaTrabalhadaHoras = totalDiasPeriodo > 0 ? Math.floor(saldoPeriodoTrabalhadoMinutos / 60 / totalDiasPeriodo) : 0;
+				const mediaDiariaTrabalhadaMinutos = totalDiasPeriodo > 0 ? Math.floor((saldoPeriodoTrabalhadoMinutos / totalDiasPeriodo) % 60) : 0;
+				
+				// Calcular média esperada baseada na configuração padrão (não no período)
+				const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number);
+				const [horaSaidaAlmoco, minutoSaidaAlmoco] = config.horarioSaidaAlmoco.split(':').map(Number);
+				const [horaRetornoAlmoco, minutoRetornoAlmoco] = config.horarioRetornoAlmoco.split(':').map(Number);
+				const [horaSaida, minutoSaida] = config.horarioSaida.split(':').map(Number);
+
+				// Par 1: entrada -> saida_almoco
+				const minutosPar1Esperado = (horaSaidaAlmoco * 60 + minutoSaidaAlmoco) - (horaEntrada * 60 + minutoEntrada);
+				const minutosPar1EsperadoAjustado = minutosPar1Esperado < 0 ? minutosPar1Esperado + 24 * 60 : minutosPar1Esperado;
+
+				// Par 2: retorno_almoco -> saida
+				const minutosPar2Esperado = (horaSaida * 60 + minutoSaida) - (horaRetornoAlmoco * 60 + minutoRetornoAlmoco);
+				const minutosPar2EsperadoAjustado = minutosPar2Esperado < 0 ? minutosPar2Esperado + 24 * 60 : minutosPar2Esperado;
+
+				const totalEsperadoDiarioMinutos = minutosPar1EsperadoAjustado + minutosPar2EsperadoAjustado;
+				const mediaDiariaEsperadaHoras = Math.floor(totalEsperadoDiarioMinutos / 60);
+				const mediaDiariaEsperadaMinutos = totalEsperadoDiarioMinutos % 60;
+
+				// Formatar valores
+				const horasPeriodoDiferenca = Math.floor(Math.abs(saldoPeriodoDiferencaMinutos) / 60);
+				const minutosPeriodoDiferenca = Math.abs(saldoPeriodoDiferencaMinutos) % 60;
+				const sinalPeriodoDiferenca = saldoPeriodoDiferencaMinutos >= 0 ? '+' : '-';
+				const saldoPeriodoDiferencaFormatado = `${sinalPeriodoDiferenca}${horasPeriodoDiferenca}h ${minutosPeriodoDiferenca}min`;
+
+				const horasPeriodoTrabalhado = Math.floor(saldoPeriodoTrabalhadoMinutos / 60);
+				const minutosPeriodoTrabalhado = saldoPeriodoTrabalhadoMinutos % 60;
+				const saldoPeriodoTrabalhadoFormatado = `+${horasPeriodoTrabalhado}h ${minutosPeriodoTrabalhado}min`;
+
+				const horasPeriodoEsperado = Math.floor(saldoPeriodoEsperadoMinutos / 60);
+				const minutosPeriodoEsperado = saldoPeriodoEsperadoMinutos % 60;
+				const saldoPeriodoEsperadoFormatado = `+${horasPeriodoEsperado}h ${minutosPeriodoEsperado}min`;
 
 				doc.setFontSize(12);
 				doc.setFont('helvetica', 'bold');
@@ -1324,20 +1821,45 @@
 					const sinal = saldoMinutos >= 0 ? '+' : '-';
 					const saldoFormatado = `${sinal}${horas}h ${minutos}min`;
 
-					// Preparar dados da tabela
-					const bancoHorasData: string[][] = [
+					// Calcular saldo acumulado de períodos anteriores
+					// Saldo Anterior = Saldo Total - Saldo do Período Atual
+					const saldoAnteriorMinutos = saldoMinutos - saldoPeriodoDiferencaMinutos;
+					const horasAnterior = Math.floor(Math.abs(saldoAnteriorMinutos) / 60);
+					const minutosAnterior = Math.abs(saldoAnteriorMinutos) % 60;
+					const sinalAnterior = saldoAnteriorMinutos >= 0 ? '+' : '-';
+					const saldoAnteriorFormatado = `${sinalAnterior}${horasAnterior}h ${minutosAnterior}min`;
+
+					// Calcular resultado final
+					const resultadoFinalMinutos = saldoAnteriorMinutos + saldoPeriodoDiferencaMinutos;
+					const horasResultadoFinal = Math.floor(Math.abs(resultadoFinalMinutos) / 60);
+					const minutosResultadoFinal = Math.abs(resultadoFinalMinutos) % 60;
+					const sinalResultadoFinal = resultadoFinalMinutos >= 0 ? '+' : '-';
+					const resultadoFinalFormatado = `${sinalResultadoFinal}${horasResultadoFinal}h ${minutosResultadoFinal}min`;
+
+					// Preparar dados da tabela com melhorias
+					const bancoHorasData: any[][] = [
 						['Saldo Atual', saldoFormatado],
-						['Saldo do Período Selecionado', saldoPeriodoFormatado]
+						['Saldo Banco Acumulado de Períodos Anteriores', saldoAnteriorFormatado],
+						['Saldo do Período Exibido', saldoPeriodoDiferencaFormatado],
+						['Resultado Final', resultadoFinalFormatado]
 					];
 
-					if (saldoMinutos > 0) {
-						bancoHorasData.push(['Horas Excedentes', `${horas}h ${minutos}min`]);
-					}
+					// Adicionar detalhamento
+					bancoHorasData.push(['', '']); // Linha separadora
+					bancoHorasData.push(['Saldo Trabalhado do Período', saldoPeriodoTrabalhadoFormatado]);
+					bancoHorasData.push(['Saldo Esperado do Período', saldoPeriodoEsperadoFormatado]);
+					bancoHorasData.push(['Diferença do Período', saldoPeriodoDiferencaFormatado]);
 
-					if (saldoMinutos < 0) {
-						bancoHorasData.push(['Horas a Pagar', `${horas}h ${minutos}min`]);
-					}
+					// Adicionar estatísticas
+					bancoHorasData.push(['', '']); // Linha separadora
+					bancoHorasData.push(['Média Diária de Horas Trabalhadas', `+${mediaDiariaTrabalhadaHoras}h ${mediaDiariaTrabalhadaMinutos}min`]);
+					bancoHorasData.push(['Média Diária Esperada', `+${mediaDiariaEsperadaHoras}h ${mediaDiariaEsperadaMinutos}min`]);
 
+					// Adicionar contagens
+					bancoHorasData.push(['', '']); // Linha separadora
+					bancoHorasData.push(['Dias com Saldo Positivo', `${diasComSaldoPositivo} dias`]);
+					bancoHorasData.push(['Dias com Saldo Negativo', `${diasComSaldoNegativo} dias`]);
+					bancoHorasData.push(['Dias sem Registros', `${diasSemRegistros} dias`]);
 					bancoHorasData.push(['Total de Dias do Período', `${totalDiasPeriodo} dias`]);
 
 					// Criar tabela no mesmo estilo das outras seções
@@ -1353,18 +1875,69 @@
 							1: { cellWidth: 'auto' }
 						},
 						didParseCell: function(data) {
+							// Ignorar linhas separadoras vazias
+							if (data.cell.text[0] === '' && data.column.index === 0) {
+								data.cell.styles.fillColor = [240, 240, 240]; // Cor de fundo cinza claro
+								return;
+							}
+
 							const campo = data.cell.text[0];
-							// Destacar "Saldo do Período Selecionado" em vermelho se negativo
-							if (campo === 'Saldo do Período Selecionado' && saldoPeriodoMinutos < 0) {
-								data.cell.styles.textColor = [200, 0, 0];
-								if (data.column.index === 1) {
+							const valor = data.cell.text[1] || '';
+
+							// Aplicar cores baseado no valor
+							if (data.column.index === 1 && valor) {
+								// Aplicar cor no Saldo Atual (vermelho para negativo, azul para positivo)
+								if (campo === 'Saldo Atual') {
+									if (saldoMinutos < 0) {
+										data.cell.styles.textColor = [200, 0, 0]; // Vermelho para negativo
+									} else if (saldoMinutos > 0) {
+										data.cell.styles.textColor = [0, 100, 200]; // Azul para positivo
+									}
 									data.cell.styles.fontStyle = 'bold';
 								}
-							}
-							// Destacar "Horas a Pagar" em vermelho se saldo negativo
-							if (campo === 'Horas a Pagar' && saldoMinutos < 0) {
-								data.cell.styles.textColor = [200, 0, 0];
-								if (data.column.index === 1) {
+								
+								// Verificar se o valor contém sinal negativo
+								if (valor.includes('-') && !valor.includes('±')) {
+									data.cell.styles.textColor = [200, 0, 0]; // Vermelho para negativo
+									if (campo === 'Saldo do Período Exibido' || campo === 'Diferença do Período' || campo === 'Resultado Final') {
+										data.cell.styles.fontStyle = 'bold';
+									}
+								} else if (valor.includes('+') || campo.includes('Trabalhado') || campo.includes('Esperado')) {
+									// Verde para valores positivos ou campos de trabalhado/esperado
+									if (campo.includes('Diferença') && saldoPeriodoDiferencaMinutos < 0) {
+										data.cell.styles.textColor = [200, 0, 0]; // Vermelho se diferença negativa
+										data.cell.styles.fontStyle = 'bold';
+									} else if (campo.includes('Diferença') && saldoPeriodoDiferencaMinutos > 0) {
+										data.cell.styles.textColor = [0, 128, 0]; // Verde se diferença positiva
+										data.cell.styles.fontStyle = 'bold';
+									} else if (campo.includes('Trabalhado') || campo.includes('Esperado')) {
+										data.cell.styles.textColor = [0, 128, 0]; // Verde para trabalhado/esperado
+									}
+								}
+
+								// Destacar campos específicos
+								if (campo === 'Dias com Saldo Negativo') {
+									data.cell.styles.textColor = [200, 0, 0];
+									data.cell.styles.fontStyle = 'bold';
+								}
+								if (campo === 'Dias com Saldo Positivo') {
+									data.cell.styles.textColor = [0, 128, 0];
+									data.cell.styles.fontStyle = 'bold';
+								}
+								if (campo === 'Resultado Final') {
+									if (resultadoFinalMinutos < 0) {
+										data.cell.styles.textColor = [200, 0, 0];
+									} else if (resultadoFinalMinutos > 0) {
+										data.cell.styles.textColor = [0, 128, 0];
+									}
+									data.cell.styles.fontStyle = 'bold';
+								}
+								if (campo === 'Saldo do Período Exibido') {
+									if (saldoPeriodoDiferencaMinutos < 0) {
+										data.cell.styles.textColor = [200, 0, 0];
+									} else if (saldoPeriodoDiferencaMinutos > 0) {
+										data.cell.styles.textColor = [0, 128, 0];
+									}
 									data.cell.styles.fontStyle = 'bold';
 								}
 							}
-- 
2.49.1


From db2daacdad2c498b9f8ad9edf47fca43708410cf Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 23 Nov 2025 09:06:15 -0300
Subject: [PATCH 09/13] refactor: improve table rendering and layout in
 registro-pontos page

- Enhanced the rendering of tables for employee time records, consolidating data into structured formats for better readability.
- Updated the logic for displaying various sections, including employee information, GPS validation, and geofencing, to utilize tables for clarity.
- Improved styling and layout consistency across the page, ensuring a more user-friendly experience when reviewing time records and validation statuses.
---
 .../registro-pontos/+page.svelte              | 938 +++++++++++-------
 1 file changed, 571 insertions(+), 367 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index 962e565..9b2091d 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -1515,9 +1515,9 @@
 											content: `+${saldoPar.trabalhadoHoras}h ${saldoPar.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoPar.diferencaHoras}h ${saldoPar.diferencaMinutosResto}min`,
 											rowSpan: saldoPar.tamanhoPar
 										});
-									} else {
-										linha.push('-');
-									}
+							} else {
+								linha.push('-');
+							}
 								} else {
 									linha.push('-');
 								}
@@ -1547,7 +1547,7 @@
 												content: `+0h 0min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`,
 												rowSpan: saldoEsperado.tamanhoPar
 											});
-										} else {
+						} else {
 											linha.push({
 												content: `+${saldoEsperado.trabalhadoHoras}h ${saldoEsperado.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`,
 												rowSpan: saldoEsperado.tamanhoPar
@@ -1608,12 +1608,12 @@
 													content: `+0h 0min / ${sinalDiferenca}${saldoEsperadoCompleto.diferencaHoras}h ${saldoEsperadoCompleto.diferencaMinutosResto}min`,
 													rowSpan: saldoEsperadoCompleto.tamanhoPar
 												});
-											} else {
+							} else {
 												linha.push('-');
-											}
-										} else {
-											linha.push('-');
-										}
+							}
+						} else {
+							linha.push('-');
+						}
 									}
 								} else {
 									// Saída não marcada: verificar se faz parte de um par completamente não marcado
@@ -1888,7 +1888,7 @@
 							if (data.column.index === 1 && valor) {
 								// Aplicar cor no Saldo Atual (vermelho para negativo, azul para positivo)
 								if (campo === 'Saldo Atual') {
-									if (saldoMinutos < 0) {
+					if (saldoMinutos < 0) {
 										data.cell.styles.textColor = [200, 0, 0]; // Vermelho para negativo
 									} else if (saldoMinutos > 0) {
 										data.cell.styles.textColor = [0, 100, 200]; // Azul para positivo
@@ -1950,7 +1950,7 @@
 					const finalY = (doc as { lastAutoTable?: { finalY: number } }).lastAutoTable?.finalY;
 					if (finalY) {
 						yPosition = finalY + 10;
-					} else {
+				} else {
 						yPosition += bancoHorasData.length * 7 + 10;
 					}
 				} else {
@@ -2151,56 +2151,79 @@
 					setTimeout(() => reject(), 3000);
 				});
 
-				const logoWidth = 25;
+				const logoWidth = 30;
 				const aspectRatio = logoImg.height / logoImg.width;
 				const logoHeight = logoWidth * aspectRatio;
 
 				doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight);
-				yPosition = Math.max(20, 10 + logoHeight / 2);
+				yPosition = Math.max(25, 10 + logoHeight / 2);
 			} catch (err) {
 				console.warn('Não foi possível carregar a logo:', err);
 			}
 
-			// Cabeçalho
-			doc.setFontSize(16);
+			// Cabeçalho com estilo melhorado
+			doc.setFontSize(18);
 			doc.setTextColor(41, 128, 185);
+			doc.setFont('helvetica', 'bold');
 			doc.text('DETALHES DO REGISTRO DE PONTO', 105, yPosition, { align: 'center' });
+			
+			// Linha decorativa abaixo do título
+			doc.setDrawColor(41, 128, 185);
+			doc.setLineWidth(0.5);
+			doc.line(15, yPosition + 3, 195, yPosition + 3);
 
 			yPosition += 15;
 
-			// Informações do Funcionário
-			doc.setFontSize(12);
-			doc.setTextColor(0, 0, 0);
-			doc.setFont('helvetica', 'bold');
-			doc.text('DADOS DO FUNCIONÁRIO', 15, yPosition);
-			doc.setFont('helvetica', 'normal');
-
-			yPosition += 8;
-			doc.setFontSize(10);
-
+			// Informações do Funcionário em tabela
+			const funcionarioData: any[][] = [];
 			if (registro.funcionario) {
 				if (registro.funcionario.matricula) {
-					doc.text(`Matrícula: ${registro.funcionario.matricula}`, 15, yPosition);
-					yPosition += 6;
+					funcionarioData.push(['Matrícula', registro.funcionario.matricula]);
 				}
-				doc.text(`Nome: ${registro.funcionario.nome}`, 15, yPosition);
-				yPosition += 6;
+				funcionarioData.push(['Nome', registro.funcionario.nome]);
 				if (registro.funcionario.descricaoCargo) {
-					doc.text(`Cargo/Função: ${registro.funcionario.descricaoCargo}`, 15, yPosition);
-					yPosition += 6;
+					funcionarioData.push(['Cargo/Função', registro.funcionario.descricaoCargo]);
 				}
 			}
 
-			yPosition += 5;
-
-			// Informações do Registro
+			if (funcionarioData.length > 0) {
+				doc.setFontSize(12);
+				doc.setTextColor(41, 128, 185);
 			doc.setFont('helvetica', 'bold');
-			doc.text('DADOS DO REGISTRO', 15, yPosition);
-			doc.setFont('helvetica', 'normal');
-
+				doc.text('DADOS DO FUNCIONÁRIO', 15, yPosition);
 			yPosition += 8;
-			doc.setFontSize(10);
 
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['Campo', 'Valor']],
+					body: funcionarioData,
+					theme: 'striped',
+					headStyles: { 
+						fillColor: [41, 128, 185],
+						textColor: [255, 255, 255],
+						fontStyle: 'bold',
+						fontSize: 10
+					},
+					bodyStyles: { 
+						fontSize: 10,
+						textColor: [0, 0, 0]
+					},
+					columnStyles: {
+						0: { cellWidth: 50, fontStyle: 'bold' },
+						1: { cellWidth: 140 }
+					},
+					margin: { left: 15, right: 15 },
+					styles: { cellPadding: 4 }
+				});
+
+				type JsPDFWithAutoTable = jsPDF & {
+					lastAutoTable?: { finalY: number };
+				};
+				const finalY = (doc as JsPDFWithAutoTable).lastAutoTable?.finalY ?? yPosition + 10;
+				yPosition = finalY + 10;
+			}
+
+			// Informações do Registro em tabela
 			const config = await client.query(api.configuracaoPonto.obterConfiguracao, {});
 			const tipoLabel = config
 				? getTipoRegistroLabel(registro.tipo, {
@@ -2210,34 +2233,75 @@
 						nomeSaida: config.nomeSaida,
 					})
 				: getTipoRegistroLabel(registro.tipo);
-			doc.text(`Tipo: ${tipoLabel}`, 15, yPosition);
-			yPosition += 6;
 
 			const dataHora = `${registro.data} ${registro.hora.toString().padStart(2, '0')}:${registro.minuto.toString().padStart(2, '0')}:${registro.segundo.toString().padStart(2, '0')}`;
-			doc.text(`Data e Hora: ${dataHora}`, 15, yPosition);
-			yPosition += 6;
-
-			doc.text(`Status: ${registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'}`, 15, yPosition);
-			yPosition += 6;
-
-			doc.text(`Tolerância: ${registro.toleranciaMinutos} minutos`, 15, yPosition);
-			yPosition += 6;
-
-			doc.text(
-				`Sincronizado: ${registro.sincronizadoComServidor ? 'Sim (Servidor)' : 'Não (PC Local)'}`,
-				15,
-				yPosition
-			);
-			yPosition += 6;
+			
+			const registroData: any[][] = [
+				['Tipo', tipoLabel],
+				['Data e Hora', dataHora],
+				['Status', registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'],
+				['Tolerância', `${registro.toleranciaMinutos} minutos`],
+				['Sincronizado', registro.sincronizadoComServidor ? 'Sim (Servidor)' : 'Não (PC Local)']
+			];
 
 			if (registro.justificativa) {
-				doc.text(`Justificativa: ${registro.justificativa}`, 15, yPosition);
-				yPosition += 6;
+				registroData.push(['Justificativa', registro.justificativa]);
 			}
 
-			yPosition += 5;
+				// Verificar se precisa de nova página
+				if (yPosition > 200) {
+					doc.addPage();
+					yPosition = 20;
+				}
 
-			// Localização
+			doc.setFontSize(12);
+			doc.setTextColor(41, 128, 185);
+				doc.setFont('helvetica', 'bold');
+			doc.text('DADOS DO REGISTRO', 15, yPosition);
+				yPosition += 8;
+
+			autoTable(doc, {
+				startY: yPosition,
+				head: [['Campo', 'Valor']],
+				body: registroData,
+				theme: 'striped',
+				headStyles: { 
+					fillColor: [41, 128, 185],
+					textColor: [255, 255, 255],
+					fontStyle: 'bold',
+					fontSize: 10
+				},
+				bodyStyles: { 
+					fontSize: 10,
+					textColor: [0, 0, 0]
+				},
+				columnStyles: {
+					0: { cellWidth: 50, fontStyle: 'bold' },
+					1: { cellWidth: 140 }
+				},
+				margin: { left: 15, right: 15 },
+				styles: { cellPadding: 4 },
+				didParseCell: (data: any) => {
+					if (data.section === 'body' && data.column.index === 1) {
+						// Aplicar cor verde para "Dentro do Prazo" e vermelho para "Fora do Prazo"
+						if (data.cell.text[0] === 'Dentro do Prazo') {
+							data.cell.styles.textColor = [0, 128, 0];
+							data.cell.styles.fontStyle = 'bold';
+						} else if (data.cell.text[0] === 'Fora do Prazo') {
+							data.cell.styles.textColor = [200, 0, 0];
+							data.cell.styles.fontStyle = 'bold';
+						}
+					}
+				}
+			});
+
+			type JsPDFWithAutoTable2 = jsPDF & {
+				lastAutoTable?: { finalY: number };
+			};
+			const finalYRegistro = (doc as JsPDFWithAutoTable2).lastAutoTable?.finalY ?? yPosition + 10;
+			yPosition = finalYRegistro + 10;
+
+			// Localização em tabela
 			if (registro.latitude && registro.longitude) {
 				// Verificar se precisa de nova página
 				if (yPosition > 200) {
@@ -2245,50 +2309,69 @@
 					yPosition = 20;
 				}
 
-				doc.setFont('helvetica', 'bold');
-				doc.text('LOCALIZAÇÃO', 15, yPosition);
-				doc.setFont('helvetica', 'normal');
-
-				yPosition += 8;
-				doc.setFontSize(10);
-
-				doc.text(`Latitude: ${registro.latitude.toFixed(6)}`, 15, yPosition);
-				yPosition += 6;
-
-				doc.text(`Longitude: ${registro.longitude.toFixed(6)}`, 15, yPosition);
-				yPosition += 6;
+				const localizacaoData: any[][] = [
+					['Latitude', registro.latitude.toFixed(6)],
+					['Longitude', registro.longitude.toFixed(6)]
+				];
 
 				if (registro.precisao) {
-					doc.text(`Precisão: ${registro.precisao.toFixed(2)} metros`, 15, yPosition);
-					yPosition += 6;
+					localizacaoData.push(['Precisão', `${registro.precisao.toFixed(2)} metros`]);
 				}
 
 				if (registro.endereco) {
-					doc.text(`Endereço: ${registro.endereco}`, 15, yPosition);
-					yPosition += 6;
+					localizacaoData.push(['Endereço', registro.endereco]);
 				}
 
 				if (registro.cidade) {
-					doc.text(`Cidade: ${registro.cidade}`, 15, yPosition);
-					yPosition += 6;
+					localizacaoData.push(['Cidade', registro.cidade]);
 				}
 
 				if (registro.estado) {
-					doc.text(`Estado: ${registro.estado}`, 15, yPosition);
-					yPosition += 6;
+					localizacaoData.push(['Estado', registro.estado]);
 				}
 
 				if (registro.pais) {
-					doc.text(`País: ${registro.pais}`, 15, yPosition);
-					yPosition += 6;
+					localizacaoData.push(['País', registro.pais]);
 				}
 
 				if (registro.timezone) {
-					doc.text(`Fuso Horário: ${registro.timezone}`, 15, yPosition);
-					yPosition += 6;
+					localizacaoData.push(['Fuso Horário', registro.timezone]);
 				}
 
-				yPosition += 5;
+				doc.setFontSize(12);
+				doc.setTextColor(41, 128, 185);
+				doc.setFont('helvetica', 'bold');
+				doc.text('LOCALIZAÇÃO', 15, yPosition);
+				yPosition += 8;
+
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['Campo', 'Valor']],
+					body: localizacaoData,
+					theme: 'striped',
+					headStyles: { 
+						fillColor: [41, 128, 185],
+						textColor: [255, 255, 255],
+						fontStyle: 'bold',
+						fontSize: 10
+					},
+					bodyStyles: { 
+						fontSize: 10,
+						textColor: [0, 0, 0]
+					},
+					columnStyles: {
+						0: { cellWidth: 50, fontStyle: 'bold' },
+						1: { cellWidth: 140 }
+					},
+					margin: { left: 15, right: 15 },
+					styles: { cellPadding: 4 }
+				});
+
+				type JsPDFWithAutoTable3 = jsPDF & {
+					lastAutoTable?: { finalY: number };
+				};
+				const finalYLocalizacao = (doc as JsPDFWithAutoTable3).lastAutoTable?.finalY ?? yPosition + 10;
+				yPosition = finalYLocalizacao + 10;
 			}
 
 			// Validação de GPS e Anti-Spoofing
@@ -2299,185 +2382,318 @@
 					yPosition = 20;
 				}
 
-				doc.setFont('helvetica', 'bold');
 				doc.setFontSize(12);
+				doc.setTextColor(41, 128, 185);
+				doc.setFont('helvetica', 'bold');
 				doc.text('VALIDAÇÃO DE LOCALIZAÇÃO GPS', 15, yPosition);
-				doc.setFont('helvetica', 'normal');
-				doc.setFontSize(10);
 				yPosition += 10;
 
-				// Informações detalhadas do GPS
-				doc.setFont('helvetica', 'bold');
-				doc.text('Dados do GPS:', 15, yPosition);
-				doc.setFont('helvetica', 'normal');
-				yPosition += 6;
-
+				// Dados do GPS em tabela
+				const gpsData: any[][] = [];
 				if (registro.precisao !== null && registro.precisao !== undefined) {
-					doc.text(`  Precisão: ${registro.precisao.toFixed(2)} metros`, 20, yPosition);
-					yPosition += 6;
+					gpsData.push(['Precisão', `${registro.precisao.toFixed(2)} metros`]);
 				}
 
-				if (registro.altitude !== null && registro.altitude !== undefined) {
-					doc.text(`  Altitude: ${registro.altitude.toFixed(2)} metros`, 20, yPosition);
-					yPosition += 6;
+				if (gpsData.length > 0) {
+					autoTable(doc, {
+						startY: yPosition,
+						head: [['Campo', 'Valor']],
+						body: gpsData,
+						theme: 'striped',
+						headStyles: { 
+							fillColor: [41, 128, 185],
+							textColor: [255, 255, 255],
+							fontStyle: 'bold',
+							fontSize: 10
+						},
+						bodyStyles: { 
+							fontSize: 10,
+							textColor: [0, 0, 0]
+						},
+						columnStyles: {
+							0: { cellWidth: 50, fontStyle: 'bold' },
+							1: { cellWidth: 140 }
+						},
+						margin: { left: 15, right: 15 },
+						styles: { cellPadding: 4 }
+					});
+
+					type JsPDFWithAutoTable4 = jsPDF & {
+						lastAutoTable?: { finalY: number };
+					};
+					const finalYGps = (doc as JsPDFWithAutoTable4).lastAutoTable?.finalY ?? yPosition + 10;
+					yPosition = finalYGps + 5;
 				}
 
-				if (registro.altitudeAccuracy !== null && registro.altitudeAccuracy !== undefined) {
-					doc.text(`  Precisão da Altitude: ${registro.altitudeAccuracy.toFixed(2)} metros`, 20, yPosition);
-					yPosition += 6;
-				}
-
-				if (registro.heading !== null && registro.heading !== undefined) {
-					doc.text(`  Direção (Heading): ${registro.heading.toFixed(2)}°`, 20, yPosition);
-					yPosition += 6;
-				}
-
-				if (registro.speed !== null && registro.speed !== undefined) {
-					doc.text(`  Velocidade: ${(registro.speed * 3.6).toFixed(2)} km/h`, 20, yPosition);
-					yPosition += 6;
-				}
-
-				yPosition += 3;
-
-				// Confiabilidade e Scores
-				doc.setFont('helvetica', 'bold');
-				doc.text('Confiabilidade:', 15, yPosition);
-				doc.setFont('helvetica', 'normal');
-				yPosition += 6;
-
+				// Confiabilidade em tabela
+				const confiabilidadeData: any[][] = [];
 				if (registro.confiabilidadeGPS !== null && registro.confiabilidadeGPS !== undefined) {
 					const confiabilidadePercent = (registro.confiabilidadeGPS * 100).toFixed(1);
-					const confiabilidadeCor = registro.confiabilidadeGPS >= 0.7 ? [0, 128, 0] : registro.confiabilidadeGPS >= 0.4 ? [255, 165, 0] : [255, 0, 0];
-					doc.setTextColor(confiabilidadeCor[0], confiabilidadeCor[1], confiabilidadeCor[2]);
-					doc.text(`  Confiabilidade GPS (Frontend): ${confiabilidadePercent}%`, 20, yPosition);
-					doc.setTextColor(0, 0, 0);
-					yPosition += 6;
+					confiabilidadeData.push(['Confiabilidade GPS (Frontend)', `${confiabilidadePercent}%`]);
 				}
 
 				if (registro.scoreConfiancaBackend !== null && registro.scoreConfiancaBackend !== undefined) {
 					const scorePercent = (registro.scoreConfiancaBackend * 100).toFixed(1);
-					const scoreCor = registro.scoreConfiancaBackend >= 0.7 ? [0, 128, 0] : registro.scoreConfiancaBackend >= 0.4 ? [255, 165, 0] : [255, 0, 0];
-					doc.setTextColor(scoreCor[0], scoreCor[1], scoreCor[2]);
-					doc.text(`  Score de Confiança (Backend): ${scorePercent}%`, 20, yPosition);
+					confiabilidadeData.push(['Score de Confiança (Backend)', `${scorePercent}%`]);
+				}
+
+				if (confiabilidadeData.length > 0) {
+					doc.setFontSize(11);
 					doc.setTextColor(0, 0, 0);
-					yPosition += 6;
-				}
+				doc.setFont('helvetica', 'bold');
+				doc.text('Confiabilidade:', 15, yPosition);
+					yPosition += 8;
 
-				yPosition += 3;
-
-				// Status de Validação
-				if (registro.suspeitaSpoofing !== null && registro.suspeitaSpoofing !== undefined) {
-					doc.setFont('helvetica', 'bold');
-					doc.text('Status de Validação:', 15, yPosition);
-					doc.setFont('helvetica', 'normal');
-					yPosition += 6;
-
-					if (registro.suspeitaSpoofing) {
-						doc.setTextColor(255, 0, 0);
-						doc.setFont('helvetica', 'bold');
-						doc.text('  ⚠️ MARCAÇÃO SUSPEITA DETECTADA', 20, yPosition);
-						doc.setFont('helvetica', 'normal');
-						doc.setTextColor(0, 0, 0);
-						yPosition += 6;
-					} else {
-						doc.setTextColor(0, 128, 0);
-						doc.setFont('helvetica', 'bold');
-						doc.text('  ✓ Localização validada com sucesso', 20, yPosition);
-						doc.setFont('helvetica', 'normal');
-						doc.setTextColor(0, 0, 0);
-						yPosition += 6;
-					}
-
-					if (registro.motivoSuspeita) {
-						doc.setTextColor(255, 0, 0);
-						const motivoLines = doc.splitTextToSize(`  Motivo: ${registro.motivoSuspeita}`, 170);
-						doc.text(motivoLines, 20, yPosition);
-						yPosition += motivoLines.length * 5;
-						doc.setTextColor(0, 0, 0);
-					}
-
-					yPosition += 3;
-				}
-
-				// Avisos de Validação
-				if (registro.avisosValidacao && registro.avisosValidacao.length > 0) {
-					doc.setFont('helvetica', 'bold');
-					doc.text('Avisos de Validação:', 15, yPosition);
-					doc.setFont('helvetica', 'normal');
-					yPosition += 6;
-
-					registro.avisosValidacao.forEach((aviso: string) => {
-						const avisoLines = doc.splitTextToSize(`  • ${aviso}`, 170);
-						doc.text(avisoLines, 20, yPosition);
-						yPosition += avisoLines.length * 5;
+					autoTable(doc, {
+						startY: yPosition,
+						head: [['Campo', 'Valor']],
+						body: confiabilidadeData,
+						theme: 'striped',
+						headStyles: { 
+							fillColor: [60, 60, 60],
+							textColor: [255, 255, 255],
+							fontStyle: 'bold',
+							fontSize: 10
+						},
+						bodyStyles: { 
+							fontSize: 10
+						},
+						columnStyles: {
+							0: { cellWidth: 80, fontStyle: 'bold' },
+							1: { cellWidth: 110 }
+						},
+						margin: { left: 15, right: 15 },
+						styles: { cellPadding: 4 },
+						didParseCell: (data: any) => {
+							if (data.section === 'body' && data.column.index === 1) {
+								// Aplicar cores baseadas nos valores
+								const valorTexto = data.cell.text[0];
+								const valorNum = parseFloat(valorTexto.replace('%', ''));
+								if (!isNaN(valorNum)) {
+									if (valorNum >= 70) {
+										data.cell.styles.textColor = [0, 128, 0];
+										data.cell.styles.fontStyle = 'bold';
+									} else if (valorNum >= 40) {
+										data.cell.styles.textColor = [255, 165, 0];
+										data.cell.styles.fontStyle = 'bold';
+									} else {
+										data.cell.styles.textColor = [255, 0, 0];
+										data.cell.styles.fontStyle = 'bold';
+									}
+								}
+							}
+						}
 					});
 
-					yPosition += 3;
+					type JsPDFWithAutoTable5 = jsPDF & {
+						lastAutoTable?: { finalY: number };
+					};
+					const finalYConf = (doc as JsPDFWithAutoTable5).lastAutoTable?.finalY ?? yPosition + 10;
+					yPosition = finalYConf + 5;
 				}
 
-				// Análise de Propriedades GPS
-				doc.setFont('helvetica', 'bold');
-				doc.text('Análise de Propriedades GPS:', 15, yPosition);
-				doc.setFont('helvetica', 'normal');
-				yPosition += 6;
+				// Status de Validação em destaque
+				if (registro.suspeitaSpoofing !== null && registro.suspeitaSpoofing !== undefined) {
+					const statusData: any[][] = [];
 
+					if (registro.suspeitaSpoofing) {
+						statusData.push(['Status', '⚠️ MARCAÇÃO SUSPEITA DETECTADA']);
+						if (registro.motivoSuspeita) {
+							statusData.push(['Motivo', registro.motivoSuspeita]);
+						}
+					} else {
+						statusData.push(['Status', '✓ Localização validada com sucesso']);
+					}
+
+					if (statusData.length > 0) {
+						doc.setFontSize(11);
+						doc.setTextColor(0, 0, 0);
+						doc.setFont('helvetica', 'bold');
+						doc.text('Status de Validação:', 15, yPosition);
+						yPosition += 8;
+
+						autoTable(doc, {
+							startY: yPosition,
+							head: [['Campo', 'Valor']],
+							body: statusData,
+							theme: 'striped',
+							headStyles: { 
+								fillColor: registro.suspeitaSpoofing ? [200, 0, 0] : [0, 128, 0],
+								textColor: [255, 255, 255],
+								fontStyle: 'bold',
+								fontSize: 10
+							},
+							bodyStyles: { 
+								fontSize: 10
+							},
+							columnStyles: {
+								0: { cellWidth: 50, fontStyle: 'bold' },
+								1: { cellWidth: 140 }
+							},
+							margin: { left: 15, right: 15 },
+							styles: { cellPadding: 4 },
+							didParseCell: (data: any) => {
+								if (data.section === 'body' && data.column.index === 1) {
+									if (registro.suspeitaSpoofing) {
+										data.cell.styles.textColor = [200, 0, 0];
+										data.cell.styles.fontStyle = 'bold';
+									} else {
+										data.cell.styles.textColor = [0, 128, 0];
+										data.cell.styles.fontStyle = 'bold';
+									}
+								}
+							}
+						});
+
+						type JsPDFWithAutoTable6 = jsPDF & {
+							lastAutoTable?: { finalY: number };
+						};
+						const finalYStatus = (doc as JsPDFWithAutoTable6).lastAutoTable?.finalY ?? yPosition + 10;
+						yPosition = finalYStatus + 5;
+					}
+				}
+
+				// Avisos de Validação em tabela
+				if (registro.avisosValidacao && registro.avisosValidacao.length > 0) {
+					const avisosData = registro.avisosValidacao.map((aviso: string) => ['', aviso]);
+					
+					doc.setFontSize(11);
+					doc.setTextColor(0, 0, 0);
+					doc.setFont('helvetica', 'bold');
+					doc.text('Avisos de Validação:', 15, yPosition);
+					yPosition += 8;
+
+					autoTable(doc, {
+						startY: yPosition,
+						head: [['', 'Aviso']],
+						body: avisosData,
+						theme: 'striped',
+						headStyles: { 
+							fillColor: [255, 165, 0],
+							textColor: [255, 255, 255],
+							fontStyle: 'bold',
+							fontSize: 10
+						},
+						bodyStyles: { 
+							fontSize: 10,
+							textColor: [0, 0, 0]
+						},
+						columnStyles: {
+							0: { cellWidth: 10 },
+							1: { cellWidth: 180 }
+						},
+						margin: { left: 15, right: 15 },
+						styles: { cellPadding: 4 }
+					});
+
+					type JsPDFWithAutoTable7 = jsPDF & {
+						lastAutoTable?: { finalY: number };
+					};
+					const finalYAvisos = (doc as JsPDFWithAutoTable7).lastAutoTable?.finalY ?? yPosition + 10;
+					yPosition = finalYAvisos + 5;
+				}
+
+				// Análise de Propriedades GPS em tabela
+				const propriedadesData: any[][] = [];
 				let propriedadesGPS = 0;
 				let propriedadesTotais = 5;
 
 				if (registro.altitude !== null && registro.altitude !== undefined && registro.altitude !== 0) {
-					doc.text('  ✓ Altitude disponível', 20, yPosition);
+					propriedadesData.push(['Altitude', '✓ Disponível']);
 					propriedadesGPS++;
 				} else {
-					doc.text('  ✗ Altitude não disponível', 20, yPosition);
+					propriedadesData.push(['Altitude', '✗ Não disponível']);
 				}
-				yPosition += 5;
 
 				if (registro.altitudeAccuracy !== null && registro.altitudeAccuracy !== undefined && registro.altitudeAccuracy > 0) {
-					doc.text('  ✓ Precisão de altitude disponível', 20, yPosition);
+					propriedadesData.push(['Precisão de Altitude', '✓ Disponível']);
 					propriedadesGPS++;
 				} else {
-					doc.text('  ✗ Precisão de altitude não disponível', 20, yPosition);
+					propriedadesData.push(['Precisão de Altitude', '✗ Não disponível']);
 				}
-				yPosition += 5;
 
 				if (registro.heading !== null && registro.heading !== undefined && !isNaN(registro.heading)) {
-					doc.text('  ✓ Direção (heading) disponível', 20, yPosition);
+					propriedadesData.push(['Direção (Heading)', '✓ Disponível']);
 					propriedadesGPS++;
 				} else {
-					doc.text('  ✗ Direção (heading) não disponível', 20, yPosition);
+					propriedadesData.push(['Direção (Heading)', '✗ Não disponível']);
 				}
-				yPosition += 5;
 
 				if (registro.speed !== null && registro.speed !== undefined && !isNaN(registro.speed)) {
-					doc.text('  ✓ Velocidade disponível', 20, yPosition);
+					propriedadesData.push(['Velocidade', '✓ Disponível']);
 					propriedadesGPS++;
 				} else {
-					doc.text('  ✗ Velocidade não disponível', 20, yPosition);
+					propriedadesData.push(['Velocidade', '✗ Não disponível']);
 				}
-				yPosition += 5;
 
 				if (registro.precisao !== null && registro.precisao !== undefined && registro.precisao < 20) {
-					doc.text('  ✓ Alta precisão GPS (< 20m)', 20, yPosition);
+					propriedadesData.push(['Precisão GPS', '✓ Alta precisão (< 20m)']);
 					propriedadesGPS++;
 				} else if (registro.precisao !== null && registro.precisao !== undefined && registro.precisao >= 20 && registro.precisao < 100) {
-					doc.text('  ⚠ Precisão média GPS (20-100m)', 20, yPosition);
+					propriedadesData.push(['Precisão GPS', '⚠ Precisão média (20-100m)']);
 					propriedadesGPS += 0.5;
 				} else {
-					doc.text('  ✗ Baixa precisão GPS (> 100m)', 20, yPosition);
+					propriedadesData.push(['Precisão GPS', '✗ Baixa precisão (> 100m)']);
 				}
-				yPosition += 5;
 
 				// Indicador de qualidade GPS
 				const qualidadeGPS = (propriedadesGPS / propriedadesTotais) * 100;
 				const qualidadeTexto = qualidadeGPS >= 80 ? 'Alta qualidade (GPS real)' : qualidadeGPS >= 50 ? 'Qualidade média' : 'Baixa qualidade (possível spoofing)';
 				const qualidadeCor = qualidadeGPS >= 80 ? [0, 128, 0] : qualidadeGPS >= 50 ? [255, 165, 0] : [255, 0, 0];
+				propriedadesData.push(['Qualidade GPS', `${qualidadeTexto} (${qualidadeGPS.toFixed(0)}%)`]);
 
-				doc.setFont('helvetica', 'bold');
-				doc.setTextColor(qualidadeCor[0], qualidadeCor[1], qualidadeCor[2]);
-				doc.text(`Qualidade GPS: ${qualidadeTexto} (${qualidadeGPS.toFixed(0)}% das propriedades)`, 20, yPosition);
-				doc.setFont('helvetica', 'normal');
+				doc.setFontSize(11);
 				doc.setTextColor(0, 0, 0);
+				doc.setFont('helvetica', 'bold');
+				doc.text('Análise de Propriedades GPS:', 15, yPosition);
 				yPosition += 8;
+
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['Propriedade', 'Status']],
+					body: propriedadesData,
+					theme: 'striped',
+					headStyles: { 
+						fillColor: [60, 60, 60],
+						textColor: [255, 255, 255],
+						fontStyle: 'bold',
+						fontSize: 10
+					},
+					bodyStyles: { 
+						fontSize: 10
+					},
+					columnStyles: {
+						0: { cellWidth: 80, fontStyle: 'bold' },
+						1: { cellWidth: 110 }
+					},
+					margin: { left: 15, right: 15 },
+					styles: { cellPadding: 4 },
+					didParseCell: (data: any) => {
+						if (data.section === 'body' && data.column.index === 1) {
+							const texto = data.cell.text[0];
+							if (texto.includes('✓')) {
+								data.cell.styles.textColor = [0, 128, 0];
+								data.cell.styles.fontStyle = 'bold';
+							} else if (texto.includes('✗')) {
+								data.cell.styles.textColor = [200, 0, 0];
+							} else if (texto.includes('⚠')) {
+								data.cell.styles.textColor = [255, 165, 0];
+								data.cell.styles.fontStyle = 'bold';
+							}
+							// Última linha (Qualidade GPS)
+							if (data.row.index === propriedadesData.length - 1) {
+								data.cell.styles.textColor = qualidadeCor;
+								data.cell.styles.fontStyle = 'bold';
+							}
+						}
+					}
+				});
+
+				type JsPDFWithAutoTable8 = jsPDF & {
+					lastAutoTable?: { finalY: number };
+				};
+				const finalYPropriedades = (doc as JsPDFWithAutoTable8).lastAutoTable?.finalY ?? yPosition + 10;
+				yPosition = finalYPropriedades + 10;
 			}
 
 			// Validação de Geofencing (Localização Permitida)
@@ -2488,11 +2704,10 @@
 					yPosition = 20;
 				}
 
-				doc.setFont('helvetica', 'bold');
 				doc.setFontSize(12);
+				doc.setTextColor(41, 128, 185);
+				doc.setFont('helvetica', 'bold');
 				doc.text('VALIDAÇÃO DE LOCALIZAÇÃO PERMITIDA', 15, yPosition);
-				doc.setFont('helvetica', 'normal');
-				doc.setFontSize(10);
 				yPosition += 10;
 
 				if (registro.enderecoMarcacaoEsperado || registro.dentroRaioPermitido !== undefined) {
@@ -2519,89 +2734,43 @@
 						}
 					}
 
-					doc.setFont('helvetica', 'bold');
-					doc.text('Endereço Esperado:', 15, yPosition);
-					doc.setFont('helvetica', 'normal');
-					yPosition += 6;
-
-					doc.text(`  Nome: ${enderecoEsperadoNome}`, 20, yPosition);
-					yPosition += 6;
-
-					const enderecoLines = doc.splitTextToSize(`  Endereço: ${enderecoEsperadoEndereco}`, 170);
-					doc.text(enderecoLines, 20, yPosition);
-					yPosition += enderecoLines.length * 5 + 3;
+					const geofencingData: any[][] = [
+						['Endereço Esperado', enderecoEsperadoNome],
+						['Localização', enderecoEsperadoEndereco]
+					];
 
 					if (enderecoEsperadoLatitude !== null && enderecoEsperadoLongitude !== null) {
-						doc.text(`  Coordenadas: ${enderecoEsperadoLatitude.toFixed(6)}, ${enderecoEsperadoLongitude.toFixed(6)}`, 20, yPosition);
-						yPosition += 6;
+						geofencingData.push(['Coordenadas Esperadas', `${enderecoEsperadoLatitude.toFixed(6)}, ${enderecoEsperadoLongitude.toFixed(6)}`]);
 					}
 
-					yPosition += 3;
-
-					doc.setFont('helvetica', 'bold');
-					doc.text('Localização do Registro:', 15, yPosition);
-					doc.setFont('helvetica', 'normal');
-					yPosition += 6;
-
-					doc.text(`  Coordenadas: ${registro.latitude.toFixed(6)}, ${registro.longitude.toFixed(6)}`, 20, yPosition);
-					yPosition += 6;
+					geofencingData.push(['Coordenadas do Registro', `${registro.latitude.toFixed(6)}, ${registro.longitude.toFixed(6)}`]);
 
 					if (registro.distanciaEnderecoEsperado !== null && registro.distanciaEnderecoEsperado !== undefined) {
 						const distanciaKm = (registro.distanciaEnderecoEsperado / 1000).toFixed(2);
 						const distanciaMetros = registro.distanciaEnderecoEsperado.toFixed(0);
-						
-						if (registro.distanciaEnderecoEsperado >= 1000) {
-							doc.text(`  Distância: ${distanciaKm} km (${distanciaMetros} metros)`, 20, yPosition);
-						} else {
-							doc.text(`  Distância: ${distanciaMetros} metros`, 20, yPosition);
-						}
-						yPosition += 6;
+						const distanciaTexto = registro.distanciaEnderecoEsperado >= 1000 
+							? `${distanciaKm} km (${distanciaMetros} metros)`
+							: `${distanciaMetros} metros`;
+						geofencingData.push(['Distância', distanciaTexto]);
 					}
 
-					yPosition += 3;
-
-					doc.setFont('helvetica', 'bold');
-					doc.text('Raio Permitido:', 15, yPosition);
-					doc.setFont('helvetica', 'normal');
-					yPosition += 6;
-
 					if (registro.raioToleranciaUsado !== null && registro.raioToleranciaUsado !== undefined) {
 						const raioKm = (registro.raioToleranciaUsado / 1000).toFixed(2);
 						const raioMetros = registro.raioToleranciaUsado.toFixed(0);
-						
-						if (registro.raioToleranciaUsado >= 1000) {
-							doc.text(`  ${raioKm} km (${raioMetros} metros)`, 20, yPosition);
+						const raioTexto = registro.raioToleranciaUsado >= 1000 
+							? `${raioKm} km (${raioMetros} metros)`
+							: `${raioMetros} metros`;
+						geofencingData.push(['Raio Permitido', raioTexto]);
 						} else {
-							doc.text(`  ${raioMetros} metros`, 20, yPosition);
-						}
-						yPosition += 6;
-					} else {
-						doc.text('  Não configurado', 20, yPosition);
-						yPosition += 6;
+						geofencingData.push(['Raio Permitido', 'Não configurado']);
 					}
 
-					yPosition += 3;
-
 					// Status da validação
-					doc.setFont('helvetica', 'bold');
-					doc.text('Status:', 15, yPosition);
-					doc.setFont('helvetica', 'normal');
-					yPosition += 6;
-
+					let statusTexto = 'Não validado';
 					if (registro.dentroRaioPermitido === true) {
-						doc.setTextColor(0, 128, 0);
-						doc.setFont('helvetica', 'bold');
-						doc.text('  ✓ DENTRO DO RAIO PERMITIDO', 20, yPosition);
-						doc.setFont('helvetica', 'normal');
-						doc.setTextColor(0, 0, 0);
+						statusTexto = '✓ DENTRO DO RAIO PERMITIDO';
 					} else if (registro.dentroRaioPermitido === false) {
-						doc.setTextColor(255, 0, 0);
-						doc.setFont('helvetica', 'bold');
-						doc.text('  ⚠️ FORA DO RAIO PERMITIDO', 20, yPosition);
-						doc.setFont('helvetica', 'normal');
-						doc.setTextColor(0, 0, 0);
-						yPosition += 6;
-
+						statusTexto = '⚠️ FORA DO RAIO PERMITIDO';
 						if (
 							registro.distanciaEnderecoEsperado !== null &&
 							registro.distanciaEnderecoEsperado !== undefined &&
@@ -2611,34 +2780,75 @@
 							const distanciaExcedente = registro.distanciaEnderecoEsperado - registro.raioToleranciaUsado;
 							const distanciaExcedenteKm = (distanciaExcedente / 1000).toFixed(2);
 							const distanciaExcedenteMetros = distanciaExcedente.toFixed(0);
+							const excedenteTexto = distanciaExcedente >= 1000 
+								? `${distanciaExcedenteKm} km além do permitido`
+								: `${distanciaExcedenteMetros} metros além do permitido`;
+							geofencingData.push(['Distância Excedente', excedenteTexto]);
+						}
+					}
+					geofencingData.push(['Status', statusTexto]);
 
-							if (distanciaExcedente >= 1000) {
-								doc.text(`  ${distanciaExcedenteKm} km além do permitido`, 20, yPosition);
-							} else {
-								doc.text(`  ${distanciaExcedenteMetros} metros além do permitido`, 20, yPosition);
+					autoTable(doc, {
+						startY: yPosition,
+						head: [['Campo', 'Valor']],
+						body: geofencingData,
+						theme: 'striped',
+						headStyles: { 
+							fillColor: [41, 128, 185],
+							textColor: [255, 255, 255],
+							fontStyle: 'bold',
+							fontSize: 10
+						},
+						bodyStyles: { 
+							fontSize: 10
+						},
+						columnStyles: {
+							0: { cellWidth: 60, fontStyle: 'bold' },
+							1: { cellWidth: 130 }
+						},
+						margin: { left: 15, right: 15 },
+						styles: { cellPadding: 4 },
+						didParseCell: (data: any) => {
+							if (data.section === 'body' && data.column.index === 1) {
+								const texto = data.cell.text[0];
+								if (texto.includes('✓ DENTRO')) {
+									data.cell.styles.textColor = [0, 128, 0];
+									data.cell.styles.fontStyle = 'bold';
+								} else if (texto.includes('⚠️ FORA')) {
+									data.cell.styles.textColor = [200, 0, 0];
+									data.cell.styles.fontStyle = 'bold';
+								}
 							}
 						}
+					});
 
-						yPosition += 6;
+					type JsPDFWithAutoTable9 = jsPDF & {
+						lastAutoTable?: { finalY: number };
+					};
+					const finalYGeofencing = (doc as JsPDFWithAutoTable9).lastAutoTable?.finalY ?? yPosition + 10;
+					yPosition = finalYGeofencing + 5;
 
-						doc.setFont('helvetica', 'normal');
-						doc.setTextColor(0, 0, 0);
+					// Observação se fora do raio
+					if (registro.dentroRaioPermitido === false) {
 						doc.setFontSize(9);
+						doc.setTextColor(100, 100, 100);
 						const observacaoLines = doc.splitTextToSize(
 							'O registro foi realizado fora da área permitida de marcação de ponto. Verifique se o funcionário possui autorização para trabalho remoto ou deslocamento.',
 							170
 						);
 						doc.text(observacaoLines, 20, yPosition);
-						yPosition += observacaoLines.length * 4;
+						yPosition += observacaoLines.length * 4 + 5;
 						doc.setFontSize(10);
-					} else {
-						doc.text('  Não validado', 20, yPosition);
+						doc.setTextColor(0, 0, 0);
 					}
 
-					yPosition += 8;
+					yPosition += 5;
 				} else {
+					doc.setFontSize(10);
+					doc.setTextColor(100, 100, 100);
 					doc.text('Validação de localização permitida não configurada para este registro.', 15, yPosition);
 					yPosition += 8;
+					doc.setTextColor(0, 0, 0);
 				}
 			}
 
@@ -2649,139 +2859,112 @@
 				yPosition = 20;
 			}
 
+			doc.setFontSize(12);
+			doc.setTextColor(41, 128, 185);
 			doc.setFont('helvetica', 'bold');
 			doc.text('DADOS TÉCNICOS', 15, yPosition);
-			doc.setFont('helvetica', 'normal');
+			yPosition += 10;
 
-			yPosition += 8;
-			doc.setFontSize(10);
+			// Consolidar todos os dados técnicos em uma única tabela
+			const dadosTecnicosData: any[][] = [];
 
 			// Informações de Rede
 			if (registro.ipAddress || registro.ipPublico || registro.ipLocal) {
-				doc.setFont('helvetica', 'bold');
-				doc.text('Rede:', 15, yPosition);
-				doc.setFont('helvetica', 'normal');
-				yPosition += 6;
-
 				if (registro.ipAddress) {
-					doc.text(`  IP: ${registro.ipAddress}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['IP', registro.ipAddress]);
 				}
-
 				if (registro.ipPublico) {
-					doc.text(`  IP Público: ${registro.ipPublico}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['IP Público', registro.ipPublico]);
 				}
-
 				if (registro.ipLocal) {
-					doc.text(`  IP Local: ${registro.ipLocal}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['IP Local', registro.ipLocal]);
 				}
-
-				yPosition += 3;
 			}
 
 			// Informações do Navegador
 			if (registro.browser || registro.userAgent) {
-				doc.setFont('helvetica', 'bold');
-				doc.text('Navegador:', 15, yPosition);
-				doc.setFont('helvetica', 'normal');
-				yPosition += 6;
-
 				if (registro.browser) {
-					doc.text(`  Navegador: ${registro.browser}${registro.browserVersion ? ` ${registro.browserVersion}` : ''}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Navegador', `${registro.browser}${registro.browserVersion ? ` ${registro.browserVersion}` : ''}`]);
 				}
-
 				if (registro.engine) {
-					doc.text(`  Engine: ${registro.engine}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Engine', registro.engine]);
 				}
-
 				if (registro.userAgent) {
-					// Quebrar user agent em múltiplas linhas se necessário
-					const userAgentLines = doc.splitTextToSize(`  User Agent: ${registro.userAgent}`, 170);
-					doc.text(userAgentLines, 20, yPosition);
-					yPosition += userAgentLines.length * 6;
+					dadosTecnicosData.push(['User Agent', registro.userAgent]);
 				}
-
-				yPosition += 3;
 			}
 
 			// Informações do Sistema
 			if (registro.sistemaOperacional || registro.arquitetura) {
-				doc.setFont('helvetica', 'bold');
-				doc.text('Sistema:', 15, yPosition);
-				doc.setFont('helvetica', 'normal');
-				yPosition += 6;
-
 				if (registro.sistemaOperacional) {
-					doc.text(`  SO: ${registro.sistemaOperacional}${registro.osVersion ? ` ${registro.osVersion}` : ''}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Sistema Operacional', `${registro.sistemaOperacional}${registro.osVersion ? ` ${registro.osVersion}` : ''}`]);
 				}
-
 				if (registro.arquitetura) {
-					doc.text(`  Arquitetura: ${registro.arquitetura}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Arquitetura', registro.arquitetura]);
 				}
-
 				if (registro.plataforma) {
-					doc.text(`  Plataforma: ${registro.plataforma}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Plataforma', registro.plataforma]);
 				}
-
-				yPosition += 3;
 			}
 
 			// Informações do Dispositivo
 			if (registro.deviceType || registro.screenResolution) {
-				doc.setFont('helvetica', 'bold');
-				doc.text('Dispositivo:', 15, yPosition);
-				doc.setFont('helvetica', 'normal');
-				yPosition += 6;
-
 				if (registro.deviceType) {
-					doc.text(`  Tipo: ${registro.deviceType}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Tipo de Dispositivo', registro.deviceType]);
 				}
-
 				if (registro.deviceModel) {
-					doc.text(`  Modelo: ${registro.deviceModel}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Modelo', registro.deviceModel]);
 				}
-
 				if (registro.screenResolution) {
-					doc.text(`  Resolução: ${registro.screenResolution}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Resolução', registro.screenResolution]);
 				}
-
 				if (registro.coresTela) {
-					doc.text(`  Cores: ${registro.coresTela}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Cores da Tela', registro.coresTela]);
 				}
-
 				if (registro.isMobile || registro.isTablet || registro.isDesktop) {
 					const tipoDispositivo = registro.isMobile ? 'Mobile' : registro.isTablet ? 'Tablet' : 'Desktop';
-					doc.text(`  Categoria: ${tipoDispositivo}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Categoria', tipoDispositivo]);
 				}
-
 				if (registro.idioma) {
-					doc.text(`  Idioma: ${registro.idioma}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Idioma', registro.idioma]);
 				}
-
 				if (registro.connectionType) {
-					doc.text(`  Conexão: ${registro.connectionType}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Tipo de Conexão', registro.connectionType]);
 				}
-
 				if (registro.memoryInfo) {
-					doc.text(`  Memória: ${registro.memoryInfo}`, 20, yPosition);
-					yPosition += 6;
+					dadosTecnicosData.push(['Memória', registro.memoryInfo]);
 				}
+			}
 
-				yPosition += 3;
+			if (dadosTecnicosData.length > 0) {
+				autoTable(doc, {
+					startY: yPosition,
+					head: [['Campo', 'Valor']],
+					body: dadosTecnicosData,
+					theme: 'striped',
+					headStyles: { 
+						fillColor: [60, 60, 60],
+						textColor: [255, 255, 255],
+						fontStyle: 'bold',
+						fontSize: 10
+					},
+					bodyStyles: { 
+						fontSize: 9,
+						textColor: [0, 0, 0]
+					},
+					columnStyles: {
+						0: { cellWidth: 60, fontStyle: 'bold' },
+						1: { cellWidth: 130 }
+					},
+					margin: { left: 15, right: 15 },
+					styles: { cellPadding: 3 }
+				});
+
+				type JsPDFWithAutoTable10 = jsPDF & {
+					lastAutoTable?: { finalY: number };
+				};
+				const finalYTecnicos = (doc as JsPDFWithAutoTable10).lastAutoTable?.finalY ?? yPosition + 10;
+				yPosition = finalYTecnicos + 10;
 			}
 
 			// Imagem capturada (se disponível)
@@ -2869,17 +3052,38 @@
 				}
 			}
 
-			// Rodapé
+			// Rodapé melhorado
 			const pageCount = doc.getNumberOfPages();
 			for (let i = 1; i <= pageCount; i++) {
 				doc.setPage(i);
+				
+				// Linha decorativa no rodapé
+				doc.setDrawColor(200, 200, 200);
+				doc.setLineWidth(0.3);
+				doc.line(15, doc.internal.pageSize.getHeight() - 20, 195, doc.internal.pageSize.getHeight() - 20);
+				
+				// Texto do rodapé
 				doc.setFontSize(8);
-				doc.setTextColor(128, 128, 128);
+				doc.setTextColor(100, 100, 100);
+				doc.setFont('helvetica', 'normal');
+				const dataGeracao = new Date().toLocaleDateString('pt-BR', { 
+					day: '2-digit', 
+					month: '2-digit', 
+					year: 'numeric',
+					hour: '2-digit',
+					minute: '2-digit'
+				});
 				doc.text(
-					`SGSE - Sistema de Gerenciamento de Secretaria | Página ${i} de ${pageCount}`,
-					doc.internal.pageSize.getWidth() / 2,
-					doc.internal.pageSize.getHeight() - 10,
-					{ align: 'center' }
+					`SGSE - Sistema de Gerenciamento de Secretaria de Esportes`,
+					15,
+					doc.internal.pageSize.getHeight() - 12,
+					{ align: 'left' }
+				);
+				doc.text(
+					`Gerado em: ${dataGeracao} | Página ${i} de ${pageCount}`,
+					195,
+					doc.internal.pageSize.getHeight() - 12,
+					{ align: 'right' }
 				);
 			}
 
-- 
2.49.1


From 35e7c10ed0b67e82168aacb5dcbc3932e0dc3025 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 23 Nov 2025 13:13:24 -0300
Subject: [PATCH 10/13] refactor: update ErrorModal and RegistroPonto
 components for improved UI and functionality

- Refactored ErrorModal to use a div-based layout with enhanced animations and accessibility features.
- Updated RegistroPonto to include a new loading state and improved modal handling for webcam capture.
- Enhanced styling for better visual consistency and user experience across modals and registration cards.
- Introduced comparative balance calculations in RegistroPonto for better visibility of time discrepancies.
---
 apps/web/src/lib/components/ErrorModal.svelte | 106 ++++--
 .../lib/components/ponto/RegistroPonto.svelte | 342 +++++++++++------
 .../ponto/RelogioSincronizado.svelte          |  35 +-
 .../ponto/SaldoDiarioComparativoBadge.svelte  |  46 +++
 .../registro-pontos/+page.svelte              | 352 ++++++++++++++----
 5 files changed, 660 insertions(+), 221 deletions(-)
 create mode 100644 apps/web/src/lib/components/ponto/SaldoDiarioComparativoBadge.svelte

diff --git a/apps/web/src/lib/components/ErrorModal.svelte b/apps/web/src/lib/components/ErrorModal.svelte
index c7de436..8367d76 100644
--- a/apps/web/src/lib/components/ErrorModal.svelte
+++ b/apps/web/src/lib/components/ErrorModal.svelte
@@ -23,38 +23,41 @@
 		       details.match(/^\d+\./); // Começa com número (lista numerada)
 	});
 
-	let modalRef: HTMLDialogElement;
-
 	function handleClose() {
 		open = false;
 		onClose();
 	}
-
-	$effect(() => {
-		if (open && modalRef) {
-			modalRef.showModal();
-		} else if (!open && modalRef) {
-			modalRef.close();
-		}
-	});
 </script>
 
 {#if open}
-	<dialog
-		bind:this={modalRef}
-		class="modal"
-		onclick={(e) => e.target === e.currentTarget && handleClose()}
+	<div 
+		class="fixed inset-0 z-50 flex items-center justify-center p-4"
+		style="animation: fadeIn 0.2s ease-out;"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="modal-error-title"
 	>
-		<div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
-			<!-- Header -->
-			<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
-				<h2 id="modal-title" class="text-error flex items-center gap-2 text-xl font-bold">
+		<!-- Backdrop -->
+		<div 
+			class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-200"
+			onclick={handleClose}
+		></div>
+		
+		<!-- Modal Box -->
+		<div 
+			class="relative bg-base-100 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col z-10 transform transition-all duration-300"
+			style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
+			onclick={(e) => e.stopPropagation()}
+		>
+			<!-- Header fixo -->
+			<div class="flex items-center justify-between px-6 py-4 border-b border-base-300 flex-shrink-0">
+				<h2 id="modal-error-title" class="text-error flex items-center gap-2 text-xl font-bold">
 					<AlertCircle class="h-6 w-6" strokeWidth={2.5} />
 					{title}
 				</h2>
 				<button
 					type="button"
-					class="btn btn-sm btn-circle btn-ghost"
+					class="btn btn-sm btn-circle btn-ghost hover:bg-base-300"
 					onclick={handleClose}
 					aria-label="Fechar"
 				>
@@ -62,8 +65,8 @@
 				</button>
 			</div>
 
-			<!-- Content -->
-			<div class="px-6 py-6">
+			<!-- Content com rolagem -->
+			<div class="flex-1 overflow-y-auto px-6 py-6 modal-scroll">
 				<!-- Mensagem principal -->
 				<div class="mb-6">
 					<p class="text-base-content text-base leading-relaxed font-medium">{message}</p>
@@ -96,14 +99,59 @@
 				{/if}
 			</div>
 
-			<!-- Footer -->
-			<div class="modal-action border-base-300 border-t px-6 pb-6 pt-4">
-				<button class="btn btn-primary btn-md" onclick={handleClose}> Entendi, obrigado </button>
+			<!-- Footer fixo -->
+			<div class="flex justify-end px-6 py-4 border-t border-base-300 flex-shrink-0">
+				<button class="btn btn-primary" onclick={handleClose}>Entendi, obrigado</button>
 			</div>
 		</div>
-
-		<form method="dialog" class="modal-backdrop">
-			<button type="button" onclick={handleClose}>fechar</button>
-		</form>
-	</dialog>
+	</div>
 {/if}
+
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	/* Scrollbar customizada para os modais */
+	:global(.modal-scroll) {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--bc) / 0.3) transparent;
+		scroll-behavior: smooth;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar) {
+		width: 8px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-track) {
+		background: transparent;
+		border-radius: 4px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb) {
+		background-color: hsl(var(--bc) / 0.3);
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb:hover) {
+		background-color: hsl(var(--bc) / 0.5);
+	}
+</style>
diff --git a/apps/web/src/lib/components/ponto/RegistroPonto.svelte b/apps/web/src/lib/components/ponto/RegistroPonto.svelte
index b6c3432..c084e8c 100644
--- a/apps/web/src/lib/components/ponto/RegistroPonto.svelte
+++ b/apps/web/src/lib/components/ponto/RegistroPonto.svelte
@@ -13,7 +13,7 @@
 		getTipoRegistroLabel,
 		getProximoTipoRegistro
 	} from '$lib/utils/ponto';
-	import { LogIn, LogOut, Clock, CheckCircle2, XCircle, TrendingUp, TrendingDown, Printer } from 'lucide-svelte';
+	import { LogIn, LogOut, Clock, CheckCircle2, XCircle, TrendingUp, TrendingDown, Printer, Camera } from 'lucide-svelte';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import jsPDF from 'jspdf';
 	import logoGovPE from '$lib/assets/logo_governo_PE.png';
@@ -64,6 +64,7 @@
 	let justificativa = $state('');
 	let mostrandoModalConfirmacao = $state(false);
 	let dataHoraAtual = $state<{ data: string; hora: string } | null>(null);
+	let aguardandoProcessamento = $state(false);
 
 	const registrosHoje = $derived(registrosHojeQuery?.data || []);
 	const config = $derived(configQuery?.data);
@@ -312,6 +313,7 @@
 			}, 1000);
 		} catch (error) {
 			console.error('Erro ao registrar ponto:', error);
+			aguardandoProcessamento = false;
 			let mensagemErro = 'Erro desconhecido ao registrar ponto';
 			let detalhesErro = 'Tente novamente em alguns instantes.';
 			
@@ -389,6 +391,7 @@
 		} finally {
 			registrando = false;
 			coletandoInfo = false;
+			aguardandoProcessamento = false;
 		}
 	}
 
@@ -514,6 +517,7 @@
 
 	function confirmarRegistro() {
 		mostrandoModalConfirmacao = false;
+		aguardandoProcessamento = true;
 		registrarPonto();
 	}
 
@@ -753,25 +757,7 @@
 		return !registrando && !coletandoInfo && config !== undefined && !estaDispensado && temFuncionarioAssociado;
 	});
 
-	// Referência para o modal
-	let modalRef: HTMLDivElement | null = $state(null);
-
-	// Efeito para garantir que o modal fique visível quando abrir
-	$effect(() => {
-		if (mostrandoWebcam && modalRef) {
-			// Aguardar um frame para garantir que o DOM foi atualizado
-			setTimeout(() => {
-				if (modalRef) {
-					modalRef.scrollIntoView({ behavior: 'smooth', block: 'center' });
-					// Também garantir que o modal-box esteja visível
-					const modalBox = modalRef.querySelector('.modal-box');
-					if (modalBox) {
-						(modalBox as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'center' });
-					}
-				}
-			}, 100);
-		}
-	});
+	// Os modais agora são centralizados automaticamente via CSS (fixed inset-0 flex items-center justify-center)
 
 	// Solicitar permissões automaticamente ao montar o componente
 	onMount(async () => {
@@ -922,71 +908,95 @@
 		</div>
 	{/if}
 
-	<!-- Botões de Registro -->
-	<div class="card bg-base-100 shadow-xl">
-		<div class="card-body items-center">
-			<h2 class="card-title mb-4">Registrar Ponto</h2>
-			<div class="mb-6 w-full">
-				<RelogioSincronizado />
+	<!-- Card de Registro de Ponto Modernizado -->
+	<div class="card bg-gradient-to-br from-base-100 via-base-100 to-primary/5 border border-base-300 shadow-2xl max-w-2xl mx-auto">
+		<div class="card-body p-6">
+			<!-- Cabeçalho -->
+			<div class="flex items-center justify-center gap-3 mb-6">
+				<div class="p-2.5 bg-primary/10 rounded-xl">
+					<Clock class="h-6 w-6 text-primary" strokeWidth={2.5} />
+				</div>
+				<h2 class="card-title text-2xl font-black text-base-content">Registrar Ponto</h2>
 			</div>
-			<div class="flex w-full flex-col items-center gap-4">
-				{#if sucesso}
-					<div class="alert alert-success w-full">
-						<CheckCircle2 class="h-5 w-5" />
-						<span>{sucesso}</span>
-					</div>
-				{/if}
 
-				<div class="mb-4 text-center">
-					<p class="text-lg font-semibold">Próximo registro: {tipoLabel}</p>
+			<!-- Relógio Sincronizado -->
+			<div class="mb-5 flex justify-center">
+				<div class="card bg-gradient-to-br from-primary/10 to-primary/5 border-2 border-primary/20 shadow-lg rounded-2xl p-5 w-full max-w-sm">
+					<RelogioSincronizado />
 				</div>
+			</div>
 
-				<!-- Campo de Justificativa (Opcional) -->
-				<div class="w-full">
-					<label for="justificativa" class="label">
-						<span class="label-text">Justificativa (Opcional)</span>
-					</label>
-					<textarea
-						id="justificativa"
-						class="textarea textarea-bordered w-full"
-						placeholder="Digite uma justificativa para este registro de ponto (opcional)"
-						bind:value={justificativa}
-						disabled={registrando}
-						rows="3"
-					></textarea>
-				</div>
-
-				<button
-					class="btn btn-primary btn-lg"
-					onclick={iniciarRegistroComFoto}
-					disabled={!podeRegistrar}
-					title={!temFuncionarioAssociado 
-						? 'Você não possui funcionário associado à sua conta' 
-						: estaDispensado 
-							? 'Você está dispensado de registrar ponto no momento' 
-							: ''}
-				>
-					{#if registrando}
-						<span class="loading loading-spinner loading-sm"></span>
-						{#if coletandoInfo}
-							Coletando informações...
-						{:else}
-							Registrando...
-						{/if}
-					{:else if !temFuncionarioAssociado}
-						<XCircle class="h-5 w-5" />
-						Funcionário Não Associado
-					{:else if estaDispensado}
-						<XCircle class="h-5 w-5" />
-						Registro Indisponível
-					{:else if proximoTipo === 'entrada' || proximoTipo === 'retorno_almoco'}
-						<LogIn class="h-5 w-5" />
-						Registrar Entrada
+			<!-- Botão de Registro -->
+			<button
+				class="btn btn-primary w-full shadow-lg hover:shadow-xl transition-all duration-300 font-semibold rounded-xl gap-2 mb-5"
+				onclick={iniciarRegistroComFoto}
+				disabled={!podeRegistrar}
+				title={!temFuncionarioAssociado 
+					? 'Você não possui funcionário associado à sua conta' 
+					: estaDispensado 
+						? 'Você está dispensado de registrar ponto no momento' 
+						: ''}
+			>
+				{#if registrando}
+					<span class="loading loading-spinner loading-sm"></span>
+					{#if coletandoInfo}
+						Coletando informações...
 					{:else}
-						<LogOut class="h-5 w-5" />
-						Registrar Saída
+						Registrando...
 					{/if}
-				</button>
+				{:else if !temFuncionarioAssociado}
+					<XCircle class="h-5 w-5" />
+					Funcionário Não Associado
+				{:else if estaDispensado}
+					<XCircle class="h-5 w-5" />
+					Registro Indisponível
+				{:else if proximoTipo === 'entrada' || proximoTipo === 'retorno_almoco'}
+					<LogIn class="h-5 w-5" />
+					Registrar Entrada
+				{:else}
+					<LogOut class="h-5 w-5" />
+					Registrar Saída
+				{/if}
+			</button>
+
+			<!-- Campo de Justificativa -->
+			<div class="mb-5">
+				<label for="justificativa" class="label pb-1.5">
+					<span class="label-text font-semibold text-xs">Justificativa <span class="text-base-content/50 font-normal">(Opcional)</span></span>
+				</label>
+				<textarea
+					id="justificativa"
+					class="textarea textarea-bordered w-full focus:textarea-primary focus:ring-2 focus:ring-primary/20 rounded-xl resize-none text-sm"
+					placeholder="Digite uma justificativa para este registro de ponto (opcional)"
+					bind:value={justificativa}
+					disabled={registrando}
+					rows="2"
+				></textarea>
+			</div>
+
+			<!-- Mensagem de Sucesso -->
+			{#if sucesso}
+				<div class="alert alert-success shadow-lg mb-5 rounded-xl">
+					<CheckCircle2 class="h-4 w-4" />
+					<span class="font-semibold text-sm">{sucesso}</span>
+				</div>
+			{/if}
+
+			<!-- Próximo Registro -->
+			<div class="card bg-gradient-to-br from-info/10 to-info/5 border-2 border-info/20 shadow-md rounded-xl p-4">
+				<div class="flex items-center justify-center gap-2">
+					<div class="p-1.5 bg-info/20 rounded-lg">
+						{#if proximoTipo === 'entrada' || proximoTipo === 'retorno_almoco'}
+							<LogIn class="h-4 w-4 text-info" strokeWidth={2.5} />
+						{:else}
+							<LogOut class="h-4 w-4 text-info" strokeWidth={2.5} />
+						{/if}
+					</div>
+					<div class="text-center">
+						<p class="text-xs font-semibold text-base-content/60 uppercase tracking-wide mb-0.5">Próximo Registro</p>
+						<p class="text-base font-bold text-base-content">{tipoLabel}</p>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -1320,49 +1330,111 @@
 	<!-- Modal Webcam -->
 	{#if mostrandoWebcam}
 		<div 
-			bind:this={modalRef}
-			class="modal modal-open" 
-			style="display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;"
+			class="fixed inset-0 z-50 flex items-center justify-center p-4"
+			style="animation: fadeIn 0.2s ease-out;"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="modal-webcam-title"
 		>
-			<div class="modal-box max-w-2xl w-[95%] max-h-[90vh] overflow-y-auto relative" style="margin: auto; position: relative;">
-				<div class="sticky top-0 bg-base-100 z-10 pb-3 mb-4 border-b border-base-300 -mx-6 px-6">
-					<h3 class="text-lg font-bold">Capturar Foto</h3>
+			<!-- Backdrop -->
+			<div 
+				class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-200"
+				onclick={handleWebcamCancel}
+			></div>
+			
+			<!-- Modal Box -->
+			<div 
+				class="relative bg-base-100 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col z-10 transform transition-all duration-300"
+				style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
+				onclick={(e) => e.stopPropagation()}
+			>
+				<!-- Header fixo -->
+				<div class="flex items-center justify-between px-6 py-4 border-b border-base-300 flex-shrink-0">
+					<div class="flex items-center gap-3">
+						<div class="p-2 bg-primary/10 rounded-lg">
+							<Camera class="h-5 w-5 text-primary" strokeWidth={2} />
+						</div>
+						<h3 id="modal-webcam-title" class="text-xl font-bold text-base-content">Capturar Foto</h3>
+					</div>
+					<button 
+						class="btn btn-sm btn-circle btn-ghost hover:bg-base-300" 
+						onclick={handleWebcamCancel}
+					>
+						<XCircle class="h-5 w-5" />
+					</button>
 				</div>
-				<div class="min-h-[200px] flex items-center justify-center py-4">
-					<WebcamCapture
-						onCapture={handleWebcamCapture}
-						onCancel={handleWebcamCancel}
-						onError={handleWebcamError}
-						autoCapture={false}
-						fotoObrigatoria={true}
-					/>
+				
+				<!-- Conteúdo com rolagem -->
+				<div class="flex-1 overflow-y-auto px-6 py-4 modal-scroll">
+					<div class="min-h-[200px] flex items-center justify-center">
+						<WebcamCapture
+							onCapture={handleWebcamCapture}
+							onCancel={handleWebcamCancel}
+							onError={handleWebcamError}
+							autoCapture={false}
+							fotoObrigatoria={true}
+						/>
+					</div>
 				</div>
 			</div>
-			<form
-				method="dialog"
-				class="modal-backdrop"
-				onsubmit={(e) => {
-					e.preventDefault();
-					handleWebcamCancel();
-				}}
+		</div>
+	{/if}
+
+	<!-- Modal de Aguardando Processamento -->
+	{#if aguardandoProcessamento}
+		<div 
+			class="fixed inset-0 z-50 flex items-center justify-center p-4"
+			style="animation: fadeIn 0.2s ease-out;"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="modal-aguardando-title"
+		>
+			<!-- Backdrop -->
+			<div class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-200"></div>
+			
+			<!-- Modal Box -->
+			<div 
+				class="relative bg-base-100 rounded-2xl shadow-2xl max-w-md w-full z-10 transform transition-all duration-300 p-8"
+				style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
 			>
-				<button type="submit" aria-label="Fechar modal">fechar</button>
-			</form>
+				<div class="flex flex-col items-center gap-4 text-center">
+					<span class="loading loading-spinner loading-lg text-primary"></span>
+					<h3 id="modal-aguardando-title" class="text-xl font-bold text-base-content">Processando Registro</h3>
+					<p class="text-base-content/70">Por favor, aguarde enquanto processamos seu registro de ponto...</p>
+				</div>
+			</div>
 		</div>
 	{/if}
 
 	<!-- Modal de Confirmação -->
 	{#if mostrandoModalConfirmacao && imagemCapturada && dataHoraAtual}
-		<div class="modal modal-open" style="display: flex; align-items: center; justify-content: center;">
-			<div class="modal-box max-w-3xl w-[95%] max-h-[85vh] overflow-hidden flex flex-col" style="margin: auto; max-height: 85vh;">
+		<div 
+			class="fixed inset-0 z-50 flex items-center justify-center p-4"
+			style="animation: fadeIn 0.2s ease-out;"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="modal-confirmacao-title"
+		>
+			<!-- Backdrop -->
+			<div 
+				class="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-200"
+				onclick={cancelarRegistro}
+			></div>
+			
+			<!-- Modal Box -->
+			<div 
+				class="relative bg-base-100 rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-hidden flex flex-col z-10 transform transition-all duration-300"
+				style="animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);"
+				onclick={(e) => e.stopPropagation()}
+			>
 				<!-- Header fixo -->
-				<div class="flex items-center justify-between mb-6 pb-4 border-b border-base-300 flex-shrink-0">
+				<div class="flex items-center justify-between px-6 py-4 border-b border-base-300 flex-shrink-0">
 					<div class="flex items-center gap-3">
 						<div class="p-2 bg-primary/10 rounded-lg">
 							<Clock class="h-6 w-6 text-primary" strokeWidth={2} />
 						</div>
 						<div>
-							<h3 class="font-bold text-xl text-base-content">Confirmar Registro de Ponto</h3>
+							<h3 id="modal-confirmacao-title" class="font-bold text-xl text-base-content">Confirmar Registro de Ponto</h3>
 							<p class="text-sm text-base-content/70">Verifique as informações antes de confirmar</p>
 						</div>
 					</div>
@@ -1376,7 +1448,7 @@
 				</div>
 
 				<!-- Conteúdo com rolagem -->
-				<div class="flex-1 overflow-y-auto pr-2 space-y-6">
+				<div class="flex-1 overflow-y-auto px-6 py-4 space-y-6 modal-scroll">
 					<!-- Card da Imagem -->
 					<div class="card bg-gradient-to-br from-base-200 to-base-300 shadow-lg border-2 border-primary/20">
 						<div class="card-body p-6">
@@ -1483,9 +1555,9 @@
 				</div>
 
 				<!-- Footer fixo com botões -->
-				<div class="flex justify-end gap-3 pt-4 mt-4 border-t border-base-300 flex-shrink-0">
+				<div class="flex justify-end gap-3 px-6 py-4 border-t border-base-300 flex-shrink-0">
 					<button 
-						class="btn btn-outline btn-lg" 
+						class="btn btn-outline" 
 						onclick={cancelarRegistro} 
 						disabled={registrando}
 					>
@@ -1493,7 +1565,7 @@
 						Cancelar
 					</button>
 					<button 
-						class="btn btn-primary btn-lg gap-2" 
+						class="btn btn-primary gap-2" 
 						onclick={confirmarRegistro} 
 						disabled={registrando}
 					>
@@ -1507,7 +1579,6 @@
 					</button>
 				</div>
 			</div>
-			<div class="modal-backdrop" onclick={cancelarRegistro}></div>
 		</div>
 	{/if}
 
@@ -1524,3 +1595,52 @@
 		onClose={fecharModalErro}
 	/>
 </div>
+
+<style>
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes slideUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0) scale(1);
+		}
+	}
+
+	/* Scrollbar customizada para os modais */
+	:global(.modal-scroll) {
+		scrollbar-width: thin;
+		scrollbar-color: hsl(var(--bc) / 0.3) transparent;
+		scroll-behavior: smooth;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar) {
+		width: 8px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-track) {
+		background: transparent;
+		border-radius: 4px;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb) {
+		background-color: hsl(var(--bc) / 0.3);
+		border-radius: 4px;
+		transition: background-color 0.2s ease;
+	}
+
+	:global(.modal-scroll::-webkit-scrollbar-thumb:hover) {
+		background-color: hsl(var(--bc) / 0.5);
+	}
+</style>
diff --git a/apps/web/src/lib/components/ponto/RelogioSincronizado.svelte b/apps/web/src/lib/components/ponto/RelogioSincronizado.svelte
index 1f07ee7..eb1139c 100644
--- a/apps/web/src/lib/components/ponto/RelogioSincronizado.svelte
+++ b/apps/web/src/lib/components/ponto/RelogioSincronizado.svelte
@@ -113,13 +113,28 @@
 	});
 </script>
 
-<div class="flex flex-col items-center gap-2">
-	<div class="text-4xl font-bold font-mono text-primary">{horaFormatada}</div>
-	<div class="text-sm text-base-content/70 capitalize">{dataFormatada}</div>
-	<div class="flex items-center gap-2 text-xs">
+<div class="flex flex-col items-center gap-4 w-full">
+	<!-- Hora -->
+	<div class="text-5xl font-black font-mono text-primary tracking-tight drop-shadow-sm">
+		{horaFormatada}
+	</div>
+	
+	<!-- Data -->
+	<div class="text-base font-semibold text-base-content/80 capitalize">
+		{dataFormatada}
+	</div>
+	
+	<!-- Status de Sincronização -->
+	<div class="flex items-center gap-2 px-4 py-2 rounded-full {
+		sincronizado 
+			? 'bg-success/20 text-success border border-success/30' 
+			: erro 
+				? 'bg-warning/20 text-warning border border-warning/30' 
+				: 'bg-base-300/50 text-base-content/60 border border-base-300'
+	}">
 		{#if sincronizado}
-			<CheckCircle2 class="h-4 w-4 text-success" />
-			<span class="text-success">
+			<CheckCircle2 class="h-4 w-4" strokeWidth={2.5} />
+			<span class="text-sm font-semibold">
 				{#if usandoServidorExterno}
 					Sincronizado com servidor NTP
 				{:else}
@@ -127,11 +142,11 @@
 				{/if}
 			</span>
 		{:else if erro}
-			<AlertCircle class="h-4 w-4 text-warning" />
-			<span class="text-warning">{erro}</span>
+			<AlertCircle class="h-4 w-4" strokeWidth={2.5} />
+			<span class="text-sm font-semibold">{erro}</span>
 		{:else}
-			<Clock class="h-4 w-4 text-base-content/50" />
-			<span class="text-base-content/50">Usando relógio do PC</span>
+			<Clock class="h-4 w-4" strokeWidth={2.5} />
+			<span class="text-sm font-semibold">Usando relógio do PC</span>
 		{/if}
 	</div>
 </div>
diff --git a/apps/web/src/lib/components/ponto/SaldoDiarioComparativoBadge.svelte b/apps/web/src/lib/components/ponto/SaldoDiarioComparativoBadge.svelte
new file mode 100644
index 0000000..8233a1e
--- /dev/null
+++ b/apps/web/src/lib/components/ponto/SaldoDiarioComparativoBadge.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	interface Props {
+		saldo?: {
+			trabalhadoMinutos: number;
+			esperadoMinutos: number;
+			diferencaMinutos: number;
+		} | null;
+		size?: 'sm' | 'md' | 'lg';
+	}
+
+	let { saldo, size = 'md' }: Props = $props();
+
+	function formatarMinutos(minutos: number): { horas: number; minutos: number } {
+		const horas = Math.floor(Math.abs(minutos) / 60);
+		const mins = Math.abs(minutos) % 60;
+		return { horas, minutos: mins };
+	}
+
+	const sizeClasses = {
+		sm: 'text-xs px-2 py-1',
+		md: 'text-sm px-3 py-1.5',
+		lg: 'text-base px-4 py-2'
+	};
+</script>
+
+{#if saldo}
+	{@const trabalhado = formatarMinutos(saldo.trabalhadoMinutos)}
+	{@const diferenca = formatarMinutos(saldo.diferencaMinutos)}
+	{@const sinalDiferenca = saldo.diferencaMinutos >= 0 ? '+' : '-'}
+	{@const isNegativo = saldo.diferencaMinutos < 0}
+	
+	<div class="inline-flex items-center gap-1.5 {sizeClasses[size]} rounded-lg font-semibold shadow-sm border {
+		isNegativo 
+			? 'bg-red-50 border-red-200 text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400' 
+			: 'bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-800 dark:text-green-400'
+	}">
+		<span class="font-bold">+{trabalhado.horas}h {trabalhado.minutos}min</span>
+		<span class="text-base-content/50">/</span>
+		<span class={isNegativo ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}>
+			{sinalDiferenca}{diferenca.horas}h {diferenca.minutos}min
+		</span>
+	</div>
+{:else}
+	<span class="badge badge-ghost {sizeClasses[size]}">-</span>
+{/if}
+
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index 9b2091d..b837ccb 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -7,6 +7,7 @@
 	import { formatarHoraPonto, getTipoRegistroLabel, formatarDataDDMMAAAA } from '$lib/utils/ponto';
 	import LocalizacaoIcon from '$lib/components/ponto/LocalizacaoIcon.svelte';
 	import SaldoDiarioBadge from '$lib/components/ponto/SaldoDiarioBadge.svelte';
+	import SaldoDiarioComparativoBadge from '$lib/components/ponto/SaldoDiarioComparativoBadge.svelte';
 	import jsPDF from 'jspdf';
 	import autoTable from 'jspdf-autotable';
 	import logoGovPE from '$lib/assets/logo_governo_PE.png';
@@ -278,6 +279,7 @@
 
 	// Agrupar registros por funcionário e data
 	const registrosAgrupados = $derived.by(() => {
+		const configData = config;
 		const agrupados: Record<
 			string,
 			{
@@ -289,6 +291,7 @@
 						data: string;
 						registros: Array<typeof registros[number]>;
 						saldoDiario?: { saldoMinutos: number; horas: number; minutos: number; positivo: boolean };
+						saldoDiarioComparativo?: { trabalhadoMinutos: number; esperadoMinutos: number; diferencaMinutos: number };
 					}
 				>;
 			}
@@ -380,13 +383,50 @@
 						return a.minuto - b.minuto;
 					});
 
-					// Usar saldo diário da query se disponível, senão calcular
-					const primeiroRegistro = grupoData.registros[0];
-					if (primeiroRegistro && 'saldoDiario' in primeiroRegistro && primeiroRegistro.saldoDiario) {
-						grupoData.saldoDiario = primeiroRegistro.saldoDiario;
+					// Calcular saldo diário comparativo usando a soma dos saldos parciais
+					if (configData) {
+						// Calcular saldos parciais (Par 1, Par 2, etc.)
+						const saldosParciais = calcularSaldosParciais(grupoData.registros);
+						
+						// Somar todos os saldos parciais para obter o total trabalhado
+						let totalTrabalhado = 0;
+						for (const saldoParcial of saldosParciais.values()) {
+							totalTrabalhado += saldoParcial.saldoMinutos;
+						}
+						
+						// Calcular carga horária diária total esperada (soma dos dois pares)
+						const [horaEntradaConfig, minutoEntradaConfig] = configData.horarioEntrada.split(':').map(Number);
+						const [horaSaidaAlmocoConfig, minutoSaidaAlmocoConfig] = configData.horarioSaidaAlmoco.split(':').map(Number);
+						const [horaRetornoAlmocoConfig, minutoRetornoAlmocoConfig] = configData.horarioRetornoAlmoco.split(':').map(Number);
+						const [horaSaidaConfig, minutoSaidaConfig] = configData.horarioSaida.split(':').map(Number);
+						
+						// Par 1: entrada -> saida_almoco
+						const minutosPar1EsperadoConfig = (horaSaidaAlmocoConfig * 60 + minutoSaidaAlmocoConfig) - (horaEntradaConfig * 60 + minutoEntradaConfig);
+						const minutosPar1EsperadoAjustadoConfig = minutosPar1EsperadoConfig < 0 ? minutosPar1EsperadoConfig + 24 * 60 : minutosPar1EsperadoConfig;
+						
+						// Par 2: retorno_almoco -> saida
+						const minutosPar2EsperadoConfig = (horaSaidaConfig * 60 + minutoSaidaConfig) - (horaRetornoAlmocoConfig * 60 + minutoRetornoAlmocoConfig);
+						const minutosPar2EsperadoAjustadoConfig = minutosPar2EsperadoConfig < 0 ? minutosPar2EsperadoConfig + 24 * 60 : minutosPar2EsperadoConfig;
+						
+						const cargaHorariaDiariaEsperadaMinutos = minutosPar1EsperadoAjustadoConfig + minutosPar2EsperadoAjustadoConfig;
+						
+						// Calcular diferença em relação à carga horária diária total configurada
+						const diferencaMinutos = totalTrabalhado - cargaHorariaDiariaEsperadaMinutos;
+						
+						// Armazenar saldo comparativo
+						grupoData.saldoDiarioComparativo = {
+							trabalhadoMinutos: totalTrabalhado,
+							esperadoMinutos: cargaHorariaDiariaEsperadaMinutos,
+							diferencaMinutos: diferencaMinutos
+						};
 					} else {
-						// Calcular saldo diário como diferença entre saída e entrada
-						grupoData.saldoDiario = calcularSaldoDiario(grupoData.registros);
+						// Fallback: usar cálculo simples se não houver configuração
+						const primeiroRegistro = grupoData.registros[0];
+						if (primeiroRegistro && 'saldoDiario' in primeiroRegistro && primeiroRegistro.saldoDiario) {
+							grupoData.saldoDiario = primeiroRegistro.saldoDiario;
+						} else {
+							grupoData.saldoDiario = calcularSaldoDiario(grupoData.registros);
+						}
 					}
 				}
 			}
@@ -1463,6 +1503,27 @@
 						esperadoMinutos: saldoDiarioTotalEsperadoMinutos
 					};
 
+					// Calcular carga horária diária total esperada para inicializar saldo acumulado
+					const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number);
+					const [horaSaidaAlmoco, minutoSaidaAlmoco] = config.horarioSaidaAlmoco.split(':').map(Number);
+					const [horaRetornoAlmoco, minutoRetornoAlmoco] = config.horarioRetornoAlmoco.split(':').map(Number);
+					const [horaSaida, minutoSaida] = config.horarioSaida.split(':').map(Number);
+
+					const minutosPar1Esperado = (horaSaidaAlmoco * 60 + minutoSaidaAlmoco) - (horaEntrada * 60 + minutoEntrada);
+					const minutosPar1EsperadoAjustado = minutosPar1Esperado < 0 ? minutosPar1Esperado + 24 * 60 : minutosPar1Esperado;
+
+					const minutosPar2Esperado = (horaSaida * 60 + minutoSaida) - (horaRetornoAlmoco * 60 + minutoRetornoAlmoco);
+					const minutosPar2EsperadoAjustado = minutosPar2Esperado < 0 ? minutosPar2Esperado + 24 * 60 : minutosPar2Esperado;
+
+					const cargaHorariaDiariaTotalMinutos = minutosPar1EsperadoAjustado + minutosPar2EsperadoAjustado;
+					
+					// Inicializar saldo diário acumulado com a carga horária total diária
+					let saldoDiarioAcumuladoMinutos = cargaHorariaDiariaTotalMinutos;
+					
+					// Rastrear quais pares já foram processados para evitar decrementar múltiplas vezes
+					// Usar string como chave: "tipo-parIndex" ou "tipo-indice" para pares incompletos
+					const paresProcessadosParaSaldo = new Set<string>();
+
 					// Criar linhas da tabela
 					for (let i = 0; i < todosRegistros.length; i++) {
 						const reg = todosRegistros[i];
@@ -1496,23 +1557,63 @@
 								// Verificar se há saldo esperado (par incompleto)
 								const saldoEsperado = saldosEsperadosPorPar.get(i);
 								if (saldoEsperado) {
-									// Par incompleto: mostrar saldo comparativo em vermelho
-									linha._saldoVermelho = true;
-									const sinalDiferenca = saldoEsperado.diferencaMinutos >= 0 ? '+' : '-';
+									// Par incompleto: decrementar saldo acumulado
+									
+									// Decrementar saldo acumulado apenas uma vez por par
+									const chavePar = `${reg.tipo}-incompleto-${i}`;
+									if (!paresProcessadosParaSaldo.has(chavePar)) {
+										saldoDiarioAcumuladoMinutos -= saldoEsperado.trabalhadoMinutos;
+										paresProcessadosParaSaldo.add(chavePar);
+									}
+									
+									// Calcular saldo acumulado formatado
+									// Se saldoDiarioAcumuladoMinutos > 0: ainda falta trabalhar (mostrar como negativo)
+									// Se saldoDiarioAcumuladoMinutos < 0: trabalhou mais que o esperado (mostrar como positivo)
+									const saldoAcumuladoHoras = Math.floor(Math.abs(saldoDiarioAcumuladoMinutos) / 60);
+									const saldoAcumuladoMinutosResto = Math.abs(saldoDiarioAcumuladoMinutos) % 60;
+									// Inverter sinal: positivo quando trabalhou mais, negativo quando ainda falta
+									const sinalSaldo = saldoDiarioAcumuladoMinutos < 0 ? '+' : '-';
+									const trabalhouMaisQueEsperado = saldoDiarioAcumuladoMinutos < 0;
+									
+									// Marcar linha para aplicar cor no saldo
+									if (trabalhouMaisQueEsperado) {
+										linha._saldoPositivo = true; // Verde: trabalhou mais que o esperado
+									} else {
+										linha._saldoNegativo = true; // Vermelho: ainda falta trabalhar
+									}
+									
 									linha.push({
-										content: `+${saldoEsperado.trabalhadoHoras}h ${saldoEsperado.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`,
+										content: `${saldoEsperado.trabalhadoHoras}h ${saldoEsperado.trabalhadoMinutosResto}min parcial | Saldo: ${sinalSaldo}${saldoAcumuladoHoras}h ${saldoAcumuladoMinutosResto}min`,
 										rowSpan: saldoEsperado.tamanhoPar
 									});
 								} else if (indexReal >= 0) {
 									const saldoPar = saldosComparativosPorPar.get(indexReal);
 									if (saldoPar) {
-										const sinalDiferenca = saldoPar.diferencaMinutos >= 0 ? '+' : '-';
-										// Aplicar cor vermelha se diferença for negativa
-										if (saldoPar.diferencaMinutos < 0) {
-											linha._saldoVermelho = true;
+										// Decrementar saldo acumulado apenas uma vez por par
+										const chavePar = `${reg.tipo}-${saldoPar.parIndex}`;
+										if (!paresProcessadosParaSaldo.has(chavePar)) {
+											saldoDiarioAcumuladoMinutos -= saldoPar.trabalhadoMinutos;
+											paresProcessadosParaSaldo.add(chavePar);
 										}
+										
+										// Calcular saldo acumulado formatado
+										// Se saldoDiarioAcumuladoMinutos > 0: ainda falta trabalhar (mostrar como negativo)
+										// Se saldoDiarioAcumuladoMinutos < 0: trabalhou mais que o esperado (mostrar como positivo)
+										const saldoAcumuladoHoras = Math.floor(Math.abs(saldoDiarioAcumuladoMinutos) / 60);
+										const saldoAcumuladoMinutosResto = Math.abs(saldoDiarioAcumuladoMinutos) % 60;
+										// Inverter sinal: positivo quando trabalhou mais, negativo quando ainda falta
+										const sinalSaldo = saldoDiarioAcumuladoMinutos < 0 ? '+' : '-';
+										const trabalhouMaisQueEsperado = saldoDiarioAcumuladoMinutos < 0;
+										
+										// Marcar linha para aplicar cor no saldo
+										if (trabalhouMaisQueEsperado) {
+											linha._saldoPositivo = true; // Verde: trabalhou mais que o esperado
+										} else {
+											linha._saldoNegativo = true; // Vermelho: ainda falta trabalhar
+										}
+										
 										linha.push({
-											content: `+${saldoPar.trabalhadoHoras}h ${saldoPar.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoPar.diferencaHoras}h ${saldoPar.diferencaMinutosResto}min`,
+											content: `${saldoPar.trabalhadoHoras}h ${saldoPar.trabalhadoMinutosResto}min parcial | Saldo: ${sinalSaldo}${saldoAcumuladoHoras}h ${saldoAcumuladoMinutosResto}min`,
 											rowSpan: saldoPar.tamanhoPar
 										});
 							} else {
@@ -1537,54 +1638,122 @@
 									// Verificar se há saldo esperado para este par
 									const saldoEsperado = saldosEsperadosPorPar.get(i);
 									if (saldoEsperado) {
-										// Par incompleto ou completamente não marcado: mostrar saldo em vermelho
-										linha._saldoVermelho = true;
-										const sinalDiferenca = saldoEsperado.diferencaMinutos >= 0 ? '+' : '-';
+										// Par incompleto ou completamente não marcado: decrementar saldo acumulado
+										
+										// Decrementar saldo acumulado apenas uma vez por par
+										const chavePar = `${reg.tipo}-esperado-${i}`;
+										if (!paresProcessadosParaSaldo.has(chavePar)) {
+											// Se não há tempo trabalhado, decrementar o tempo esperado completo
+											if (saldoEsperado.trabalhadoMinutos === 0) {
+												saldoDiarioAcumuladoMinutos -= saldoEsperado.esperadoMinutos;
+											} else {
+												saldoDiarioAcumuladoMinutos -= saldoEsperado.trabalhadoMinutos;
+											}
+											paresProcessadosParaSaldo.add(chavePar);
+										}
+										
+										// Calcular saldo acumulado formatado
+										// Se saldoDiarioAcumuladoMinutos > 0: ainda falta trabalhar (mostrar como negativo)
+										// Se saldoDiarioAcumuladoMinutos < 0: trabalhou mais que o esperado (mostrar como positivo)
+										const saldoAcumuladoHoras = Math.floor(Math.abs(saldoDiarioAcumuladoMinutos) / 60);
+										const saldoAcumuladoMinutosResto = Math.abs(saldoDiarioAcumuladoMinutos) % 60;
+										// Inverter sinal: positivo quando trabalhou mais, negativo quando ainda falta
+										const sinalSaldo = saldoDiarioAcumuladoMinutos < 0 ? '+' : '-';
+										const trabalhouMaisQueEsperado = saldoDiarioAcumuladoMinutos < 0;
+										
+										// Marcar linha para aplicar cor no saldo
+										if (trabalhouMaisQueEsperado) {
+											linha._saldoPositivo = true; // Verde: trabalhou mais que o esperado
+										} else {
+											linha._saldoNegativo = true; // Vermelho: ainda falta trabalhar
+										}
 										
 										// Se par completamente não marcado (trabalhado = 0), mostrar apenas diferença negativa
 										if (saldoEsperado.trabalhadoMinutos === 0) {
 											linha.push({
-												content: `+0h 0min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`,
+												content: `0h 0min parcial | Saldo: ${sinalSaldo}${saldoAcumuladoHoras}h ${saldoAcumuladoMinutosResto}min`,
 												rowSpan: saldoEsperado.tamanhoPar
 											});
 						} else {
 											linha.push({
-												content: `+${saldoEsperado.trabalhadoHoras}h ${saldoEsperado.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`,
+												content: `${saldoEsperado.trabalhadoHoras}h ${saldoEsperado.trabalhadoMinutosResto}min parcial | Saldo: ${sinalSaldo}${saldoAcumuladoHoras}h ${saldoAcumuladoMinutosResto}min`,
 												rowSpan: saldoEsperado.tamanhoPar
 											});
 										}
 									} else if (regsReais.length === 0) {
-										// Dia sem registros: calcular saldo esperado completo com diferença negativa
+										// Dia sem registros: calcular saldo esperado completo e decrementar saldo acumulado
 										if (reg.tipo === 'entrada') {
 											// Par 1 completo esperado
-											const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number);
-											const [horaSaidaAlmoco, minutoSaidaAlmoco] = config.horarioSaidaAlmoco.split(':').map(Number);
 											const minutosEntrada = horaEntrada * 60 + minutoEntrada;
 											const minutosSaida = horaSaidaAlmoco * 60 + minutoSaidaAlmoco;
 											let saldoMinutos = minutosSaida - minutosEntrada;
 											if (saldoMinutos < 0) saldoMinutos += 24 * 60;
 											const horas = Math.floor(saldoMinutos / 60);
 											const minutos = saldoMinutos % 60;
-											linha._saldoVermelho = true;
-											// Para dia sem registros, mostrar 0h trabalhado e diferença negativa
+											
+											// Decrementar saldo acumulado apenas uma vez por par
+											const chavePar = `entrada-sem-registros-${i}`;
+											if (!paresProcessadosParaSaldo.has(chavePar)) {
+												saldoDiarioAcumuladoMinutos -= saldoMinutos;
+												paresProcessadosParaSaldo.add(chavePar);
+											}
+											
+											// Calcular saldo acumulado formatado
+											// Se saldoDiarioAcumuladoMinutos > 0: ainda falta trabalhar (mostrar como negativo)
+											// Se saldoDiarioAcumuladoMinutos < 0: trabalhou mais que o esperado (mostrar como positivo)
+											const saldoAcumuladoHoras = Math.floor(Math.abs(saldoDiarioAcumuladoMinutos) / 60);
+											const saldoAcumuladoMinutosResto = Math.abs(saldoDiarioAcumuladoMinutos) % 60;
+											// Inverter sinal: positivo quando trabalhou mais, negativo quando ainda falta
+											const sinalSaldo = saldoDiarioAcumuladoMinutos < 0 ? '+' : '-';
+											const trabalhouMaisQueEsperado = saldoDiarioAcumuladoMinutos < 0;
+											
+											// Marcar linha para aplicar cor no saldo
+											if (trabalhouMaisQueEsperado) {
+												linha._saldoPositivo = true; // Verde: trabalhou mais que o esperado
+											} else {
+												linha._saldoNegativo = true; // Vermelho: ainda falta trabalhar
+											}
+											
+											// Para dia sem registros, mostrar 0h trabalhado
 											linha.push({
-												content: `+0h 0min / -${horas}h ${minutos}min`,
+												content: `0h 0min parcial | Saldo: ${sinalSaldo}${saldoAcumuladoHoras}h ${saldoAcumuladoMinutosResto}min`,
 												rowSpan: 2 // entrada + saida_almoco
 											});
 										} else if (reg.tipo === 'retorno_almoco') {
 											// Par 2 completo esperado
-											const [horaRetornoAlmoco, minutoRetornoAlmoco] = config.horarioRetornoAlmoco.split(':').map(Number);
-											const [horaSaida, minutoSaida] = config.horarioSaida.split(':').map(Number);
 											const minutosEntrada = horaRetornoAlmoco * 60 + minutoRetornoAlmoco;
 											const minutosSaida = horaSaida * 60 + minutoSaida;
 											let saldoMinutos = minutosSaida - minutosEntrada;
 											if (saldoMinutos < 0) saldoMinutos += 24 * 60;
 											const horas = Math.floor(saldoMinutos / 60);
 											const minutos = saldoMinutos % 60;
-											linha._saldoVermelho = true;
-											// Para dia sem registros, mostrar 0h trabalhado e diferença negativa
+											
+											// Decrementar saldo acumulado apenas uma vez por par
+											const chavePar = `retorno_almoco-sem-registros-${i}`;
+											if (!paresProcessadosParaSaldo.has(chavePar)) {
+												saldoDiarioAcumuladoMinutos -= saldoMinutos;
+												paresProcessadosParaSaldo.add(chavePar);
+											}
+											
+											// Calcular saldo acumulado formatado
+											// Se saldoDiarioAcumuladoMinutos > 0: ainda falta trabalhar (mostrar como negativo)
+											// Se saldoDiarioAcumuladoMinutos < 0: trabalhou mais que o esperado (mostrar como positivo)
+											const saldoAcumuladoHoras = Math.floor(Math.abs(saldoDiarioAcumuladoMinutos) / 60);
+											const saldoAcumuladoMinutosResto = Math.abs(saldoDiarioAcumuladoMinutos) % 60;
+											// Inverter sinal: positivo quando trabalhou mais, negativo quando ainda falta
+											const sinalSaldo = saldoDiarioAcumuladoMinutos < 0 ? '+' : '-';
+											const trabalhouMaisQueEsperado = saldoDiarioAcumuladoMinutos < 0;
+											
+											// Marcar linha para aplicar cor no saldo
+											if (trabalhouMaisQueEsperado) {
+												linha._saldoPositivo = true; // Verde: trabalhou mais que o esperado
+											} else {
+												linha._saldoNegativo = true; // Vermelho: ainda falta trabalhar
+											}
+											
+											// Para dia sem registros, mostrar 0h trabalhado
 											linha.push({
-												content: `+0h 0min / -${horas}h ${minutos}min`,
+												content: `0h 0min parcial | Saldo: ${sinalSaldo}${saldoAcumuladoHoras}h ${saldoAcumuladoMinutosResto}min`,
 												rowSpan: 2 // retorno_almoco + saida
 											});
 										} else {
@@ -1599,13 +1768,34 @@
 										);
 										
 										if (saidaEsperadaExiste) {
-											// Par completamente não marcado: calcular saldo negativo
+											// Par completamente não marcado: calcular saldo negativo e decrementar saldo acumulado
 											const saldoEsperadoCompleto = saldosEsperadosPorPar.get(i);
 											if (saldoEsperadoCompleto) {
-												linha._saldoVermelho = true;
-												const sinalDiferenca = saldoEsperadoCompleto.diferencaMinutos >= 0 ? '+' : '-';
+												// Decrementar saldo acumulado apenas uma vez por par
+												const chavePar = `${reg.tipo}-nao-marcado-${i}`;
+												if (!paresProcessadosParaSaldo.has(chavePar)) {
+													saldoDiarioAcumuladoMinutos -= saldoEsperadoCompleto.esperadoMinutos;
+													paresProcessadosParaSaldo.add(chavePar);
+												}
+												
+												// Calcular saldo acumulado formatado
+												// Se saldoDiarioAcumuladoMinutos > 0: ainda falta trabalhar (mostrar como negativo)
+												// Se saldoDiarioAcumuladoMinutos < 0: trabalhou mais que o esperado (mostrar como positivo)
+												const saldoAcumuladoHoras = Math.floor(Math.abs(saldoDiarioAcumuladoMinutos) / 60);
+												const saldoAcumuladoMinutosResto = Math.abs(saldoDiarioAcumuladoMinutos) % 60;
+												// Inverter sinal: positivo quando trabalhou mais, negativo quando ainda falta
+												const sinalSaldo = saldoDiarioAcumuladoMinutos < 0 ? '+' : '-';
+												const trabalhouMaisQueEsperado = saldoDiarioAcumuladoMinutos < 0;
+												
+												// Marcar linha para aplicar cor no saldo
+												if (trabalhouMaisQueEsperado) {
+													linha._saldoPositivo = true; // Verde: trabalhou mais que o esperado
+												} else {
+													linha._saldoNegativo = true; // Vermelho: ainda falta trabalhar
+												}
+												
 												linha.push({
-													content: `+0h 0min / ${sinalDiferenca}${saldoEsperadoCompleto.diferencaHoras}h ${saldoEsperadoCompleto.diferencaMinutosResto}min`,
+													content: `0h 0min parcial | Saldo: ${sinalSaldo}${saldoAcumuladoHoras}h ${saldoAcumuladoMinutosResto}min`,
 													rowSpan: saldoEsperadoCompleto.tamanhoPar
 												});
 							} else {
@@ -1664,11 +1854,22 @@
 							}
 						}
 						// Aplicar cor vermelha na coluna de saldo diário quando marcado
-						if (data.row.raw && (data.row.raw as any)._saldoVermelho) {
-							// Coluna de saldo diário (índice 3 se saldoDiario estiver ativo)
+						// Aplicar cor baseada no saldo acumulado
+						if (data.row.raw) {
+							const rowData = data.row.raw as any;
 							const indiceSaldoDiario = sections.saldoDiario ? 3 : -1;
+							
 							if (data.column.index === indiceSaldoDiario) {
-								data.cell.styles.textColor = [200, 0, 0];
+								if (rowData._saldoNegativo) {
+									// Saldo negativo: cor vermelha
+									data.cell.styles.textColor = [200, 0, 0];
+								} else if (rowData._saldoPositivo) {
+									// Saldo positivo: cor verde
+									data.cell.styles.textColor = [0, 128, 0];
+								} else if (rowData._saldoVermelho) {
+									// Fallback para compatibilidade: cor vermelha
+									data.cell.styles.textColor = [200, 0, 0];
+								}
 							}
 						}
 					}
@@ -3467,23 +3668,23 @@
 								<div class="mb-6 pb-4 border-b border-base-300">
 									<div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
 										<div class="flex-1">
-											<div class="flex items-center gap-3 mb-3">
+											<div class="flex items-center gap-3 mb-2">
 												<div class="p-2 bg-primary/10 rounded-lg">
 													<Users class="h-5 w-5 text-primary" strokeWidth={2.5} />
 												</div>
 												<div>
-													<h3 class="font-bold text-xl text-base-content">
+													<h3 class="font-bold text-lg text-base-content">
 														{grupo.funcionario?.nome || 'Funcionário não encontrado'}
 													</h3>
 													{#if grupo.funcionario?.matricula}
 														<p class="text-sm text-base-content/70 mt-1">
-															Matrícula: <span class="font-semibold">{grupo.funcionario.matricula}</span>
+															<span class="font-medium">Matrícula:</span> <span class="font-semibold">{grupo.funcionario.matricula}</span>
 														</p>
 													{/if}
 												</div>
 											</div>
 											{#if grupo.funcionario?.descricaoCargo}
-												<p class="text-sm text-base-content/60 ml-11">
+												<p class="text-sm text-base-content/60 ml-11 font-medium">
 													{grupo.funcionario.descricaoCargo}
 												</p>
 											{/if}
@@ -3533,51 +3734,60 @@
 								</div>
 
 								<div class="overflow-x-auto max-h-[600px] overflow-y-auto border border-base-300 rounded-xl shadow-inner bg-base-100/50">
-									<table class="table table-zebra">
-										<thead class="sticky top-0 z-10 shadow-md bg-gradient-to-r from-base-300 to-base-200">
+									<table class="table table-zebra w-full">
+										<thead class="sticky top-0 z-10 shadow-md bg-gradient-to-r from-base-300/95 to-base-200/95 backdrop-blur-sm">
 											<tr>
-												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Data</th>
-												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Tipo</th>
-												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Horário</th>
-												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Saldo Parcial</th>
-												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Saldo Diário</th>
-												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Localização</th>
-												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Status</th>
-												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400">Ações</th>
+												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400 text-sm">Data</th>
+												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400 text-sm">Tipo</th>
+												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400 text-sm">Horário</th>
+												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400 text-sm">Saldo Parcial</th>
+												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400 text-sm">Saldo Diário</th>
+												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400 text-sm">Localização</th>
+												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400 text-sm">Status</th>
+												<th class="whitespace-nowrap font-bold text-base-content border-b border-base-400 text-sm">Ações</th>
 											</tr>
 										</thead>
 										<tbody>
-											{#each Object.values(grupo.registrosPorData) as grupoData}
+											{#each Object.values(grupo.registrosPorData) as grupoData, dataIndex}
 												{@const totalRegistros = grupoData.registros.length}
 												{@const dataFormatada = formatarDataDDMMAAAA(grupoData.data)}
 												{@const saldosParciais = calcularSaldosParciais(grupoData.registros)}
+												{@const isUltimoDia = dataIndex === Object.values(grupo.registrosPorData).length - 1}
 												{#each grupoData.registros as registro, index}
 													{@const saldoParcial = saldosParciais.get(index)}
-													<tr>
-														<td class="whitespace-nowrap">{dataFormatada}</td>
+													<tr class="hover:bg-base-200/50 transition-colors {dataIndex % 2 === 0 ? 'bg-base-100/40' : 'bg-base-50/60'} {!isUltimoDia && index === totalRegistros - 1 ? 'border-b-4 border-base-300' : ''}">
+														<td class="whitespace-nowrap font-semibold text-sm">{dataFormatada}</td>
 														<td class="whitespace-nowrap">
-															{config
-																? getTipoRegistroLabel(registro.tipo, {
-																		nomeEntrada: config.nomeEntrada,
-																		nomeSaidaAlmoco: config.nomeSaidaAlmoco,
-																		nomeRetornoAlmoco: config.nomeRetornoAlmoco,
-																		nomeSaida: config.nomeSaida,
-																	})
-																: getTipoRegistroLabel(registro.tipo)}
+															<span class="badge badge-outline badge-sm font-medium text-xs">
+																{config
+																	? getTipoRegistroLabel(registro.tipo, {
+																			nomeEntrada: config.nomeEntrada,
+																			nomeSaidaAlmoco: config.nomeSaidaAlmoco,
+																			nomeRetornoAlmoco: config.nomeRetornoAlmoco,
+																			nomeSaida: config.nomeSaida,
+																		})
+																	: getTipoRegistroLabel(registro.tipo)}
+															</span>
 														</td>
-														<td class="whitespace-nowrap">{formatarHoraPonto(registro.hora, registro.minuto)}</td>
+														<td class="whitespace-nowrap font-mono text-sm font-medium">{formatarHoraPonto(registro.hora, registro.minuto)}</td>
 														<td class="whitespace-nowrap">
 															{#if saldoParcial}
-																<span class="badge badge-info badge-sm font-semibold">
+																<span class="badge badge-info badge-sm font-semibold shadow-sm text-xs">
 																	Par {saldoParcial.parNumero}: +{saldoParcial.horas}h {saldoParcial.minutos}min
 																</span>
 															{:else}
-																<span class="text-base-content/40">-</span>
+																<span class="text-base-content/30 text-sm">-</span>
 															{/if}
 														</td>
 														{#if index === 0}
 															<td class="whitespace-nowrap" rowspan={totalRegistros}>
-																<SaldoDiarioBadge saldo={grupoData.saldoDiario} size="md" />
+																{#if grupoData.saldoDiarioComparativo}
+																	<SaldoDiarioComparativoBadge saldo={grupoData.saldoDiarioComparativo} size="md" />
+																{:else if grupoData.saldoDiario}
+																	<SaldoDiarioBadge saldo={grupoData.saldoDiario} size="md" />
+																{:else}
+																	<span class="badge badge-ghost badge-lg">-</span>
+																{/if}
 															</td>
 														{/if}
 														<td class="whitespace-nowrap">
@@ -3585,19 +3795,19 @@
 														</td>
 														<td class="whitespace-nowrap">
 															<span
-																class="badge badge-lg font-semibold {registro.dentroDoPrazo ? 'badge-success shadow-sm' : 'badge-error shadow-sm'}"
+																class="badge badge-sm font-semibold {registro.dentroDoPrazo ? 'badge-success shadow-sm' : 'badge-error shadow-sm'}"
 															>
 																{registro.dentroDoPrazo ? '✓ Dentro do Prazo' : '✗ Fora do Prazo'}
 															</span>
 														</td>
 														<td class="whitespace-nowrap">
 															<button
-																class="btn btn-sm btn-outline btn-primary gap-2 hover:btn-primary hover:shadow-md transition-all"
+																class="btn btn-sm btn-outline btn-primary gap-2 hover:btn-primary hover:shadow-md transition-all text-xs"
 																onclick={() => abrirModalDetalhes(registro._id)}
 																title="Ver Detalhes"
 															>
-																<FileText class="h-4 w-4" />
-																Detalhes
+																<FileText class="h-3 w-3" />
+																<span class="text-xs">Detalhes</span>
 															</button>
 														</td>
 													</tr>
-- 
2.49.1


From 1ad0ee91cb9e6f5ac08ab08b9a9a6cc82196311f Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 23 Nov 2025 14:29:49 -0300
Subject: [PATCH 11/13] refactor: enhance saldo calculation and display in
 registro-pontos page

- Updated the logic for calculating daily and period saldo differences to ensure accuracy by directly computing the difference between worked and expected hours.
- Improved the display of saldo differences in the UI, including formatting adjustments for better readability.
- Refactored the rendering logic to ensure consistent styling and user experience across the registro-pontos page.
---
 .../ponto/SaldoDiarioComparativoBadge.svelte  |   2 +-
 .../registro-pontos/+page.svelte              | 102 ++++++++++++------
 2 files changed, 70 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/lib/components/ponto/SaldoDiarioComparativoBadge.svelte b/apps/web/src/lib/components/ponto/SaldoDiarioComparativoBadge.svelte
index 8233a1e..9344ac0 100644
--- a/apps/web/src/lib/components/ponto/SaldoDiarioComparativoBadge.svelte
+++ b/apps/web/src/lib/components/ponto/SaldoDiarioComparativoBadge.svelte
@@ -34,7 +34,7 @@
 			? 'bg-red-50 border-red-200 text-red-700 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400' 
 			: 'bg-green-50 border-green-200 text-green-700 dark:bg-green-900/20 dark:border-green-800 dark:text-green-400'
 	}">
-		<span class="font-bold">+{trabalhado.horas}h {trabalhado.minutos}min</span>
+		<span class="font-bold text-green-600 dark:text-green-400">+{trabalhado.horas}h {trabalhado.minutos}min</span>
 		<span class="text-base-content/50">/</span>
 		<span class={isNegativo ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}>
 			{sinalDiferenca}{diferenca.horas}h {diferenca.minutos}min
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index b837ccb..4172efb 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -421,11 +421,11 @@
 						};
 					} else {
 						// Fallback: usar cálculo simples se não houver configuração
-						const primeiroRegistro = grupoData.registros[0];
-						if (primeiroRegistro && 'saldoDiario' in primeiroRegistro && primeiroRegistro.saldoDiario) {
-							grupoData.saldoDiario = primeiroRegistro.saldoDiario;
-						} else {
-							grupoData.saldoDiario = calcularSaldoDiario(grupoData.registros);
+					const primeiroRegistro = grupoData.registros[0];
+					if (primeiroRegistro && 'saldoDiario' in primeiroRegistro && primeiroRegistro.saldoDiario) {
+						grupoData.saldoDiario = primeiroRegistro.saldoDiario;
+					} else {
+						grupoData.saldoDiario = calcularSaldoDiario(grupoData.registros);
 						}
 					}
 				}
@@ -1496,9 +1496,12 @@
 						saldoDiarioTotalDiferencaMinutos = -saldoDiarioTotalEsperadoMinutos; // Diferença negativa (0 - esperado)
 					}
 					
+					// Calcular diferença corretamente: trabalhado - esperado (não somar diferenças dos pares)
+					const diferencaDiariaCorrigida = saldoDiarioTotalTrabalhadoMinutos - saldoDiarioTotalEsperadoMinutos;
+					
 					// Armazenar saldo diário completo (usado no resumo do banco de horas)
 					saldosDiariosPorData[data] = {
-						diferencaMinutos: saldoDiarioTotalDiferencaMinutos,
+						diferencaMinutos: diferencaDiariaCorrigida,
 						trabalhadoMinutos: saldoDiarioTotalTrabalhadoMinutos,
 						esperadoMinutos: saldoDiarioTotalEsperadoMinutos
 					};
@@ -1646,9 +1649,9 @@
 											// Se não há tempo trabalhado, decrementar o tempo esperado completo
 											if (saldoEsperado.trabalhadoMinutos === 0) {
 												saldoDiarioAcumuladoMinutos -= saldoEsperado.esperadoMinutos;
-											} else {
+						} else {
 												saldoDiarioAcumuladoMinutos -= saldoEsperado.trabalhadoMinutos;
-											}
+						}
 											paresProcessadosParaSaldo.add(chavePar);
 										}
 										
@@ -1664,7 +1667,7 @@
 										// Marcar linha para aplicar cor no saldo
 										if (trabalhouMaisQueEsperado) {
 											linha._saldoPositivo = true; // Verde: trabalhou mais que o esperado
-										} else {
+							} else {
 											linha._saldoNegativo = true; // Vermelho: ainda falta trabalhar
 										}
 										
@@ -1756,9 +1759,9 @@
 												content: `0h 0min parcial | Saldo: ${sinalSaldo}${saldoAcumuladoHoras}h ${saldoAcumuladoMinutosResto}min`,
 												rowSpan: 2 // retorno_almoco + saida
 											});
-										} else {
-											linha.push('-');
-										}
+						} else {
+							linha.push('-');
+						}
 									} else {
 										// Há registros reais mas este par não foi marcado completamente
 										// Verificar se é um par completamente não marcado
@@ -1921,7 +1924,6 @@
 				const cargaHorariaDiariaEsperadaMinutos = minutosPar1EsperadoAjustadoConfig + minutosPar2EsperadoAjustadoConfig;
 				
 				// Calcular saldos do período selecionado baseado nos saldos diários calculados
-				let saldoPeriodoDiferencaMinutos = 0;
 				let saldoPeriodoTrabalhadoMinutos = 0;
 				let diasComSaldoPositivo = 0;
 				let diasComSaldoNegativo = 0;
@@ -1930,12 +1932,14 @@
 				if (sections.registrosPonto && Object.keys(saldosDiariosPorData).length > 0) {
 					// Somar todos os saldos diários do período
 					for (const saldo of Object.values(saldosDiariosPorData)) {
-						saldoPeriodoDiferencaMinutos += saldo.diferencaMinutos;
 						saldoPeriodoTrabalhadoMinutos += saldo.trabalhadoMinutos;
 						
-						if (saldo.diferencaMinutos > 0) {
+						// Calcular diferença diária corretamente: trabalhado - esperado
+						const diferencaDiaria = saldo.trabalhadoMinutos - saldo.esperadoMinutos;
+						
+						if (diferencaDiaria > 0) {
 							diasComSaldoPositivo++;
-						} else if (saldo.diferencaMinutos < 0) {
+						} else if (diferencaDiaria < 0) {
 							diasComSaldoNegativo++;
 						}
 						
@@ -1962,14 +1966,21 @@
 					for (const regs of Object.values(registrosPorDataPeriodo)) {
 						const saldoDiario = calcularSaldoDiario(regs);
 						if (saldoDiario) {
-							saldoPeriodoDiferencaMinutos += saldoDiario.saldoMinutos;
 							saldoPeriodoTrabalhadoMinutos += saldoDiario.saldoMinutos;
 						}
 					}
 				}
 
 				// Calcular saldo esperado do período: carga horária diária × número de dias
+				// SEMPRE calcular diretamente, não somar saldos diários esperados (pode duplicar)
 				const saldoPeriodoEsperadoMinutos = cargaHorariaDiariaEsperadaMinutos * totalDiasPeriodo;
+				
+				// Calcular diferença do período corretamente: trabalhado - esperado (para "Saldo do Período Exibido")
+				const saldoPeriodoDiferencaMinutos = saldoPeriodoTrabalhadoMinutos - saldoPeriodoEsperadoMinutos;
+				
+				// Calcular diferença do período (trabalhado - esperado) para exibição na linha "Diferença do Período"
+				// Negativo quando trabalhado < esperado (vermelho), positivo quando trabalhado > esperado (verde)
+				const diferencaPeriodoTrabalhadoMenosEsperado = saldoPeriodoTrabalhadoMinutos - saldoPeriodoEsperadoMinutos;
 
 				// Calcular médias diárias
 				const mediaDiariaTrabalhadaHoras = totalDiasPeriodo > 0 ? Math.floor(saldoPeriodoTrabalhadoMinutos / 60 / totalDiasPeriodo) : 0;
@@ -1994,11 +2005,19 @@
 				const mediaDiariaEsperadaMinutos = totalEsperadoDiarioMinutos % 60;
 
 				// Formatar valores
+				// Saldo do Período Exibido: diferença (trabalhado - esperado)
 				const horasPeriodoDiferenca = Math.floor(Math.abs(saldoPeriodoDiferencaMinutos) / 60);
 				const minutosPeriodoDiferenca = Math.abs(saldoPeriodoDiferencaMinutos) % 60;
 				const sinalPeriodoDiferenca = saldoPeriodoDiferencaMinutos >= 0 ? '+' : '-';
 				const saldoPeriodoDiferencaFormatado = `${sinalPeriodoDiferenca}${horasPeriodoDiferenca}h ${minutosPeriodoDiferenca}min`;
 
+				// Diferença do Período: trabalhado - esperado
+				// Negativo quando trabalhado < esperado (vermelho), positivo quando trabalhado > esperado (verde)
+				const horasDiferencaPeriodo = Math.floor(Math.abs(diferencaPeriodoTrabalhadoMenosEsperado) / 60);
+				const minutosDiferencaPeriodo = Math.abs(diferencaPeriodoTrabalhadoMenosEsperado) % 60;
+				const sinalDiferencaPeriodo = diferencaPeriodoTrabalhadoMenosEsperado >= 0 ? '+' : '-';
+				const diferencaPeriodoFormatado = `${sinalDiferencaPeriodo}${horasDiferencaPeriodo}h ${minutosDiferencaPeriodo}min`;
+
 				const horasPeriodoTrabalhado = Math.floor(saldoPeriodoTrabalhadoMinutos / 60);
 				const minutosPeriodoTrabalhado = saldoPeriodoTrabalhadoMinutos % 60;
 				const saldoPeriodoTrabalhadoFormatado = `+${horasPeriodoTrabalhado}h ${minutosPeriodoTrabalhado}min`;
@@ -2049,7 +2068,7 @@
 					bancoHorasData.push(['', '']); // Linha separadora
 					bancoHorasData.push(['Saldo Trabalhado do Período', saldoPeriodoTrabalhadoFormatado]);
 					bancoHorasData.push(['Saldo Esperado do Período', saldoPeriodoEsperadoFormatado]);
-					bancoHorasData.push(['Diferença do Período', saldoPeriodoDiferencaFormatado]);
+					bancoHorasData.push(['Diferença do Período', diferencaPeriodoFormatado]);
 
 					// Adicionar estatísticas
 					bancoHorasData.push(['', '']); // Linha separadora
@@ -2105,11 +2124,14 @@
 									}
 								} else if (valor.includes('+') || campo.includes('Trabalhado') || campo.includes('Esperado')) {
 									// Verde para valores positivos ou campos de trabalhado/esperado
-									if (campo.includes('Diferença') && saldoPeriodoDiferencaMinutos < 0) {
-										data.cell.styles.textColor = [200, 0, 0]; // Vermelho se diferença negativa
-										data.cell.styles.fontStyle = 'bold';
-									} else if (campo.includes('Diferença') && saldoPeriodoDiferencaMinutos > 0) {
-										data.cell.styles.textColor = [0, 128, 0]; // Verde se diferença positiva
+									if (campo.includes('Diferença do Período')) {
+										// Diferença do Período: trabalhado - esperado
+										// Negativo quando trabalhado < esperado (vermelho), positivo quando trabalhado > esperado (verde)
+										if (diferencaPeriodoTrabalhadoMenosEsperado < 0) {
+											data.cell.styles.textColor = [200, 0, 0]; // Vermelho quando trabalhado < esperado
+										} else if (diferencaPeriodoTrabalhadoMenosEsperado > 0) {
+											data.cell.styles.textColor = [0, 128, 0]; // Verde quando trabalhado > esperado
+										}
 										data.cell.styles.fontStyle = 'bold';
 									} else if (campo.includes('Trabalhado') || campo.includes('Esperado')) {
 										data.cell.styles.textColor = [0, 128, 0]; // Verde para trabalhado/esperado
@@ -2226,6 +2248,20 @@
 						theme: 'grid',
 						headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' },
 						styles: { fontSize: 9 },
+						columnStyles: {
+							0: { cellWidth: 30 }, // Data
+							1: { cellWidth: 40 }, // Tipo
+							2: { cellWidth: 50, cellPadding: { top: 2, bottom: 2, left: 2, right: 2 } }, // Detalhes - maior largura
+							3: { cellWidth: 40 }, // Motivo
+							4: { cellWidth: 'auto' }, // Observações
+						},
+						didParseCell: function(data) {
+							// Permitir quebra de linha na coluna Detalhes (índice 2)
+							if (data.column.index === 2) {
+								data.cell.styles.overflow = 'linebreak';
+								data.cell.styles.cellWidth = 50;
+							}
+						},
 					});
 
 					const lastPage = doc.getNumberOfPages();
@@ -2985,8 +3021,8 @@
 								? `${distanciaExcedenteKm} km além do permitido`
 								: `${distanciaExcedenteMetros} metros além do permitido`;
 							geofencingData.push(['Distância Excedente', excedenteTexto]);
+							}
 						}
-					}
 					geofencingData.push(['Status', statusTexto]);
 
 					autoTable(doc, {
@@ -3759,14 +3795,14 @@
 														<td class="whitespace-nowrap font-semibold text-sm">{dataFormatada}</td>
 														<td class="whitespace-nowrap">
 															<span class="badge badge-outline badge-sm font-medium text-xs">
-																{config
-																	? getTipoRegistroLabel(registro.tipo, {
-																			nomeEntrada: config.nomeEntrada,
-																			nomeSaidaAlmoco: config.nomeSaidaAlmoco,
-																			nomeRetornoAlmoco: config.nomeRetornoAlmoco,
-																			nomeSaida: config.nomeSaida,
-																		})
-																	: getTipoRegistroLabel(registro.tipo)}
+															{config
+																? getTipoRegistroLabel(registro.tipo, {
+																		nomeEntrada: config.nomeEntrada,
+																		nomeSaidaAlmoco: config.nomeSaidaAlmoco,
+																		nomeRetornoAlmoco: config.nomeRetornoAlmoco,
+																		nomeSaida: config.nomeSaida,
+																	})
+																: getTipoRegistroLabel(registro.tipo)}
 															</span>
 														</td>
 														<td class="whitespace-nowrap font-mono text-sm font-medium">{formatarHoraPonto(registro.hora, registro.minuto)}</td>
@@ -3784,7 +3820,7 @@
 																{#if grupoData.saldoDiarioComparativo}
 																	<SaldoDiarioComparativoBadge saldo={grupoData.saldoDiarioComparativo} size="md" />
 																{:else if grupoData.saldoDiario}
-																	<SaldoDiarioBadge saldo={grupoData.saldoDiario} size="md" />
+																<SaldoDiarioBadge saldo={grupoData.saldoDiario} size="md" />
 																{:else}
 																	<span class="badge badge-ghost badge-lg">-</span>
 																{/if}
-- 
2.49.1


From 00e18e79ec90422b974dd3a5a32de69b8091b9ea Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 23 Nov 2025 14:58:04 -0300
Subject: [PATCH 12/13] feat: add date range filters for employee time records
 in homologacao page

- Introduced date range filters for selecting start and end dates, defaulting to the last 30 days for improved user experience.
- Enhanced the UI layout to include form controls for selecting employees and date ranges, ensuring better accessibility and usability.
- Updated data handling logic to utilize the new date filters for querying employee time records.
---
 .../controle-ponto/homologacao/+page.svelte   | 65 +++++++++++++++----
 1 file changed, 51 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/controle-ponto/homologacao/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/controle-ponto/homologacao/+page.svelte
index dafe028..f4edcd4 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/controle-ponto/homologacao/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/controle-ponto/homologacao/+page.svelte
@@ -18,6 +18,12 @@
 	let homologacaoParaExcluir = $state<Id<'homologacoesPonto'> | null>(null);
 	let mostrandoModalDetalhes = $state(false);
 	let mostrandoModalExcluir = $state(false);
+	
+	// Filtros de período
+	const hoje = new Date();
+	const trintaDiasAtras = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
+	let dataInicioFiltro = $state(trintaDiasAtras.toISOString().split('T')[0]!);
+	let dataFimFiltro = $state(hoje.toISOString().split('T')[0]!);
 
 	// Monitorar mudanças em funcionarioSelecionado
 	$effect(() => {
@@ -116,8 +122,8 @@
 		}
 		return {
 			funcionarioId: funcionarioSelecionado as Id<'funcionarios'>,
-			dataInicio: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]!,
-			dataFim: new Date().toISOString().split('T')[0]!,
+			dataInicio: dataInicioFiltro,
+			dataFim: dataFimFiltro,
 		};
 	});
 
@@ -364,18 +370,49 @@
 	<div class="card bg-base-100 shadow-xl mb-6">
 		<div class="card-body">
 			<h2 class="card-title mb-4">Selecionar Funcionário</h2>
-		<select
-			class="select select-bordered w-full"
-			bind:value={funcionarioSelecionado}
-			disabled={modoEdicao}
-		>
-				<option value="">Selecione um funcionário</option>
-				{#each funcionarios as funcionario}
-					<option value={funcionario._id as string}>
-						{funcionario.nome} {funcionario.matricula ? `(${funcionario.matricula})` : ''}
-					</option>
-				{/each}
-			</select>
+			<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Funcionário</span>
+					</label>
+					<select
+						class="select select-bordered w-full"
+						bind:value={funcionarioSelecionado}
+						disabled={modoEdicao}
+					>
+						<option value="">Selecione um funcionário</option>
+						{#each funcionarios as funcionario}
+							<option value={funcionario._id as string}>
+								{funcionario.nome} {funcionario.matricula ? `(${funcionario.matricula})` : ''}
+							</option>
+						{/each}
+					</select>
+				</div>
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Data Início</span>
+					</label>
+					<input
+						type="date"
+						class="input input-bordered w-full"
+						bind:value={dataInicioFiltro}
+						disabled={modoEdicao}
+						max={dataFimFiltro}
+					/>
+				</div>
+				<div class="form-control">
+					<label class="label">
+						<span class="label-text font-medium">Data Fim</span>
+					</label>
+					<input
+						type="date"
+						class="input input-bordered w-full"
+						bind:value={dataFimFiltro}
+						disabled={modoEdicao}
+						min={dataInicioFiltro}
+					/>
+				</div>
+			</div>
 		</div>
 	</div>
 
-- 
2.49.1


From 51096e7affea58688a2df5518a64260d511cb9f5 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 23 Nov 2025 15:10:23 -0300
Subject: [PATCH 13/13] refactor: improve filtering logic for employee time
 records in registro-pontos page

- Enhanced the filtering mechanism to apply location and status filters more effectively, ensuring only relevant records are displayed.
- Added checks to exclude records without location information when filters are active, improving data accuracy.
- Implemented a final filtering step to ensure only groups with valid records are shown, enhancing user experience in reviewing time records.
---
 .../registro-pontos/+page.svelte               | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
index 4172efb..a4b1d16 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/registro-pontos/+page.svelte
@@ -251,6 +251,8 @@
 	});
 
 	// Filtrar registros com base nos filtros avançados
+	// Nota: Os filtros de data e funcionário são aplicados no backend através de registrosParams
+	// Os filtros de status e localização são aplicados aqui no frontend
 	const registrosFiltrados = $derived.by(() => {
 		if (!registros || registros.length === 0) return [];
 		
@@ -268,6 +270,10 @@
 		// Filtro de localização (Dentro/Fora do Raio)
 		if (localizacaoFiltro !== 'todos') {
 			resultado = resultado.filter(r => {
+				// Se não houver informação de localização, excluir do resultado quando filtro está ativo
+				if (r.dentroRaioPermitido === undefined || r.dentroRaioPermitido === null) {
+					return false;
+				}
 				if (localizacaoFiltro === 'dentro') return r.dentroRaioPermitido === true;
 				if (localizacaoFiltro === 'fora') return r.dentroRaioPermitido === false;
 				return true;
@@ -432,7 +438,17 @@
 			}
 		}
 
-		return resultado;
+		// Filtrar grupos que não têm registros após aplicar os filtros
+		// Isso garante que apenas funcionários com registros que passam pelos filtros sejam exibidos
+		const resultadoFiltrado = resultado.filter(grupo => {
+			// Verificar se o grupo tem pelo menos um registro em alguma data
+			const temRegistros = Object.values(grupo.registrosPorData).some(
+				grupoData => grupoData.registros && grupoData.registros.length > 0
+			);
+			return temRegistros;
+		});
+
+		return resultadoFiltrado;
 	});
 
 	// Query para banco de horas de cada funcionário
-- 
2.49.1