From d50760f0db1fdcaad18d4ec932a69739432ae0fa Mon Sep 17 00:00:00 2001 From: deyvisonwanderley Date: Thu, 20 Nov 2025 14:25:52 -0300 Subject: [PATCH] refactor: improve point management UI and query handling - Updated the logic for handling query parameters in point management, ensuring better state management when no employee is selected. - Enhanced the UI for editing and adjusting point records with a more modern card layout and improved input fields. - Introduced loading states for queries to provide better user feedback during data retrieval. - Refactored the rendering of records and homologations to improve performance and user experience. --- .../controle-ponto/homologacao/+page.svelte | 664 ++++++++++-------- 1 file changed, 361 insertions(+), 303 deletions(-) diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/controle-ponto/homologacao/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/controle-ponto/homologacao/+page.svelte index fbedff7..dafe028 100644 --- a/apps/web/src/routes/(dashboard)/recursos-humanos/controle-ponto/homologacao/+page.svelte +++ b/apps/web/src/routes/(dashboard)/recursos-humanos/controle-ponto/homologacao/+page.svelte @@ -112,20 +112,21 @@ const registrosQueryParams = $derived.by(() => { // Verificar se funcionarioSelecionado não é string vazia if (!funcionarioSelecionado || funcionarioSelecionado === '') { - console.log('⏭️ [DEBUG] registrosQueryParams: skip (sem funcionário selecionado)'); - return 'skip'; + return undefined; } - const params = { + return { funcionarioId: funcionarioSelecionado as Id<'funcionarios'>, dataInicio: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]!, dataFim: new Date().toISOString().split('T')[0]!, }; - console.log('📤 [DEBUG] registrosQueryParams:', params); - return params; }); const homologacoesQuery = useQuery(api.pontos.listarHomologacoes, homologacoesParams); - const registrosQuery = useQuery(api.pontos.listarRegistrosPeriodo, registrosQueryParams); + const registrosQuery = $derived( + registrosQueryParams + ? useQuery(api.pontos.listarRegistrosPeriodo, registrosQueryParams) + : null + ); const subordinados = $derived(subordinadosQuery?.data || []); const motivos = $derived(motivosQuery?.data); @@ -133,22 +134,15 @@ // Registros já filtrados pela query no backend const registros = $derived.by(() => { - if (!funcionarioSelecionado || funcionarioSelecionado === '') { + if (!funcionarioSelecionado || funcionarioSelecionado === '' || !registrosQuery) { return []; } - const dados = registrosQuery?.data; - console.log('🔍 [DEBUG] funcionarioSelecionado:', funcionarioSelecionado); - console.log('🔍 [DEBUG] registrosQuery?.data:', dados); - console.log('🔍 [DEBUG] registrosQuery?.status:', registrosQuery?.status); + const dados = registrosQuery.data; if (!dados || !Array.isArray(dados)) { - console.log('⚠️ [DEBUG] Dados não são array ou estão vazios'); return []; } // A query do backend já filtra pelo funcionário, mas adicionamos verificação extra - // Converter ambos para string para garantir comparação correta - const filtrados = dados.filter((r) => String(r.funcionarioId) === String(funcionarioSelecionado)); - console.log('✅ [DEBUG] Registros filtrados:', filtrados.length, filtrados); - return filtrados; + return dados.filter((r) => String(r.funcionarioId) === String(funcionarioSelecionado)); }); // Verificar se é gestor (tem subordinados) @@ -388,33 +382,40 @@ {#if modoEdicao && registroSelecionado}
-
- -
-
-

- - Homologar Registro de Ponto -

- {#if dataRegistroFormatada} -

- Registro do dia {dataRegistroFormatada} -

- {/if} +
+ +
+
+
+ +
+
+

+ Homologar Registro de Ponto +

+ {#if dataRegistroFormatada} +
+ + + Registro do dia {dataRegistroFormatada} + +
+ {/if} +
- -
+ +
-
@@ -499,172 +520,201 @@ {#if abaAtiva === 'ajustar'} -
- -
- - +
+ +
+
+
+
+ +
+
+

Tipo de Ajuste

+

Selecione o tipo de ajuste a ser aplicado

+
+
+
+ +
+
- -
- - - -
-

-
- Início do Período -

-
-
- - -
- -
- - -
-
-
- - -
- -
- - -
-

-
- Fim do Período -

-
-
- - -
- -
- - -
-
-
- - - {#if dataInicioAjuste && horaInicioAjuste && dataFimAjuste && horaFimAjuste} - {@const periodoCalculado = calcularPeriodo(dataInicioAjuste, horaInicioAjuste, dataFimAjuste, horaFimAjuste)} - {#if periodoCalculado.dias > 0 || periodoCalculado.horas > 0 || periodoCalculado.minutos > 0} -
-
Período Calculado:
-
- {periodoCalculado.dias > 0 ? `${periodoCalculado.dias} dia${periodoCalculado.dias > 1 ? 's' : ''} ` : ''} - {periodoCalculado.horas > 0 ? `${periodoCalculado.horas} hora${periodoCalculado.horas > 1 ? 's' : ''} ` : ''} - {periodoCalculado.minutos > 0 ? `${periodoCalculado.minutos} minuto${periodoCalculado.minutos > 1 ? 's' : ''}` : ''} - {#if periodoCalculado.dias === 0 && periodoCalculado.horas === 0 && periodoCalculado.minutos === 0} - Período inválido - {/if} + +
+
+
+
+
+ +
+
+

Período do Ajuste

+

Defina o período de início e fim do ajuste

- {/if} - {/if} -
+ Obrigatório +
- -
-
- - +
+ +
+ + +
+
+
+ + +
+ +
+ + +
+

+
+ Fim do Período +

+
+
+ + +
+ +
+ + +
+
+
+ + + {#if dataInicioAjuste && horaInicioAjuste && dataFimAjuste && horaFimAjuste} + {@const periodoCalculado = calcularPeriodo(dataInicioAjuste, horaInicioAjuste, dataFimAjuste, horaFimAjuste)} + {#if periodoCalculado.dias > 0 || periodoCalculado.horas > 0 || periodoCalculado.minutos > 0} +
+
+ +
Período Calculado
+
+
+ {periodoCalculado.dias > 0 ? `${periodoCalculado.dias} dia${periodoCalculado.dias > 1 ? 's' : ''} ` : ''} + {periodoCalculado.horas > 0 ? `${periodoCalculado.horas} hora${periodoCalculado.horas > 1 ? 's' : ''} ` : ''} + {periodoCalculado.minutos > 0 ? `${periodoCalculado.minutos} minuto${periodoCalculado.minutos > 1 ? 's' : ''}` : ''} +
+
{/if} - -
- -
- - + {/if}
- -
- - + +
+
+

+
+ Motivo e Justificativa +

+
+
+ + +
+ +
+ + +
+
+
+
+ + +
+
+

+
+ Observações Adicionais +

+
+ +
+
-
- -
@@ -675,55 +725,61 @@ {/if} - {#if funcionarioSelecionado && !modoEdicao} + {#if funcionarioSelecionado}

Registros do Funcionário

- {#if registros.length === 0} + {#if registrosQuery?.status === 'Loading'} +
+ +
+ {:else if registros.length === 0}
Nenhum registro encontrado
{:else}
- - - - - - - - - - - - {#each registros as registro} +
+
DataTipoHorárioStatusAções
+ - - - - - + + + + + - {/each} - -
{registro.data} - {getTipoRegistroLabel(registro.tipo)} - {formatarHoraPonto(registro.hora, registro.minuto)} - - {registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'} - - - - DataTipoHorárioStatusAções
+ + + {#each registros as registro} + + {registro.data} + + {getTipoRegistroLabel(registro.tipo)} + + {formatarHoraPonto(registro.hora, registro.minuto)} + + + {registro.dentroDoPrazo ? 'Dentro do Prazo' : 'Fora do Prazo'} + + + + + + + {/each} + + +
{/if}
@@ -731,27 +787,30 @@ {/if} - {#if !modoEdicao} -
-
-

- Histórico de Homologações - {#if funcionarioSelecionado} - - - Funcionário selecionado - - {:else} - - - Todas as homologações do seu time - - {/if} -

- - {#if homologacoes.length === 0} -
- Nenhuma homologação encontrada -
+
+
+

+ Histórico de Homologações + {#if funcionarioSelecionado} + + - Funcionário selecionado + {:else} + + - Todas as homologações do seu time + + {/if} +

+ + {#if homologacoesQuery?.status === 'Loading'} +
+ +
+ {:else if homologacoes.length === 0} +
+ Nenhuma homologação encontrada +
+ {:else}
@@ -860,7 +919,6 @@ {/if} - {/if} {#if mostrandoModalDetalhes && homologacaoSelecionada}