From 467e04b605286b743de6f6ea8fbef9a4db1d05ab Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Sat, 22 Nov 2025 23:57:05 -0300 Subject: [PATCH] feat: enhance RegistroPonto and WebcamCapture components for improved data handling and user experience - 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. --- .../components/ponto/ComprovantePonto.svelte | 76 ++++++++++++++- .../lib/components/ponto/RegistroPonto.svelte | 39 +++++++- .../lib/components/ponto/WebcamCapture.svelte | 92 ++++++++++++------- .../registro-pontos/+page.svelte | 32 ++++++- packages/backend/convex/pontos.ts | 88 +++++++++++++++--- 5 files changed, 269 insertions(+), 58 deletions(-) diff --git a/apps/web/src/lib/components/ponto/ComprovantePonto.svelte b/apps/web/src/lib/components/ponto/ComprovantePonto.svelte index aabb54f..4656d4e 100644 --- a/apps/web/src/lib/components/ponto/ComprovantePonto.svelte +++ b/apps/web/src/lib/components/ponto/ComprovantePonto.svelte @@ -237,18 +237,36 @@ } -
-
+
e.key === 'Escape' && onClose()} + role="dialog" + aria-modal="true" + aria-labelledby="modal-comprovante-title" +> + +
+ + +
e.stopPropagation()} + >
-

Comprovante de Registro de Ponto

+

Comprovante de Registro de Ponto

-
+
{#if registroQuery === undefined}
@@ -339,6 +357,54 @@
-
+ + diff --git a/apps/web/src/lib/components/ponto/RegistroPonto.svelte b/apps/web/src/lib/components/ponto/RegistroPonto.svelte index d06a0fc..b6c3432 100644 --- a/apps/web/src/lib/components/ponto/RegistroPonto.svelte +++ b/apps/web/src/lib/components/ponto/RegistroPonto.svelte @@ -21,17 +21,26 @@ const client = useConvexClient(); + // Chave de refresh para forçar atualização das queries após registro + let refreshKey = $state(0); + // 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]!); + + // Usar refreshKey para forçar atualização após registro + const registrosHojeQuery = useQuery( + api.pontos.listarRegistrosDia, + { data: dataHoje, _refresh: refreshKey } + ); + const historicoSaldoQuery = useQuery( api.pontos.obterHistoricoESaldoDia, - funcionarioId && dataHoje ? { funcionarioId, data: dataHoje } : 'skip' + funcionarioId && dataHoje ? { funcionarioId, data: dataHoje, _refresh: refreshKey } : 'skip' ); // Query para verificar dispensa ativa @@ -284,6 +293,19 @@ justificativa = ''; // Limpar justificativa após registro mostrandoModalConfirmacao = false; + // Forçar atualização das queries para mostrar o novo registro + refreshKey++; + + if (import.meta.env.DEV) { + console.log('[RegistroPonto] Registro bem-sucedido, refreshKey incrementado:', refreshKey); + } + + // Aguardar um pouco para garantir que o backend processou o registro + await new Promise(resolve => setTimeout(resolve, 500)); + + // Forçar mais uma atualização após o delay para garantir sincronização + refreshKey++; + // Mostrar comprovante após 1 segundo setTimeout(() => { mostrandoComprovante = true; @@ -799,7 +821,7 @@ { tipo: 'saida', horario: config.horarioSaida, label: config.nomeSaida || 'Saída 2' } ]; - return horarios.map((h) => { + const resultado = horarios.map((h) => { const registro = registrosHoje.find((r) => r.tipo === h.tipo); return { ...h, @@ -808,6 +830,17 @@ dentroDoPrazo: registro?.dentroDoPrazo ?? null }; }); + + // Log para debug (apenas em desenvolvimento) + if (import.meta.env.DEV) { + console.log('[RegistroPonto] mapaHorarios atualizado:', { + totalRegistrosHoje: registrosHoje.length, + horariosComRegistro: resultado.filter(h => h.registrado).length, + registrosHoje: registrosHoje.map(r => ({ tipo: r.tipo, hora: `${r.hora}:${r.minuto}` })) + }); + } + + return resultado; }); // Dados do histórico e saldo diff --git a/apps/web/src/lib/components/ponto/WebcamCapture.svelte b/apps/web/src/lib/components/ponto/WebcamCapture.svelte index 1bb93a3..8cbef37 100644 --- a/apps/web/src/lib/components/ponto/WebcamCapture.svelte +++ b/apps/web/src/lib/components/ponto/WebcamCapture.svelte @@ -22,18 +22,29 @@ let previewUrl = $state(null); let videoReady = $state(false); + // Flag para evitar múltiplas chamadas de play() simultâneas + let playEmAndamento = $state(false); + // Efeito para garantir que o vídeo seja exibido quando o stream for atribuído $effect(() => { - if (stream && videoElement) { + if (stream && videoElement && !playEmAndamento) { // Sempre atualizar srcObject quando o stream mudar if (videoElement.srcObject !== stream) { videoElement.srcObject = stream; } - // Tentar reproduzir se ainda não estiver pronto + // Tentar reproduzir se ainda não estiver pronto e não houver outra chamada em andamento if (!videoReady && videoElement.readyState < 2) { + // Verificar se já não está reproduzindo + if (!videoElement.paused && videoElement.readyState >= 2) { + videoReady = true; + return; + } + + playEmAndamento = true; videoElement.play() .then(() => { + playEmAndamento = false; // Aguardar um pouco para garantir que o vídeo esteja realmente reproduzindo setTimeout(() => { if (videoElement && videoElement.readyState >= 2 && videoElement.videoWidth > 0) { @@ -42,7 +53,11 @@ }, 300); }) .catch((err) => { - console.warn('Erro ao reproduzir vídeo no effect:', err); + playEmAndamento = false; + // Ignorar AbortError - é esperado quando há uma nova requisição de load + if (err.name !== 'AbortError') { + console.warn('Erro ao reproduzir vídeo no effect:', err); + } }); } else if (videoElement.readyState >= 2 && videoElement.videoWidth > 0) { videoReady = true; @@ -219,35 +234,50 @@ videoElement.addEventListener('playing', onPlaying); videoElement.addEventListener('error', onError); - // Tentar reproduzir - videoElement.play() - .then(() => { - console.log('Vídeo iniciado, readyState:', videoElement?.readyState); - // Se já tiver metadata e dimensões, resolver imediatamente - if (videoElement && videoElement.readyState >= 2 && videoElement.videoWidth > 0) { - setTimeout(() => { - onLoadedMetadata(); - }, 300); - } - }) - .catch((err) => { - console.warn('Erro ao reproduzir vídeo:', err); - // Continuar mesmo assim se já tiver metadata e dimensões - if (videoElement && videoElement.readyState >= 2 && videoElement.videoWidth > 0) { - setTimeout(() => { - onLoadedMetadata(); - }, 300); - } else { - // Aguardar um pouco mais antes de dar erro - setTimeout(() => { - if (videoElement && videoElement.videoWidth > 0) { + // Tentar reproduzir apenas se não estiver já reproduzindo + if (videoElement.paused) { + playEmAndamento = true; + videoElement.play() + .then(() => { + playEmAndamento = false; + console.log('Vídeo iniciado, readyState:', videoElement?.readyState); + // Se já tiver metadata e dimensões, resolver imediatamente + if (videoElement && videoElement.readyState >= 2 && videoElement.videoWidth > 0) { + setTimeout(() => { onLoadedMetadata(); - } else { - onError(); - } - }, 1000); - } - }); + }, 300); + } + }) + .catch((err) => { + playEmAndamento = false; + // Ignorar AbortError - é esperado quando há uma nova requisição de load + if (err.name !== 'AbortError') { + console.warn('Erro ao reproduzir vídeo:', err); + } + // Continuar mesmo assim se já tiver metadata e dimensões + if (videoElement && videoElement.readyState >= 2 && videoElement.videoWidth > 0) { + setTimeout(() => { + onLoadedMetadata(); + }, 300); + } else { + // Aguardar um pouco mais antes de dar erro + setTimeout(() => { + if (videoElement && videoElement.videoWidth > 0) { + onLoadedMetadata(); + } else { + onError(); + } + }, 1000); + } + }); + } else { + // Já está reproduzindo, apenas verificar se está pronto + if (videoElement.readyState >= 2 && videoElement.videoWidth > 0) { + setTimeout(() => { + onLoadedMetadata(); + }, 300); + } + } }); console.log('Vídeo pronto, dimensões:', videoElement.videoWidth, 'x', videoElement.videoHeight); 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 9778a74..a03d425 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 @@ -20,8 +20,13 @@ const client = useConvexClient(); // Estados - let dataInicio = $state(new Date().toISOString().split('T')[0]!); - let dataFim = $state(new Date().toISOString().split('T')[0]!); + // Expandir período padrão para últimos 30 dias para facilitar visualização + const hoje = new Date(); + const trintaDiasAtras = new Date(hoje); + trintaDiasAtras.setDate(hoje.getDate() - 30); + + let dataInicio = $state(trintaDiasAtras.toISOString().split('T')[0]!); + let dataFim = $state(hoje.toISOString().split('T')[0]!); let funcionarioIdFiltro = $state | ''>(''); let statusFiltro = $state<'todos' | 'dentro' | 'fora'>('todos'); let localizacaoFiltro = $state<'todos' | 'dentro' | 'fora'>('todos'); @@ -56,6 +61,21 @@ const estatisticas = $derived(estatisticasQuery?.data); const config = $derived(configQuery?.data); + // Debug: Log dos dados recebidos + $effect(() => { + if (registrosQuery !== undefined) { + console.log('[Frontend] registrosQuery:', { + isLoading: registrosQuery?.isLoading, + error: registrosQuery?.error, + dataLength: registrosQuery?.data?.length ?? 0, + params: registrosParams + }); + } + if (registros && registros.length > 0) { + console.log('[Frontend] Primeiros registros:', registros.slice(0, 3)); + } + }); + // Dados do gráfico baseados nas estatísticas const chartData = $derived.by(() => { @@ -514,8 +534,12 @@ // Função para limpar todos os filtros function limparFiltros() { - dataInicio = new Date().toISOString().split('T')[0]!; - dataFim = new Date().toISOString().split('T')[0]!; + const hoje = new Date(); + const trintaDiasAtras = new Date(hoje); + trintaDiasAtras.setDate(hoje.getDate() - 30); + + dataInicio = trintaDiasAtras.toISOString().split('T')[0]!; + dataFim = hoje.toISOString().split('T')[0]!; funcionarioIdFiltro = ''; statusFiltro = 'todos'; localizacaoFiltro = 'todos'; diff --git a/packages/backend/convex/pontos.ts b/packages/backend/convex/pontos.ts index c05c7e8..9e6f9e7 100644 --- a/packages/backend/convex/pontos.ts +++ b/packages/backend/convex/pontos.ts @@ -791,6 +791,7 @@ export const registrarPonto = mutation({ export const listarRegistrosDia = query({ args: { data: v.optional(v.string()), // YYYY-MM-DD, se não fornecido usa hoje + _refresh: v.optional(v.number()), // Parâmetro usado pelo frontend para forçar refresh }, handler: async (ctx, args) => { const usuario = await getCurrentUserFunction(ctx); @@ -801,12 +802,22 @@ export const listarRegistrosDia = query({ const funcionarioId = usuario.funcionarioId; // Garantir que não é undefined const data = args.data || new Date().toISOString().split('T')[0]!; + console.log('[listarRegistrosDia] Buscando registros:', { funcionarioId, data }); + const registros = await ctx.db .query('registrosPonto') .withIndex('by_funcionario_data', (q) => q.eq('funcionarioId', funcionarioId).eq('data', data)) .order('asc') .collect(); + console.log('[listarRegistrosDia] Registros encontrados:', registros.length, registros.map(r => ({ + _id: r._id, + tipo: r.tipo, + data: r.data, + hora: r.hora, + minuto: r.minuto + }))); + return registros; }, }); @@ -862,7 +873,7 @@ export const listarRegistrosPeriodo = query({ handler: async (ctx, args) => { const usuario = await getCurrentUserFunction(ctx); if (!usuario) { - // Retornar array vazio quando não autenticado + console.warn('[listarRegistrosPeriodo] Usuário não autenticado'); return []; } @@ -872,15 +883,27 @@ export const listarRegistrosPeriodo = query({ // Validar formato das datas if (!args.dataInicio || !args.dataFim) { + console.warn('[listarRegistrosPeriodo] Datas não fornecidas'); return []; } // Validar formato YYYY-MM-DD const dataInicioRegex = /^\d{4}-\d{2}-\d{2}$/; if (!dataInicioRegex.test(args.dataInicio) || !dataInicioRegex.test(args.dataFim)) { + console.warn('[listarRegistrosPeriodo] Formato de data inválido', { + dataInicio: args.dataInicio, + dataFim: args.dataFim + }); return []; } + console.log('[listarRegistrosPeriodo] Buscando registros', { + dataInicio: args.dataInicio, + dataFim: args.dataFim, + funcionarioId: args.funcionarioId, + usuarioId: usuario._id + }); + let registrosFiltrados; // Se funcionário foi especificado, usar índice por funcionário e data (mais eficiente) @@ -901,21 +924,41 @@ export const listarRegistrosPeriodo = query({ }); } else { // Se não há funcionário especificado, buscar todos e filtrar (menos eficiente, mas necessário) - // Usar comparação de strings diretamente para datas no formato YYYY-MM-DD - const registros = await ctx.db - .query('registrosPonto') - .withIndex('by_data', (q) => - q.gte('data', args.dataInicio).lte('data', args.dataFim) - ) - .collect(); - - // Garantir que as datas estão no formato correto e filtrar novamente para garantir - registrosFiltrados = registros.filter((r) => { - // Comparação de strings funciona para formato YYYY-MM-DD - return r.data >= args.dataInicio && r.data <= args.dataFim; - }); + try { + // Tentar usar índice por data primeiro + const registros = await ctx.db + .query('registrosPonto') + .withIndex('by_data', (q) => + q.gte('data', args.dataInicio).lte('data', args.dataFim) + ) + .collect(); + + console.log('[listarRegistrosPeriodo] Registros do índice by_data:', registros.length); + + // Garantir que as datas estão no formato correto e filtrar novamente para garantir + registrosFiltrados = registros.filter((r) => { + // Comparação de strings funciona para formato YYYY-MM-DD + return r.data >= args.dataInicio && r.data <= args.dataFim; + }); + + console.log('[listarRegistrosPeriodo] Registros após filtro:', registrosFiltrados.length); + } catch (error) { + console.error('[listarRegistrosPeriodo] Erro ao buscar registros:', error); + // Fallback: buscar todos e filtrar manualmente + const todosRegistros = await ctx.db + .query('registrosPonto') + .collect(); + + registrosFiltrados = todosRegistros.filter((r) => { + return r.data >= args.dataInicio && r.data <= args.dataFim; + }); + + console.log('[listarRegistrosPeriodo] Fallback - registros encontrados:', registrosFiltrados.length); + } } + console.log('[listarRegistrosPeriodo] Registros encontrados antes de buscar funcionários:', registrosFiltrados.length); + // Buscar informações dos funcionários const funcionariosIds = new Set(registrosFiltrados.map((r) => r.funcionarioId)); const funcionarios = await Promise.all( @@ -940,6 +983,8 @@ export const listarRegistrosPeriodo = query({ } } + console.log('[listarRegistrosPeriodo] Total de registros a retornar:', registrosFiltrados.length); + return registrosFiltrados.map((registro) => { const funcionario = funcionarios.find((f) => f?._id === registro.funcionarioId); const chave = `${registro.funcionarioId}-${registro.data}`; @@ -1225,11 +1270,19 @@ export const obterHistoricoESaldoDia = query({ args: { funcionarioId: v.id('funcionarios'), data: v.string(), // YYYY-MM-DD + _refresh: v.optional(v.number()), // Parâmetro usado pelo frontend para forçar refresh }, handler: async (ctx, args) => { const usuario = await getCurrentUserFunction(ctx); if (!usuario || !usuario.funcionarioId) { - throw new Error('Usuário não autenticado'); + console.warn('[obterHistoricoESaldoDia] Usuário não autenticado ou sem funcionarioId'); + // Retornar dados vazios em vez de lançar erro + return { + registros: [], + cargaHorariaDiaria: 0, + horasTrabalhadas: 0, + saldoMinutos: 0, + }; } // Verificar se é o próprio funcionário ou tem permissão @@ -1245,6 +1298,11 @@ export const obterHistoricoESaldoDia = query({ ) .order('asc') .collect(); + + console.log('[obterHistoricoESaldoDia] Registros encontrados:', registros.length, { + funcionarioId: args.funcionarioId, + data: args.data + }); // Buscar configuração de ponto const config = await ctx.db