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

fix: enhance data handling in vacation dashboard by adding array checks and improving chart data structure for better stability and performance

Browse Source
This commit is contained in:
deyvisonwanderley
2025-11-29 23:25:14 -03:00
parent 545e119367
commit 298326e264
1 changed files with 72 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
View File

@@ -2,7 +2,7 @@
import { goto } from '$app/navigation';
import { resolve } from '$app/paths';
import { onMount, tick } from 'svelte';
import { SvelteDate, SvelteMap } from 'svelte/reactivity';
import { SvelteDate, SvelteMap, SvelteSet } from 'svelte/reactivity';
import { useQuery, useConvexClient } from 'convex-svelte';
import { api } from '@sgse-app/backend/convex/_generated/api';
import type { FunctionReturnType } from 'convex/server';
@@ -110,7 +110,7 @@
// Usar último valor válido ou array vazio
const solicitacoes = $derived<TodasSolicitacoes>(
todasSolicitacoesQuery?.data ?? ultimasSolicitacoesValidas
(todasSolicitacoesQuery?.data ?? ultimasSolicitacoesValidas) || []
);
// Filtros Dashboard
@@ -153,6 +153,9 @@
periodoFim: string;
}
): TodasSolicitacoes {
if (!Array.isArray(lista)) {
return [];
}
return lista.filter((periodo) => {
if (filtros.status !== 'todos' && periodo.status !== filtros.status) {
return false;
@@ -271,14 +274,14 @@
});
const solicitacoesAprovadas = $derived(
solicitacoesFiltradas.filter(
(Array.isArray(solicitacoesFiltradas) ? solicitacoesFiltradas : []).filter(
(p) =>
p.status === 'aprovado' || p.status === 'data_ajustada_aprovada' || p.status === 'EmFérias'
)
);
const periodosDetalhados = $derived<Array<PeriodoDetalhado>>(
solicitacoesAprovadas
(Array.isArray(solicitacoesAprovadas) ? solicitacoesAprovadas : [])
.map((periodo) => ({
feriasId: periodo._id,
funcionarioId: periodo.funcionarioId,
@@ -303,6 +306,10 @@
(() => {
const agregados = new SvelteMap<string, PeriodoPorMes>();
if (!Array.isArray(periodosDetalhados)) {
return [];
}
for (const periodo of periodosDetalhados) {
const inicio = new SvelteDate(`${periodo.dataInicio}T00:00:00`);
const chave = `${inicio.getFullYear()}-${String(inicio.getMonth() + 1).padStart(2, '0')}`;
@@ -531,19 +538,41 @@
}
// Dados para gráfico de área - Funcionários de férias nos próximos 12 meses
const chartDataFuncionariosFerias = $derived(() => {
const hoje = new Date();
type ChartData = {
labels: string[];
datasets: Array<{
label: string;
data: number[];
backgroundColor: string[];
borderColor: string;
borderWidth: number;
pointBackgroundColor: string[];
pointBorderColor: string;
pointBorderWidth: number;
pointRadius: number;
pointHoverRadius: number;
pointHoverBackgroundColor: string;
pointHoverBorderColor: string;
pointHoverBorderWidth: number;
fill: boolean;
tension: number;
spanGaps: boolean;
}>;
};
const chartDataFuncionariosFerias: ChartData = $derived.by(() => {
// Sempre criar os 12 meses, mesmo sem dados
const hoje = new SvelteDate();
hoje.setHours(0, 0, 0, 0);
// Criar array com os próximos 12 meses
const meses: Array<{ mes: string; dataInicio: Date; dataFim: Date; quantidade: number }> = [];
const meses: Array<{ mes: string; dataInicio: SvelteDate; dataFim: SvelteDate; quantidade: number }> = [];
for (let i = 0; i < 12; i++) {
const dataInicioMes = new Date(hoje.getFullYear(), hoje.getMonth() + i, 1);
const dataFimMes = new Date(hoje.getFullYear(), hoje.getMonth() + i + 1, 0);
const dataInicioMes = new SvelteDate(hoje.getFullYear(), hoje.getMonth() + i, 1);
const dataFimMes = new SvelteDate(hoje.getFullYear(), hoje.getMonth() + i + 1, 0);
dataFimMes.setHours(23, 59, 59, 999);
const mesLabel = format(dataInicioMes, 'MMM/yyyy', { locale: ptBR });
const mesLabel = format(new Date(dataInicioMes.getTime()), 'MMM/yyyy', { locale: ptBR });
meses.push({
mes: mesLabel,
dataInicio: dataInicioMes,
@@ -552,7 +581,8 @@
});
}
// Filtrar apenas solicitações aprovadas que estão ou estarão em férias
// Verificação de segurança e filtrar apenas solicitações aprovadas
if (ultimasSolicitacoesValidas && Array.isArray(ultimasSolicitacoesValidas)) {
const solicitacoesAprovadas = ultimasSolicitacoesValidas.filter(
(s) =>
s.status === 'aprovado' ||
@@ -562,19 +592,19 @@
// Calcular quantos funcionários estarão de férias em cada mês
meses.forEach((mesInfo) => {
const funcionariosEmFerias = new Set<string>();
const funcionariosEmFerias = new SvelteSet<string>();
solicitacoesAprovadas.forEach((solicitacao) => {
if (!solicitacao.funcionarioId) return;
const dataInicio = new Date(solicitacao.dataInicio);
const dataFim = new Date(solicitacao.dataFim);
const dataInicio = new SvelteDate(solicitacao.dataInicio);
const dataFim = new SvelteDate(solicitacao.dataFim);
dataInicio.setHours(0, 0, 0, 0);
dataFim.setHours(23, 59, 59, 999);
// Verificar se o período de férias se sobrepõe com o mês
if (
(dataInicio <= mesInfo.dataFim && dataFim >= mesInfo.dataInicio)
(dataInicio.getTime() <= mesInfo.dataFim.getTime() && dataFim.getTime() >= mesInfo.dataInicio.getTime())
) {
funcionariosEmFerias.add(String(solicitacao.funcionarioId));
}
@@ -582,6 +612,7 @@
mesInfo.quantidade = funcionariosEmFerias.size;
});
}
// Cores harmoniosas com o tema (gradiente de azul primary para accent)
const corBase = '#3b82f6'; // Azul primary
@@ -2475,12 +2506,12 @@
</p>
</div>
</div>
<div class="bg-base-200/40 w-full overflow-x-auto rounded-xl p-4">
{#if chartDataFuncionariosFerias.labels.length === 0}
<div class="flex h-96 items-center justify-center">
<p class="text-base-content/60">Sem dados registrados até o momento.</p>
</div>
<div class="bg-base-200/40 w-full overflow-x-auto rounded-xl p-4">
{#if chartDataFuncionariosFerias.labels && chartDataFuncionariosFerias.labels.length > 0}
<AreaChart data={chartDataFuncionariosFerias} height={400} />
{:else}
<div class="flex h-96 items-center justify-center">
<p class="text-base-content/60">Carregando dados do gráfico...</p>
</div>
{/if}
</div>