From f465bd973e5a824bf288a934fb1ea7d2e09a9a77 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Wed, 19 Nov 2025 05:14:28 -0300
Subject: [PATCH] refactor: improve layout and functionality of
 ComprovantePonto modal

- Enhanced the modal layout for better user experience, including fixed header and footer.
- Implemented a scrollable content area for improved visibility of registration details.
- Updated button styles for better interaction feedback.
- Ensured consistent error handling and loading states for data retrieval.
---
 .../components/ponto/ComprovantePonto.svelte  | 152 +++++++++---------
 1 file changed, 78 insertions(+), 74 deletions(-)

diff --git a/apps/web/src/lib/components/ponto/ComprovantePonto.svelte b/apps/web/src/lib/components/ponto/ComprovantePonto.svelte
index 10c9f1e..33c460d 100644
--- a/apps/web/src/lib/components/ponto/ComprovantePonto.svelte
+++ b/apps/web/src/lib/components/ponto/ComprovantePonto.svelte
@@ -253,93 +253,97 @@
 	}
 </script>
 
-<div class="modal modal-open">
-	<div class="modal-box max-w-2xl">
-		<div class="flex items-center justify-between mb-4">
+<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-[90vh] overflow-hidden flex flex-col" style="margin: auto;">
+		<!-- 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>
-			<button class="btn btn-sm btn-circle btn-ghost" onclick={onClose}>
+			<button class="btn btn-sm btn-circle btn-ghost hover:bg-base-300" onclick={onClose}>
 				<X class="h-5 w-5" />
 			</button>
 		</div>
 
-		{#if registroQuery === undefined}
-			<div class="flex justify-center items-center py-8">
-				<span class="loading loading-spinner loading-lg"></span>
-			</div>
-		{:else if !registroQuery?.data}
-			<div class="alert alert-error">
-				<span>Erro ao carregar registro</span>
-			</div>
-		{:else}
-			{@const registro = registroQuery.data}
-			<div class="space-y-4">
-				<!-- Informações do Funcionário -->
-				<div class="card bg-base-200">
-					<div class="card-body">
-						<h4 class="font-bold">Dados do Funcionário</h4>
-						{#if registro.funcionario}
-							<p><strong>Matrícula:</strong> {registro.funcionario.matricula || 'N/A'}</p>
-							<p><strong>Nome:</strong> {registro.funcionario.nome}</p>
-							{#if registro.funcionario.descricaoCargo}
-								<p><strong>Cargo/Função:</strong> {registro.funcionario.descricaoCargo}</p>
-							{/if}
-						{/if}
-					</div>
+		<!-- Conteúdo com rolagem -->
+		<div class="flex-1 overflow-y-auto pr-2">
+			{#if registroQuery === undefined}
+				<div class="flex justify-center items-center py-8">
+					<span class="loading loading-spinner loading-lg"></span>
 				</div>
-
-				<!-- Informações do Registro -->
-				<div class="card bg-base-200">
-					<div class="card-body">
-						<h4 class="font-bold">Dados do Registro</h4>
-						<p><strong>Tipo:</strong> {getTipoRegistroLabel(registro.tipo)}</p>
-						<p>
-							<strong>Data e Hora:</strong>
-							{formatarDataHoraCompleta(registro.data, registro.hora, registro.minuto, registro.segundo)}
-						</p>
-						<p>
-							<strong>Status:</strong>
-							<span class="badge {registro.dentroDoPrazo ? 'badge-success' : 'badge-error'}">
-								{registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'}
-							</span>
-						</p>
-						<p><strong>Tolerância:</strong> {registro.toleranciaMinutos} minutos</p>
-					</div>
+			{:else if !registroQuery?.data}
+				<div class="alert alert-error">
+					<span>Erro ao carregar registro</span>
 				</div>
-
-				<!-- Imagem Capturada -->
-				{#if registro.imagemUrl}
+			{:else}
+				{@const registro = registroQuery.data}
+				<div class="space-y-4">
+					<!-- Informações do Funcionário -->
 					<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>
+							<h4 class="font-bold">Dados do Funcionário</h4>
+							{#if registro.funcionario}
+								<p><strong>Matrícula:</strong> {registro.funcionario.matricula || 'N/A'}</p>
+								<p><strong>Nome:</strong> {registro.funcionario.nome}</p>
+								{#if registro.funcionario.descricaoCargo}
+									<p><strong>Cargo/Função:</strong> {registro.funcionario.descricaoCargo}</p>
+								{/if}
+							{/if}
 						</div>
 					</div>
-				{/if}
 
-				<!-- Ações -->
-				<div class="flex justify-end gap-2">
-					<button class="btn btn-primary" onclick={gerarPDF} disabled={gerando}>
-						{#if gerando}
-							<span class="loading loading-spinner loading-sm"></span>
-						{:else}
-							<Printer class="h-5 w-5" />
-						{/if}
-						Imprimir Comprovante
-					</button>
-					<button class="btn btn-outline" onclick={onClose}>Fechar</button>
+					<!-- Informações do Registro -->
+					<div class="card bg-base-200">
+						<div class="card-body">
+							<h4 class="font-bold">Dados do Registro</h4>
+							<p><strong>Tipo:</strong> {getTipoRegistroLabel(registro.tipo)}</p>
+							<p>
+								<strong>Data e Hora:</strong>
+								{formatarDataHoraCompleta(registro.data, registro.hora, registro.minuto, registro.segundo)}
+							</p>
+							<p>
+								<strong>Status:</strong>
+								<span class="badge {registro.dentroDoPrazo ? 'badge-success' : 'badge-error'}">
+									{registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'}
+								</span>
+							</p>
+							<p><strong>Tolerância:</strong> {registro.toleranciaMinutos} minutos</p>
+						</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}
 				</div>
-			</div>
-		{/if}
+			{/if}
+		</div>
+
+		<!-- Footer fixo com botões -->
+		<div class="flex justify-end gap-2 pt-4 mt-4 border-t border-base-300 flex-shrink-0">
+			<button class="btn btn-primary gap-2" onclick={gerarPDF} disabled={gerando}>
+				{#if gerando}
+					<span class="loading loading-spinner loading-sm"></span>
+				{:else}
+					<Printer class="h-5 w-5" />
+				{/if}
+				Imprimir Comprovante
+			</button>
+			<button class="btn btn-outline" onclick={onClose}>Fechar</button>
+		</div>
 	</div>
 	<div class="modal-backdrop" onclick={onClose}></div>
 </div>