SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: improve layout and functionality of ComprovantePonto modal

Browse Source 
- 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.
This commit is contained in:
deyvisonwanderley
2025-11-19 05:14:28 -03:00
parent b660d123d4
commit f465bd973e
1 changed files with 78 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
apps/web/src/lib/components/ponto/ComprovantePonto.svelte
View File

@@ -253,93 +253,97 @@
} }
</script> </script>
<div class="modal modal-open"> <div class="modal modal-open" style="display: flex; align-items: center; justify-content: center;">
<div class="modal-box max-w-2xl"> <div class="modal-box max-w-2xl w-[95%] max-h-[90vh] overflow-hidden flex flex-col" style="margin: auto;">
<div class="flex items-center justify-between mb-4"> <!-- 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 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" /> <X class="h-5 w-5" />
</button> </button>
</div> </div>
{#if registroQuery === undefined} <!-- Conteúdo com rolagem -->
<div class="flex justify-center items-center py-8"> <div class="flex-1 overflow-y-auto pr-2">
<span class="loading loading-spinner loading-lg"></span> {#if registroQuery === undefined}
</div> <div class="flex justify-center items-center py-8">
{:else if !registroQuery?.data} <span class="loading loading-spinner loading-lg"></span>
<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>
</div> </div>
{:else if !registroQuery?.data}
<!-- Informações do Registro --> <div class="alert alert-error">
<div class="card bg-base-200"> <span>Erro ao carregar registro</span>
<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> </div>
{:else}
<!-- Imagem Capturada --> {@const registro = registroQuery.data}
{#if registro.imagemUrl} <div class="space-y-4">
<!-- Informações do Funcionário -->
<div class="card bg-base-200"> <div class="card bg-base-200">
<div class="card-body"> <div class="card-body">
<h4 class="font-bold mb-2">Foto Capturada</h4> <h4 class="font-bold">Dados do Funcionário</h4>
<div class="flex justify-center"> {#if registro.funcionario}
<img <p><strong>Matrícula:</strong> {registro.funcionario.matricula || 'N/A'}</p>
src={registro.imagemUrl} <p><strong>Nome:</strong> {registro.funcionario.nome}</p>
alt="Foto do registro de ponto" {#if registro.funcionario.descricaoCargo}
class="max-w-full max-h-96 rounded-lg border-2 border-primary object-contain" <p><strong>Cargo/Função:</strong> {registro.funcionario.descricaoCargo}</p>
onerror={(e) => { {/if}
console.error('Erro ao carregar imagem:', e); {/if}
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
</div>
</div> </div>
</div> </div>
{/if}
<!-- Ações --> <!-- Informações do Registro -->
<div class="flex justify-end gap-2"> <div class="card bg-base-200">
<button class="btn btn-primary" onclick={gerarPDF} disabled={gerando}> <div class="card-body">
{#if gerando} <h4 class="font-bold">Dados do Registro</h4>
<span class="loading loading-spinner loading-sm"></span> <p><strong>Tipo:</strong> {getTipoRegistroLabel(registro.tipo)}</p>
{:else} <p>
<Printer class="h-5 w-5" /> <strong>Data e Hora:</strong>
{/if} {formatarDataHoraCompleta(registro.data, registro.hora, registro.minuto, registro.segundo)}
Imprimir Comprovante </p>
</button> <p>
<button class="btn btn-outline" onclick={onClose}>Fechar</button> <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>
</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>
<div class="modal-backdrop" onclick={onClose}></div> <div class="modal-backdrop" onclick={onClose}></div>
</div> </div>