From b01d2d6786de42e6031389e30b9a1f2be1b24393 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Tue, 18 Nov 2025 15:28:26 -0300
Subject: [PATCH] feat: enhance point registration and management features

- Added functionality to capture and display images during point registration, improving user experience.
- Implemented error handling for image uploads and webcam access, ensuring smoother operation.
- Introduced a justification field for point registration, allowing users to provide context for their entries.
- Enhanced the backend to support new features, including image handling and justification storage.
- Updated UI components for better layout and responsiveness, improving overall usability.
---
 .../components/ponto/ComprovantePonto.svelte  | 105 +++++
 .../lib/components/ponto/RegistroPonto.svelte | 396 +++++++++++++++---
 .../lib/components/ponto/WebcamCapture.svelte | 180 +++++---
 .../ponto/WidgetGestaoPontos.svelte           | 108 ++---
 apps/web/src/lib/utils/deviceInfo.ts          |   8 +-
 .../(dashboard)/gestao-pessoas/+page.svelte   |   2 +-
 .../registro-pontos/+page.svelte              |  63 ++-
 .../secretaria-executiva/+page.svelte         |   2 +-
 packages/backend/convex/pontos.ts             | 245 ++++++++++-
 packages/backend/convex/schema.ts             |  19 +-
 10 files changed, 941 insertions(+), 187 deletions(-)

diff --git a/apps/web/src/lib/components/ponto/ComprovantePonto.svelte b/apps/web/src/lib/components/ponto/ComprovantePonto.svelte
index 3e149e9..cecf612 100644
--- a/apps/web/src/lib/components/ponto/ComprovantePonto.svelte
+++ b/apps/web/src/lib/components/ponto/ComprovantePonto.svelte
@@ -169,6 +169,91 @@
 				}
 			}
 
+			// Imagem capturada (se disponível)
+			if (registro.imagemUrl) {
+				yPosition += 10;
+				// Verificar se precisa de nova página
+				if (yPosition > 200) {
+					doc.addPage();
+					yPosition = 20;
+				}
+
+				doc.setFont('helvetica', 'bold');
+				doc.text('FOTO CAPTURADA', 105, yPosition, { align: 'center' });
+				doc.setFont('helvetica', 'normal');
+				yPosition += 10;
+
+				try {
+					// Carregar imagem usando fetch para evitar problemas de CORS
+					const response = await fetch(registro.imagemUrl);
+					if (!response.ok) {
+						throw new Error('Erro ao carregar imagem');
+					}
+					
+					const blob = await response.blob();
+					const reader = new FileReader();
+					
+					// Converter blob para base64
+					const base64 = await new Promise<string>((resolve, reject) => {
+						reader.onloadend = () => {
+							if (typeof reader.result === 'string') {
+								resolve(reader.result);
+							} else {
+								reject(new Error('Erro ao converter imagem'));
+							}
+						};
+						reader.onerror = () => reject(new Error('Erro ao ler imagem'));
+						reader.readAsDataURL(blob);
+					});
+
+					// Criar elemento de imagem para obter dimensões
+					const img = new Image();
+					await new Promise<void>((resolve, reject) => {
+						img.onload = () => resolve();
+						img.onerror = () => reject(new Error('Erro ao processar imagem'));
+						img.src = base64;
+						setTimeout(() => reject(new Error('Timeout ao processar imagem')), 10000);
+					});
+
+					// Calcular dimensões para caber na página (largura máxima 80mm, manter proporção)
+					const maxWidth = 80;
+					const maxHeight = 60;
+					let imgWidth = img.width;
+					let imgHeight = img.height;
+					const aspectRatio = imgWidth / imgHeight;
+
+					if (imgWidth > maxWidth || imgHeight > maxHeight) {
+						if (aspectRatio > 1) {
+							// Imagem horizontal
+							imgWidth = maxWidth;
+							imgHeight = maxWidth / aspectRatio;
+						} else {
+							// Imagem vertical
+							imgHeight = maxHeight;
+							imgWidth = maxHeight * aspectRatio;
+						}
+					}
+
+					// Centralizar imagem
+					const xPosition = (doc.internal.pageSize.getWidth() - imgWidth) / 2;
+					
+					// Verificar se cabe na página atual
+					if (yPosition + imgHeight > doc.internal.pageSize.getHeight() - 20) {
+						doc.addPage();
+						yPosition = 20;
+					}
+
+					// Adicionar imagem ao PDF usando base64
+					doc.addImage(base64, 'JPEG', xPosition, yPosition, imgWidth, imgHeight);
+					yPosition += imgHeight + 10;
+				} catch (error) {
+					console.warn('Erro ao adicionar imagem ao PDF:', error);
+					doc.setFontSize(10);
+					doc.text('Foto não disponível para impressão', 105, yPosition, { align: 'center' });
+					yPosition += 6;
+				}
+			}
+
 			// Rodapé
 			const pageCount = doc.getNumberOfPages();
 			for (let i = 1; i <= pageCount; i++) {
@@ -248,6 +333,26 @@
 					</div>
 				</div>
 
+				<!-- Imagem Capturada -->
+				{#if registro.imagemUrl}
+					<div class="card bg-base-200">
+						<div class="card-body">
+							<h4 class="font-bold mb-2">Foto Capturada</h4>
+							<div class="flex justify-center">
+								<img
+									src={registro.imagemUrl}
+									alt="Foto do registro de ponto"
+									class="max-w-full max-h-96 rounded-lg border-2 border-primary object-contain"
+									onerror={(e) => {
+										console.error('Erro ao carregar imagem:', e);
+										(e.target as HTMLImageElement).style.display = 'none';
+									}}
+								/>
+							</div>
+						</div>
+					</div>
+				{/if}
+
 				<!-- Ações -->
 				<div class="flex justify-end gap-2">
 					<button class="btn btn-primary" onclick={gerarPDF} disabled={gerando}>
diff --git a/apps/web/src/lib/components/ponto/RegistroPonto.svelte b/apps/web/src/lib/components/ponto/RegistroPonto.svelte
index 10402cf..df03efd 100644
--- a/apps/web/src/lib/components/ponto/RegistroPonto.svelte
+++ b/apps/web/src/lib/components/ponto/RegistroPonto.svelte
@@ -5,17 +5,31 @@
 	import RelogioSincronizado from './RelogioSincronizado.svelte';
 	import WebcamCapture from './WebcamCapture.svelte';
 	import ComprovantePonto from './ComprovantePonto.svelte';
+	import ErrorModal from '../ErrorModal.svelte';
 	import { obterTempoServidor } from '$lib/utils/sincronizacaoTempo';
 	import { obterInformacoesDispositivo } from '$lib/utils/deviceInfo';
-	import { formatarHoraPonto, getTipoRegistroLabel, getProximoTipoRegistro } from '$lib/utils/ponto';
-	import { LogIn, LogOut, Clock, CheckCircle2, XCircle, Camera, MapPin } from 'lucide-svelte';
+	import {
+		formatarHoraPonto,
+		getTipoRegistroLabel,
+		getProximoTipoRegistro
+	} from '$lib/utils/ponto';
+	import { LogIn, LogOut, Clock, CheckCircle2, XCircle, TrendingUp, TrendingDown } from 'lucide-svelte';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
 	const client = useConvexClient();
 
 	// 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]!);
+	const historicoSaldoQuery = useQuery(
+		api.pontos.obterHistoricoESaldoDia,
+		funcionarioId && dataHoje ? { funcionarioId, data: dataHoje } : 'skip'
+	);
 
 	// Estados
 	let mostrandoWebcam = $state(false);
@@ -26,6 +40,11 @@
 	let mostrandoComprovante = $state(false);
 	let imagemCapturada = $state<Blob | null>(null);
 	let coletandoInfo = $state(false);
+	let capturandoAutomaticamente = $state(false);
+	let mostrarModalErro = $state(false);
+	let mensagemErroModal = $state('');
+	let detalhesErroModal = $state('');
+	let justificativa = $state('');
 
 	const registrosHoje = $derived(registrosHojeQuery?.data || []);
 	const config = $derived(configQuery?.data);
@@ -54,7 +73,7 @@
 			const response = await fetch(uploadUrl, {
 				method: 'POST',
 				headers: { 'Content-Type': file.type },
-				body: file,
+				body: file
 			});
 
 			if (!response.ok) {
@@ -87,10 +106,16 @@
 			const timestamp = await obterTempoServidor(client);
 			const sincronizadoComServidor = true; // Sempre true quando usamos obterTempoServidor
 
-			// Upload da imagem se houver
+			// Upload da imagem se houver (não bloquear se falhar)
 			let imagemId: Id<'_storage'> | undefined = undefined;
 			if (imagemCapturada) {
-				imagemId = await uploadImagem(imagemCapturada);
+				try {
+					imagemId = await uploadImagem(imagemCapturada);
+				} catch (error) {
+					console.warn('Erro ao fazer upload da imagem, continuando sem foto:', error);
+					// Continuar sem foto se o upload falhar
+					imagemId = undefined;
+				}
 			}
 
 			// Registrar ponto
@@ -99,11 +124,13 @@
 				informacoesDispositivo,
 				timestamp,
 				sincronizadoComServidor,
+				justificativa: justificativa.trim() || undefined
 			});
 
 			registroId = resultado.registroId;
 			sucesso = `Ponto registrado com sucesso! Tipo: ${getTipoRegistroLabel(resultado.tipo)}`;
 			imagemCapturada = null;
+			justificativa = ''; // Limpar justificativa após registro
 
 			// Mostrar comprovante após 1 segundo
 			setTimeout(() => {
@@ -111,23 +138,71 @@
 			}, 1000);
 		} catch (error) {
 			console.error('Erro ao registrar ponto:', error);
-			erro = error instanceof Error ? error.message : 'Erro ao registrar ponto';
+			const mensagemErro = error instanceof Error ? error.message : 'Erro ao registrar ponto';
+			
+			// Verificar se é erro de registro duplicado
+			if (
+				mensagemErro.includes('Já existe um registro neste minuto') ||
+				mensagemErro.includes('já existe um registro')
+			) {
+				mensagemErroModal = 'Registro de ponto duplicado';
+				detalhesErroModal = `Não é possível registrar o ponto no mesmo minuto.\n\nVocê já possui um registro de ${getTipoRegistroLabel(proximoTipo)} para este minuto.\n\nPor favor, aguarde pelo menos 1 minuto antes de tentar registrar novamente.`;
+				mostrarModalErro = true;
+			} else {
+				// Outros erros também mostram no modal
+				mensagemErroModal = 'Erro ao registrar ponto';
+				detalhesErroModal = mensagemErro;
+				mostrarModalErro = true;
+			}
+			
+			erro = mensagemErro;
 		} finally {
 			registrando = false;
 			coletandoInfo = false;
 		}
 	}
 
-	function handleWebcamCapture(blob: Blob) {
-		imagemCapturada = blob;
+	function handleWebcamCapture(blob: Blob | null) {
+		if (blob) {
+			imagemCapturada = blob;
+		}
 		mostrandoWebcam = false;
+
+		// Se estava capturando automaticamente, registrar o ponto após capturar (com ou sem foto)
+		if (capturandoAutomaticamente) {
+			capturandoAutomaticamente = false;
+			// Pequeno delay para garantir que a imagem foi processada (se houver)
+			setTimeout(() => {
+				registrarPonto();
+			}, 100);
+		}
 	}
 
 	function handleWebcamCancel() {
+		const estavaCapturando = capturandoAutomaticamente;
 		mostrandoWebcam = false;
+		capturandoAutomaticamente = false;
+		imagemCapturada = null;
+		// Se estava capturando automaticamente e cancelou, registrar sem foto
+		if (estavaCapturando) {
+			registrarPonto();
+		}
 	}
 
-	function abrirWebcam() {
+	function handleWebcamError() {
+		// Em caso de erro na captura, registrar sem foto
+		mostrandoWebcam = false;
+		capturandoAutomaticamente = false;
+		imagemCapturada = null;
+		// Registrar ponto sem foto
+		registrarPonto();
+	}
+
+	async function iniciarRegistroComFoto() {
+		if (registrando || coletandoInfo) return;
+
+		// Abrir webcam automaticamente
+		capturandoAutomaticamente = true;
 		mostrandoWebcam = true;
 	}
 
@@ -136,10 +211,75 @@
 		registroId = null;
 	}
 
+	function fecharModalErro() {
+		mostrarModalErro = false;
+		mensagemErroModal = '';
+		detalhesErroModal = '';
+		erro = null;
+	}
+
 	const podeRegistrar = $derived.by(() => {
 		return !registrando && !coletandoInfo && config !== undefined;
 	});
 
+	// 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);
+		}
+	});
+
+	// Solicitar permissões automaticamente ao montar o componente
+	onMount(async () => {
+		// Solicitar permissão de webcam
+		if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+			try {
+				// Solicitar apenas permissão, sem iniciar o stream ainda
+				await navigator.mediaDevices.getUserMedia({ video: true });
+			} catch (error) {
+				// Ignorar erro silenciosamente - a permissão será solicitada quando necessário
+				console.log('Permissão de webcam não concedida ainda');
+			}
+		}
+
+		// Solicitar permissão de geolocalização
+		if (navigator.geolocation) {
+			try {
+				// Solicitar permissão de geolocalização (timeout curto para não bloquear)
+				await new Promise<void>((resolve) => {
+					const timeoutId = setTimeout(() => resolve(), 2000); // Timeout de 2 segundos
+					navigator.geolocation.getCurrentPosition(
+						() => {
+							clearTimeout(timeoutId);
+							resolve();
+						},
+						() => {
+							clearTimeout(timeoutId);
+							resolve(); // Resolver mesmo se negado
+						},
+						{ timeout: 2000, maximumAge: 0, enableHighAccuracy: false } // enableHighAccuracy false para ser mais rápido
+					);
+				});
+			} catch (error) {
+				// Ignorar erro silenciosamente
+				console.log('Permissão de geolocalização não concedida ainda');
+			}
+		}
+	});
+
 	const mapaHorarios = $derived.by(() => {
 		if (!config) return [];
 
@@ -147,7 +287,7 @@
 			{ tipo: 'entrada', horario: config.horarioEntrada, label: 'Entrada' },
 			{ tipo: 'saida_almoco', horario: config.horarioSaidaAlmoco, label: 'Saída para Almoço' },
 			{ tipo: 'retorno_almoco', horario: config.horarioRetornoAlmoco, label: 'Retorno do Almoço' },
-			{ tipo: 'saida', horario: config.horarioSaida, label: 'Saída' },
+			{ tipo: 'saida', horario: config.horarioSaida, label: 'Saída' }
 		];
 
 		return horarios.map((h) => {
@@ -156,10 +296,33 @@
 				...h,
 				registrado: !!registro,
 				horarioRegistrado: registro ? formatarHoraPonto(registro.hora, registro.minuto) : null,
-				dentroDoPrazo: registro?.dentroDoPrazo ?? null,
+				dentroDoPrazo: registro?.dentroDoPrazo ?? null
 			};
 		});
 	});
+
+	// Dados do histórico e saldo
+	const historicoSaldo = $derived(historicoSaldoQuery?.data);
+	const registrosOrdenados = $derived.by(() => {
+		if (!historicoSaldo?.registros) return [];
+		return [...historicoSaldo.registros].sort((a, b) => {
+			const minutosA = a.hora * 60 + a.minuto;
+			const minutosB = b.hora * 60 + b.minuto;
+			return minutosA - minutosB;
+		});
+	});
+
+	// Formatação do saldo
+	const saldoFormatado = $derived.by(() => {
+		if (!historicoSaldo) return null;
+		const minutos = historicoSaldo.saldoMinutos;
+		const horas = Math.floor(Math.abs(minutos) / 60);
+		const mins = Math.abs(minutos) % 60;
+		const sinal = minutos >= 0 ? '+' : '-';
+		return `${sinal}${horas}h ${mins}min`;
+	});
+
+	const saldoPositivo = $derived(historicoSaldo ? historicoSaldo.saldoMinutos >= 0 : false);
 </script>
 
 <div class="space-y-6">
@@ -177,25 +340,27 @@
 				<Clock class="h-5 w-5" />
 				Horários do Dia
 			</h2>
-			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
-				{#each mapaHorarios as horario}
+			<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+				{#each mapaHorarios as horario (horario.tipo)}
 					<div
-						class="card {horario.registrado ? 'bg-success/10 border-success' : 'bg-base-200'} border-2"
+						class="card {horario.registrado
+							? 'bg-success/10 border-success'
+							: 'bg-base-200'} border-2"
 					>
 						<div class="card-body p-4">
-							<div class="flex items-center justify-between mb-2">
+							<div class="mb-2 flex items-center justify-between">
 								<span class="font-semibold">{horario.label}</span>
 								{#if horario.registrado}
 									{#if horario.dentroDoPrazo}
-										<CheckCircle2 class="h-5 w-5 text-success" />
+										<CheckCircle2 class="text-success h-5 w-5" />
 									{:else}
-										<XCircle class="h-5 w-5 text-error" />
+										<XCircle class="text-error h-5 w-5" />
 									{/if}
 								{/if}
 							</div>
 							<div class="text-2xl font-bold">{horario.horario}</div>
 							{#if horario.registrado}
-								<div class="text-sm text-base-content/70">
+								<div class="text-base-content/70 text-sm">
 									Registrado: {horario.horarioRegistrado}
 								</div>
 							{/if}
@@ -210,14 +375,7 @@
 	<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="flex flex-col items-center gap-4 w-full">
-				{#if erro}
-					<div class="alert alert-error w-full">
-						<XCircle class="h-5 w-5" />
-						<span>{erro}</span>
-					</div>
-				{/if}
-
+			<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" />
@@ -225,62 +383,166 @@
 					</div>
 				{/if}
 
-				<div class="text-center mb-4">
+				<div class="mb-4 text-center">
 					<p class="text-lg font-semibold">Próximo registro: {tipoLabel}</p>
 				</div>
 
-				<div class="flex gap-4">
-					{#if !imagemCapturada}
-						<button class="btn btn-outline btn-primary" onclick={abrirWebcam} disabled={!podeRegistrar}>
-							<Camera class="h-5 w-5" />
-							Capturar Foto
-						</button>
-					{:else}
-						<div class="badge badge-primary badge-lg gap-2">
-							<Camera class="h-4 w-4" />
-							Foto capturada
-						</div>
-					{/if}
-
-					<button
-						class="btn btn-primary btn-lg"
-						onclick={registrarPonto}
-						disabled={!podeRegistrar}
-					>
-						{#if registrando}
-							<span class="loading loading-spinner loading-sm"></span>
-							{#if coletandoInfo}
-								Coletando informações...
-							{:else}
-								Registrando...
-							{/if}
-						{: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 (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}
+				>
+					{#if registrando}
+						<span class="loading loading-spinner loading-sm"></span>
+						{#if coletandoInfo}
+							Coletando informações...
+						{:else}
+							Registrando...
+						{/if}
+					{: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>
 			</div>
 		</div>
 	</div>
 
+	<!-- Histórico e Saldo do Dia -->
+	{#if historicoSaldo && registrosOrdenados.length > 0}
+		<div class="card bg-base-100 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title">
+					<Clock class="h-5 w-5" />
+					Histórico do Dia
+				</h2>
+				
+				<!-- Saldo de Horas -->
+				<div class="my-4 rounded-lg border-2 p-4 {saldoPositivo ? 'border-success bg-success/10' : 'border-error bg-error/10'}">
+					<div class="flex items-center justify-between">
+						<div>
+							<p class="text-sm font-semibold opacity-70">Saldo de Horas</p>
+							<p class="text-2xl font-bold">
+								{saldoFormatado}
+							</p>
+						</div>
+						{#if saldoPositivo}
+							<TrendingUp class="h-8 w-8 text-success" />
+						{:else}
+							<TrendingDown class="h-8 w-8 text-error" />
+						{/if}
+					</div>
+					<div class="mt-2 text-sm opacity-70">
+						<p>Carga Horária Diária: {Math.floor(historicoSaldo.cargaHorariaDiaria / 60)}h {historicoSaldo.cargaHorariaDiaria % 60}min</p>
+						<p>Horas Trabalhadas: {Math.floor(historicoSaldo.horasTrabalhadas / 60)}h {historicoSaldo.horasTrabalhadas % 60}min</p>
+					</div>
+				</div>
+
+				<!-- Lista de Registros -->
+				<div class="divider"></div>
+				<div class="space-y-2">
+					<h3 class="font-semibold">Registros Realizados</h3>
+					<div class="space-y-3">
+						{#each registrosOrdenados as registro (registro._id)}
+							<div class="card bg-base-200">
+								<div class="card-body p-4">
+									<div class="flex items-start justify-between">
+										<div class="flex-1">
+											<div class="mb-1 flex items-center gap-2">
+												<span class="font-semibold">{getTipoRegistroLabel(registro.tipo)}</span>
+												{#if registro.dentroDoPrazo}
+													<CheckCircle2 class="h-4 w-4 text-success" />
+												{:else}
+													<XCircle class="h-4 w-4 text-error" />
+												{/if}
+											</div>
+											<p class="text-lg font-bold">
+												{formatarHoraPonto(registro.hora, registro.minuto)}
+											</p>
+											{#if registro.justificativa}
+												<div class="mt-2 rounded bg-base-300 p-2">
+													<p class="text-xs font-semibold opacity-70">Justificativa:</p>
+													<p class="text-sm">{registro.justificativa}</p>
+												</div>
+											{/if}
+										</div>
+									</div>
+								</div>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</div>
+		</div>
+	{/if}
+
 	<!-- Modal Webcam -->
 	{#if mostrandoWebcam}
-		<div class="modal modal-open">
-			<div class="modal-box max-w-2xl">
-				<h3 class="font-bold text-lg mb-4">Capturar Foto</h3>
-				<WebcamCapture onCapture={handleWebcamCapture} onCancel={handleWebcamCancel} />
+		<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;"
+		>
+			<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">
+						{#if capturandoAutomaticamente}
+							Capturando foto automaticamente...
+						{:else}
+							Capturar Foto
+						{/if}
+					</h3>
+				</div>
+				<div class="min-h-[200px] flex items-center justify-center py-4">
+					<WebcamCapture
+						onCapture={handleWebcamCapture}
+						onCancel={handleWebcamCancel}
+						onError={handleWebcamError}
+						autoCapture={capturandoAutomaticamente}
+					/>
+				</div>
 			</div>
-			<div class="modal-backdrop" onclick={handleWebcamCancel}></div>
+			<form
+				method="dialog"
+				class="modal-backdrop"
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleWebcamCancel();
+				}}
+			>
+				<button type="submit" aria-label="Fechar modal">fechar</button>
+			</form>
 		</div>
 	{/if}
 
 	<!-- Modal Comprovante -->
 	{#if mostrandoComprovante && registroId}
-		<ComprovantePonto registroId={registroId} onClose={fecharComprovante} />
+		<ComprovantePonto {registroId} onClose={fecharComprovante} />
 	{/if}
-</div>
 
+	<!-- Modal de Erro -->
+	<ErrorModal
+		open={mostrarModalErro}
+		title={mensagemErroModal || 'Erro ao registrar ponto'}
+		message={detalhesErroModal || mensagemErroModal || 'Ocorreu um erro ao registrar o ponto. Tente novamente.'}
+		onClose={fecharModalErro}
+	/>
+</div>
diff --git a/apps/web/src/lib/components/ponto/WebcamCapture.svelte b/apps/web/src/lib/components/ponto/WebcamCapture.svelte
index ee3ac88..ff983ec 100644
--- a/apps/web/src/lib/components/ponto/WebcamCapture.svelte
+++ b/apps/web/src/lib/components/ponto/WebcamCapture.svelte
@@ -4,11 +4,13 @@
 	import { validarWebcamDisponivel, capturarWebcamComPreview } from '$lib/utils/webcam';
 
 	interface Props {
-		onCapture: (blob: Blob) => void;
+		onCapture: (blob: Blob | null) => void;
 		onCancel: () => void;
+		onError?: () => void;
+		autoCapture?: boolean;
 	}
 
-	let { onCapture, onCancel }: Props = $props();
+	let { onCapture, onCancel, onError, autoCapture = false }: Props = $props();
 
 	let videoElement: HTMLVideoElement | null = $state(null);
 	let canvasElement: HTMLCanvasElement | null = $state(null);
@@ -19,9 +21,12 @@
 	let previewUrl = $state<string | null>(null);
 
 	onMount(async () => {
-		webcamDisponivel = await validarWebcamDisponivel();
-		if (!webcamDisponivel) {
-			erro = 'Webcam não disponível';
+		// Tentar obter permissão de webcam automaticamente
+		if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+			erro = 'Webcam não suportada';
+			if (autoCapture && onError) {
+				onError();
+			}
 			return;
 		}
 
@@ -30,18 +35,36 @@
 				video: {
 					width: { ideal: 1280 },
 					height: { ideal: 720 },
-					facingMode: 'user',
-				},
+					facingMode: 'user'
+				}
 			});
 
+			webcamDisponivel = true;
+
 			if (videoElement) {
 				videoElement.srcObject = stream;
 				await videoElement.play();
+
+				// Se for captura automática, aguardar um pouco e capturar
+				if (autoCapture) {
+					// Aguardar 1 segundo para o usuário se posicionar
+					setTimeout(() => {
+						if (videoElement && canvasElement && !capturando && !previewUrl) {
+							capturar();
+						}
+					}, 1000);
+				}
 			}
 		} catch (error) {
 			console.error('Erro ao acessar webcam:', error);
-			erro = 'Erro ao acessar webcam. Verifique as permissões.';
+			erro = 'Erro ao acessar webcam. Continuando sem foto.';
 			webcamDisponivel = false;
+			// Se for captura automática e houver erro, chamar onError para continuar sem foto
+			if (autoCapture && onError) {
+				setTimeout(() => {
+					onError();
+				}, 500);
+			}
 		}
 	});
 
@@ -56,6 +79,9 @@
 
 	async function capturar() {
 		if (!videoElement || !canvasElement) {
+			if (autoCapture && onError) {
+				onError();
+			}
 			return;
 		}
 
@@ -71,12 +97,31 @@
 					stream.getTracks().forEach((track) => track.stop());
 					stream = null;
 				}
+
+				// Se for captura automática, confirmar automaticamente após um pequeno delay
+				if (autoCapture) {
+					setTimeout(() => {
+						confirmar();
+					}, 500);
+				}
 			} else {
 				erro = 'Falha ao capturar imagem';
+				// Se for captura automática e falhar, continuar sem foto
+				if (autoCapture && onError) {
+					setTimeout(() => {
+						onError();
+					}, 500);
+				}
 			}
 		} catch (error) {
 			console.error('Erro ao capturar:', error);
-			erro = 'Erro ao capturar imagem';
+			erro = 'Erro ao capturar imagem. Continuando sem foto.';
+			// Se for captura automática e houver erro, continuar sem foto
+			if (autoCapture && onError) {
+				setTimeout(() => {
+					onError();
+				}, 500);
+			}
 		} finally {
 			capturando = false;
 		}
@@ -116,8 +161,8 @@
 				video: {
 					width: { ideal: 1280 },
 					height: { ideal: 720 },
-					facingMode: 'user',
-				},
+					facingMode: 'user'
+				}
 			});
 
 			if (videoElement) {
@@ -131,69 +176,102 @@
 	}
 </script>
 
-<div class="flex flex-col items-center gap-4 p-6">
+<div class="flex flex-col items-center gap-4 p-4 w-full">
 	{#if !webcamDisponivel && !erro}
-		<div class="flex items-center gap-2 text-warning">
+		<div class="text-warning flex items-center gap-2">
 			<Camera class="h-5 w-5" />
 			<span>Verificando webcam...</span>
 		</div>
-	{:else if erro && !webcamDisponivel}
-		<div class="alert alert-warning">
+		{#if !autoCapture}
+			<div class="flex gap-2">
+				<button class="btn btn-primary" onclick={cancelar}>Continuar sem foto</button>
+			</div>
+		{/if}
+		{:else if erro && !webcamDisponivel}
+		<div class="alert alert-warning max-w-md">
 			<AlertCircle class="h-5 w-5" />
 			<span>{erro}</span>
 		</div>
-		<button class="btn btn-primary" onclick={cancelar}>Continuar sem foto</button>
+		{#if autoCapture}
+			<div class="text-sm text-base-content/70 text-center">
+				O registro será feito sem foto.
+			</div>
+		{:else}
+			<div class="flex gap-2">
+				<button class="btn btn-primary" onclick={cancelar}>Continuar sem foto</button>
+			</div>
+		{/if}
 	{:else if previewUrl}
 		<!-- Preview da imagem capturada -->
-		<div class="flex flex-col items-center gap-4">
-			<img src={previewUrl} alt="Preview" class="max-w-full max-h-96 rounded-lg border-2 border-primary" />
-			<div class="flex gap-2">
-				<button class="btn btn-success" onclick={confirmar}>
-					<Check class="h-5 w-5" />
-					Confirmar
-				</button>
-				<button class="btn btn-outline" onclick={recapturar}>
-					<Camera class="h-5 w-5" />
-					Recapturar
-				</button>
-				<button class="btn btn-error" onclick={cancelar}>
-					<X class="h-5 w-5" />
-					Cancelar
-				</button>
-			</div>
+		<div class="flex flex-col items-center gap-4 w-full">
+			{#if autoCapture}
+				<!-- Modo automático: mostrar apenas preview sem botões -->
+				<div class="text-sm text-base-content/70 mb-2 text-center">
+					Foto capturada automaticamente...
+				</div>
+			{/if}
+			<img
+				src={previewUrl}
+				alt="Preview"
+				class="border-primary max-h-[60vh] max-w-full rounded-lg border-2 object-contain"
+			/>
+			{#if !autoCapture}
+				<!-- Botões apenas se não for automático -->
+				<div class="flex gap-2 flex-wrap justify-center">
+					<button class="btn btn-success" onclick={confirmar}>
+						<Check class="h-5 w-5" />
+						Confirmar
+					</button>
+					<button class="btn btn-outline" onclick={recapturar}>
+						<Camera class="h-5 w-5" />
+						Recapturar
+					</button>
+					<button class="btn btn-error" onclick={cancelar}>
+						<X class="h-5 w-5" />
+						Cancelar
+					</button>
+				</div>
+			{/if}
 		</div>
 	{:else}
 		<!-- Webcam ativa -->
-		<div class="flex flex-col items-center gap-4">
-			<div class="relative">
+		<div class="flex flex-col items-center gap-4 w-full">
+			{#if autoCapture}
+				<div class="text-sm text-base-content/70 mb-2 text-center">
+					Capturando foto automaticamente...
+				</div>
+			{/if}
+			<div class="relative w-full flex justify-center">
 				<video
 					bind:this={videoElement}
 					autoplay
 					playsinline
-					class="rounded-lg border-2 border-primary max-w-full max-h-96"
+					class="border-primary max-h-[60vh] max-w-full rounded-lg border-2 object-contain"
 				></video>
 				<canvas bind:this={canvasElement} class="hidden"></canvas>
 			</div>
 			{#if erro}
-				<div class="alert alert-error">
+				<div class="alert alert-error max-w-md">
 					<span>{erro}</span>
 				</div>
 			{/if}
-			<div class="flex gap-2">
-				<button class="btn btn-primary" onclick={capturar} disabled={capturando}>
-					{#if capturando}
-						<span class="loading loading-spinner loading-sm"></span>
-					{:else}
-						<Camera class="h-5 w-5" />
-					{/if}
-					Capturar Foto
-				</button>
-				<button class="btn btn-outline" onclick={cancelar}>
-					<X class="h-5 w-5" />
-					Cancelar
-				</button>
-			</div>
+			{#if !autoCapture}
+				<!-- Botões apenas se não for automático -->
+				<div class="flex gap-2 flex-wrap justify-center">
+					<button class="btn btn-primary" onclick={capturar} disabled={capturando}>
+						{#if capturando}
+							<span class="loading loading-spinner loading-sm"></span>
+						{:else}
+							<Camera class="h-5 w-5" />
+						{/if}
+						Capturar Foto
+					</button>
+					<button class="btn btn-outline" onclick={cancelar}>
+						<X class="h-5 w-5" />
+						Cancelar
+					</button>
+				</div>
+			{/if}
 		</div>
 	{/if}
 </div>
-
diff --git a/apps/web/src/lib/components/ponto/WidgetGestaoPontos.svelte b/apps/web/src/lib/components/ponto/WidgetGestaoPontos.svelte
index 183d11a..ce48be3 100644
--- a/apps/web/src/lib/components/ponto/WidgetGestaoPontos.svelte
+++ b/apps/web/src/lib/components/ponto/WidgetGestaoPontos.svelte
@@ -1,68 +1,68 @@
 <script lang="ts">
-	import { useQuery } from 'convex-svelte';
-	import { api } from '@sgse-app/backend/convex/_generated/api';
-	import { Clock, ArrowRight, CheckCircle2, XCircle } from 'lucide-svelte';
-	import { goto } from '$app/navigation';
+	import { Clock } from 'lucide-svelte';
 	import { resolve } from '$app/paths';
-
-	// Estatísticas do dia atual
-	const hoje = new Date().toISOString().split('T')[0]!;
-	const estatisticasQuery = useQuery(api.pontos.obterEstatisticas, {
-		dataInicio: hoje,
-		dataFim: hoje,
-	});
-
-	const estatisticas = $derived(estatisticasQuery?.data);
-
-	function abrirDashboard() {
-		goto(resolve('/(dashboard)/recursos-humanos/registro-pontos'));
-	}
 </script>
 
-<div class="card bg-gradient-to-br from-blue-500 to-cyan-600 text-white shadow-xl hover:shadow-2xl transition-all duration-300">
+<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300">
 	<div class="card-body">
-		<div class="flex items-center justify-between mb-4">
-			<div class="flex items-center gap-3">
-				<div class="p-3 bg-white/20 rounded-xl">
-					<Clock class="h-6 w-6" strokeWidth={2} />
-				</div>
-				<div>
-					<h3 class="card-title text-white">Gestão de Pontos</h3>
-					<p class="text-white/80 text-sm">Registros de ponto do dia</p>
+		<!-- Cabeçalho da Categoria -->
+		<div class="flex items-start gap-6 mb-6">
+			<div class="p-4 bg-blue-500/20 rounded-2xl">
+				<div class="text-blue-600">
+					<Clock class="h-12 w-12" strokeWidth={2} />
 				</div>
 			</div>
+			<div class="flex-1">
+				<h2 class="card-title text-2xl mb-2 text-blue-600">
+					Gestão de Pontos
+				</h2>
+				<p class="text-base-content/70">Registros de ponto do dia</p>
+			</div>
 		</div>
 
-		{#if estatisticas}
-			<div class="grid grid-cols-2 gap-4 mb-4">
-				<div class="bg-white/10 rounded-lg p-3">
-					<div class="flex items-center gap-2 mb-1">
-						<CheckCircle2 class="h-4 w-4" />
-						<span class="text-sm text-white/80">Dentro do Prazo</span>
+		<!-- Grid de Opções -->
+		<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+			<a
+				href={resolve('/(dashboard)/recursos-humanos/registro-pontos')}
+				class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-linear-to-br from-blue-500/10 to-blue-600/20 p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
+			>
+				<div class="flex flex-col h-full">
+					<div class="flex items-start justify-between mb-4">
+						<div
+							class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300"
+						>
+							<div
+								class="text-blue-600 group-hover:text-white"
+							>
+								<Clock class="h-5 w-5" strokeWidth={2} />
+							</div>
+						</div>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M9 5l7 7-7 7"
+							/>
+						</svg>
 					</div>
-					<div class="text-2xl font-bold">{estatisticas.dentroDoPrazo}</div>
+					<h3
+						class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300"
+					>
+						Gestão de Pontos
+					</h3>
+					<p class="text-sm text-base-content/70 flex-1">
+						Visualizar e gerenciar registros de ponto
+					</p>
 				</div>
-
-				<div class="bg-white/10 rounded-lg p-3">
-					<div class="flex items-center gap-2 mb-1">
-						<XCircle class="h-4 w-4" />
-						<span class="text-sm text-white/80">Fora do Prazo</span>
-					</div>
-					<div class="text-2xl font-bold">{estatisticas.foraDoPrazo}</div>
-				</div>
-			</div>
-
-			<div class="text-sm text-white/80 mb-4">
-				Total: {estatisticas.totalRegistros} registros de {estatisticas.totalFuncionarios} funcionários
-			</div>
-		{:else}
-			<div class="text-white/80 text-sm mb-4">Carregando estatísticas...</div>
-		{/if}
-
-		<button class="btn btn-white btn-sm w-full" onclick={abrirDashboard}>
-			Ver Dashboard Completo
-			<ArrowRight class="h-4 w-4" />
-		</button>
+			</a>
+		</div>
 	</div>
 </div>
 
diff --git a/apps/web/src/lib/utils/deviceInfo.ts b/apps/web/src/lib/utils/deviceInfo.ts
index 5d939fc..c91d645 100644
--- a/apps/web/src/lib/utils/deviceInfo.ts
+++ b/apps/web/src/lib/utils/deviceInfo.ts
@@ -248,7 +248,7 @@ async function obterLocalizacao(): Promise<{
 	return new Promise((resolve) => {
 		const timeout = setTimeout(() => {
 			resolve({});
-		}, 10000); // Timeout de 10 segundos
+		}, 5000); // Timeout de 5 segundos (reduzido para não bloquear)
 
 		navigator.geolocation.getCurrentPosition(
 			async (position) => {
@@ -306,9 +306,9 @@ async function obterLocalizacao(): Promise<{
 				resolve({});
 			},
 			{
-				enableHighAccuracy: true,
-				timeout: 10000,
-				maximumAge: 0,
+				enableHighAccuracy: false, // false para ser mais rápido
+				timeout: 5000, // Timeout reduzido para 5 segundos
+				maximumAge: 60000, // Aceitar localização de até 1 minuto atrás
 			}
 		);
 	});
diff --git a/apps/web/src/routes/(dashboard)/gestao-pessoas/+page.svelte b/apps/web/src/routes/(dashboard)/gestao-pessoas/+page.svelte
index ce0a86b..f36c385 100644
--- a/apps/web/src/routes/(dashboard)/gestao-pessoas/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/gestao-pessoas/+page.svelte
@@ -117,7 +117,7 @@
   </div>
 
   <!-- Widget Gestão de Pontos -->
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
+  <div class="mt-8">
     <WidgetGestaoPontos />
   </div>
 
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 d88081a..6f97ff6 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
@@ -2,7 +2,7 @@
 	import { onMount } from 'svelte';
 	import { useQuery, useConvexClient } from 'convex-svelte';
 	import { api } from '@sgse-app/backend/convex/_generated/api';
-	import { Clock, Filter, Download, Printer, BarChart3, Users, CheckCircle2, XCircle } from 'lucide-svelte';
+	import { Clock, Filter, Download, Printer, BarChart3, Users, CheckCircle2, XCircle, TrendingUp, TrendingDown } from 'lucide-svelte';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import { formatarHoraPonto, getTipoRegistroLabel } from '$lib/utils/ponto';
 	import jsPDF from 'jspdf';
@@ -17,18 +17,22 @@
 	let funcionarioIdFiltro = $state<Id<'funcionarios'> | ''>('');
 	let carregando = $state(false);
 
-	// Queries
-	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
-	const registrosQuery = useQuery(api.pontos.listarRegistrosPeriodo, {
+	// Parâmetros reativos para queries
+	const registrosParams = $derived({
 		funcionarioId: funcionarioIdFiltro || undefined,
 		dataInicio,
 		dataFim,
 	});
-	const estatisticasQuery = useQuery(api.pontos.obterEstatisticas, {
+	const estatisticasParams = $derived({
 		dataInicio,
 		dataFim,
 	});
 
+	// Queries
+	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
+	const registrosQuery = useQuery(api.pontos.listarRegistrosPeriodo, registrosParams);
+	const estatisticasQuery = useQuery(api.pontos.obterEstatisticas, estatisticasParams);
+
 	const funcionarios = $derived(funcionariosQuery?.data || []);
 	const registros = $derived(registrosQuery?.data || []);
 	const estatisticas = $derived(estatisticasQuery?.data);
@@ -39,6 +43,7 @@
 			string,
 			{
 				funcionario: { nome: string; matricula?: string; descricaoCargo?: string } | null;
+				funcionarioId: Id<'funcionarios'>;
 				registros: typeof registros;
 			}
 		> = {};
@@ -48,6 +53,7 @@
 			if (!agrupados[key]) {
 				agrupados[key] = {
 					funcionario: registro.funcionario,
+					funcionarioId: registro.funcionarioId,
 					registros: [],
 				};
 			}
@@ -57,6 +63,19 @@
 		return Object.values(agrupados);
 	});
 
+	// Query para banco de horas de cada funcionário
+	const funcionariosComBancoHoras = $derived.by(() => {
+		return registrosAgrupados.map((grupo) => grupo.funcionarioId);
+	});
+
+	// Função para formatar saldo de horas
+	function formatarSaldoHoras(minutos: number): string {
+		const horas = Math.floor(Math.abs(minutos) / 60);
+		const mins = Math.abs(minutos) % 60;
+		const sinal = minutos >= 0 ? '+' : '-';
+		return `${sinal}${horas}h ${mins}min`;
+	}
+
 	async function imprimirFichaPonto(funcionarioId: Id<'funcionarios'>) {
 		const registrosFuncionario = registros.filter((r) => r.funcionarioId === funcionarioId);
 		if (registrosFuncionario.length === 0) {
@@ -297,7 +316,7 @@
 						<div class="card bg-base-200">
 							<div class="card-body">
 								<div class="flex items-center justify-between mb-4">
-									<div>
+									<div class="flex-1">
 										<h3 class="font-bold text-lg">
 											{grupo.funcionario?.nome || 'Funcionário não encontrado'}
 										</h3>
@@ -307,9 +326,39 @@
 											</p>
 										{/if}
 									</div>
+									
+									<!-- Banco de Horas -->
+									{#key grupo.funcionarioId}
+										{@const bancoHorasQuery = useQuery(
+											api.pontos.obterBancoHorasFuncionario,
+											{ funcionarioId: grupo.funcionarioId }
+										)}
+										{@const bancoHoras = bancoHorasQuery?.data}
+										{@const saldoAcumulado = bancoHoras?.saldoAcumuladoMinutos ?? 0}
+										{@const saldoPositivo = saldoAcumulado >= 0}
+										
+										{#if bancoHoras}
+											<div class="mx-4 rounded-lg border-2 p-3 {saldoPositivo ? 'border-success bg-success/10' : 'border-error bg-error/10'}">
+												<div class="flex items-center gap-2">
+													{#if saldoPositivo}
+														<TrendingUp class="h-5 w-5 text-success" />
+													{:else}
+														<TrendingDown class="h-5 w-5 text-error" />
+													{/if}
+													<div>
+														<p class="text-xs font-semibold opacity-70">Banco de Horas</p>
+														<p class="text-lg font-bold">
+															{formatarSaldoHoras(saldoAcumulado)}
+														</p>
+													</div>
+												</div>
+											</div>
+										{/if}
+									{/key}
+									
 									<button
 										class="btn btn-sm btn-primary"
-										onclick={() => imprimirFichaPonto(grupo.registros[0]!.funcionarioId)}
+										onclick={() => imprimirFichaPonto(grupo.funcionarioId)}
 									>
 										<Printer class="h-4 w-4" />
 										Imprimir Ficha
diff --git a/apps/web/src/routes/(dashboard)/secretaria-executiva/+page.svelte b/apps/web/src/routes/(dashboard)/secretaria-executiva/+page.svelte
index 4b8a0ad..5edcb61 100644
--- a/apps/web/src/routes/(dashboard)/secretaria-executiva/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/secretaria-executiva/+page.svelte
@@ -115,7 +115,7 @@
   </div>
 
   <!-- Widget Gestão de Pontos -->
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
+  <div class="mt-8">
     <WidgetGestaoPontos />
   </div>
 
diff --git a/packages/backend/convex/pontos.ts b/packages/backend/convex/pontos.ts
index 8165a5d..78e0afe 100644
--- a/packages/backend/convex/pontos.ts
+++ b/packages/backend/convex/pontos.ts
@@ -1,5 +1,5 @@
 import { v } from 'convex/values';
-import { mutation, query } from './_generated/server';
+import { internalMutation, mutation, query } from './_generated/server';
 import type { MutationCtx, QueryCtx } from './_generated/server';
 import { getCurrentUserFunction } from './auth';
 import type { Id } from './_generated/dataModel';
@@ -52,6 +52,7 @@ interface InformacoesDispositivo {
 
 /**
  * Calcula se o registro está dentro do prazo baseado na configuração
+ * Se toleranciaMinutos for 0, desconsidera atrasos (sempre retorna true)
  */
 function calcularStatusPonto(
 	hora: number,
@@ -59,6 +60,11 @@ function calcularStatusPonto(
 	horarioConfigurado: string,
 	toleranciaMinutos: number
 ): boolean {
+	// Se tolerância for 0, desconsiderar atrasos (qualquer registro é válido)
+	if (toleranciaMinutos === 0) {
+		return true;
+	}
+
 	const [horaConfig, minutoConfig] = horarioConfigurado.split(':').map(Number);
 	const totalMinutosRegistro = hora * 60 + minuto;
 	const totalMinutosConfigurado = horaConfig * 60 + minutoConfig;
@@ -141,6 +147,7 @@ export const registrarPonto = mutation({
 		),
 		timestamp: v.number(),
 		sincronizadoComServidor: v.boolean(),
+		justificativa: v.optional(v.string()),
 	},
 	handler: async (ctx, args) => {
 		const usuario = await getCurrentUserFunction(ctx);
@@ -225,6 +232,7 @@ export const registrarPonto = mutation({
 			sincronizadoComServidor: args.sincronizadoComServidor,
 			toleranciaMinutos: config.toleranciaMinutos,
 			dentroDoPrazo,
+			justificativa: args.justificativa,
 			ipAddress: args.informacoesDispositivo?.ipAddress,
 			ipPublico: args.informacoesDispositivo?.ipPublico,
 			ipLocal: args.informacoesDispositivo?.ipLocal,
@@ -257,6 +265,9 @@ export const registrarPonto = mutation({
 			criadoEm: Date.now(),
 		});
 
+		// Atualizar banco de horas após registrar
+		await atualizarBancoHoras(ctx, usuario.funcionarioId, data, config);
+
 		return { registroId, tipo, dentroDoPrazo };
 	},
 });
@@ -421,8 +432,15 @@ export const obterRegistro = query({
 			simbolo = await ctx.db.get(funcionario.simboloId);
 		}
 
+		// Obter URL da imagem se existir
+		let imagemUrl = null;
+		if (registro.imagemId) {
+			imagemUrl = await ctx.storage.getUrl(registro.imagemId);
+		}
+
 		return {
 			...registro,
+			imagemUrl,
 			funcionario: funcionario
 				? {
 						nome: funcionario.nome,
@@ -440,3 +458,228 @@ export const obterRegistro = query({
 	},
 });
 
+/**
+ * Calcula carga horária diária esperada em minutos
+ */
+function calcularCargaHorariaDiaria(config: {
+	horarioEntrada: string;
+	horarioSaidaAlmoco: string;
+	horarioRetornoAlmoco: string;
+	horarioSaida: string;
+}): number {
+	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 minutosEntrada = horaEntrada * 60 + minutoEntrada;
+	const minutosSaidaAlmoco = horaSaidaAlmoco * 60 + minutoSaidaAlmoco;
+	const minutosRetornoAlmoco = horaRetornoAlmoco * 60 + minutoRetornoAlmoco;
+	const minutosSaida = horaSaida * 60 + minutoSaida;
+
+	// Calcular horas trabalhadas: (saída almoço - entrada) + (saída - retorno almoço)
+	const horasManha = minutosSaidaAlmoco - minutosEntrada;
+	const horasTarde = minutosSaida - minutosRetornoAlmoco;
+
+	return horasManha + horasTarde;
+}
+
+/**
+ * Calcula horas trabalhadas do dia baseado nos registros
+ */
+function calcularHorasTrabalhadas(registros: Array<{
+	tipo: string;
+	hora: number;
+	minuto: number;
+}>): number {
+	// Ordenar registros por timestamp
+	const registrosOrdenados = [...registros].sort((a, b) => {
+		const minutosA = a.hora * 60 + a.minuto;
+		const minutosB = b.hora * 60 + b.minuto;
+		return minutosA - minutosB;
+	});
+
+	let horasTrabalhadas = 0;
+
+	// Procurar entrada e saída
+	const entrada = registrosOrdenados.find((r) => r.tipo === 'entrada');
+	const saida = registrosOrdenados.find((r) => r.tipo === 'saida');
+
+	if (entrada && saida) {
+		const minutosEntrada = entrada.hora * 60 + entrada.minuto;
+		const minutosSaida = saida.hora * 60 + saida.minuto;
+
+		// Procurar saída e retorno do almoço
+		const saidaAlmoco = registrosOrdenados.find((r) => r.tipo === 'saida_almoco');
+		const retornoAlmoco = registrosOrdenados.find((r) => r.tipo === 'retorno_almoco');
+
+		if (saidaAlmoco && retornoAlmoco) {
+			// Tem intervalo de almoço: (saída almoço - entrada) + (saída - retorno almoço)
+			const minutosSaidaAlmoco = saidaAlmoco.hora * 60 + saidaAlmoco.minuto;
+			const minutosRetornoAlmoco = retornoAlmoco.hora * 60 + retornoAlmoco.minuto;
+
+			const horasManha = minutosSaidaAlmoco - minutosEntrada;
+			const horasTarde = minutosSaida - minutosRetornoAlmoco;
+			horasTrabalhadas = horasManha + horasTarde;
+		} else {
+			// Sem intervalo de almoço registrado: saída - entrada
+			horasTrabalhadas = minutosSaida - minutosEntrada;
+		}
+	}
+
+	return horasTrabalhadas;
+}
+
+/**
+ * Atualiza ou cria registro de banco de horas para o dia
+ */
+async function atualizarBancoHoras(
+	ctx: MutationCtx,
+	funcionarioId: Id<'funcionarios'>,
+	data: string,
+	config: {
+		horarioEntrada: string;
+		horarioSaidaAlmoco: string;
+		horarioRetornoAlmoco: string;
+		horarioSaida: string;
+	}
+): Promise<void> {
+	// Buscar todos os registros do dia
+	const registrosDoDia = await ctx.db
+		.query('registrosPonto')
+		.withIndex('by_funcionario_data', (q) => q.eq('funcionarioId', funcionarioId).eq('data', data))
+		.collect();
+
+	// Calcular carga horária esperada
+	const cargaHorariaDiaria = calcularCargaHorariaDiaria(config);
+
+	// Calcular horas trabalhadas
+	const horasTrabalhadas = calcularHorasTrabalhadas(registrosDoDia);
+
+	// Calcular saldo (positivo = horas extras, negativo = déficit)
+	const saldoMinutos = horasTrabalhadas - cargaHorariaDiaria;
+
+	// Buscar banco de horas existente
+	const bancoHorasExistente = await ctx.db
+		.query('bancoHoras')
+		.withIndex('by_funcionario_data', (q) => q.eq('funcionarioId', funcionarioId).eq('data', data))
+		.first();
+
+	const registrosPontoIds = registrosDoDia.map((r) => r._id);
+
+	if (bancoHorasExistente) {
+		// Atualizar existente
+		await ctx.db.patch(bancoHorasExistente._id, {
+			cargaHorariaDiaria,
+			horasTrabalhadas,
+			saldoMinutos,
+			registrosPontoIds,
+			calculadoEm: Date.now(),
+		});
+	} else {
+		// Criar novo
+		await ctx.db.insert('bancoHoras', {
+			funcionarioId,
+			data,
+			cargaHorariaDiaria,
+			horasTrabalhadas,
+			saldoMinutos,
+			registrosPontoIds,
+			calculadoEm: Date.now(),
+		});
+	}
+}
+
+/**
+ * Obtém histórico e saldo do dia
+ */
+export const obterHistoricoESaldoDia = query({
+	args: {
+		funcionarioId: v.id('funcionarios'),
+		data: v.string(), // YYYY-MM-DD
+	},
+	handler: async (ctx, args) => {
+		const usuario = await getCurrentUserFunction(ctx);
+		if (!usuario || !usuario.funcionarioId) {
+			throw new Error('Usuário não autenticado');
+		}
+
+		// Verificar se é o próprio funcionário ou tem permissão
+		if (usuario.funcionarioId !== args.funcionarioId) {
+			// TODO: Verificar permissão de RH
+		}
+
+		// Buscar registros do dia
+		const registros = await ctx.db
+			.query('registrosPonto')
+			.withIndex('by_funcionario_data', (q) =>
+				q.eq('funcionarioId', args.funcionarioId).eq('data', args.data)
+			)
+			.order('asc')
+			.collect();
+
+		// Buscar configuração de ponto
+		const config = await ctx.db
+			.query('configuracaoPonto')
+			.withIndex('by_ativo', (q) => q.eq('ativo', true))
+			.first();
+
+		if (!config) {
+			return {
+				registros: [],
+				cargaHorariaDiaria: 0,
+				horasTrabalhadas: 0,
+				saldoMinutos: 0,
+			};
+		}
+
+		// Calcular valores
+		const cargaHorariaDiaria = calcularCargaHorariaDiaria(config);
+		const horasTrabalhadas = calcularHorasTrabalhadas(registros);
+		const saldoMinutos = horasTrabalhadas - cargaHorariaDiaria;
+
+		return {
+			registros,
+			cargaHorariaDiaria,
+			horasTrabalhadas,
+			saldoMinutos,
+		};
+	},
+});
+
+/**
+ * Obtém banco de horas acumulado do funcionário
+ */
+export const obterBancoHorasFuncionario = query({
+	args: {
+		funcionarioId: v.id('funcionarios'),
+	},
+	handler: async (ctx, args) => {
+		const usuario = await getCurrentUserFunction(ctx);
+		if (!usuario) {
+			throw new Error('Usuário não autenticado');
+		}
+
+		// Verificar se é o próprio funcionário ou tem permissão
+		if (usuario.funcionarioId !== args.funcionarioId) {
+			// TODO: Verificar permissão de RH
+		}
+
+		// Buscar todos os registros de banco de horas do funcionário
+		const bancosHoras = await ctx.db
+			.query('bancoHoras')
+			.withIndex('by_funcionario', (q) => q.eq('funcionarioId', args.funcionarioId))
+			.order('desc')
+			.collect();
+
+		// Calcular saldo acumulado
+		const saldoAcumuladoMinutos = bancosHoras.reduce((acc, bh) => acc + bh.saldoMinutos, 0);
+
+		return {
+			bancosHoras,
+			saldoAcumuladoMinutos,
+			totalDias: bancosHoras.length,
+		};
+	},
+});
+
diff --git a/packages/backend/convex/schema.ts b/packages/backend/convex/schema.ts
index 472c3d7..4cc0a51 100644
--- a/packages/backend/convex/schema.ts
+++ b/packages/backend/convex/schema.ts
@@ -1387,6 +1387,9 @@ export default defineSchema({
     connectionType: v.optional(v.string()),
     memoryInfo: v.optional(v.string()),
     
+    // Justificativa opcional para o registro
+    justificativa: v.optional(v.string()),
+    
     criadoEm: v.number(),
   })
     .index("by_funcionario_data", ["funcionarioId", "data"])
@@ -1416,5 +1419,19 @@ export default defineSchema({
     atualizadoPor: v.id("usuarios"),
     atualizadoEm: v.number(),
   })
-    .index("by_ativo", ["usarServidorExterno"])
+    .index("by_ativo", ["usarServidorExterno"]),
+
+  // Banco de Horas - Saldo diário de horas trabalhadas
+  bancoHoras: defineTable({
+    funcionarioId: v.id("funcionarios"),
+    data: v.string(), // YYYY-MM-DD
+    cargaHorariaDiaria: v.number(), // Horas esperadas do dia (em minutos)
+    horasTrabalhadas: v.number(), // Horas realmente trabalhadas (em minutos)
+    saldoMinutos: v.number(), // Saldo do dia (positivo = horas extras, negativo = déficit)
+    registrosPontoIds: v.array(v.id("registrosPonto")), // IDs dos registros do dia
+    calculadoEm: v.number(),
+  })
+    .index("by_funcionario_data", ["funcionarioId", "data"])
+    .index("by_funcionario", ["funcionarioId"])
+    .index("by_data", ["data"]),
 });