From 90e81e46675cc69abdb08dac6c76492e8128c5b3 Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Sat, 22 Nov 2025 22:40:30 -0300 Subject: [PATCH 01/11] feat: add "Controle de Ponto" section with management options for employee time records - Introduced a new section for "Controle de Ponto" in the recursos-humanos page, allowing users to manage employee time records. - Added options for viewing and managing point records, editing records, and handling dispensations, enhancing functionality for HR management. --- .../(dashboard)/recursos-humanos/+page.svelte | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte index 60992a0..41844a9 100644 --- a/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte +++ b/apps/web/src/routes/(dashboard)/recursos-humanos/+page.svelte @@ -77,6 +77,34 @@ }, ], }, + { + categoria: "Controle de Ponto", + descricao: "Gerencie registros de ponto dos funcionários", + Icon: Clock, + gradient: "from-cyan-500/10 to-cyan-600/20", + accentColor: "text-cyan-600", + bgIcon: "bg-cyan-500/20", + opcoes: [ + { + nome: "Registro de Pontos", + descricao: "Visualizar e gerenciar registros de ponto", + href: "/recursos-humanos/registro-pontos", + Icon: Clock, + }, + { + nome: "Homologação de Registro", + descricao: "Edite registros de ponto e ajuste banco de horas", + href: "/recursos-humanos/controle-ponto/homologacao", + Icon: CheckCircle2, + }, + { + nome: "Dispensa de Registro", + descricao: "Gerencie períodos de dispensa de registro de ponto", + href: "/recursos-humanos/controle-ponto/dispensa", + Icon: XCircle, + }, + ], + }, { categoria: "Gestão de Férias e Licenças", descricao: "Controle de férias, atestados e licenças", @@ -121,34 +149,6 @@ }, ], }, - { - categoria: "Controle de Ponto", - descricao: "Gerencie registros de ponto dos funcionários", - Icon: Clock, - gradient: "from-cyan-500/10 to-cyan-600/20", - accentColor: "text-cyan-600", - bgIcon: "bg-cyan-500/20", - opcoes: [ - { - nome: "Registro de Pontos", - descricao: "Visualizar e gerenciar registros de ponto", - href: "/recursos-humanos/registro-pontos", - Icon: Clock, - }, - { - nome: "Homologação de Registro", - descricao: "Edite registros de ponto e ajuste banco de horas", - href: "/recursos-humanos/controle-ponto/homologacao", - Icon: CheckCircle2, - }, - { - nome: "Dispensa de Registro", - descricao: "Gerencie períodos de dispensa de registro de ponto", - href: "/recursos-humanos/controle-ponto/dispensa", - Icon: XCircle, - }, - ], - }, ]; From 467e04b605286b743de6f6ea8fbef9a4db1d05ab Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Sat, 22 Nov 2025 23:57:05 -0300 Subject: [PATCH 02/11] 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 From 095f041891c4d25e956b0082ff762d8dc8dec967 Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Sun, 23 Nov 2025 04:58:38 -0300 Subject: [PATCH 03/11] feat: update CSS theming and enhance variable application for improved UI consistency - Refactored CSS styles to utilize HSL color values for better theme adaptability. - Added custom light and dark themes with comprehensive variable definitions to ensure consistent styling across the application. - Implemented a mechanism to force CSS variable updates, ensuring that custom themes are applied correctly during runtime. --- apps/web/src/app.css | 99 +++++++++++++++++++++++++++++++-- apps/web/src/lib/utils/temas.ts | 8 +++ 2 files changed, 102 insertions(+), 5 deletions(-) diff --git a/apps/web/src/app.css b/apps/web/src/app.css index cacf989..5af36f7 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -34,9 +34,9 @@ inset: -2px; border-radius: 1.15rem; box-shadow: - 0 0 0 1px rgba(15, 23, 42, 0.04), - 0 14px 32px -22px rgba(15, 23, 42, 0.45), - 0 6px 18px -16px rgba(102, 126, 234, 0.35); + 0 0 0 1px hsl(var(--bc) / 0.04), + 0 14px 32px -22px hsl(var(--bc) / 0.45), + 0 6px 18px -16px hsl(var(--p) / 0.35); opacity: 0.55; transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; @@ -48,7 +48,7 @@ position: absolute; inset: 0; border-radius: 1rem; - background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12)); + background: linear-gradient(135deg, hsl(var(--p) / 0.12), hsl(var(--s) / 0.12)); opacity: 0; transform: scale(0.96); transition: opacity 220ms ease, transform 220ms ease; @@ -58,7 +58,7 @@ :where(.card, .card-hover):hover { transform: translateY(-6px); - box-shadow: 0 20px 45px -20px rgba(15, 23, 42, 0.35); + box-shadow: 0 20px 45px -20px hsl(var(--bc) / 0.35); } :where(.card, .card-hover):hover::before { @@ -156,6 +156,15 @@ html[data-theme="sgse-blue"] body, --tab-radius: 0.5rem; } +/* Garantir que todas as variáveis CSS sejam aplicadas em todos os elementos */ +html[data-theme] { + color-scheme: var(--color-scheme, light); +} + +html[data-theme] * { + color-scheme: inherit; +} + html[data-theme="sgse-green"], html[data-theme="sgse-green"] body, [data-theme="sgse-green"] { @@ -388,4 +397,84 @@ html[data-theme="sgse-corporate"] body, --border-btn: 1px; --tab-border: 1px; --tab-radius: 0.5rem; +} + +/* Tema Light customizado para garantir funcionamento completo */ +html[data-theme="light"], +html[data-theme="light"] body, +[data-theme="light"] { + color-scheme: light; + --p: 217 91% 60%; + --pf: 217 91% 50%; + --pc: 0 0% 100%; + --s: 217 91% 60%; + --sf: 217 91% 50%; + --sc: 0 0% 100%; + --a: 217 91% 60%; + --af: 217 91% 50%; + --ac: 0 0% 100%; + --n: 217 20% 17%; + --nf: 217 20% 10%; + --nc: 0 0% 100%; + --b1: 0 0% 100%; + --b2: 217 20% 95%; + --b3: 217 20% 90%; + --bc: 217 20% 17%; + --in: 217 91% 60%; + --inc: 0 0% 100%; + --su: 142 76% 36%; + --suc: 0 0% 100%; + --wa: 38 92% 50%; + --wac: 0 0% 100%; + --er: 0 84% 60%; + --erc: 0 0% 100%; + --rounded-box: 1rem; + --rounded-btn: 0.5rem; + --rounded-badge: 1.9rem; + --animation-btn: 0.25s; + --animation-input: 0.2s; + --btn-focus-scale: 0.95; + --border-btn: 1px; + --tab-border: 1px; + --tab-radius: 0.5rem; +} + +/* Tema Dark customizado para garantir funcionamento completo */ +html[data-theme="dark"], +html[data-theme="dark"] body, +[data-theme="dark"] { + color-scheme: dark; + --p: 217 91% 60%; + --pf: 217 91% 50%; + --pc: 0 0% 100%; + --s: 217 91% 60%; + --sf: 217 91% 50%; + --sc: 0 0% 100%; + --a: 217 91% 60%; + --af: 217 91% 50%; + --ac: 0 0% 100%; + --n: 217 30% 15%; + --nf: 217 30% 8%; + --nc: 0 0% 100%; + --b1: 217 30% 10%; + --b2: 217 30% 15%; + --b3: 217 30% 20%; + --bc: 217 10% 90%; + --in: 217 91% 60%; + --inc: 0 0% 100%; + --su: 142 76% 36%; + --suc: 0 0% 100%; + --wa: 38 92% 50%; + --wac: 0 0% 100%; + --er: 0 84% 60%; + --erc: 0 0% 100%; + --rounded-box: 1rem; + --rounded-btn: 0.5rem; + --rounded-badge: 1.9rem; + --animation-btn: 0.25s; + --animation-input: 0.2s; + --btn-focus-scale: 0.95; + --border-btn: 1px; + --tab-border: 1px; + --tab-radius: 0.5rem; } \ No newline at end of file diff --git a/apps/web/src/lib/utils/temas.ts b/apps/web/src/lib/utils/temas.ts index 9e9d43e..da4c782 100644 --- a/apps/web/src/lib/utils/temas.ts +++ b/apps/web/src/lib/utils/temas.ts @@ -171,6 +171,14 @@ export function aplicarTema(temaId: TemaId | string | null | undefined): void { // Forçar reflow para garantir que o CSS seja aplicado void htmlElement.offsetHeight; + // Forçar atualização de todas as variáveis CSS + // Isso garante que os temas customizados sejam aplicados corretamente + if (typeof window !== 'undefined' && window.getComputedStyle) { + const computedStyle = window.getComputedStyle(htmlElement); + // Forçar recálculo das variáveis CSS + computedStyle.getPropertyValue('--p'); + } + // Disparar evento customizado para notificar mudança de tema if (typeof window !== 'undefined') { window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: nomeDaisyUI } })); From ac8e8f56b8ef0ae371bb47b4bd51286416223e05 Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Sun, 23 Nov 2025 05:52:01 -0300 Subject: [PATCH 04/11] feat: implement saldo calculation for entry/exit pairs in registro-pontos page - Added a new function `calcularSaldosPorPar` to compute balances for entry and exit pairs, returning a map of balances indexed by record. - Updated the table data generation to display daily balances per pair, enhancing visibility of time management. - Implemented logic to handle incomplete pairs and display appropriate messages in the UI, improving user experience. --- .../registro-pontos/+page.svelte | 257 +++++++++++++----- 1 file changed, 194 insertions(+), 63 deletions(-) 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 a03d425..687ed2a 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 @@ -527,6 +527,75 @@ }; } + /** + * Calcula saldos por par entrada/saída + * Retorna um mapa com o índice do registro e informações do saldo do par + */ + function calcularSaldosPorPar(registros: Array<{ tipo: string; hora: number; minuto: number }>): Map { + const saldos = new Map(); + + if (registros.length === 0) return saldos; + + // Ordenar registros por hora e minuto + const registrosOrdenados = [...registros].sort((a, b) => { + if (a.hora !== b.hora) { + return a.hora - b.hora; + } + return a.minuto - b.minuto; + }); + + let parIndex = 0; + let entradaAtual: { tipo: string; hora: number; minuto: number; index: number } | null = null; + let indicesPar: number[] = []; + + for (let i = 0; i < registrosOrdenados.length; i++) { + const reg = registrosOrdenados[i]; + + // Identificar início de um par (entrada ou retorno_almoco) + if (reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco') { + // Se havia um par anterior incompleto, limpar + if (entradaAtual && indicesPar.length > 0) { + indicesPar = []; + } + entradaAtual = { ...reg, index: i }; + indicesPar = [i]; + } + // Identificar fim de um par (saida_almoco ou saida) + else if ((reg.tipo === 'saida_almoco' || reg.tipo === 'saida') && entradaAtual) { + indicesPar.push(i); + + // Calcular saldo do par (saída - entrada) + const minutosEntrada = entradaAtual.hora * 60 + entradaAtual.minuto; + const minutosSaida = reg.hora * 60 + reg.minuto; + + let saldoMinutos = minutosSaida - minutosEntrada; + if (saldoMinutos < 0) { + saldoMinutos += 24 * 60; // Adicionar um dia em minutos + } + + const horas = Math.floor(saldoMinutos / 60); + const minutos = saldoMinutos % 60; + + // Associar saldo a todos os registros do par + for (const idx of indicesPar) { + saldos.set(idx, { + saldoMinutos, + horas, + minutos, + parIndex, + tamanhoPar: indicesPar.length + }); + } + + parIndex++; + entradaAtual = null; + indicesPar = []; + } + } + + return saldos; + } + function abrirModalImpressao(funcionarioId: Id<'funcionarios'>) { funcionarioParaImprimir = funcionarioId; mostrarModalImpressao = true; @@ -816,16 +885,25 @@ }); } - // Criar dados da tabela com saldo diário + // Criar dados da tabela com saldo diário por par for (const [data, regs] of Object.entries(registrosPorData)) { // Formatar data para exibição usando função centralizada (DD/MM/AAAA) const dataFormatada = formatarDataDDMMAAAA(data); - // Calcular saldo diário como diferença entre saída e entrada - const saldoDiarioDia = calcularSaldoDiario(regs); + // Ordenar registros por hora e minuto para garantir ordem correta + const regsOrdenados = [...regs].sort((a, b) => { + if (a.hora !== b.hora) { + return a.hora - b.hora; + } + return a.minuto - b.minuto; + }); - for (const reg of regs) { - const linha: string[] = [ + // Calcular saldos por par entrada/saída + const saldosPorPar = calcularSaldosPorPar(regsOrdenados); + + for (let i = 0; i < regsOrdenados.length; i++) { + const reg = regsOrdenados[i]; + const linha: any[] = [ dataFormatada, config ? getTipoRegistroLabel(reg.tipo as 'entrada' | 'saida_almoco' | 'retorno_almoco' | 'saida', { @@ -838,42 +916,29 @@ formatarHoraPonto(reg.hora, reg.minuto), ]; - // Saldo Diário sempre após Horário + // Saldo Diário por par entrada/saída if (sections.saldoDiario) { - if (saldoDiarioDia) { - const sinal = saldoDiarioDia.positivo ? '+' : '-'; - linha.push(`${sinal}${saldoDiarioDia.horas}h ${saldoDiarioDia.minutos}min`); + const saldoPar = saldosPorPar.get(i); + if (saldoPar) { + // Verificar se é o primeiro registro do par (entrada ou retorno_almoco) + const isInicioPar = reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco'; + + if (isInicioPar) { + // Primeira linha do par: adicionar saldo com rowspan + linha.push({ + content: `+${saldoPar.horas}h ${saldoPar.minutos}min`, + rowSpan: saldoPar.tamanhoPar + }); + } + // Outras linhas do par (saida_almoco ou saida): não adicionar coluna (o rowspan cobre) } else { + // Registro sem par completo: mostrar "-" em célula individual linha.push('-'); } } - // Adicionar localização (geofencing) - if (reg.dentroRaioPermitido === true) { - linha.push('✅ Dentro do Raio'); - } else if (reg.dentroRaioPermitido === false) { - linha.push('⚠️ Fora do Raio'); - } else { - linha.push('❓ Não Validado'); - } - linha.push(reg.dentroDoPrazo ? 'Sim' : 'Não'); - // Adicionar dados de acelerômetro (se disponível) - if (reg.acelerometroX !== undefined || reg.sensorDisponivel !== undefined) { - if (reg.sensorDisponivel === false && !reg.acelerometroX) { - linha.push('Sensor: Não disponível'); - } else if (reg.acelerometroX !== undefined) { - const movimento = reg.movimentoDetectado ? 'Sim' : 'Não'; - const magnitude = reg.magnitudeMovimento !== undefined ? reg.magnitudeMovimento.toFixed(2) : 'N/A'; - linha.push(`Mov: ${movimento} | Mag: ${magnitude} m/s²`); - } else { - linha.push('Sensor: N/A'); - } - } else { - linha.push('-'); - } - tableData.push(linha); } } @@ -882,9 +947,7 @@ if (sections.saldoDiario) { headers.push('Saldo Diário'); } - headers.push('Localização'); headers.push('Dentro do Prazo'); - headers.push('Acelerômetro'); // Salvar a posição Y antes da tabela const yPosAntesTabela = yPosition; @@ -923,15 +986,42 @@ funcionarioId, }); + // Calcular saldo do período selecionado + let saldoPeriodoMinutos = 0; + const registrosPorDataPeriodo: Record> = {}; + + for (const r of registrosFuncionario) { + const dataKey = r.data; + if (!registrosPorDataPeriodo[dataKey]) { + registrosPorDataPeriodo[dataKey] = []; + } + registrosPorDataPeriodo[dataKey]!.push({ + tipo: r.tipo, + hora: r.hora, + minuto: r.minuto, + }); + } + + // Somar todos os saldos diários do período + for (const regs of Object.values(registrosPorDataPeriodo)) { + const saldoDiario = calcularSaldoDiario(regs); + if (saldoDiario) { + saldoPeriodoMinutos += saldoDiario.saldoMinutos; + } + } + + const horasPeriodo = Math.floor(Math.abs(saldoPeriodoMinutos) / 60); + const minutosPeriodo = Math.abs(saldoPeriodoMinutos) % 60; + const sinalPeriodo = saldoPeriodoMinutos >= 0 ? '+' : '-'; + const saldoPeriodoFormatado = `${sinalPeriodo}${horasPeriodo}h ${minutosPeriodo}min`; + doc.setFontSize(12); doc.setFont('helvetica', 'bold'); doc.setTextColor(41, 128, 185); doc.text('RESUMO DO BANCO DE HORAS', 15, yPosition); doc.setFont('helvetica', 'normal'); doc.setTextColor(0, 0, 0); - yPosition += 10; - doc.setFontSize(10); if (bancoHoras) { const saldoMinutos = bancoHoras.saldoAcumuladoMinutos; @@ -940,40 +1030,81 @@ const sinal = saldoMinutos >= 0 ? '+' : '-'; const saldoFormatado = `${sinal}${horas}h ${minutos}min`; - doc.setFont('helvetica', 'bold'); - doc.text('Saldo Atual:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - doc.text(saldoFormatado, 60, yPosition); - yPosition += 8; + // Preparar dados da tabela + const bancoHorasData: string[][] = [ + ['Saldo Atual', saldoFormatado], + ['Saldo do Período Selecionado', saldoPeriodoFormatado] + ]; if (saldoMinutos > 0) { - doc.setFont('helvetica', 'bold'); - doc.setTextColor(0, 128, 0); - doc.text('Horas Excedentes:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - doc.text(`${horas}h ${minutos}min`, 75, yPosition); - doc.setTextColor(0, 0, 0); - yPosition += 8; + bancoHorasData.push(['Horas Excedentes', `${horas}h ${minutos}min`]); } if (saldoMinutos < 0) { - doc.setFont('helvetica', 'bold'); - doc.setTextColor(200, 0, 0); - doc.text('Horas a Pagar:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - doc.text(`${horas}h ${minutos}min`, 70, yPosition); - doc.setTextColor(0, 0, 0); - yPosition += 8; + bancoHorasData.push(['Horas a Pagar', `${horas}h ${minutos}min`]); } - doc.setFont('helvetica', 'bold'); - doc.text('Total de Dias com Registro:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - doc.text(`${bancoHoras.totalDias} dias`, 95, yPosition); - yPosition += 10; + bancoHorasData.push(['Total de Dias com Registro', `${bancoHoras.totalDias} dias`]); + + // Criar tabela no mesmo estilo das outras seções + autoTable(doc, { + startY: yPosition, + head: [['Campo', 'Valor']], + body: bancoHorasData, + theme: 'grid', + headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' }, + styles: { fontSize: 9 }, + columnStyles: { + 0: { fontStyle: 'bold', cellWidth: 80 }, + 1: { cellWidth: 'auto' } + }, + didParseCell: function(data) { + const campo = data.cell.text[0]; + // Destacar "Saldo do Período Selecionado" em vermelho se negativo + if (campo === 'Saldo do Período Selecionado' && saldoPeriodoMinutos < 0) { + data.cell.styles.textColor = [200, 0, 0]; + if (data.column.index === 1) { + data.cell.styles.fontStyle = 'bold'; + } + } + // Destacar "Horas a Pagar" em vermelho se saldo negativo + if (campo === 'Horas a Pagar' && saldoMinutos < 0) { + data.cell.styles.textColor = [200, 0, 0]; + if (data.column.index === 1) { + data.cell.styles.fontStyle = 'bold'; + } + } + } + }); + + // Calcular posição Y após a tabela + const lastPage = doc.getNumberOfPages(); + doc.setPage(lastPage); + const finalY = (doc as { lastAutoTable?: { finalY: number } }).lastAutoTable?.finalY; + if (finalY) { + yPosition = finalY + 10; + } else { + yPosition += bancoHorasData.length * 7 + 10; + } } else { - doc.text('Banco de horas não disponível', 15, yPosition); - yPosition += 10; + // Se não houver banco de horas, criar tabela vazia com mensagem + autoTable(doc, { + startY: yPosition, + head: [['Campo', 'Valor']], + body: [['Banco de horas', 'Não disponível']], + theme: 'grid', + headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' }, + styles: { fontSize: 9 }, + }); + + const lastPage = doc.getNumberOfPages(); + doc.setPage(lastPage); + const finalY = (doc as { lastAutoTable?: { finalY: number } }).lastAutoTable?.finalY; + if (finalY) { + yPosition = finalY + 10; + } else { + yPosition += 20; + } } } From dfc975cb8f8173bd387bb8876dd8df44fe70e98c Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Sun, 23 Nov 2025 06:06:22 -0300 Subject: [PATCH 05/11] feat: enhance registro-pontos page with date range handling and expected record generation - Introduced functions to generate all dates within a selected period and to create expected records based on user configuration. - Updated the logic to process daily records, combining real and expected entries, and calculating daily balances. - Enhanced table rendering to visually distinguish between marked and unmarked records, improving user experience and clarity in time management. --- .../registro-pontos/+page.svelte | 382 ++++++++++++++++-- 1 file changed, 338 insertions(+), 44 deletions(-) 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 687ed2a..ee2ce3b 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 @@ -596,6 +596,55 @@ return saldos; } + /** + * Gera array de todas as datas do período selecionado + */ + function gerarDiasPeriodo(dataInicio: string, dataFim: string): string[] { + const dias: string[] = []; + const inicio = new Date(dataInicio); + const fim = new Date(dataFim); + + for (let d = new Date(inicio); d <= fim; d.setDate(d.getDate() + 1)) { + dias.push(d.toISOString().split('T')[0]!); + } + + return dias; + } + + /** + * Gera registros esperados para um dia baseado na configuração + */ + function gerarRegistrosEsperados(data: string, config: { + horarioEntrada: string; + horarioSaidaAlmoco: string; + horarioRetornoAlmoco: string; + horarioSaida: string; + }): Array<{ tipo: string; hora: number; minuto: number; data: string }> { + const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number); + const [horaSaidaAlmoco, minutoSaidaAlmoco] = config.horarioSaidaAlmoco.split(':').map(Number); + const [horaRetornoAlmoco, minutoRetornoAlmoco] = config.horarioRetornoAlmoco.split(':').map(Number); + const [horaSaida, minutoSaida] = config.horarioSaida.split(':').map(Number); + + return [ + { tipo: 'entrada', hora: horaEntrada, minuto: minutoEntrada, data }, + { tipo: 'saida_almoco', hora: horaSaidaAlmoco, minuto: minutoSaidaAlmoco, data }, + { tipo: 'retorno_almoco', hora: horaRetornoAlmoco, minuto: minutoRetornoAlmoco, data }, + { tipo: 'saida', hora: horaSaida, minuto: minutoSaida, data }, + ]; + } + + /** + * Verifica se um registro esperado foi marcado + */ + function registroFoiMarcado( + registroEsperado: { tipo: string; hora: number; minuto: number }, + registrosReais: Array<{ tipo: string; hora: number; minuto: number }> + ): boolean { + return registrosReais.some( + (r) => r.tipo === registroEsperado.tipo + ); + } + function abrirModalImpressao(funcionarioId: Id<'funcionarios'>) { funcionarioParaImprimir = funcionarioId; mostrarModalImpressao = true; @@ -840,12 +889,19 @@ } } + // Variável para armazenar saldos diários (usada no resumo do banco de horas) + const saldosDiariosPorData: Record = {}; + // Tabela de registros if (sections.registrosPonto) { const config = await client.query(api.configuracaoPonto.obterConfiguracao, {}); - const tableData: string[][] = []; + if (!config) { + throw new Error('Configuração de ponto não encontrada'); + } - // Agrupar por data para incluir saldo diário + const tableData: any[][] = []; + + // Agrupar registros reais por data const registrosPorData: Record< string, Array<{ @@ -885,24 +941,152 @@ }); } - // Criar dados da tabela com saldo diário por par - for (const [data, regs] of Object.entries(registrosPorData)) { - // Formatar data para exibição usando função centralizada (DD/MM/AAAA) + // Gerar todos os dias do período + const diasPeriodo = gerarDiasPeriodo(dataInicio, dataFim); + + // Processar cada dia do período + for (const data of diasPeriodo) { const dataFormatada = formatarDataDDMMAAAA(data); - - // Ordenar registros por hora e minuto para garantir ordem correta - const regsOrdenados = [...regs].sort((a, b) => { + const regsReais = registrosPorData[data] || []; + const regsEsperados = gerarRegistrosEsperados(data, config); + + // Combinar registros reais e esperados + const todosRegistros: Array<{ + tipo: string; + hora: number; + minuto: number; + real: boolean; + dentroDoPrazo?: boolean; + }> = []; + + // Adicionar registros reais + for (const reg of regsReais) { + todosRegistros.push({ + tipo: reg.tipo, + hora: reg.hora, + minuto: reg.minuto, + real: true, + dentroDoPrazo: reg.dentroDoPrazo, + }); + } + + // Adicionar registros esperados não marcados (em vermelho) + for (const regEsperado of regsEsperados) { + if (!registroFoiMarcado(regEsperado, regsReais)) { + todosRegistros.push({ + tipo: regEsperado.tipo, + hora: regEsperado.hora, + minuto: regEsperado.minuto, + real: false, + }); + } + } + + // Ordenar todos os registros por hora e minuto + todosRegistros.sort((a, b) => { if (a.hora !== b.hora) { return a.hora - b.hora; } return a.minuto - b.minuto; }); + + // Calcular saldos por par entrada/saída (apenas com registros reais) + const regsReaisOrdenados = [...regsReais].sort((a, b) => { + if (a.hora !== b.hora) return a.hora - b.hora; + return a.minuto - b.minuto; + }); + const saldosPorPar = calcularSaldosPorPar(regsReaisOrdenados); + + // Calcular saldos esperados para pares incompletos ou dias sem registros + const saldosEsperadosPorPar: Map = new Map(); - // Calcular saldos por par entrada/saída - const saldosPorPar = calcularSaldosPorPar(regsOrdenados); + // Identificar pares incompletos e calcular saldos esperados + for (let i = 0; i < todosRegistros.length; i++) { + const reg = todosRegistros[i]; + + // Se é entrada ou retorno_almoco (início de par) e é real + if ((reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco') && reg.real) { + // Verificar se há saída correspondente real + const tipoSaidaEsperado = reg.tipo === 'entrada' ? 'saida_almoco' : 'saida'; + const saidaEncontrada = regsReais.find(r => r.tipo === tipoSaidaEsperado); + + if (!saidaEncontrada) { + // Par incompleto: calcular saldo esperado baseado na configuração + const regEsperado = regsEsperados.find(r => r.tipo === tipoSaidaEsperado); + if (regEsperado) { + const minutosEntrada = reg.hora * 60 + reg.minuto; + const minutosSaidaEsperada = regEsperado.hora * 60 + regEsperado.minuto; + let saldoMinutos = minutosSaidaEsperada - minutosEntrada; + if (saldoMinutos < 0) { + saldoMinutos += 24 * 60; + } + + const horas = Math.floor(saldoMinutos / 60); + const minutos = saldoMinutos % 60; + + // Contar quantos registros fazem parte deste par na lista todosRegistros + // Encontrar índice do registro na lista ordenada todosRegistros + const indexNaListaTodos = todosRegistros.findIndex( + (r, idx) => idx >= i && r.tipo === reg.tipo && r.hora === reg.hora && r.minuto === reg.minuto + ); + + // Contar registros do par (entrada + saída esperada) + let tamanhoPar = 1; // entrada + const saidaEsperadaNaLista = todosRegistros.find( + (r, idx) => idx > indexNaListaTodos && r.tipo === tipoSaidaEsperado && !r.real + ); + if (saidaEsperadaNaLista) { + tamanhoPar++; // saída faltante já está na lista + } + + if (indexNaListaTodos >= 0) { + saldosEsperadosPorPar.set(indexNaListaTodos, { + saldoMinutos, + horas, + minutos, + tamanhoPar, + incompleto: true + }); + } + } + } + } + } + + // Calcular saldo diário total (soma de todos os pares reais) + let saldoDiarioTotalMinutos = 0; + for (const saldo of saldosPorPar.values()) { + saldoDiarioTotalMinutos += saldo.saldoMinutos; + } - for (let i = 0; i < regsOrdenados.length; i++) { - const reg = regsOrdenados[i]; + // Se não há registros reais, calcular saldo esperado baseado na configuração + if (regsReais.length === 0) { + // Calcular saldo esperado do dia completo + const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number); + const [horaSaidaAlmoco, minutoSaidaAlmoco] = config.horarioSaidaAlmoco.split(':').map(Number); + const [horaRetornoAlmoco, minutoRetornoAlmoco] = config.horarioRetornoAlmoco.split(':').map(Number); + const [horaSaida, minutoSaida] = config.horarioSaida.split(':').map(Number); + + // Par 1: entrada -> saida_almoco + const minutosPar1Entrada = horaEntrada * 60 + minutoEntrada; + const minutosPar1Saida = horaSaidaAlmoco * 60 + minutoSaidaAlmoco; + let saldoPar1 = minutosPar1Saida - minutosPar1Entrada; + if (saldoPar1 < 0) saldoPar1 += 24 * 60; + + // Par 2: retorno_almoco -> saida + const minutosPar2Entrada = horaRetornoAlmoco * 60 + minutoRetornoAlmoco; + const minutosPar2Saida = horaSaida * 60 + minutoSaida; + let saldoPar2 = minutosPar2Saida - minutosPar2Entrada; + if (saldoPar2 < 0) saldoPar2 += 24 * 60; + + saldoDiarioTotalMinutos = saldoPar1 + saldoPar2; + } + + saldosDiariosPorData[data] = saldoDiarioTotalMinutos; + + // Criar linhas da tabela + for (let i = 0; i < todosRegistros.length; i++) { + const reg = todosRegistros[i]; const linha: any[] = [ dataFormatada, config @@ -916,28 +1100,110 @@ formatarHoraPonto(reg.hora, reg.minuto), ]; + // Marcar linha como não marcada para aplicar cor vermelha depois + if (!reg.real) { + linha._naoMarcado = true; + } + // Saldo Diário por par entrada/saída if (sections.saldoDiario) { - const saldoPar = saldosPorPar.get(i); - if (saldoPar) { - // Verificar se é o primeiro registro do par (entrada ou retorno_almoco) + const isInicioPar = reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco'; + + if (reg.real && isInicioPar) { + const indexReal = regsReaisOrdenados.findIndex( + (r) => r.tipo === reg.tipo && r.hora === reg.hora && r.minuto === reg.minuto + ); + + // Verificar se há saldo esperado (par incompleto) + const saldoEsperado = saldosEsperadosPorPar.get(i); + if (saldoEsperado) { + // Par incompleto: mostrar saldo esperado em vermelho + linha._saldoVermelho = true; + linha.push({ + content: `+${saldoEsperado.horas}h ${saldoEsperado.minutos}min`, + rowSpan: saldoEsperado.tamanhoPar + }); + } else if (indexReal >= 0) { + const saldoPar = saldosPorPar.get(indexReal); + if (saldoPar) { + linha.push({ + content: `+${saldoPar.horas}h ${saldoPar.minutos}min`, + rowSpan: saldoPar.tamanhoPar + }); + } else { + linha.push('-'); + } + } else { + linha.push('-'); + } + } else if (reg.real) { + // Saída real: não adicionar (já coberto pelo rowspan da entrada) + // Mas verificar se precisa adicionar '-' se não houver par completo + const tipoEntradaEsperado = reg.tipo === 'saida_almoco' ? 'entrada' : 'retorno_almoco'; + const entradaReal = regsReais.find(r => r.tipo === tipoEntradaEsperado); + if (!entradaReal) { + linha.push('-'); + } + } else { + // Registro não marcado: verificar se faz parte de um par incompleto ou dia sem registros const isInicioPar = reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco'; if (isInicioPar) { - // Primeira linha do par: adicionar saldo com rowspan - linha.push({ - content: `+${saldoPar.horas}h ${saldoPar.minutos}min`, - rowSpan: saldoPar.tamanhoPar - }); + // Verificar se há saldo esperado para este par + const saldoEsperado = saldosEsperadosPorPar.get(i); + if (saldoEsperado) { + // Par incompleto: mostrar saldo esperado em vermelho + linha._saldoVermelho = true; + linha.push({ + content: `+${saldoEsperado.horas}h ${saldoEsperado.minutos}min`, + rowSpan: saldoEsperado.tamanhoPar + }); + } else if (regsReais.length === 0) { + // Dia sem registros: calcular saldo esperado completo + if (reg.tipo === 'entrada') { + // Par 1 completo esperado + const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number); + const [horaSaidaAlmoco, minutoSaidaAlmoco] = config.horarioSaidaAlmoco.split(':').map(Number); + const minutosEntrada = horaEntrada * 60 + minutoEntrada; + const minutosSaida = horaSaidaAlmoco * 60 + minutoSaidaAlmoco; + let saldoMinutos = minutosSaida - minutosEntrada; + if (saldoMinutos < 0) saldoMinutos += 24 * 60; + const horas = Math.floor(saldoMinutos / 60); + const minutos = saldoMinutos % 60; + linha._saldoVermelho = true; + linha.push({ + content: `+${horas}h ${minutos}min`, + rowSpan: 2 // entrada + saida_almoco + }); + } else if (reg.tipo === 'retorno_almoco') { + // Par 2 completo esperado + const [horaRetornoAlmoco, minutoRetornoAlmoco] = config.horarioRetornoAlmoco.split(':').map(Number); + const [horaSaida, minutoSaida] = config.horarioSaida.split(':').map(Number); + const minutosEntrada = horaRetornoAlmoco * 60 + minutoRetornoAlmoco; + const minutosSaida = horaSaida * 60 + minutoSaida; + let saldoMinutos = minutosSaida - minutosEntrada; + if (saldoMinutos < 0) saldoMinutos += 24 * 60; + const horas = Math.floor(saldoMinutos / 60); + const minutos = saldoMinutos % 60; + linha._saldoVermelho = true; + linha.push({ + content: `+${horas}h ${minutos}min`, + rowSpan: 2 // retorno_almoco + saida + }); + } else { + linha.push('-'); + } + } else { + linha.push('-'); + } + } else { + // Saída sem entrada correspondente: não tem saldo + linha.push('-'); } - // Outras linhas do par (saida_almoco ou saida): não adicionar coluna (o rowspan cobre) - } else { - // Registro sem par completo: mostrar "-" em célula individual - linha.push('-'); } } - linha.push(reg.dentroDoPrazo ? 'Sim' : 'Não'); + linha.push(reg.real ? (reg.dentroDoPrazo ? 'Sim' : 'Não') : 'Não marcado'); tableData.push(linha); } @@ -959,6 +1225,23 @@ theme: 'grid', headStyles: { fillColor: [41, 128, 185], fontStyle: 'bold' }, styles: { fontSize: 9 }, + didParseCell: function(data) { + // Aplicar cor vermelha para registros não marcados + if (data.row.raw && (data.row.raw as any)._naoMarcado) { + // Aplicar cor vermelha nas colunas Tipo e Horário + if (data.column.index === 1 || data.column.index === 2) { + data.cell.styles.textColor = [200, 0, 0]; + } + } + // Aplicar cor vermelha na coluna de saldo diário quando marcado + if (data.row.raw && (data.row.raw as any)._saldoVermelho) { + // Coluna de saldo diário (índice 3 se saldoDiario estiver ativo) + const indiceSaldoDiario = sections.saldoDiario ? 3 : -1; + if (data.column.index === indiceSaldoDiario) { + data.cell.styles.textColor = [200, 0, 0]; + } + } + } }); // Calcular posição Y após a tabela @@ -986,27 +1269,34 @@ funcionarioId, }); - // Calcular saldo do período selecionado + // Calcular saldo do período selecionado baseado nos saldos diários calculados let saldoPeriodoMinutos = 0; - const registrosPorDataPeriodo: Record> = {}; - - for (const r of registrosFuncionario) { - const dataKey = r.data; - if (!registrosPorDataPeriodo[dataKey]) { - registrosPorDataPeriodo[dataKey] = []; + if (sections.registrosPonto && Object.keys(saldosDiariosPorData).length > 0) { + // Somar todos os saldos diários do período + for (const saldoMinutos of Object.values(saldosDiariosPorData)) { + saldoPeriodoMinutos += saldoMinutos; + } + } else { + // Fallback: calcular a partir dos registros se não tiver saldos diários + const registrosPorDataPeriodo: Record> = {}; + + for (const r of registrosFuncionario) { + const dataKey = r.data; + if (!registrosPorDataPeriodo[dataKey]) { + registrosPorDataPeriodo[dataKey] = []; + } + registrosPorDataPeriodo[dataKey]!.push({ + tipo: r.tipo, + hora: r.hora, + minuto: r.minuto, + }); } - registrosPorDataPeriodo[dataKey]!.push({ - tipo: r.tipo, - hora: r.hora, - minuto: r.minuto, - }); - } - // Somar todos os saldos diários do período - for (const regs of Object.values(registrosPorDataPeriodo)) { - const saldoDiario = calcularSaldoDiario(regs); - if (saldoDiario) { - saldoPeriodoMinutos += saldoDiario.saldoMinutos; + for (const regs of Object.values(registrosPorDataPeriodo)) { + const saldoDiario = calcularSaldoDiario(regs); + if (saldoDiario) { + saldoPeriodoMinutos += saldoDiario.saldoMinutos; + } } } @@ -1015,6 +1305,10 @@ const sinalPeriodo = saldoPeriodoMinutos >= 0 ? '+' : '-'; const saldoPeriodoFormatado = `${sinalPeriodo}${horasPeriodo}h ${minutosPeriodo}min`; + // Calcular total de dias do período selecionado + const diasPeriodo = gerarDiasPeriodo(dataInicio, dataFim); + const totalDiasPeriodo = diasPeriodo.length; + doc.setFontSize(12); doc.setFont('helvetica', 'bold'); doc.setTextColor(41, 128, 185); @@ -1044,7 +1338,7 @@ bancoHorasData.push(['Horas a Pagar', `${horas}h ${minutos}min`]); } - bancoHorasData.push(['Total de Dias com Registro', `${bancoHoras.totalDias} dias`]); + bancoHorasData.push(['Total de Dias do Período', `${totalDiasPeriodo} dias`]); // Criar tabela no mesmo estilo das outras seções autoTable(doc, { From e0b01cff0a94beac50a921162d286bef56848584 Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Sun, 23 Nov 2025 08:29:38 -0300 Subject: [PATCH 06/11] feat: implement comparative balance calculation for entry/exit pairs in registro-pontos page - Added a new function `calcularSaldoComparativoPorPar` to compute comparative balances for entry and exit pairs, enhancing the accuracy of time management. - Updated the logic to handle expected and actual records, allowing for better visibility of discrepancies in worked hours. - Enhanced the table rendering to display comparative balances, improving user experience and clarity in time tracking. --- .../registro-pontos/+page.svelte | 715 ++++++++++++++++-- 1 file changed, 644 insertions(+), 71 deletions(-) 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 ee2ce3b..962e565 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 @@ -596,6 +596,149 @@ return saldos; } + /** + * Calcula saldos comparativos por par entrada/saída + * Compara horários reais com horários esperados configurados + * Retorna mapa com saldo trabalhado, esperado e diferença + */ + function calcularSaldoComparativoPorPar( + registros: Array<{ tipo: string; hora: number; minuto: number }>, + config: { + horarioEntrada: string; + horarioSaidaAlmoco: string; + horarioRetornoAlmoco: string; + horarioSaida: string; + } + ): Map { + const saldos = new Map(); + + if (registros.length === 0) return saldos; + + // Parsear horários esperados da configuração + const [horaEntradaEsperada, minutoEntradaEsperado] = config.horarioEntrada.split(':').map(Number); + const [horaSaidaAlmocoEsperada, minutoSaidaAlmocoEsperado] = config.horarioSaidaAlmoco.split(':').map(Number); + const [horaRetornoAlmocoEsperado, minutoRetornoAlmocoEsperado] = config.horarioRetornoAlmoco.split(':').map(Number); + const [horaSaidaEsperada, minutoSaidaEsperado] = config.horarioSaida.split(':').map(Number); + + // Ordenar registros por hora e minuto + const registrosOrdenados = [...registros].sort((a, b) => { + if (a.hora !== b.hora) { + return a.hora - b.hora; + } + return a.minuto - b.minuto; + }); + + let parIndex = 0; + let entradaAtual: { tipo: string; hora: number; minuto: number; index: number } | null = null; + let indicesPar: number[] = []; + + for (let i = 0; i < registrosOrdenados.length; i++) { + const reg = registrosOrdenados[i]; + + // Identificar início de um par (entrada ou retorno_almoco) + if (reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco') { + // Se havia um par anterior incompleto, limpar + if (entradaAtual && indicesPar.length > 0) { + indicesPar = []; + } + entradaAtual = { ...reg, index: i }; + indicesPar = [i]; + } + // Identificar fim de um par (saida_almoco ou saida) + else if ((reg.tipo === 'saida_almoco' || reg.tipo === 'saida') && entradaAtual) { + indicesPar.push(i); + + // Calcular tempo trabalhado real (saída - entrada) + const minutosEntradaReal = entradaAtual.hora * 60 + entradaAtual.minuto; + const minutosSaidaReal = reg.hora * 60 + reg.minuto; + let trabalhadoMinutos = minutosSaidaReal - minutosEntradaReal; + if (trabalhadoMinutos < 0) { + trabalhadoMinutos += 24 * 60; + } + + // Calcular tempo esperado baseado no tipo de par + let esperadoMinutos: number; + if (entradaAtual.tipo === 'entrada') { + // Par 1: entrada -> saida_almoco + const minutosEntradaEsperada = horaEntradaEsperada * 60 + minutoEntradaEsperado; + const minutosSaidaEsperada = horaSaidaAlmocoEsperada * 60 + minutoSaidaAlmocoEsperado; + esperadoMinutos = minutosSaidaEsperada - minutosEntradaEsperada; + if (esperadoMinutos < 0) { + esperadoMinutos += 24 * 60; + } + } else { + // Par 2: retorno_almoco -> saida + const minutosEntradaEsperada = horaRetornoAlmocoEsperado * 60 + minutoRetornoAlmocoEsperado; + const minutosSaidaEsperada = horaSaidaEsperada * 60 + minutoSaidaEsperado; + esperadoMinutos = minutosSaidaEsperada - minutosEntradaEsperada; + if (esperadoMinutos < 0) { + esperadoMinutos += 24 * 60; + } + } + + // Calcular diferença (trabalhado - esperado) + const diferencaMinutos = trabalhadoMinutos - esperadoMinutos; + + // Converter para horas e minutos + const trabalhadoHoras = Math.floor(trabalhadoMinutos / 60); + const trabalhadoMinutosResto = trabalhadoMinutos % 60; + + const esperadoHoras = Math.floor(esperadoMinutos / 60); + const esperadoMinutosResto = esperadoMinutos % 60; + + const diferencaHoras = Math.floor(Math.abs(diferencaMinutos) / 60); + const diferencaMinutosResto = Math.abs(diferencaMinutos) % 60; + + // Associar saldo a todos os registros do par + for (const idx of indicesPar) { + saldos.set(idx, { + trabalhadoMinutos, + trabalhadoHoras, + trabalhadoMinutosResto, + esperadoMinutos, + esperadoHoras, + esperadoMinutosResto, + diferencaMinutos, + diferencaHoras, + diferencaMinutosResto, + parIndex, + tamanhoPar: indicesPar.length + }); + } + + parIndex++; + entradaAtual = null; + indicesPar = []; + } + } + + return saldos; + } + /** * Gera array de todas as datas do período selecionado */ @@ -868,9 +1011,17 @@ if (sections.alteracoesGestor) { try { - homologacoes = await client.query(api.pontos.listarHomologacoes, { + const todasHomologacoes = await client.query(api.pontos.listarHomologacoes, { funcionarioId, }) || []; + + // Filtrar homologações pelo período selecionado + const dataInicioTimestamp = new Date(dataInicio + 'T00:00:00').getTime(); + const dataFimTimestamp = new Date(dataFim + 'T23:59:59').getTime(); + + homologacoes = todasHomologacoes.filter((h) => { + return h.criadoEm >= dataInicioTimestamp && h.criadoEm <= dataFimTimestamp; + }); } catch (error) { console.warn('Erro ao buscar homologações:', error); // Continuar mesmo se houver erro ao buscar homologações @@ -879,10 +1030,22 @@ if (sections.dispensasRegistro) { try { - dispensas = await client.query(api.pontos.listarDispensas, { + const todasDispensas = await client.query(api.pontos.listarDispensas, { funcionarioId, apenasAtivas: false, }) || []; + + // Filtrar dispensas que têm interseção com o período selecionado + const dataInicioPeriodo = new Date(dataInicio + 'T00:00:00'); + const dataFimPeriodo = new Date(dataFim + 'T23:59:59'); + + dispensas = todasDispensas.filter((d) => { + const dispensaInicio = new Date(d.dataInicio + 'T00:00:00'); + const dispensaFim = new Date(d.dataFim + 'T23:59:59'); + + // Verificar se há interseção entre os períodos + return dispensaInicio <= dataFimPeriodo && dispensaFim >= dataInicioPeriodo; + }); } catch (error) { console.warn('Erro ao buscar dispensas:', error); // Continuar mesmo se houver erro ao buscar dispensas @@ -890,7 +1053,11 @@ } // Variável para armazenar saldos diários (usada no resumo do banco de horas) - const saldosDiariosPorData: Record = {}; + const saldosDiariosPorData: Record = {}; // Tabela de registros if (sections.registrosPonto) { @@ -990,42 +1157,134 @@ return a.minuto - b.minuto; }); - // Calcular saldos por par entrada/saída (apenas com registros reais) + // Calcular saldos comparativos por par entrada/saída (apenas com registros reais) const regsReaisOrdenados = [...regsReais].sort((a, b) => { if (a.hora !== b.hora) return a.hora - b.hora; return a.minuto - b.minuto; }); - const saldosPorPar = calcularSaldosPorPar(regsReaisOrdenados); + const saldosComparativosPorPar = calcularSaldoComparativoPorPar(regsReaisOrdenados, config); // Calcular saldos esperados para pares incompletos ou dias sem registros - const saldosEsperadosPorPar: Map = new Map(); + const saldosEsperadosPorPar: Map = new Map(); + + // Calcular saldo diário total (diferença acumulada de todos os pares) + // Declarar variáveis ANTES de usá-las + let saldoDiarioTotalDiferencaMinutos = 0; + let saldoDiarioTotalTrabalhadoMinutos = 0; + let saldoDiarioTotalEsperadoMinutos = 0; + + // Criar conjunto de chaves de registros que já foram processados como completos + // Isso será usado tanto para evitar criar pares incompletos quanto para evitar somar duplicados + const chavesProcessadasCompletas = new Set(); + const paresCompletosProcessados = new Set(); // Rastrear parIndex já processados + + // Criar conjunto de chaves e somar saldos dos pares completos + // IMPORTANTE: saldosComparativosPorPar associa o saldo a AMBOS os registros do par (entrada + saída) + // Então precisamos garantir que somamos apenas UMA VEZ por par, não uma vez por registro + for (const [index, saldo] of saldosComparativosPorPar.entries()) { + const regEntrada = regsReaisOrdenados[index]; + if (regEntrada) { + // Verificar se este parIndex já foi processado + if (!paresCompletosProcessados.has(saldo.parIndex)) { + // Primeira vez processando este par, somar o saldo + saldoDiarioTotalDiferencaMinutos += saldo.diferencaMinutos; + saldoDiarioTotalTrabalhadoMinutos += saldo.trabalhadoMinutos; + saldoDiarioTotalEsperadoMinutos += saldo.esperadoMinutos; + paresCompletosProcessados.add(saldo.parIndex); + } + + // Adicionar chaves para evitar processamento duplicado depois + const chaveEntrada = `${regEntrada.tipo}-${regEntrada.hora}-${regEntrada.minuto}`; + chavesProcessadasCompletas.add(chaveEntrada); + // Encontrar saída correspondente + const tipoSaidaEsperado = regEntrada.tipo === 'entrada' ? 'saida_almoco' : 'saida'; + for (let j = index + 1; j < regsReaisOrdenados.length; j++) { + const regSaida = regsReaisOrdenados[j]; + if (regSaida && regSaida.tipo === tipoSaidaEsperado) { + const chaveSaida = `${regSaida.tipo}-${regSaida.hora}-${regSaida.minuto}`; + chavesProcessadasCompletas.add(chaveSaida); + break; + } + } + } + } // Identificar pares incompletos e calcular saldos esperados + // IMPORTANTE: Só processar pares que NÃO foram processados como completos for (let i = 0; i < todosRegistros.length; i++) { const reg = todosRegistros[i]; // Se é entrada ou retorno_almoco (início de par) e é real if ((reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco') && reg.real) { + // Verificar se este registro já foi processado como par completo + const chaveRegistro = `${reg.tipo}-${reg.hora}-${reg.minuto}`; + if (chavesProcessadasCompletas.has(chaveRegistro)) { + continue; // Já foi processado como par completo, pular + } + // Verificar se há saída correspondente real const tipoSaidaEsperado = reg.tipo === 'entrada' ? 'saida_almoco' : 'saida'; const saidaEncontrada = regsReais.find(r => r.tipo === tipoSaidaEsperado); + + // Se há saída correspondente, verificar se ela também está em chavesProcessadasCompletas + // Se estiver, significa que este par já foi processado como completo + if (saidaEncontrada) { + const chaveSaida = `${saidaEncontrada.tipo}-${saidaEncontrada.hora}-${saidaEncontrada.minuto}`; + if (chavesProcessadasCompletas.has(chaveSaida)) { + continue; // Par completo já processado, pular + } + } if (!saidaEncontrada) { - // Par incompleto: calcular saldo esperado baseado na configuração + // Par incompleto: entrada real sem saída correspondente + // NÃO calcular tempo trabalhado aqui porque não há saída marcada + // O tempo trabalhado será 0, e a diferença será negativa (0 - esperado) const regEsperado = regsEsperados.find(r => r.tipo === tipoSaidaEsperado); if (regEsperado) { - const minutosEntrada = reg.hora * 60 + reg.minuto; - const minutosSaidaEsperada = regEsperado.hora * 60 + regEsperado.minuto; - let saldoMinutos = minutosSaidaEsperada - minutosEntrada; - if (saldoMinutos < 0) { - saldoMinutos += 24 * 60; + // Tempo trabalhado = 0 (não há saída marcada, então não podemos assumir tempo trabalhado) + const trabalhadoMinutos = 0; + + // Calcular tempo esperado + let esperadoMinutos: number; + if (reg.tipo === 'entrada') { + const [horaEntradaEsperada, minutoEntradaEsperado] = config.horarioEntrada.split(':').map(Number); + const [horaSaidaAlmocoEsperada, minutoSaidaAlmocoEsperado] = config.horarioSaidaAlmoco.split(':').map(Number); + const minutosEntradaEsperada = horaEntradaEsperada * 60 + minutoEntradaEsperado; + const minutosSaidaEsperadaConfig = horaSaidaAlmocoEsperada * 60 + minutoSaidaAlmocoEsperado; + esperadoMinutos = minutosSaidaEsperadaConfig - minutosEntradaEsperada; + if (esperadoMinutos < 0) esperadoMinutos += 24 * 60; + } else { + const [horaRetornoAlmocoEsperado, minutoRetornoAlmocoEsperado] = config.horarioRetornoAlmoco.split(':').map(Number); + const [horaSaidaEsperada, minutoSaidaEsperado] = config.horarioSaida.split(':').map(Number); + const minutosEntradaEsperada = horaRetornoAlmocoEsperado * 60 + minutoRetornoAlmocoEsperado; + const minutosSaidaEsperadaConfig = horaSaidaEsperada * 60 + minutoSaidaEsperado; + esperadoMinutos = minutosSaidaEsperadaConfig - minutosEntradaEsperada; + if (esperadoMinutos < 0) esperadoMinutos += 24 * 60; } - const horas = Math.floor(saldoMinutos / 60); - const minutos = saldoMinutos % 60; - + // Calcular diferença (0 - esperado = negativo) + const diferencaMinutos = -esperadoMinutos; + + const trabalhadoHoras = 0; + const trabalhadoMinutosResto = 0; + const esperadoHoras = Math.floor(esperadoMinutos / 60); + const esperadoMinutosResto = esperadoMinutos % 60; + const diferencaHoras = Math.floor(Math.abs(diferencaMinutos) / 60); + const diferencaMinutosResto = Math.abs(diferencaMinutos) % 60; + // Contar quantos registros fazem parte deste par na lista todosRegistros - // Encontrar índice do registro na lista ordenada todosRegistros const indexNaListaTodos = todosRegistros.findIndex( (r, idx) => idx >= i && r.tipo === reg.tipo && r.hora === reg.hora && r.minuto === reg.minuto ); @@ -1041,9 +1300,15 @@ if (indexNaListaTodos >= 0) { saldosEsperadosPorPar.set(indexNaListaTodos, { - saldoMinutos, - horas, - minutos, + trabalhadoMinutos, + trabalhadoHoras, + trabalhadoMinutosResto, + esperadoMinutos, + esperadoHoras, + esperadoMinutosResto, + diferencaMinutos, + diferencaHoras, + diferencaMinutosResto, tamanhoPar, incompleto: true }); @@ -1053,10 +1318,117 @@ } } - // Calcular saldo diário total (soma de todos os pares reais) - let saldoDiarioTotalMinutos = 0; - for (const saldo of saldosPorPar.values()) { - saldoDiarioTotalMinutos += saldo.saldoMinutos; + // Identificar pares completamente não marcados (quando há registros reais mas um par completo não foi marcado) + if (regsReais.length > 0) { + for (let i = 0; i < todosRegistros.length; i++) { + const reg = todosRegistros[i]; + + // Se é entrada ou retorno_almoco (início de par) e NÃO é real + if ((reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco') && !reg.real) { + // Verificar se a saída correspondente também não foi marcada + const tipoSaidaEsperado = reg.tipo === 'entrada' ? 'saida_almoco' : 'saida'; + const saidaEsperada = todosRegistros.find( + (r, idx) => idx > i && r.tipo === tipoSaidaEsperado && !r.real + ); + + if (saidaEsperada) { + // Par completamente não marcado: calcular saldo negativo + // Tempo trabalhado = 0, tempo esperado = configurado, diferença = -esperado + let esperadoMinutos: number; + if (reg.tipo === 'entrada') { + const [horaEntradaEsperada, minutoEntradaEsperado] = config.horarioEntrada.split(':').map(Number); + const [horaSaidaAlmocoEsperada, minutoSaidaAlmocoEsperado] = config.horarioSaidaAlmoco.split(':').map(Number); + const minutosEntradaEsperada = horaEntradaEsperada * 60 + minutoEntradaEsperado; + const minutosSaidaEsperadaConfig = horaSaidaAlmocoEsperada * 60 + minutoSaidaAlmocoEsperado; + esperadoMinutos = minutosSaidaEsperadaConfig - minutosEntradaEsperada; + if (esperadoMinutos < 0) esperadoMinutos += 24 * 60; + } else { + const [horaRetornoAlmocoEsperado, minutoRetornoAlmocoEsperado] = config.horarioRetornoAlmoco.split(':').map(Number); + const [horaSaidaEsperada, minutoSaidaEsperado] = config.horarioSaida.split(':').map(Number); + const minutosEntradaEsperada = horaRetornoAlmocoEsperado * 60 + minutoRetornoAlmocoEsperado; + const minutosSaidaEsperadaConfig = horaSaidaEsperada * 60 + minutoSaidaEsperado; + esperadoMinutos = minutosSaidaEsperadaConfig - minutosEntradaEsperada; + if (esperadoMinutos < 0) esperadoMinutos += 24 * 60; + } + + // Trabalhado = 0, diferença = -esperado + const trabalhadoMinutos = 0; + const diferencaMinutos = -esperadoMinutos; + + const trabalhadoHoras = 0; + const trabalhadoMinutosResto = 0; + const esperadoHoras = Math.floor(esperadoMinutos / 60); + const esperadoMinutosResto = esperadoMinutos % 60; + const diferencaHoras = Math.floor(Math.abs(diferencaMinutos) / 60); + const diferencaMinutosResto = Math.abs(diferencaMinutos) % 60; + + // Encontrar índice da saída esperada na lista + const indexSaidaEsperada = todosRegistros.findIndex( + (r, idx) => idx > i && r.tipo === tipoSaidaEsperado && !r.real + ); + + // Associar saldo negativo ao início do par (entrada) + saldosEsperadosPorPar.set(i, { + trabalhadoMinutos, + trabalhadoHoras, + trabalhadoMinutosResto, + esperadoMinutos, + esperadoHoras, + esperadoMinutosResto, + diferencaMinutos, + diferencaHoras, + diferencaMinutosResto, + tamanhoPar: indexSaidaEsperada >= 0 ? 2 : 1, // entrada + saída + incompleto: false // Par completo não marcado + }); + } + } + } + } + + // NOTA: Os saldos dos pares completos já foram somados acima quando criamos chavesProcessadasCompletas + // As variáveis saldoDiarioTotal* já foram declaradas e inicializadas acima + + // Somar saldos dos pares completamente não marcados e incompletos + // IMPORTANTE: Não somar pares que já foram processados como completos acima + // Usar o conjunto chavesProcessadasCompletas criado anteriormente + for (const [indexNaListaTodos, saldo] of saldosEsperadosPorPar.entries()) { + const regNaListaTodos = todosRegistros[indexNaListaTodos]; + + // Verificar se este registro real já foi processado como par completo + if (regNaListaTodos && regNaListaTodos.real) { + const chaveRegistro = `${regNaListaTodos.tipo}-${regNaListaTodos.hora}-${regNaListaTodos.minuto}`; + if (chavesProcessadasCompletas.has(chaveRegistro)) { + // Este registro está em chavesProcessadasCompletas + // Verificar se há uma saída correspondente que também está lá + // Se ambas estão, significa que o par completo já foi processado + const tipoSaidaEsperado = regNaListaTodos.tipo === 'entrada' ? 'saida_almoco' : 'saida'; + + // Procurar saída correspondente em regsReais que também está em chavesProcessadasCompletas + const saidaCompletaEncontrada = regsReais.find(r => { + if (r.tipo !== tipoSaidaEsperado) return false; + const chaveSaida = `${r.tipo}-${r.hora}-${r.minuto}`; + return chavesProcessadasCompletas.has(chaveSaida); + }); + + if (saidaCompletaEncontrada) { + continue; // Par completo já processado (entrada + saída estão em chavesProcessadasCompletas), não somar novamente + } + } + } + + if (saldo.trabalhadoMinutos === 0 && !saldo.incompleto) { + // Par completamente não marcado: adicionar diferença negativa + saldoDiarioTotalDiferencaMinutos += saldo.diferencaMinutos; + saldoDiarioTotalTrabalhadoMinutos += saldo.trabalhadoMinutos; // 0 + saldoDiarioTotalEsperadoMinutos += saldo.esperadoMinutos; + } else if (saldo.incompleto) { + // Par incompleto: entrada real sem saída correspondente + // Só somar se não foi processado como completo acima + saldoDiarioTotalDiferencaMinutos += saldo.diferencaMinutos; + saldoDiarioTotalTrabalhadoMinutos += saldo.trabalhadoMinutos; + saldoDiarioTotalEsperadoMinutos += saldo.esperadoMinutos; + } } // Se não há registros reais, calcular saldo esperado baseado na configuração @@ -1079,10 +1451,17 @@ let saldoPar2 = minutosPar2Saida - minutosPar2Entrada; if (saldoPar2 < 0) saldoPar2 += 24 * 60; - saldoDiarioTotalMinutos = saldoPar1 + saldoPar2; + saldoDiarioTotalTrabalhadoMinutos = 0; // Nenhum tempo trabalhado + saldoDiarioTotalEsperadoMinutos = saldoPar1 + saldoPar2; + saldoDiarioTotalDiferencaMinutos = -saldoDiarioTotalEsperadoMinutos; // Diferença negativa (0 - esperado) } - saldosDiariosPorData[data] = saldoDiarioTotalMinutos; + // Armazenar saldo diário completo (usado no resumo do banco de horas) + saldosDiariosPorData[data] = { + diferencaMinutos: saldoDiarioTotalDiferencaMinutos, + trabalhadoMinutos: saldoDiarioTotalTrabalhadoMinutos, + esperadoMinutos: saldoDiarioTotalEsperadoMinutos + }; // Criar linhas da tabela for (let i = 0; i < todosRegistros.length; i++) { @@ -1105,7 +1484,7 @@ linha._naoMarcado = true; } - // Saldo Diário por par entrada/saída + // Saldo Diário por par entrada/saída com cálculo comparativo if (sections.saldoDiario) { const isInicioPar = reg.tipo === 'entrada' || reg.tipo === 'retorno_almoco'; @@ -1117,17 +1496,23 @@ // Verificar se há saldo esperado (par incompleto) const saldoEsperado = saldosEsperadosPorPar.get(i); if (saldoEsperado) { - // Par incompleto: mostrar saldo esperado em vermelho + // Par incompleto: mostrar saldo comparativo em vermelho linha._saldoVermelho = true; + const sinalDiferenca = saldoEsperado.diferencaMinutos >= 0 ? '+' : '-'; linha.push({ - content: `+${saldoEsperado.horas}h ${saldoEsperado.minutos}min`, + content: `+${saldoEsperado.trabalhadoHoras}h ${saldoEsperado.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`, rowSpan: saldoEsperado.tamanhoPar }); } else if (indexReal >= 0) { - const saldoPar = saldosPorPar.get(indexReal); + const saldoPar = saldosComparativosPorPar.get(indexReal); if (saldoPar) { + const sinalDiferenca = saldoPar.diferencaMinutos >= 0 ? '+' : '-'; + // Aplicar cor vermelha se diferença for negativa + if (saldoPar.diferencaMinutos < 0) { + linha._saldoVermelho = true; + } linha.push({ - content: `+${saldoPar.horas}h ${saldoPar.minutos}min`, + content: `+${saldoPar.trabalhadoHoras}h ${saldoPar.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoPar.diferencaHoras}h ${saldoPar.diferencaMinutosResto}min`, rowSpan: saldoPar.tamanhoPar }); } else { @@ -1152,14 +1537,24 @@ // Verificar se há saldo esperado para este par const saldoEsperado = saldosEsperadosPorPar.get(i); if (saldoEsperado) { - // Par incompleto: mostrar saldo esperado em vermelho + // Par incompleto ou completamente não marcado: mostrar saldo em vermelho linha._saldoVermelho = true; - linha.push({ - content: `+${saldoEsperado.horas}h ${saldoEsperado.minutos}min`, - rowSpan: saldoEsperado.tamanhoPar - }); + const sinalDiferenca = saldoEsperado.diferencaMinutos >= 0 ? '+' : '-'; + + // Se par completamente não marcado (trabalhado = 0), mostrar apenas diferença negativa + if (saldoEsperado.trabalhadoMinutos === 0) { + linha.push({ + content: `+0h 0min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`, + rowSpan: saldoEsperado.tamanhoPar + }); + } else { + linha.push({ + content: `+${saldoEsperado.trabalhadoHoras}h ${saldoEsperado.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`, + rowSpan: saldoEsperado.tamanhoPar + }); + } } else if (regsReais.length === 0) { - // Dia sem registros: calcular saldo esperado completo + // Dia sem registros: calcular saldo esperado completo com diferença negativa if (reg.tipo === 'entrada') { // Par 1 completo esperado const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number); @@ -1171,8 +1566,9 @@ const horas = Math.floor(saldoMinutos / 60); const minutos = saldoMinutos % 60; linha._saldoVermelho = true; + // Para dia sem registros, mostrar 0h trabalhado e diferença negativa linha.push({ - content: `+${horas}h ${minutos}min`, + content: `+0h 0min / -${horas}h ${minutos}min`, rowSpan: 2 // entrada + saida_almoco }); } else if (reg.tipo === 'retorno_almoco') { @@ -1186,19 +1582,53 @@ const horas = Math.floor(saldoMinutos / 60); const minutos = saldoMinutos % 60; linha._saldoVermelho = true; + // Para dia sem registros, mostrar 0h trabalhado e diferença negativa linha.push({ - content: `+${horas}h ${minutos}min`, + content: `+0h 0min / -${horas}h ${minutos}min`, rowSpan: 2 // retorno_almoco + saida }); } else { linha.push('-'); } } else { - linha.push('-'); + // Há registros reais mas este par não foi marcado completamente + // Verificar se é um par completamente não marcado + const tipoSaidaEsperado = reg.tipo === 'entrada' ? 'saida_almoco' : 'saida'; + const saidaEsperadaExiste = todosRegistros.some( + (r, idx) => idx > i && r.tipo === tipoSaidaEsperado && !r.real + ); + + if (saidaEsperadaExiste) { + // Par completamente não marcado: calcular saldo negativo + const saldoEsperadoCompleto = saldosEsperadosPorPar.get(i); + if (saldoEsperadoCompleto) { + linha._saldoVermelho = true; + const sinalDiferenca = saldoEsperadoCompleto.diferencaMinutos >= 0 ? '+' : '-'; + linha.push({ + content: `+0h 0min / ${sinalDiferenca}${saldoEsperadoCompleto.diferencaHoras}h ${saldoEsperadoCompleto.diferencaMinutosResto}min`, + rowSpan: saldoEsperadoCompleto.tamanhoPar + }); + } else { + linha.push('-'); + } + } else { + linha.push('-'); + } } } else { - // Saída sem entrada correspondente: não tem saldo - linha.push('-'); + // Saída não marcada: verificar se faz parte de um par completamente não marcado + // Se a entrada correspondente também não foi marcada, o saldo já foi adicionado na linha da entrada + // Então apenas não adicionar nada aqui (será coberto pelo rowspan) + const tipoEntradaEsperado = reg.tipo === 'saida_almoco' ? 'entrada' : 'retorno_almoco'; + const entradaEsperadaExiste = todosRegistros.some( + (r, idx) => idx < i && r.tipo === tipoEntradaEsperado && !r.real + ); + + if (!entradaEsperadaExiste) { + // Saída sem entrada correspondente esperada: não tem saldo + linha.push('-'); + } + // Se entrada esperada existe, o saldo já foi adicionado com rowspan na linha da entrada } } } @@ -1269,12 +1699,48 @@ funcionarioId, }); - // Calcular saldo do período selecionado baseado nos saldos diários calculados - let saldoPeriodoMinutos = 0; + // Calcular total de dias do período selecionado + const diasPeriodo = gerarDiasPeriodo(dataInicio, dataFim); + const totalDiasPeriodo = diasPeriodo.length; + + // Calcular carga horária diária esperada baseada na configuração + const [horaEntradaConfig, minutoEntradaConfig] = config.horarioEntrada.split(':').map(Number); + const [horaSaidaAlmocoConfig, minutoSaidaAlmocoConfig] = config.horarioSaidaAlmoco.split(':').map(Number); + const [horaRetornoAlmocoConfig, minutoRetornoAlmocoConfig] = config.horarioRetornoAlmoco.split(':').map(Number); + const [horaSaidaConfig, minutoSaidaConfig] = config.horarioSaida.split(':').map(Number); + + // Par 1: entrada -> saida_almoco + const minutosPar1EsperadoConfig = (horaSaidaAlmocoConfig * 60 + minutoSaidaAlmocoConfig) - (horaEntradaConfig * 60 + minutoEntradaConfig); + const minutosPar1EsperadoAjustadoConfig = minutosPar1EsperadoConfig < 0 ? minutosPar1EsperadoConfig + 24 * 60 : minutosPar1EsperadoConfig; + + // Par 2: retorno_almoco -> saida + const minutosPar2EsperadoConfig = (horaSaidaConfig * 60 + minutoSaidaConfig) - (horaRetornoAlmocoConfig * 60 + minutoRetornoAlmocoConfig); + const minutosPar2EsperadoAjustadoConfig = minutosPar2EsperadoConfig < 0 ? minutosPar2EsperadoConfig + 24 * 60 : minutosPar2EsperadoConfig; + + const cargaHorariaDiariaEsperadaMinutos = minutosPar1EsperadoAjustadoConfig + minutosPar2EsperadoAjustadoConfig; + + // Calcular saldos do período selecionado baseado nos saldos diários calculados + let saldoPeriodoDiferencaMinutos = 0; + let saldoPeriodoTrabalhadoMinutos = 0; + let diasComSaldoPositivo = 0; + let diasComSaldoNegativo = 0; + let diasSemRegistros = 0; + if (sections.registrosPonto && Object.keys(saldosDiariosPorData).length > 0) { // Somar todos os saldos diários do período - for (const saldoMinutos of Object.values(saldosDiariosPorData)) { - saldoPeriodoMinutos += saldoMinutos; + for (const saldo of Object.values(saldosDiariosPorData)) { + saldoPeriodoDiferencaMinutos += saldo.diferencaMinutos; + saldoPeriodoTrabalhadoMinutos += saldo.trabalhadoMinutos; + + if (saldo.diferencaMinutos > 0) { + diasComSaldoPositivo++; + } else if (saldo.diferencaMinutos < 0) { + diasComSaldoNegativo++; + } + + if (saldo.trabalhadoMinutos === 0 && saldo.esperadoMinutos > 0) { + diasSemRegistros++; + } } } else { // Fallback: calcular a partir dos registros se não tiver saldos diários @@ -1295,19 +1761,50 @@ for (const regs of Object.values(registrosPorDataPeriodo)) { const saldoDiario = calcularSaldoDiario(regs); if (saldoDiario) { - saldoPeriodoMinutos += saldoDiario.saldoMinutos; + saldoPeriodoDiferencaMinutos += saldoDiario.saldoMinutos; + saldoPeriodoTrabalhadoMinutos += saldoDiario.saldoMinutos; } } } - const horasPeriodo = Math.floor(Math.abs(saldoPeriodoMinutos) / 60); - const minutosPeriodo = Math.abs(saldoPeriodoMinutos) % 60; - const sinalPeriodo = saldoPeriodoMinutos >= 0 ? '+' : '-'; - const saldoPeriodoFormatado = `${sinalPeriodo}${horasPeriodo}h ${minutosPeriodo}min`; + // Calcular saldo esperado do período: carga horária diária × número de dias + const saldoPeriodoEsperadoMinutos = cargaHorariaDiariaEsperadaMinutos * totalDiasPeriodo; - // Calcular total de dias do período selecionado - const diasPeriodo = gerarDiasPeriodo(dataInicio, dataFim); - const totalDiasPeriodo = diasPeriodo.length; + // Calcular médias diárias + const mediaDiariaTrabalhadaHoras = totalDiasPeriodo > 0 ? Math.floor(saldoPeriodoTrabalhadoMinutos / 60 / totalDiasPeriodo) : 0; + const mediaDiariaTrabalhadaMinutos = totalDiasPeriodo > 0 ? Math.floor((saldoPeriodoTrabalhadoMinutos / totalDiasPeriodo) % 60) : 0; + + // Calcular média esperada baseada na configuração padrão (não no período) + const [horaEntrada, minutoEntrada] = config.horarioEntrada.split(':').map(Number); + const [horaSaidaAlmoco, minutoSaidaAlmoco] = config.horarioSaidaAlmoco.split(':').map(Number); + const [horaRetornoAlmoco, minutoRetornoAlmoco] = config.horarioRetornoAlmoco.split(':').map(Number); + const [horaSaida, minutoSaida] = config.horarioSaida.split(':').map(Number); + + // Par 1: entrada -> saida_almoco + const minutosPar1Esperado = (horaSaidaAlmoco * 60 + minutoSaidaAlmoco) - (horaEntrada * 60 + minutoEntrada); + const minutosPar1EsperadoAjustado = minutosPar1Esperado < 0 ? minutosPar1Esperado + 24 * 60 : minutosPar1Esperado; + + // Par 2: retorno_almoco -> saida + const minutosPar2Esperado = (horaSaida * 60 + minutoSaida) - (horaRetornoAlmoco * 60 + minutoRetornoAlmoco); + const minutosPar2EsperadoAjustado = minutosPar2Esperado < 0 ? minutosPar2Esperado + 24 * 60 : minutosPar2Esperado; + + const totalEsperadoDiarioMinutos = minutosPar1EsperadoAjustado + minutosPar2EsperadoAjustado; + const mediaDiariaEsperadaHoras = Math.floor(totalEsperadoDiarioMinutos / 60); + const mediaDiariaEsperadaMinutos = totalEsperadoDiarioMinutos % 60; + + // Formatar valores + const horasPeriodoDiferenca = Math.floor(Math.abs(saldoPeriodoDiferencaMinutos) / 60); + const minutosPeriodoDiferenca = Math.abs(saldoPeriodoDiferencaMinutos) % 60; + const sinalPeriodoDiferenca = saldoPeriodoDiferencaMinutos >= 0 ? '+' : '-'; + const saldoPeriodoDiferencaFormatado = `${sinalPeriodoDiferenca}${horasPeriodoDiferenca}h ${minutosPeriodoDiferenca}min`; + + const horasPeriodoTrabalhado = Math.floor(saldoPeriodoTrabalhadoMinutos / 60); + const minutosPeriodoTrabalhado = saldoPeriodoTrabalhadoMinutos % 60; + const saldoPeriodoTrabalhadoFormatado = `+${horasPeriodoTrabalhado}h ${minutosPeriodoTrabalhado}min`; + + const horasPeriodoEsperado = Math.floor(saldoPeriodoEsperadoMinutos / 60); + const minutosPeriodoEsperado = saldoPeriodoEsperadoMinutos % 60; + const saldoPeriodoEsperadoFormatado = `+${horasPeriodoEsperado}h ${minutosPeriodoEsperado}min`; doc.setFontSize(12); doc.setFont('helvetica', 'bold'); @@ -1324,20 +1821,45 @@ const sinal = saldoMinutos >= 0 ? '+' : '-'; const saldoFormatado = `${sinal}${horas}h ${minutos}min`; - // Preparar dados da tabela - const bancoHorasData: string[][] = [ + // Calcular saldo acumulado de períodos anteriores + // Saldo Anterior = Saldo Total - Saldo do Período Atual + const saldoAnteriorMinutos = saldoMinutos - saldoPeriodoDiferencaMinutos; + const horasAnterior = Math.floor(Math.abs(saldoAnteriorMinutos) / 60); + const minutosAnterior = Math.abs(saldoAnteriorMinutos) % 60; + const sinalAnterior = saldoAnteriorMinutos >= 0 ? '+' : '-'; + const saldoAnteriorFormatado = `${sinalAnterior}${horasAnterior}h ${minutosAnterior}min`; + + // Calcular resultado final + const resultadoFinalMinutos = saldoAnteriorMinutos + saldoPeriodoDiferencaMinutos; + const horasResultadoFinal = Math.floor(Math.abs(resultadoFinalMinutos) / 60); + const minutosResultadoFinal = Math.abs(resultadoFinalMinutos) % 60; + const sinalResultadoFinal = resultadoFinalMinutos >= 0 ? '+' : '-'; + const resultadoFinalFormatado = `${sinalResultadoFinal}${horasResultadoFinal}h ${minutosResultadoFinal}min`; + + // Preparar dados da tabela com melhorias + const bancoHorasData: any[][] = [ ['Saldo Atual', saldoFormatado], - ['Saldo do Período Selecionado', saldoPeriodoFormatado] + ['Saldo Banco Acumulado de Períodos Anteriores', saldoAnteriorFormatado], + ['Saldo do Período Exibido', saldoPeriodoDiferencaFormatado], + ['Resultado Final', resultadoFinalFormatado] ]; - if (saldoMinutos > 0) { - bancoHorasData.push(['Horas Excedentes', `${horas}h ${minutos}min`]); - } + // Adicionar detalhamento + bancoHorasData.push(['', '']); // Linha separadora + bancoHorasData.push(['Saldo Trabalhado do Período', saldoPeriodoTrabalhadoFormatado]); + bancoHorasData.push(['Saldo Esperado do Período', saldoPeriodoEsperadoFormatado]); + bancoHorasData.push(['Diferença do Período', saldoPeriodoDiferencaFormatado]); - if (saldoMinutos < 0) { - bancoHorasData.push(['Horas a Pagar', `${horas}h ${minutos}min`]); - } + // Adicionar estatísticas + bancoHorasData.push(['', '']); // Linha separadora + bancoHorasData.push(['Média Diária de Horas Trabalhadas', `+${mediaDiariaTrabalhadaHoras}h ${mediaDiariaTrabalhadaMinutos}min`]); + bancoHorasData.push(['Média Diária Esperada', `+${mediaDiariaEsperadaHoras}h ${mediaDiariaEsperadaMinutos}min`]); + // Adicionar contagens + bancoHorasData.push(['', '']); // Linha separadora + bancoHorasData.push(['Dias com Saldo Positivo', `${diasComSaldoPositivo} dias`]); + bancoHorasData.push(['Dias com Saldo Negativo', `${diasComSaldoNegativo} dias`]); + bancoHorasData.push(['Dias sem Registros', `${diasSemRegistros} dias`]); bancoHorasData.push(['Total de Dias do Período', `${totalDiasPeriodo} dias`]); // Criar tabela no mesmo estilo das outras seções @@ -1353,18 +1875,69 @@ 1: { cellWidth: 'auto' } }, didParseCell: function(data) { + // Ignorar linhas separadoras vazias + if (data.cell.text[0] === '' && data.column.index === 0) { + data.cell.styles.fillColor = [240, 240, 240]; // Cor de fundo cinza claro + return; + } + const campo = data.cell.text[0]; - // Destacar "Saldo do Período Selecionado" em vermelho se negativo - if (campo === 'Saldo do Período Selecionado' && saldoPeriodoMinutos < 0) { - data.cell.styles.textColor = [200, 0, 0]; - if (data.column.index === 1) { + const valor = data.cell.text[1] || ''; + + // Aplicar cores baseado no valor + if (data.column.index === 1 && valor) { + // Aplicar cor no Saldo Atual (vermelho para negativo, azul para positivo) + if (campo === 'Saldo Atual') { + if (saldoMinutos < 0) { + data.cell.styles.textColor = [200, 0, 0]; // Vermelho para negativo + } else if (saldoMinutos > 0) { + data.cell.styles.textColor = [0, 100, 200]; // Azul para positivo + } data.cell.styles.fontStyle = 'bold'; } - } - // Destacar "Horas a Pagar" em vermelho se saldo negativo - if (campo === 'Horas a Pagar' && saldoMinutos < 0) { - data.cell.styles.textColor = [200, 0, 0]; - if (data.column.index === 1) { + + // Verificar se o valor contém sinal negativo + if (valor.includes('-') && !valor.includes('±')) { + data.cell.styles.textColor = [200, 0, 0]; // Vermelho para negativo + if (campo === 'Saldo do Período Exibido' || campo === 'Diferença do Período' || campo === 'Resultado Final') { + data.cell.styles.fontStyle = 'bold'; + } + } else if (valor.includes('+') || campo.includes('Trabalhado') || campo.includes('Esperado')) { + // Verde para valores positivos ou campos de trabalhado/esperado + if (campo.includes('Diferença') && saldoPeriodoDiferencaMinutos < 0) { + data.cell.styles.textColor = [200, 0, 0]; // Vermelho se diferença negativa + data.cell.styles.fontStyle = 'bold'; + } else if (campo.includes('Diferença') && saldoPeriodoDiferencaMinutos > 0) { + data.cell.styles.textColor = [0, 128, 0]; // Verde se diferença positiva + data.cell.styles.fontStyle = 'bold'; + } else if (campo.includes('Trabalhado') || campo.includes('Esperado')) { + data.cell.styles.textColor = [0, 128, 0]; // Verde para trabalhado/esperado + } + } + + // Destacar campos específicos + if (campo === 'Dias com Saldo Negativo') { + data.cell.styles.textColor = [200, 0, 0]; + data.cell.styles.fontStyle = 'bold'; + } + if (campo === 'Dias com Saldo Positivo') { + data.cell.styles.textColor = [0, 128, 0]; + data.cell.styles.fontStyle = 'bold'; + } + if (campo === 'Resultado Final') { + if (resultadoFinalMinutos < 0) { + data.cell.styles.textColor = [200, 0, 0]; + } else if (resultadoFinalMinutos > 0) { + data.cell.styles.textColor = [0, 128, 0]; + } + data.cell.styles.fontStyle = 'bold'; + } + if (campo === 'Saldo do Período Exibido') { + if (saldoPeriodoDiferencaMinutos < 0) { + data.cell.styles.textColor = [200, 0, 0]; + } else if (saldoPeriodoDiferencaMinutos > 0) { + data.cell.styles.textColor = [0, 128, 0]; + } data.cell.styles.fontStyle = 'bold'; } } From db2daacdad2c498b9f8ad9edf47fca43708410cf Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Sun, 23 Nov 2025 09:06:15 -0300 Subject: [PATCH 07/11] refactor: improve table rendering and layout in registro-pontos page - Enhanced the rendering of tables for employee time records, consolidating data into structured formats for better readability. - Updated the logic for displaying various sections, including employee information, GPS validation, and geofencing, to utilize tables for clarity. - Improved styling and layout consistency across the page, ensuring a more user-friendly experience when reviewing time records and validation statuses. --- .../registro-pontos/+page.svelte | 938 +++++++++++------- 1 file changed, 571 insertions(+), 367 deletions(-) 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 962e565..9b2091d 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 @@ -1515,9 +1515,9 @@ content: `+${saldoPar.trabalhadoHoras}h ${saldoPar.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoPar.diferencaHoras}h ${saldoPar.diferencaMinutosResto}min`, rowSpan: saldoPar.tamanhoPar }); - } else { - linha.push('-'); - } + } else { + linha.push('-'); + } } else { linha.push('-'); } @@ -1547,7 +1547,7 @@ content: `+0h 0min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`, rowSpan: saldoEsperado.tamanhoPar }); - } else { + } else { linha.push({ content: `+${saldoEsperado.trabalhadoHoras}h ${saldoEsperado.trabalhadoMinutosResto}min / ${sinalDiferenca}${saldoEsperado.diferencaHoras}h ${saldoEsperado.diferencaMinutosResto}min`, rowSpan: saldoEsperado.tamanhoPar @@ -1608,12 +1608,12 @@ content: `+0h 0min / ${sinalDiferenca}${saldoEsperadoCompleto.diferencaHoras}h ${saldoEsperadoCompleto.diferencaMinutosResto}min`, rowSpan: saldoEsperadoCompleto.tamanhoPar }); - } else { + } else { linha.push('-'); - } - } else { - linha.push('-'); - } + } + } else { + linha.push('-'); + } } } else { // Saída não marcada: verificar se faz parte de um par completamente não marcado @@ -1888,7 +1888,7 @@ if (data.column.index === 1 && valor) { // Aplicar cor no Saldo Atual (vermelho para negativo, azul para positivo) if (campo === 'Saldo Atual') { - if (saldoMinutos < 0) { + if (saldoMinutos < 0) { data.cell.styles.textColor = [200, 0, 0]; // Vermelho para negativo } else if (saldoMinutos > 0) { data.cell.styles.textColor = [0, 100, 200]; // Azul para positivo @@ -1950,7 +1950,7 @@ const finalY = (doc as { lastAutoTable?: { finalY: number } }).lastAutoTable?.finalY; if (finalY) { yPosition = finalY + 10; - } else { + } else { yPosition += bancoHorasData.length * 7 + 10; } } else { @@ -2151,56 +2151,79 @@ setTimeout(() => reject(), 3000); }); - const logoWidth = 25; + const logoWidth = 30; const aspectRatio = logoImg.height / logoImg.width; const logoHeight = logoWidth * aspectRatio; doc.addImage(logoImg, 'PNG', 15, 10, logoWidth, logoHeight); - yPosition = Math.max(20, 10 + logoHeight / 2); + yPosition = Math.max(25, 10 + logoHeight / 2); } catch (err) { console.warn('Não foi possível carregar a logo:', err); } - // Cabeçalho - doc.setFontSize(16); + // Cabeçalho com estilo melhorado + doc.setFontSize(18); doc.setTextColor(41, 128, 185); + doc.setFont('helvetica', 'bold'); doc.text('DETALHES DO REGISTRO DE PONTO', 105, yPosition, { align: 'center' }); + + // Linha decorativa abaixo do título + doc.setDrawColor(41, 128, 185); + doc.setLineWidth(0.5); + doc.line(15, yPosition + 3, 195, yPosition + 3); yPosition += 15; - // Informações do Funcionário - doc.setFontSize(12); - doc.setTextColor(0, 0, 0); - doc.setFont('helvetica', 'bold'); - doc.text('DADOS DO FUNCIONÁRIO', 15, yPosition); - doc.setFont('helvetica', 'normal'); - - yPosition += 8; - doc.setFontSize(10); - + // Informações do Funcionário em tabela + const funcionarioData: any[][] = []; if (registro.funcionario) { if (registro.funcionario.matricula) { - doc.text(`Matrícula: ${registro.funcionario.matricula}`, 15, yPosition); - yPosition += 6; + funcionarioData.push(['Matrícula', registro.funcionario.matricula]); } - doc.text(`Nome: ${registro.funcionario.nome}`, 15, yPosition); - yPosition += 6; + funcionarioData.push(['Nome', registro.funcionario.nome]); if (registro.funcionario.descricaoCargo) { - doc.text(`Cargo/Função: ${registro.funcionario.descricaoCargo}`, 15, yPosition); - yPosition += 6; + funcionarioData.push(['Cargo/Função', registro.funcionario.descricaoCargo]); } } - yPosition += 5; - - // Informações do Registro + if (funcionarioData.length > 0) { + doc.setFontSize(12); + doc.setTextColor(41, 128, 185); doc.setFont('helvetica', 'bold'); - doc.text('DADOS DO REGISTRO', 15, yPosition); - doc.setFont('helvetica', 'normal'); - + doc.text('DADOS DO FUNCIONÁRIO', 15, yPosition); yPosition += 8; - doc.setFontSize(10); + autoTable(doc, { + startY: yPosition, + head: [['Campo', 'Valor']], + body: funcionarioData, + theme: 'striped', + headStyles: { + fillColor: [41, 128, 185], + textColor: [255, 255, 255], + fontStyle: 'bold', + fontSize: 10 + }, + bodyStyles: { + fontSize: 10, + textColor: [0, 0, 0] + }, + columnStyles: { + 0: { cellWidth: 50, fontStyle: 'bold' }, + 1: { cellWidth: 140 } + }, + margin: { left: 15, right: 15 }, + styles: { cellPadding: 4 } + }); + + type JsPDFWithAutoTable = jsPDF & { + lastAutoTable?: { finalY: number }; + }; + const finalY = (doc as JsPDFWithAutoTable).lastAutoTable?.finalY ?? yPosition + 10; + yPosition = finalY + 10; + } + + // Informações do Registro em tabela const config = await client.query(api.configuracaoPonto.obterConfiguracao, {}); const tipoLabel = config ? getTipoRegistroLabel(registro.tipo, { @@ -2210,34 +2233,75 @@ nomeSaida: config.nomeSaida, }) : getTipoRegistroLabel(registro.tipo); - doc.text(`Tipo: ${tipoLabel}`, 15, yPosition); - yPosition += 6; const dataHora = `${registro.data} ${registro.hora.toString().padStart(2, '0')}:${registro.minuto.toString().padStart(2, '0')}:${registro.segundo.toString().padStart(2, '0')}`; - doc.text(`Data e Hora: ${dataHora}`, 15, yPosition); - yPosition += 6; - - doc.text(`Status: ${registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'}`, 15, yPosition); - yPosition += 6; - - doc.text(`Tolerância: ${registro.toleranciaMinutos} minutos`, 15, yPosition); - yPosition += 6; - - doc.text( - `Sincronizado: ${registro.sincronizadoComServidor ? 'Sim (Servidor)' : 'Não (PC Local)'}`, - 15, - yPosition - ); - yPosition += 6; + + const registroData: any[][] = [ + ['Tipo', tipoLabel], + ['Data e Hora', dataHora], + ['Status', registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'], + ['Tolerância', `${registro.toleranciaMinutos} minutos`], + ['Sincronizado', registro.sincronizadoComServidor ? 'Sim (Servidor)' : 'Não (PC Local)'] + ]; if (registro.justificativa) { - doc.text(`Justificativa: ${registro.justificativa}`, 15, yPosition); - yPosition += 6; + registroData.push(['Justificativa', registro.justificativa]); } - yPosition += 5; + // Verificar se precisa de nova página + if (yPosition > 200) { + doc.addPage(); + yPosition = 20; + } - // Localização + doc.setFontSize(12); + doc.setTextColor(41, 128, 185); + doc.setFont('helvetica', 'bold'); + doc.text('DADOS DO REGISTRO', 15, yPosition); + yPosition += 8; + + autoTable(doc, { + startY: yPosition, + head: [['Campo', 'Valor']], + body: registroData, + theme: 'striped', + headStyles: { + fillColor: [41, 128, 185], + textColor: [255, 255, 255], + fontStyle: 'bold', + fontSize: 10 + }, + bodyStyles: { + fontSize: 10, + textColor: [0, 0, 0] + }, + columnStyles: { + 0: { cellWidth: 50, fontStyle: 'bold' }, + 1: { cellWidth: 140 } + }, + margin: { left: 15, right: 15 }, + styles: { cellPadding: 4 }, + didParseCell: (data: any) => { + if (data.section === 'body' && data.column.index === 1) { + // Aplicar cor verde para "Dentro do Prazo" e vermelho para "Fora do Prazo" + if (data.cell.text[0] === 'Dentro do Prazo') { + data.cell.styles.textColor = [0, 128, 0]; + data.cell.styles.fontStyle = 'bold'; + } else if (data.cell.text[0] === 'Fora do Prazo') { + data.cell.styles.textColor = [200, 0, 0]; + data.cell.styles.fontStyle = 'bold'; + } + } + } + }); + + type JsPDFWithAutoTable2 = jsPDF & { + lastAutoTable?: { finalY: number }; + }; + const finalYRegistro = (doc as JsPDFWithAutoTable2).lastAutoTable?.finalY ?? yPosition + 10; + yPosition = finalYRegistro + 10; + + // Localização em tabela if (registro.latitude && registro.longitude) { // Verificar se precisa de nova página if (yPosition > 200) { @@ -2245,50 +2309,69 @@ yPosition = 20; } - doc.setFont('helvetica', 'bold'); - doc.text('LOCALIZAÇÃO', 15, yPosition); - doc.setFont('helvetica', 'normal'); - - yPosition += 8; - doc.setFontSize(10); - - doc.text(`Latitude: ${registro.latitude.toFixed(6)}`, 15, yPosition); - yPosition += 6; - - doc.text(`Longitude: ${registro.longitude.toFixed(6)}`, 15, yPosition); - yPosition += 6; + const localizacaoData: any[][] = [ + ['Latitude', registro.latitude.toFixed(6)], + ['Longitude', registro.longitude.toFixed(6)] + ]; if (registro.precisao) { - doc.text(`Precisão: ${registro.precisao.toFixed(2)} metros`, 15, yPosition); - yPosition += 6; + localizacaoData.push(['Precisão', `${registro.precisao.toFixed(2)} metros`]); } if (registro.endereco) { - doc.text(`Endereço: ${registro.endereco}`, 15, yPosition); - yPosition += 6; + localizacaoData.push(['Endereço', registro.endereco]); } if (registro.cidade) { - doc.text(`Cidade: ${registro.cidade}`, 15, yPosition); - yPosition += 6; + localizacaoData.push(['Cidade', registro.cidade]); } if (registro.estado) { - doc.text(`Estado: ${registro.estado}`, 15, yPosition); - yPosition += 6; + localizacaoData.push(['Estado', registro.estado]); } if (registro.pais) { - doc.text(`País: ${registro.pais}`, 15, yPosition); - yPosition += 6; + localizacaoData.push(['País', registro.pais]); } if (registro.timezone) { - doc.text(`Fuso Horário: ${registro.timezone}`, 15, yPosition); - yPosition += 6; + localizacaoData.push(['Fuso Horário', registro.timezone]); } - yPosition += 5; + doc.setFontSize(12); + doc.setTextColor(41, 128, 185); + doc.setFont('helvetica', 'bold'); + doc.text('LOCALIZAÇÃO', 15, yPosition); + yPosition += 8; + + autoTable(doc, { + startY: yPosition, + head: [['Campo', 'Valor']], + body: localizacaoData, + theme: 'striped', + headStyles: { + fillColor: [41, 128, 185], + textColor: [255, 255, 255], + fontStyle: 'bold', + fontSize: 10 + }, + bodyStyles: { + fontSize: 10, + textColor: [0, 0, 0] + }, + columnStyles: { + 0: { cellWidth: 50, fontStyle: 'bold' }, + 1: { cellWidth: 140 } + }, + margin: { left: 15, right: 15 }, + styles: { cellPadding: 4 } + }); + + type JsPDFWithAutoTable3 = jsPDF & { + lastAutoTable?: { finalY: number }; + }; + const finalYLocalizacao = (doc as JsPDFWithAutoTable3).lastAutoTable?.finalY ?? yPosition + 10; + yPosition = finalYLocalizacao + 10; } // Validação de GPS e Anti-Spoofing @@ -2299,185 +2382,318 @@ yPosition = 20; } - doc.setFont('helvetica', 'bold'); doc.setFontSize(12); + doc.setTextColor(41, 128, 185); + doc.setFont('helvetica', 'bold'); doc.text('VALIDAÇÃO DE LOCALIZAÇÃO GPS', 15, yPosition); - doc.setFont('helvetica', 'normal'); - doc.setFontSize(10); yPosition += 10; - // Informações detalhadas do GPS - doc.setFont('helvetica', 'bold'); - doc.text('Dados do GPS:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - + // Dados do GPS em tabela + const gpsData: any[][] = []; if (registro.precisao !== null && registro.precisao !== undefined) { - doc.text(` Precisão: ${registro.precisao.toFixed(2)} metros`, 20, yPosition); - yPosition += 6; + gpsData.push(['Precisão', `${registro.precisao.toFixed(2)} metros`]); } - if (registro.altitude !== null && registro.altitude !== undefined) { - doc.text(` Altitude: ${registro.altitude.toFixed(2)} metros`, 20, yPosition); - yPosition += 6; + if (gpsData.length > 0) { + autoTable(doc, { + startY: yPosition, + head: [['Campo', 'Valor']], + body: gpsData, + theme: 'striped', + headStyles: { + fillColor: [41, 128, 185], + textColor: [255, 255, 255], + fontStyle: 'bold', + fontSize: 10 + }, + bodyStyles: { + fontSize: 10, + textColor: [0, 0, 0] + }, + columnStyles: { + 0: { cellWidth: 50, fontStyle: 'bold' }, + 1: { cellWidth: 140 } + }, + margin: { left: 15, right: 15 }, + styles: { cellPadding: 4 } + }); + + type JsPDFWithAutoTable4 = jsPDF & { + lastAutoTable?: { finalY: number }; + }; + const finalYGps = (doc as JsPDFWithAutoTable4).lastAutoTable?.finalY ?? yPosition + 10; + yPosition = finalYGps + 5; } - if (registro.altitudeAccuracy !== null && registro.altitudeAccuracy !== undefined) { - doc.text(` Precisão da Altitude: ${registro.altitudeAccuracy.toFixed(2)} metros`, 20, yPosition); - yPosition += 6; - } - - if (registro.heading !== null && registro.heading !== undefined) { - doc.text(` Direção (Heading): ${registro.heading.toFixed(2)}°`, 20, yPosition); - yPosition += 6; - } - - if (registro.speed !== null && registro.speed !== undefined) { - doc.text(` Velocidade: ${(registro.speed * 3.6).toFixed(2)} km/h`, 20, yPosition); - yPosition += 6; - } - - yPosition += 3; - - // Confiabilidade e Scores - doc.setFont('helvetica', 'bold'); - doc.text('Confiabilidade:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - + // Confiabilidade em tabela + const confiabilidadeData: any[][] = []; if (registro.confiabilidadeGPS !== null && registro.confiabilidadeGPS !== undefined) { const confiabilidadePercent = (registro.confiabilidadeGPS * 100).toFixed(1); - const confiabilidadeCor = registro.confiabilidadeGPS >= 0.7 ? [0, 128, 0] : registro.confiabilidadeGPS >= 0.4 ? [255, 165, 0] : [255, 0, 0]; - doc.setTextColor(confiabilidadeCor[0], confiabilidadeCor[1], confiabilidadeCor[2]); - doc.text(` Confiabilidade GPS (Frontend): ${confiabilidadePercent}%`, 20, yPosition); - doc.setTextColor(0, 0, 0); - yPosition += 6; + confiabilidadeData.push(['Confiabilidade GPS (Frontend)', `${confiabilidadePercent}%`]); } if (registro.scoreConfiancaBackend !== null && registro.scoreConfiancaBackend !== undefined) { const scorePercent = (registro.scoreConfiancaBackend * 100).toFixed(1); - const scoreCor = registro.scoreConfiancaBackend >= 0.7 ? [0, 128, 0] : registro.scoreConfiancaBackend >= 0.4 ? [255, 165, 0] : [255, 0, 0]; - doc.setTextColor(scoreCor[0], scoreCor[1], scoreCor[2]); - doc.text(` Score de Confiança (Backend): ${scorePercent}%`, 20, yPosition); + confiabilidadeData.push(['Score de Confiança (Backend)', `${scorePercent}%`]); + } + + if (confiabilidadeData.length > 0) { + doc.setFontSize(11); doc.setTextColor(0, 0, 0); - yPosition += 6; - } + doc.setFont('helvetica', 'bold'); + doc.text('Confiabilidade:', 15, yPosition); + yPosition += 8; - yPosition += 3; - - // Status de Validação - if (registro.suspeitaSpoofing !== null && registro.suspeitaSpoofing !== undefined) { - doc.setFont('helvetica', 'bold'); - doc.text('Status de Validação:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - - if (registro.suspeitaSpoofing) { - doc.setTextColor(255, 0, 0); - doc.setFont('helvetica', 'bold'); - doc.text(' ⚠️ MARCAÇÃO SUSPEITA DETECTADA', 20, yPosition); - doc.setFont('helvetica', 'normal'); - doc.setTextColor(0, 0, 0); - yPosition += 6; - } else { - doc.setTextColor(0, 128, 0); - doc.setFont('helvetica', 'bold'); - doc.text(' ✓ Localização validada com sucesso', 20, yPosition); - doc.setFont('helvetica', 'normal'); - doc.setTextColor(0, 0, 0); - yPosition += 6; - } - - if (registro.motivoSuspeita) { - doc.setTextColor(255, 0, 0); - const motivoLines = doc.splitTextToSize(` Motivo: ${registro.motivoSuspeita}`, 170); - doc.text(motivoLines, 20, yPosition); - yPosition += motivoLines.length * 5; - doc.setTextColor(0, 0, 0); - } - - yPosition += 3; - } - - // Avisos de Validação - if (registro.avisosValidacao && registro.avisosValidacao.length > 0) { - doc.setFont('helvetica', 'bold'); - doc.text('Avisos de Validação:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - - registro.avisosValidacao.forEach((aviso: string) => { - const avisoLines = doc.splitTextToSize(` • ${aviso}`, 170); - doc.text(avisoLines, 20, yPosition); - yPosition += avisoLines.length * 5; + autoTable(doc, { + startY: yPosition, + head: [['Campo', 'Valor']], + body: confiabilidadeData, + theme: 'striped', + headStyles: { + fillColor: [60, 60, 60], + textColor: [255, 255, 255], + fontStyle: 'bold', + fontSize: 10 + }, + bodyStyles: { + fontSize: 10 + }, + columnStyles: { + 0: { cellWidth: 80, fontStyle: 'bold' }, + 1: { cellWidth: 110 } + }, + margin: { left: 15, right: 15 }, + styles: { cellPadding: 4 }, + didParseCell: (data: any) => { + if (data.section === 'body' && data.column.index === 1) { + // Aplicar cores baseadas nos valores + const valorTexto = data.cell.text[0]; + const valorNum = parseFloat(valorTexto.replace('%', '')); + if (!isNaN(valorNum)) { + if (valorNum >= 70) { + data.cell.styles.textColor = [0, 128, 0]; + data.cell.styles.fontStyle = 'bold'; + } else if (valorNum >= 40) { + data.cell.styles.textColor = [255, 165, 0]; + data.cell.styles.fontStyle = 'bold'; + } else { + data.cell.styles.textColor = [255, 0, 0]; + data.cell.styles.fontStyle = 'bold'; + } + } + } + } }); - yPosition += 3; + type JsPDFWithAutoTable5 = jsPDF & { + lastAutoTable?: { finalY: number }; + }; + const finalYConf = (doc as JsPDFWithAutoTable5).lastAutoTable?.finalY ?? yPosition + 10; + yPosition = finalYConf + 5; } - // Análise de Propriedades GPS - doc.setFont('helvetica', 'bold'); - doc.text('Análise de Propriedades GPS:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; + // Status de Validação em destaque + if (registro.suspeitaSpoofing !== null && registro.suspeitaSpoofing !== undefined) { + const statusData: any[][] = []; + if (registro.suspeitaSpoofing) { + statusData.push(['Status', '⚠️ MARCAÇÃO SUSPEITA DETECTADA']); + if (registro.motivoSuspeita) { + statusData.push(['Motivo', registro.motivoSuspeita]); + } + } else { + statusData.push(['Status', '✓ Localização validada com sucesso']); + } + + if (statusData.length > 0) { + doc.setFontSize(11); + doc.setTextColor(0, 0, 0); + doc.setFont('helvetica', 'bold'); + doc.text('Status de Validação:', 15, yPosition); + yPosition += 8; + + autoTable(doc, { + startY: yPosition, + head: [['Campo', 'Valor']], + body: statusData, + theme: 'striped', + headStyles: { + fillColor: registro.suspeitaSpoofing ? [200, 0, 0] : [0, 128, 0], + textColor: [255, 255, 255], + fontStyle: 'bold', + fontSize: 10 + }, + bodyStyles: { + fontSize: 10 + }, + columnStyles: { + 0: { cellWidth: 50, fontStyle: 'bold' }, + 1: { cellWidth: 140 } + }, + margin: { left: 15, right: 15 }, + styles: { cellPadding: 4 }, + didParseCell: (data: any) => { + if (data.section === 'body' && data.column.index === 1) { + if (registro.suspeitaSpoofing) { + data.cell.styles.textColor = [200, 0, 0]; + data.cell.styles.fontStyle = 'bold'; + } else { + data.cell.styles.textColor = [0, 128, 0]; + data.cell.styles.fontStyle = 'bold'; + } + } + } + }); + + type JsPDFWithAutoTable6 = jsPDF & { + lastAutoTable?: { finalY: number }; + }; + const finalYStatus = (doc as JsPDFWithAutoTable6).lastAutoTable?.finalY ?? yPosition + 10; + yPosition = finalYStatus + 5; + } + } + + // Avisos de Validação em tabela + if (registro.avisosValidacao && registro.avisosValidacao.length > 0) { + const avisosData = registro.avisosValidacao.map((aviso: string) => ['', aviso]); + + doc.setFontSize(11); + doc.setTextColor(0, 0, 0); + doc.setFont('helvetica', 'bold'); + doc.text('Avisos de Validação:', 15, yPosition); + yPosition += 8; + + autoTable(doc, { + startY: yPosition, + head: [['', 'Aviso']], + body: avisosData, + theme: 'striped', + headStyles: { + fillColor: [255, 165, 0], + textColor: [255, 255, 255], + fontStyle: 'bold', + fontSize: 10 + }, + bodyStyles: { + fontSize: 10, + textColor: [0, 0, 0] + }, + columnStyles: { + 0: { cellWidth: 10 }, + 1: { cellWidth: 180 } + }, + margin: { left: 15, right: 15 }, + styles: { cellPadding: 4 } + }); + + type JsPDFWithAutoTable7 = jsPDF & { + lastAutoTable?: { finalY: number }; + }; + const finalYAvisos = (doc as JsPDFWithAutoTable7).lastAutoTable?.finalY ?? yPosition + 10; + yPosition = finalYAvisos + 5; + } + + // Análise de Propriedades GPS em tabela + const propriedadesData: any[][] = []; let propriedadesGPS = 0; let propriedadesTotais = 5; if (registro.altitude !== null && registro.altitude !== undefined && registro.altitude !== 0) { - doc.text(' ✓ Altitude disponível', 20, yPosition); + propriedadesData.push(['Altitude', '✓ Disponível']); propriedadesGPS++; } else { - doc.text(' ✗ Altitude não disponível', 20, yPosition); + propriedadesData.push(['Altitude', '✗ Não disponível']); } - yPosition += 5; if (registro.altitudeAccuracy !== null && registro.altitudeAccuracy !== undefined && registro.altitudeAccuracy > 0) { - doc.text(' ✓ Precisão de altitude disponível', 20, yPosition); + propriedadesData.push(['Precisão de Altitude', '✓ Disponível']); propriedadesGPS++; } else { - doc.text(' ✗ Precisão de altitude não disponível', 20, yPosition); + propriedadesData.push(['Precisão de Altitude', '✗ Não disponível']); } - yPosition += 5; if (registro.heading !== null && registro.heading !== undefined && !isNaN(registro.heading)) { - doc.text(' ✓ Direção (heading) disponível', 20, yPosition); + propriedadesData.push(['Direção (Heading)', '✓ Disponível']); propriedadesGPS++; } else { - doc.text(' ✗ Direção (heading) não disponível', 20, yPosition); + propriedadesData.push(['Direção (Heading)', '✗ Não disponível']); } - yPosition += 5; if (registro.speed !== null && registro.speed !== undefined && !isNaN(registro.speed)) { - doc.text(' ✓ Velocidade disponível', 20, yPosition); + propriedadesData.push(['Velocidade', '✓ Disponível']); propriedadesGPS++; } else { - doc.text(' ✗ Velocidade não disponível', 20, yPosition); + propriedadesData.push(['Velocidade', '✗ Não disponível']); } - yPosition += 5; if (registro.precisao !== null && registro.precisao !== undefined && registro.precisao < 20) { - doc.text(' ✓ Alta precisão GPS (< 20m)', 20, yPosition); + propriedadesData.push(['Precisão GPS', '✓ Alta precisão (< 20m)']); propriedadesGPS++; } else if (registro.precisao !== null && registro.precisao !== undefined && registro.precisao >= 20 && registro.precisao < 100) { - doc.text(' ⚠ Precisão média GPS (20-100m)', 20, yPosition); + propriedadesData.push(['Precisão GPS', '⚠ Precisão média (20-100m)']); propriedadesGPS += 0.5; } else { - doc.text(' ✗ Baixa precisão GPS (> 100m)', 20, yPosition); + propriedadesData.push(['Precisão GPS', '✗ Baixa precisão (> 100m)']); } - yPosition += 5; // Indicador de qualidade GPS const qualidadeGPS = (propriedadesGPS / propriedadesTotais) * 100; const qualidadeTexto = qualidadeGPS >= 80 ? 'Alta qualidade (GPS real)' : qualidadeGPS >= 50 ? 'Qualidade média' : 'Baixa qualidade (possível spoofing)'; const qualidadeCor = qualidadeGPS >= 80 ? [0, 128, 0] : qualidadeGPS >= 50 ? [255, 165, 0] : [255, 0, 0]; + propriedadesData.push(['Qualidade GPS', `${qualidadeTexto} (${qualidadeGPS.toFixed(0)}%)`]); - doc.setFont('helvetica', 'bold'); - doc.setTextColor(qualidadeCor[0], qualidadeCor[1], qualidadeCor[2]); - doc.text(`Qualidade GPS: ${qualidadeTexto} (${qualidadeGPS.toFixed(0)}% das propriedades)`, 20, yPosition); - doc.setFont('helvetica', 'normal'); + doc.setFontSize(11); doc.setTextColor(0, 0, 0); + doc.setFont('helvetica', 'bold'); + doc.text('Análise de Propriedades GPS:', 15, yPosition); yPosition += 8; + + autoTable(doc, { + startY: yPosition, + head: [['Propriedade', 'Status']], + body: propriedadesData, + theme: 'striped', + headStyles: { + fillColor: [60, 60, 60], + textColor: [255, 255, 255], + fontStyle: 'bold', + fontSize: 10 + }, + bodyStyles: { + fontSize: 10 + }, + columnStyles: { + 0: { cellWidth: 80, fontStyle: 'bold' }, + 1: { cellWidth: 110 } + }, + margin: { left: 15, right: 15 }, + styles: { cellPadding: 4 }, + didParseCell: (data: any) => { + if (data.section === 'body' && data.column.index === 1) { + const texto = data.cell.text[0]; + if (texto.includes('✓')) { + data.cell.styles.textColor = [0, 128, 0]; + data.cell.styles.fontStyle = 'bold'; + } else if (texto.includes('✗')) { + data.cell.styles.textColor = [200, 0, 0]; + } else if (texto.includes('⚠')) { + data.cell.styles.textColor = [255, 165, 0]; + data.cell.styles.fontStyle = 'bold'; + } + // Última linha (Qualidade GPS) + if (data.row.index === propriedadesData.length - 1) { + data.cell.styles.textColor = qualidadeCor; + data.cell.styles.fontStyle = 'bold'; + } + } + } + }); + + type JsPDFWithAutoTable8 = jsPDF & { + lastAutoTable?: { finalY: number }; + }; + const finalYPropriedades = (doc as JsPDFWithAutoTable8).lastAutoTable?.finalY ?? yPosition + 10; + yPosition = finalYPropriedades + 10; } // Validação de Geofencing (Localização Permitida) @@ -2488,11 +2704,10 @@ yPosition = 20; } - doc.setFont('helvetica', 'bold'); doc.setFontSize(12); + doc.setTextColor(41, 128, 185); + doc.setFont('helvetica', 'bold'); doc.text('VALIDAÇÃO DE LOCALIZAÇÃO PERMITIDA', 15, yPosition); - doc.setFont('helvetica', 'normal'); - doc.setFontSize(10); yPosition += 10; if (registro.enderecoMarcacaoEsperado || registro.dentroRaioPermitido !== undefined) { @@ -2519,89 +2734,43 @@ } } - doc.setFont('helvetica', 'bold'); - doc.text('Endereço Esperado:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - - doc.text(` Nome: ${enderecoEsperadoNome}`, 20, yPosition); - yPosition += 6; - - const enderecoLines = doc.splitTextToSize(` Endereço: ${enderecoEsperadoEndereco}`, 170); - doc.text(enderecoLines, 20, yPosition); - yPosition += enderecoLines.length * 5 + 3; + const geofencingData: any[][] = [ + ['Endereço Esperado', enderecoEsperadoNome], + ['Localização', enderecoEsperadoEndereco] + ]; if (enderecoEsperadoLatitude !== null && enderecoEsperadoLongitude !== null) { - doc.text(` Coordenadas: ${enderecoEsperadoLatitude.toFixed(6)}, ${enderecoEsperadoLongitude.toFixed(6)}`, 20, yPosition); - yPosition += 6; + geofencingData.push(['Coordenadas Esperadas', `${enderecoEsperadoLatitude.toFixed(6)}, ${enderecoEsperadoLongitude.toFixed(6)}`]); } - yPosition += 3; - - doc.setFont('helvetica', 'bold'); - doc.text('Localização do Registro:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - - doc.text(` Coordenadas: ${registro.latitude.toFixed(6)}, ${registro.longitude.toFixed(6)}`, 20, yPosition); - yPosition += 6; + geofencingData.push(['Coordenadas do Registro', `${registro.latitude.toFixed(6)}, ${registro.longitude.toFixed(6)}`]); if (registro.distanciaEnderecoEsperado !== null && registro.distanciaEnderecoEsperado !== undefined) { const distanciaKm = (registro.distanciaEnderecoEsperado / 1000).toFixed(2); const distanciaMetros = registro.distanciaEnderecoEsperado.toFixed(0); - - if (registro.distanciaEnderecoEsperado >= 1000) { - doc.text(` Distância: ${distanciaKm} km (${distanciaMetros} metros)`, 20, yPosition); - } else { - doc.text(` Distância: ${distanciaMetros} metros`, 20, yPosition); - } - yPosition += 6; + const distanciaTexto = registro.distanciaEnderecoEsperado >= 1000 + ? `${distanciaKm} km (${distanciaMetros} metros)` + : `${distanciaMetros} metros`; + geofencingData.push(['Distância', distanciaTexto]); } - yPosition += 3; - - doc.setFont('helvetica', 'bold'); - doc.text('Raio Permitido:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - if (registro.raioToleranciaUsado !== null && registro.raioToleranciaUsado !== undefined) { const raioKm = (registro.raioToleranciaUsado / 1000).toFixed(2); const raioMetros = registro.raioToleranciaUsado.toFixed(0); - - if (registro.raioToleranciaUsado >= 1000) { - doc.text(` ${raioKm} km (${raioMetros} metros)`, 20, yPosition); + const raioTexto = registro.raioToleranciaUsado >= 1000 + ? `${raioKm} km (${raioMetros} metros)` + : `${raioMetros} metros`; + geofencingData.push(['Raio Permitido', raioTexto]); } else { - doc.text(` ${raioMetros} metros`, 20, yPosition); - } - yPosition += 6; - } else { - doc.text(' Não configurado', 20, yPosition); - yPosition += 6; + geofencingData.push(['Raio Permitido', 'Não configurado']); } - yPosition += 3; - // Status da validação - doc.setFont('helvetica', 'bold'); - doc.text('Status:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - + let statusTexto = 'Não validado'; if (registro.dentroRaioPermitido === true) { - doc.setTextColor(0, 128, 0); - doc.setFont('helvetica', 'bold'); - doc.text(' ✓ DENTRO DO RAIO PERMITIDO', 20, yPosition); - doc.setFont('helvetica', 'normal'); - doc.setTextColor(0, 0, 0); + statusTexto = '✓ DENTRO DO RAIO PERMITIDO'; } else if (registro.dentroRaioPermitido === false) { - doc.setTextColor(255, 0, 0); - doc.setFont('helvetica', 'bold'); - doc.text(' ⚠️ FORA DO RAIO PERMITIDO', 20, yPosition); - doc.setFont('helvetica', 'normal'); - doc.setTextColor(0, 0, 0); - yPosition += 6; - + statusTexto = '⚠️ FORA DO RAIO PERMITIDO'; if ( registro.distanciaEnderecoEsperado !== null && registro.distanciaEnderecoEsperado !== undefined && @@ -2611,34 +2780,75 @@ const distanciaExcedente = registro.distanciaEnderecoEsperado - registro.raioToleranciaUsado; const distanciaExcedenteKm = (distanciaExcedente / 1000).toFixed(2); const distanciaExcedenteMetros = distanciaExcedente.toFixed(0); + const excedenteTexto = distanciaExcedente >= 1000 + ? `${distanciaExcedenteKm} km além do permitido` + : `${distanciaExcedenteMetros} metros além do permitido`; + geofencingData.push(['Distância Excedente', excedenteTexto]); + } + } + geofencingData.push(['Status', statusTexto]); - if (distanciaExcedente >= 1000) { - doc.text(` ${distanciaExcedenteKm} km além do permitido`, 20, yPosition); - } else { - doc.text(` ${distanciaExcedenteMetros} metros além do permitido`, 20, yPosition); + autoTable(doc, { + startY: yPosition, + head: [['Campo', 'Valor']], + body: geofencingData, + theme: 'striped', + headStyles: { + fillColor: [41, 128, 185], + textColor: [255, 255, 255], + fontStyle: 'bold', + fontSize: 10 + }, + bodyStyles: { + fontSize: 10 + }, + columnStyles: { + 0: { cellWidth: 60, fontStyle: 'bold' }, + 1: { cellWidth: 130 } + }, + margin: { left: 15, right: 15 }, + styles: { cellPadding: 4 }, + didParseCell: (data: any) => { + if (data.section === 'body' && data.column.index === 1) { + const texto = data.cell.text[0]; + if (texto.includes('✓ DENTRO')) { + data.cell.styles.textColor = [0, 128, 0]; + data.cell.styles.fontStyle = 'bold'; + } else if (texto.includes('⚠️ FORA')) { + data.cell.styles.textColor = [200, 0, 0]; + data.cell.styles.fontStyle = 'bold'; + } } } + }); - yPosition += 6; + type JsPDFWithAutoTable9 = jsPDF & { + lastAutoTable?: { finalY: number }; + }; + const finalYGeofencing = (doc as JsPDFWithAutoTable9).lastAutoTable?.finalY ?? yPosition + 10; + yPosition = finalYGeofencing + 5; - doc.setFont('helvetica', 'normal'); - doc.setTextColor(0, 0, 0); + // Observação se fora do raio + if (registro.dentroRaioPermitido === false) { doc.setFontSize(9); + doc.setTextColor(100, 100, 100); const observacaoLines = doc.splitTextToSize( 'O registro foi realizado fora da área permitida de marcação de ponto. Verifique se o funcionário possui autorização para trabalho remoto ou deslocamento.', 170 ); doc.text(observacaoLines, 20, yPosition); - yPosition += observacaoLines.length * 4; + yPosition += observacaoLines.length * 4 + 5; doc.setFontSize(10); - } else { - doc.text(' Não validado', 20, yPosition); + doc.setTextColor(0, 0, 0); } - yPosition += 8; + yPosition += 5; } else { + doc.setFontSize(10); + doc.setTextColor(100, 100, 100); doc.text('Validação de localização permitida não configurada para este registro.', 15, yPosition); yPosition += 8; + doc.setTextColor(0, 0, 0); } } @@ -2649,139 +2859,112 @@ yPosition = 20; } + doc.setFontSize(12); + doc.setTextColor(41, 128, 185); doc.setFont('helvetica', 'bold'); doc.text('DADOS TÉCNICOS', 15, yPosition); - doc.setFont('helvetica', 'normal'); + yPosition += 10; - yPosition += 8; - doc.setFontSize(10); + // Consolidar todos os dados técnicos em uma única tabela + const dadosTecnicosData: any[][] = []; // Informações de Rede if (registro.ipAddress || registro.ipPublico || registro.ipLocal) { - doc.setFont('helvetica', 'bold'); - doc.text('Rede:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - if (registro.ipAddress) { - doc.text(` IP: ${registro.ipAddress}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['IP', registro.ipAddress]); } - if (registro.ipPublico) { - doc.text(` IP Público: ${registro.ipPublico}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['IP Público', registro.ipPublico]); } - if (registro.ipLocal) { - doc.text(` IP Local: ${registro.ipLocal}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['IP Local', registro.ipLocal]); } - - yPosition += 3; } // Informações do Navegador if (registro.browser || registro.userAgent) { - doc.setFont('helvetica', 'bold'); - doc.text('Navegador:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - if (registro.browser) { - doc.text(` Navegador: ${registro.browser}${registro.browserVersion ? ` ${registro.browserVersion}` : ''}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Navegador', `${registro.browser}${registro.browserVersion ? ` ${registro.browserVersion}` : ''}`]); } - if (registro.engine) { - doc.text(` Engine: ${registro.engine}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Engine', registro.engine]); } - if (registro.userAgent) { - // Quebrar user agent em múltiplas linhas se necessário - const userAgentLines = doc.splitTextToSize(` User Agent: ${registro.userAgent}`, 170); - doc.text(userAgentLines, 20, yPosition); - yPosition += userAgentLines.length * 6; + dadosTecnicosData.push(['User Agent', registro.userAgent]); } - - yPosition += 3; } // Informações do Sistema if (registro.sistemaOperacional || registro.arquitetura) { - doc.setFont('helvetica', 'bold'); - doc.text('Sistema:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - if (registro.sistemaOperacional) { - doc.text(` SO: ${registro.sistemaOperacional}${registro.osVersion ? ` ${registro.osVersion}` : ''}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Sistema Operacional', `${registro.sistemaOperacional}${registro.osVersion ? ` ${registro.osVersion}` : ''}`]); } - if (registro.arquitetura) { - doc.text(` Arquitetura: ${registro.arquitetura}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Arquitetura', registro.arquitetura]); } - if (registro.plataforma) { - doc.text(` Plataforma: ${registro.plataforma}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Plataforma', registro.plataforma]); } - - yPosition += 3; } // Informações do Dispositivo if (registro.deviceType || registro.screenResolution) { - doc.setFont('helvetica', 'bold'); - doc.text('Dispositivo:', 15, yPosition); - doc.setFont('helvetica', 'normal'); - yPosition += 6; - if (registro.deviceType) { - doc.text(` Tipo: ${registro.deviceType}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Tipo de Dispositivo', registro.deviceType]); } - if (registro.deviceModel) { - doc.text(` Modelo: ${registro.deviceModel}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Modelo', registro.deviceModel]); } - if (registro.screenResolution) { - doc.text(` Resolução: ${registro.screenResolution}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Resolução', registro.screenResolution]); } - if (registro.coresTela) { - doc.text(` Cores: ${registro.coresTela}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Cores da Tela', registro.coresTela]); } - if (registro.isMobile || registro.isTablet || registro.isDesktop) { const tipoDispositivo = registro.isMobile ? 'Mobile' : registro.isTablet ? 'Tablet' : 'Desktop'; - doc.text(` Categoria: ${tipoDispositivo}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Categoria', tipoDispositivo]); } - if (registro.idioma) { - doc.text(` Idioma: ${registro.idioma}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Idioma', registro.idioma]); } - if (registro.connectionType) { - doc.text(` Conexão: ${registro.connectionType}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Tipo de Conexão', registro.connectionType]); } - if (registro.memoryInfo) { - doc.text(` Memória: ${registro.memoryInfo}`, 20, yPosition); - yPosition += 6; + dadosTecnicosData.push(['Memória', registro.memoryInfo]); } + } - yPosition += 3; + if (dadosTecnicosData.length > 0) { + autoTable(doc, { + startY: yPosition, + head: [['Campo', 'Valor']], + body: dadosTecnicosData, + theme: 'striped', + headStyles: { + fillColor: [60, 60, 60], + textColor: [255, 255, 255], + fontStyle: 'bold', + fontSize: 10 + }, + bodyStyles: { + fontSize: 9, + textColor: [0, 0, 0] + }, + columnStyles: { + 0: { cellWidth: 60, fontStyle: 'bold' }, + 1: { cellWidth: 130 } + }, + margin: { left: 15, right: 15 }, + styles: { cellPadding: 3 } + }); + + type JsPDFWithAutoTable10 = jsPDF & { + lastAutoTable?: { finalY: number }; + }; + const finalYTecnicos = (doc as JsPDFWithAutoTable10).lastAutoTable?.finalY ?? yPosition + 10; + yPosition = finalYTecnicos + 10; } // Imagem capturada (se disponível) @@ -2869,17 +3052,38 @@ } } - // Rodapé + // Rodapé melhorado const pageCount = doc.getNumberOfPages(); for (let i = 1; i <= pageCount; i++) { doc.setPage(i); + + // Linha decorativa no rodapé + doc.setDrawColor(200, 200, 200); + doc.setLineWidth(0.3); + doc.line(15, doc.internal.pageSize.getHeight() - 20, 195, doc.internal.pageSize.getHeight() - 20); + + // Texto do rodapé doc.setFontSize(8); - doc.setTextColor(128, 128, 128); + doc.setTextColor(100, 100, 100); + doc.setFont('helvetica', 'normal'); + const dataGeracao = new Date().toLocaleDateString('pt-BR', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); doc.text( - `SGSE - Sistema de Gerenciamento de Secretaria | Página ${i} de ${pageCount}`, - doc.internal.pageSize.getWidth() / 2, - doc.internal.pageSize.getHeight() - 10, - { align: 'center' } + `SGSE - Sistema de Gerenciamento de Secretaria de Esportes`, + 15, + doc.internal.pageSize.getHeight() - 12, + { align: 'left' } + ); + doc.text( + `Gerado em: ${dataGeracao} | Página ${i} de ${pageCount}`, + 195, + doc.internal.pageSize.getHeight() - 12, + { align: 'right' } ); } From 35e7c10ed0b67e82168aacb5dcbc3932e0dc3025 Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Sun, 23 Nov 2025 13:13:24 -0300 Subject: [PATCH 08/11] refactor: update ErrorModal and RegistroPonto components for improved UI and functionality - Refactored ErrorModal to use a div-based layout with enhanced animations and accessibility features. - Updated RegistroPonto to include a new loading state and improved modal handling for webcam capture. - Enhanced styling for better visual consistency and user experience across modals and registration cards. - Introduced comparative balance calculations in RegistroPonto for better visibility of time discrepancies. --- apps/web/src/lib/components/ErrorModal.svelte | 106 ++++-- .../lib/components/ponto/RegistroPonto.svelte | 342 +++++++++++------ .../ponto/RelogioSincronizado.svelte | 35 +- .../ponto/SaldoDiarioComparativoBadge.svelte | 46 +++ .../registro-pontos/+page.svelte | 352 ++++++++++++++---- 5 files changed, 660 insertions(+), 221 deletions(-) create mode 100644 apps/web/src/lib/components/ponto/SaldoDiarioComparativoBadge.svelte diff --git a/apps/web/src/lib/components/ErrorModal.svelte b/apps/web/src/lib/components/ErrorModal.svelte index c7de436..8367d76 100644 --- a/apps/web/src/lib/components/ErrorModal.svelte +++ b/apps/web/src/lib/components/ErrorModal.svelte @@ -23,38 +23,41 @@ details.match(/^\d+\./); // Começa com número (lista numerada) }); - let modalRef: HTMLDialogElement; - function handleClose() { open = false; onClose(); } - - $effect(() => { - if (open && modalRef) { - modalRef.showModal(); - } else if (!open && modalRef) { - modalRef.close(); - } - }); {#if open} - e.target === e.currentTarget && handleClose()} + +
{/if} + + diff --git a/apps/web/src/lib/components/ponto/RegistroPonto.svelte b/apps/web/src/lib/components/ponto/RegistroPonto.svelte index b6c3432..c084e8c 100644 --- a/apps/web/src/lib/components/ponto/RegistroPonto.svelte +++ b/apps/web/src/lib/components/ponto/RegistroPonto.svelte @@ -13,7 +13,7 @@ getTipoRegistroLabel, getProximoTipoRegistro } from '$lib/utils/ponto'; - import { LogIn, LogOut, Clock, CheckCircle2, XCircle, TrendingUp, TrendingDown, Printer } from 'lucide-svelte'; + import { LogIn, LogOut, Clock, CheckCircle2, XCircle, TrendingUp, TrendingDown, Printer, Camera } from 'lucide-svelte'; import type { Id } from '@sgse-app/backend/convex/_generated/dataModel'; import jsPDF from 'jspdf'; import logoGovPE from '$lib/assets/logo_governo_PE.png'; @@ -64,6 +64,7 @@ let justificativa = $state(''); let mostrandoModalConfirmacao = $state(false); let dataHoraAtual = $state<{ data: string; hora: string } | null>(null); + let aguardandoProcessamento = $state(false); const registrosHoje = $derived(registrosHojeQuery?.data || []); const config = $derived(configQuery?.data); @@ -312,6 +313,7 @@ }, 1000); } catch (error) { console.error('Erro ao registrar ponto:', error); + aguardandoProcessamento = false; let mensagemErro = 'Erro desconhecido ao registrar ponto'; let detalhesErro = 'Tente novamente em alguns instantes.'; @@ -389,6 +391,7 @@ } finally { registrando = false; coletandoInfo = false; + aguardandoProcessamento = false; } } @@ -514,6 +517,7 @@ function confirmarRegistro() { mostrandoModalConfirmacao = false; + aguardandoProcessamento = true; registrarPonto(); } @@ -753,25 +757,7 @@ return !registrando && !coletandoInfo && config !== undefined && !estaDispensado && temFuncionarioAssociado; }); - // Referência para o modal - let modalRef: HTMLDivElement | null = $state(null); - - // Efeito para garantir que o modal fique visível quando abrir - $effect(() => { - if (mostrandoWebcam && modalRef) { - // Aguardar um frame para garantir que o DOM foi atualizado - setTimeout(() => { - if (modalRef) { - modalRef.scrollIntoView({ behavior: 'smooth', block: 'center' }); - // Também garantir que o modal-box esteja visível - const modalBox = modalRef.querySelector('.modal-box'); - if (modalBox) { - (modalBox as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'center' }); - } - } - }, 100); - } - }); + // Os modais agora são centralizados automaticamente via CSS (fixed inset-0 flex items-center justify-center) // Solicitar permissões automaticamente ao montar o componente onMount(async () => { @@ -922,71 +908,95 @@
{/if} - -
-
-

Registrar Ponto

-
- + +
+
+ +
+
+ +
+

Registrar Ponto

-
- {#if sucesso} -
- - {sucesso} -
- {/if} -
-

Próximo registro: {tipoLabel}

+ +
+
+
+
- -
- - -
- - + {:else if !temFuncionarioAssociado} + + Funcionário Não Associado + {:else if estaDispensado} + + Registro Indisponível + {:else if proximoTipo === 'entrada' || proximoTipo === 'retorno_almoco'} + + Registrar Entrada + {:else} + + Registrar Saída + {/if} + + + +
+ + +
+ + + {#if sucesso} +
+ + {sucesso} +
+ {/if} + + +
+
+
+ {#if proximoTipo === 'entrada' || proximoTipo === 'retorno_almoco'} + + {:else} + + {/if} +
+
+

Próximo Registro

+

{tipoLabel}

+
+
@@ -1320,49 +1330,111 @@ {#if mostrandoWebcam}