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

feat: enhance RegistroPonto and WebcamCapture components for improved data handling and user experience

Browse Source 
- 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.
This commit is contained in:
deyvisonwanderley
2025-11-22 23:57:05 -03:00
parent 90e81e4667
commit 467e04b605
5 changed files with 269 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>