Merge pull request #23 from killer-cf/correcao-ferias

Correcao ferias

apps/web/src/routes/(dashboard)/perfil/+page.svelte

@@ -18,9 +18,7 @@
 		'meu-perfil' | 'minhas-ferias' | 'minhas-ausencias' | 'aprovar-ferias' | 'aprovar-ausencias'
 	>('meu-perfil');
 
-	let solicitacaoSelecionada = $state<FunctionReturnType<typeof api.ferias.obterDetalhes> | null>(
-		null
-	);
+	let periodoSelecionado = $state<Id<'ferias'> | null>(null);
 
 	let mostrarModalFoto = $state(false);
 	let uploadandoFoto = $state(false);
@@ -192,12 +190,12 @@
 		}))
 	);
 
-	// Estatísticas das minhas férias
+	// Estatísticas das minhas férias (períodos individuais)
 	const statsMinhasFerias = $derived({
 		total: minhasSolicitacoes.length,
 		aguardando: minhasSolicitacoes.filter((s) => s.status === 'aguardando_aprovacao').length,
 		aprovadas: minhasSolicitacoes.filter(
-			(s) => s.status === 'aprovado' || s.status === 'data_ajustada_aprovada'
+			(s) => s.status === 'aprovado' || s.status === 'data_ajustada_aprovada' || s.status === 'EmFérias'
 		).length,
 		reprovadas: minhasSolicitacoes.filter((s) => s.status === 'reprovado').length,
 		emFerias: funcionario?.statusFerias === 'em_ferias' ? 1 : 0
@@ -212,14 +210,21 @@
 	});
 
 	async function recarregar() {
-		solicitacaoSelecionada = null;
+		periodoSelecionado = null;
 	}
 
-	async function selecionarSolicitacao(solicitacaoId: string) {
-		const detalhes = await client.query(api.ferias.obterDetalhes, {
-			solicitacaoId: solicitacaoId as Id<'solicitacoesFerias'>
-		});
-		solicitacaoSelecionada = detalhes;
+	async function selecionarPeriodo(feriasId: Id<'ferias'>) {
+		periodoSelecionado = feriasId;
+	}
+
+	// Função para formatar data sem problemas de timezone
+	function formatarDataString(dataString: string): string {
+		if (!dataString) return '';
+		// Dividir a string da data (formato YYYY-MM-DD)
+		const partes = dataString.split('-');
+		if (partes.length !== 3) return dataString;
+		// Retornar no formato DD/MM/YYYY
+		return `${partes[2]}/${partes[1]}/${partes[0]}`;
 	}
 
 	function getStatusBadge(status: string) {
@@ -227,7 +232,8 @@
 			aguardando_aprovacao: 'badge-warning',
 			aprovado: 'badge-success',
 			reprovado: 'badge-error',
-			data_ajustada_aprovada: 'badge-info'
+			data_ajustada_aprovada: 'badge-info',
+			EmFérias: 'badge-info'
 		};
 		return badges[status] || 'badge-neutral';
 	}
@@ -237,7 +243,8 @@
 			aguardando_aprovacao: 'Aguardando',
 			aprovado: 'Aprovado',
 			reprovado: 'Reprovado',
-			data_ajustada_aprovada: 'Ajustado'
+			data_ajustada_aprovada: 'Ajustado',
+			EmFérias: 'Em Férias'
 		};
 		return textos[status] || status;
 	}
@@ -1335,6 +1342,7 @@
 									<option value="aprovado">Aprovado</option>
 									<option value="reprovado">Reprovado</option>
 									<option value="data_ajustada_aprovada">Data Ajustada</option>
+									<option value="EmFérias">Em Férias</option>
 								</select>
 							</div>
 						</div>
@@ -1371,27 +1379,27 @@
 									<thead>
 										<tr>
 											<th>Ano</th>
-											<th>Períodos</th>
-											<th>Total Dias</th>
+											<th>Período</th>
+											<th>Dias</th>
 											<th>Status</th>
 											<th>Solicitado em</th>
 										</tr>
 									</thead>
 									<tbody>
-										{#each solicitacoesFiltradas as solicitacao (solicitacao._id)}
+										{#each solicitacoesFiltradas as periodo (periodo._id)}
 											<tr>
-												<td>{solicitacao.anoReferencia}</td>
-												<td>{solicitacao.periodos.length} período(s)</td>
-												<td class="font-bold"
-													>{solicitacao.periodos.reduce((acc, p) => acc + p.diasCorridos, 0)} dias</td
-												>
+												<td>{periodo.anoReferencia}</td>
 												<td>
-													<div class={`badge ${getStatusBadge(solicitacao.status)}`}>
-														{getStatusTexto(solicitacao.status)}
+													{formatarDataString(periodo.dataInicio)} - {formatarDataString(periodo.dataFim)}
+												</td>
+												<td class="font-bold">{periodo.diasFerias} dias</td>
+												<td>
+													<div class={`badge ${getStatusBadge(periodo.status)}`}>
+														{getStatusTexto(periodo.status)}
 													</div>
 												</td>
 												<td class="text-xs"
-													>{new Date(solicitacao._creationTime).toLocaleDateString('pt-BR')}</td
+													>{new Date(periodo._creationTime).toLocaleDateString('pt-BR')}</td
 												>
 											</tr>
 										{/each}
@@ -1741,50 +1749,50 @@
 										<th class="font-bold">Funcionário</th>
 										<th class="font-bold">Time</th>
 										<th class="font-bold">Ano</th>
-										<th class="font-bold">Períodos</th>
+										<th class="font-bold">Período</th>
 										<th class="font-bold">Dias</th>
 										<th class="font-bold">Status</th>
 										<th class="font-bold">Ações</th>
 									</tr>
 								</thead>
 								<tbody>
-									{#each solicitacoesSubordinados as solicitacao (solicitacao._id)}
+									{#each solicitacoesSubordinados as periodo (periodo._id)}
 										<tr class="hover:bg-base-200 transition-colors">
 											<td>
 												<div class="font-bold">
-													{solicitacao.funcionario?.nome}
+													{periodo.funcionario?.nome}
 												</div>
 											</td>
 											<td>
-												{#if solicitacao.time}
+												{#if periodo.time}
 													<div
 														class="badge badge-lg font-semibold"
-														style="background-color: {solicitacao.time
-															.cor}20; border-color: {solicitacao.time.cor}; color: {solicitacao
-															.time.cor}"
+														style="background-color: {periodo.time
+															.cor}20; border-color: {periodo.time.cor}; color: {periodo.time
+															.cor}"
 													>
-														{solicitacao.time.nome}
+														{periodo.time.nome}
 													</div>
 												{/if}
 											</td>
-											<td class="font-semibold">{solicitacao.anoReferencia}</td>
-											<td class="font-semibold">{solicitacao.periodos.length}</td>
-											<td class="text-lg font-bold"
-												>{solicitacao.periodos.reduce((acc, p) => acc + p.diasCorridos, 0)}</td
-											>
+											<td class="font-semibold">{periodo.anoReferencia}</td>
+											<td class="font-semibold">
+												{formatarDataString(periodo.dataInicio)} - {formatarDataString(periodo.dataFim)}
+											</td>
+											<td class="text-lg font-bold">{periodo.diasFerias}</td>
 											<td>
 												<div
-													class={`badge badge-lg font-semibold ${getStatusBadge(solicitacao.status)}`}
+													class={`badge badge-lg font-semibold ${getStatusBadge(periodo.status)}`}
 												>
-													{getStatusTexto(solicitacao.status)}
+													{getStatusTexto(periodo.status)}
 												</div>
 											</td>
 											<td>
-												{#if solicitacao.status === 'aguardando_aprovacao'}
+												{#if periodo.status === 'aguardando_aprovacao'}
 													<button
 														type="button"
 														class="btn btn-primary btn-sm gap-2 shadow-lg transition-transform hover:scale-105"
-														onclick={() => selecionarSolicitacao(solicitacao._id)}
+														onclick={() => selecionarPeriodo(periodo._id)}
 													>
 														<svg
 															xmlns="http://www.w3.org/2000/svg"
@@ -1806,7 +1814,7 @@
 													<button
 														type="button"
 														class="btn btn-sm gap-2"
-														onclick={() => selecionarSolicitacao(solicitacao._id)}
+														onclick={() => selecionarPeriodo(periodo._id)}
 													>
 														<svg
 															xmlns="http://www.w3.org/2000/svg"
@@ -1997,26 +2005,28 @@
 	</div>
 
 	<!-- Modal de Aprovação de Férias -->
-	{#if solicitacaoSelecionada}
-		<dialog class="modal modal-open">
-			<div class="modal-box max-w-4xl">
-				{#if currentUser.data}
-					<AprovarFerias
-						solicitacao={solicitacaoSelecionada}
-						gestorId={currentUser.data._id}
-						onSucesso={recarregar}
-						onCancelar={() => (solicitacaoSelecionada = null)}
-					/>
-				{/if}
-			</div>
-			<form method="dialog" class="modal-backdrop">
-				<button
-					type="button"
-					onclick={() => (solicitacaoSelecionada = null)}
-					aria-label="Fechar modal">Fechar</button
-				>
-			</form>
-		</dialog>
+	{#if periodoSelecionado && currentUser.data}
+		{#await client.query(api.ferias.obterDetalhes, { feriasId: periodoSelecionado }) then detalhes}
+			{#if detalhes}
+				<dialog class="modal modal-open">
+					<div class="modal-box max-w-4xl">
+						<AprovarFerias
+							periodo={detalhes}
+							gestorId={currentUser.data._id}
+							onSucesso={recarregar}
+							onCancelar={() => (periodoSelecionado = null)}
+						/>
+					</div>
+					<form method="dialog" class="modal-backdrop">
+						<button
+							type="button"
+							onclick={() => (periodoSelecionado = null)}
+							aria-label="Fechar modal">Fechar</button
+						>
+					</form>
+				</dialog>
+			{/if}
+		{/await}
 	{/if}
 
 	<!-- Modal de Upload de Foto / Escolher Avatar -->

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

@@ -15,13 +15,13 @@
 	type TodasSolicitacoes = FunctionReturnType<typeof api.ferias.listarTodas>;
 	type Solicitacao = TodasSolicitacoes[number];
 	type PeriodoDetalhado = {
-		solicitacaoId: Id<'solicitacoesFerias'>;
-		funcionarioId: Id<'funcionarios'> | null;
+		funcionarioId: Id<'funcionarios'>;
+		anoReferencia: number;
+		feriasId: Id<'ferias'>;
 		funcionarioNome: string;
 		matricula?: string | null;
 		timeNome?: string | null;
 		timeCor?: string | null;
-		anoReferencia: number;
 		status: Solicitacao['status'];
 		dataInicio: string;
 		dataFim: string;
@@ -39,8 +39,8 @@
 	const client = useConvexClient();
 	const currentUser = useQuery(api.auth.getCurrentUser, {});
 
-	// Estado para controlar qual solicitação está selecionada para mudança de status
-	let solicitacaoSelecionada = $state<Id<'solicitacoesFerias'> | null>(null);
+	// Estado para controlar qual período está selecionado para mudança de status
+	let periodoSelecionado = $state<Id<'ferias'> | null>(null);
 
 	// Estados de loading e error
 	const isLoading = $derived(todasSolicitacoesQuery?.isLoading ?? true);
@@ -106,10 +106,10 @@
 	let dataInicioRelatorio = $state<string>('');
 	let dataFimRelatorio = $state<string>('');
 
-	// Filtrar solicitações
+	// Filtrar períodos individuais
 	const solicitacoesFiltradas = $derived(
-		solicitacoes.filter((solicitacao) => {
-			if (filtroStatus !== 'todos' && solicitacao.status !== filtroStatus) {
+		solicitacoes.filter((periodo) => {
+			if (filtroStatus !== 'todos' && periodo.status !== filtroStatus) {
 				return false;
 			}
 
@@ -118,7 +118,7 @@
 			const emailFiltro = normalizarTexto(filtroEmail.trim());
 
 			if (nomeFiltro || matriculaFiltro || emailFiltro) {
-				const funcionario = solicitacao.funcionario;
+				const funcionario = periodo.funcionario;
 				if (!funcionario) return false;
 
 				const contato = funcionario as {
@@ -165,27 +165,25 @@
 			const inicioComparacao = inicioFiltro ?? new SvelteDate(-8640000000000000);
 			const fimComparacao = fimFiltro ?? new SvelteDate(8640000000000000);
 
-			return solicitacao.periodos.some((periodo) => {
-				const inicioPeriodo = criarDataHora(periodo.dataInicio, 'inicio');
-				const fimPeriodo = criarDataHora(periodo.dataFim, 'fim');
-				if (!inicioPeriodo || !fimPeriodo) {
+			const inicioPeriodo = criarDataHora(periodo.dataInicio, 'inicio');
+			const fimPeriodo = criarDataHora(periodo.dataFim, 'fim');
+			if (!inicioPeriodo || !fimPeriodo) {
+				return false;
+			}
+
+			if (intervaloMes) {
+				if (fimPeriodo < intervaloMes.inicio || inicioPeriodo > intervaloMes.fim) {
 					return false;
 				}
+			}
 
-				if (intervaloMes) {
-					if (fimPeriodo < intervaloMes.inicio || inicioPeriodo > intervaloMes.fim) {
-						return false;
-					}
+			if (inicioFiltro || fimFiltro) {
+				if (fimPeriodo < inicioComparacao || inicioPeriodo > fimComparacao) {
+					return false;
 				}
+			}
 
-				if (inicioFiltro || fimFiltro) {
-					if (fimPeriodo < inicioComparacao || inicioPeriodo > fimComparacao) {
-						return false;
-					}
-				}
-
-				return true;
-			});
+			return true;
 		})
 	);
 
@@ -203,27 +201,26 @@
 
 	const solicitacoesAprovadas = $derived(
 		solicitacoesFiltradas.filter(
-			(s) => s.status === 'aprovado' || s.status === 'data_ajustada_aprovada'
+			(p) =>
+				p.status === 'aprovado' || p.status === 'data_ajustada_aprovada' || p.status === 'EmFérias'
 		)
 	);
 
 	const periodosDetalhados = $derived<Array<PeriodoDetalhado>>(
 		solicitacoesAprovadas
-			.flatMap((solicitacao) =>
-				solicitacao.periodos.map((periodo) => ({
-					solicitacaoId: solicitacao._id,
-					funcionarioId: solicitacao.funcionarioId ?? null,
-					funcionarioNome: solicitacao.funcionario?.nome ?? 'Funcionário não encontrado',
-					matricula: solicitacao.funcionario?.matricula ?? null,
-					timeNome: solicitacao.time?.nome ?? null,
-					timeCor: solicitacao.time?.cor ?? null,
-					anoReferencia: solicitacao.anoReferencia,
-					status: solicitacao.status,
-					dataInicio: periodo.dataInicio,
-					dataFim: periodo.dataFim,
-					diasCorridos: periodo.diasCorridos
-				}))
-			)
+			.map((periodo) => ({
+				feriasId: periodo._id,
+				funcionarioId: periodo.funcionarioId,
+				anoReferencia: periodo.anoReferencia,
+				funcionarioNome: periodo.funcionario?.nome ?? 'Funcionário não encontrado',
+				matricula: periodo.funcionario?.matricula ?? null,
+				timeNome: periodo.time?.nome ?? null,
+				timeCor: periodo.time?.cor ?? null,
+				status: periodo.status,
+				dataInicio: periodo.dataInicio,
+				dataFim: periodo.dataFim,
+				diasCorridos: periodo.diasFerias
+			}))
 			.sort(
 				(a, b) => new SvelteDate(a.dataInicio).getTime() - new SvelteDate(b.dataInicio).getTime()
 			)
@@ -308,19 +305,16 @@
 		(() => {
 			const agregados = new SvelteMap<number, SolicitacoesPorAnoResumo>();
 
-			for (const solicitacao of solicitacoesAprovadas) {
-				const totalDias = solicitacao.periodos.reduce(
-					(acc, periodo) => acc + periodo.diasCorridos,
-					0
-				);
-				const existente = agregados.get(solicitacao.anoReferencia) ?? {
-					ano: solicitacao.anoReferencia,
+			for (const periodo of solicitacoesAprovadas) {
+				const totalDias = periodo.diasFerias;
+				const existente = agregados.get(periodo.anoReferencia) ?? {
+					ano: periodo.anoReferencia,
 					solicitacoes: 0,
 					diasTotais: 0
 				};
 				existente.solicitacoes += 1;
 				existente.diasTotais += totalDias;
-				agregados.set(solicitacao.anoReferencia, existente);
+				agregados.set(periodo.anoReferencia, existente);
 			}
 
 			return Array.from(agregados.values()).sort((a, b) => a.ano - b.ano);
@@ -441,7 +435,7 @@
 		periodosDetalhados.map((periodo, indice) => {
 			const corBase = periodo.timeCor ?? coresCalendario[indice % coresCalendario.length];
 			return {
-				id: `${String(periodo.solicitacaoId)}-${indice}`,
+				id: `${String(periodo.feriasId)}-${indice}`,
 				title: `${periodo.funcionarioNome} (${periodo.diasCorridos} dia${periodo.diasCorridos === 1 ? '' : 's'})`,
 				start: periodo.dataInicio,
 				end: adicionarDias(periodo.dataFim, 1),
@@ -464,9 +458,18 @@
 		console.log('📅 [Eventos] Total de eventos:', eventosFerias.length);
 		console.log('📋 [Periodos] Total de períodos:', periodosDetalhados.length);
 		console.log('✅ [Aprovadas] Total de solicitações aprovadas:', solicitacoesAprovadas.length);
+		console.log('📊 [PeriodosPorMes] Total:', periodosPorMes.length);
+		console.log('📊 [PeriodosPorMesAtivos] Total:', periodosPorMesAtivos.length);
+		console.log('📊 [SolicitacoesPorAno] Total:', solicitacoesPorAno.length);
 		if (eventosFerias.length > 0) {
 			console.log('📅 [Eventos] Primeiro evento:', eventosFerias[0]);
 		}
+		if (periodosPorMes.length > 0) {
+			console.log('📊 [PeriodosPorMes] Primeiro:', periodosPorMes[0]);
+		}
+		if (solicitacoesPorAno.length > 0) {
+			console.log('📊 [SolicitacoesPorAno] Primeiro:', solicitacoesPorAno[0]);
+		}
 	});
 
 	let calendarioContainer: HTMLDivElement | null = null;
@@ -692,6 +695,16 @@
 		return textos[status] || status;
 	}
 
+	// Função para formatar data sem problemas de timezone
+	function formatarDataString(dataString: string): string {
+		if (!dataString) return '';
+		// Dividir a string da data (formato YYYY-MM-DD)
+		const partes = dataString.split('-');
+		if (partes.length !== 3) return dataString;
+		// Retornar no formato DD/MM/YYYY
+		return `${partes[2]}/${partes[1]}/${partes[0]}`;
+	}
+
 	function formatarData(data: string | number | Date) {
 		const instancia = data instanceof Date ? data : new SvelteDate(data);
 		return instancia.toLocaleDateString('pt-BR');
@@ -771,16 +784,12 @@
 		filtroPeriodoFim = '';
 	}
 
-	function totalDiasSolicitacao(solicitacao: Solicitacao): number {
-		return solicitacao.periodos.reduce((acc, periodo) => acc + periodo.diasCorridos, 0);
-	}
-
-	async function selecionarSolicitacao(solicitacaoId: Id<'solicitacoesFerias'>) {
-		solicitacaoSelecionada = solicitacaoId;
+	async function selecionarPeriodo(feriasId: Id<'ferias'>) {
+		periodoSelecionado = feriasId;
 	}
 
 	async function recarregar() {
-		solicitacaoSelecionada = null;
+		periodoSelecionado = null;
 	}
 
 	let chartContainer: HTMLDivElement | null = null;
@@ -1678,61 +1687,60 @@
 								<tr class="text-base-content/70 text-sm tracking-wide uppercase">
 									<th>Funcionário</th>
 									<th>Time</th>
-									<th>Ano</th>
-									<th>Períodos</th>
+									<th>Ano</th>
+									<th>Período</th>
 									<th>Dias</th>
 									<th>Status</th>
 									<th>Solicitado em</th>
 									<th>Ações</th>
 								</tr>
 							</thead>
-							<tbody>
+							<tbody>
 								{#each solicitacoesFiltradas as periodo (periodo._id)}
 									<tr>
 										<td>
 											<div class="flex items-center gap-3">
 												<div class="avatar placeholder">
 													<div class="bg-primary text-primary-content w-10 rounded-full">
-														<span class="text-xs"
+														<span class="text-xs"
 															>{periodo.funcionario?.nome.substring(0, 2).toUpperCase()}</span
 														>
 													</div>
 												</div>
-												<div>
+												<div>
 													<div class="font-bold">{periodo.funcionario?.nome}</div>
-													<div class="text-xs opacity-50">
+													<div class="text-xs opacity-50">
 														{periodo.funcionario?.matricula || 'S/N'}
 													</div>
 												</div>
 											</div>
 										</td>
-										<td>
-											{#if solicitacao.time}
-												<div
-													class="badge badge-outline"
-													style="border-color: {solicitacao.time.cor}"
-												>
+										<td>
+											{#if periodo.time}
+												<div class="badge badge-outline" style="border-color: {periodo.time.cor}">
 													{periodo.time.nome}
 												</div>
 											{:else}
 												<span class="text-base-content/50 text-xs">Sem time</span>
 											{/if}
-										</td>
-										<td>{solicitacao.anoReferencia}</td>
-										<td>{solicitacao.periodos.length} período(s)</td>
-										<td class="text-base-content font-bold"
-											>{totalDiasSolicitacao(solicitacao)} dia(s)</td
+										</td>
 										<td>{periodo.anoReferencia}</td>
-										<td>
-											<div class={`badge ${getStatusBadge(solicitacao.status)}`}>
+										<td>
+											{formatarDataString(periodo.dataInicio)} - {formatarDataString(
+												periodo.dataFim
+											)}
+										</td>
+										<td class="text-base-content font-bold">{periodo.diasFerias} dia(s)</td>
+										<td>
+											<div class={`badge ${getStatusBadge(periodo.status)}`}>
 												{getStatusTexto(periodo.status)}
 											</div>
-										</td>
+										</td>
 										<td class="text-xs">{formatarData(periodo._creationTime)}</td>
 										<td>
 											<button
 												type="button"
-												class="btn btn-primary btn-sm gap-2"
+												class="btn btn-primary btn-sm gap-2"
 												onclick={() => selecionarPeriodo(periodo._id)}
 											>
 												<svg
@@ -1917,8 +1925,8 @@
 	{/if}
 </main>
 
-<!-- Modal de Mudança de Status -->
-{#if solicitacaoSelecionada && currentUser.data}
+<!-- Modal de Mudança de Status -->
+{#if periodoSelecionado && currentUser.data}
 	{#await client.query(api.ferias.obterDetalhes, { feriasId: periodoSelecionado }) then detalhes}
 		{#if detalhes}
 			<dialog class="modal modal-open">
@@ -1926,13 +1934,13 @@
 					<AlterarStatusFerias
 						solicitacao={detalhes}
 						usuarioId={currentUser.data._id}
-						onSucesso={recarregar}
+						onSucesso={recarregar}
 						onCancelar={() => (periodoSelecionado = null)}
 					/>
 				</div>
 				<form method="dialog" class="modal-backdrop">
 					<button
-						type="button"
+						type="button"
 						onclick={() => (periodoSelecionado = null)}
 						aria-label="Fechar modal"
 					>