Feat controle ponto #29
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user