refactor: update vacation management structure and enhance status handling

- Renamed and refactored vacation-related types and components for clarity, transitioning from 'SolicitacaoFerias' to 'PeriodoFerias'.
- Improved the handling of vacation statuses, including the addition of 'EmFérias' to the status options.
- Streamlined the vacation request and approval components to better reflect individual vacation periods.
- Enhanced data handling in backend queries and schema to support the new structure and ensure accurate status updates.
- Improved user experience by refining UI elements related to vacation periods and their statuses.

apps/web/src/lib/components/AprovarFerias.svelte

@@ -3,59 +3,55 @@
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
 
-	interface Periodo {
-		dataInicio: string;
-		dataFim: string;
-		diasCorridos: number;
-	}
-
-	type SolicitacaoFerias = Doc<'solicitacoesFerias'> & {
+	type PeriodoFerias = Doc<'ferias'> & {
 		funcionario?: Doc<'funcionarios'> | null;
 		gestor?: Doc<'usuarios'> | null;
+		time?: Doc<'times'> | null;
 	};
 
 	interface Props {
-		solicitacao: SolicitacaoFerias;
+		periodo: PeriodoFerias;
 		gestorId: Id<'usuarios'>;
 		onSucesso?: () => void;
 		onCancelar?: () => void;
 	}
 
-	let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
+	let { periodo, gestorId, onSucesso, onCancelar }: Props = $props();
 
 	const client = useConvexClient();
 
 	let modoAjuste = $state(false);
-	let periodos = $state<Periodo[]>([]);
+	let novaDataInicio = $state(periodo.dataInicio);
+	let novaDataFim = $state(periodo.dataFim);
 	let motivoReprovacao = $state('');
 	let processando = $state(false);
 	let erro = $state('');
 
-	$effect(() => {
-		if (modoAjuste && periodos.length === 0) {
-			periodos = solicitacao.periodos.map((p) => ({ ...p }));
-		}
+	// Calcular dias do período ajustado
+	const diasAjustados = $derived.by(() => {
+		if (!novaDataInicio || !novaDataFim) return 0;
+		const inicio = new Date(novaDataInicio);
+		const fim = new Date(novaDataFim);
+		const diffTime = Math.abs(fim.getTime() - inicio.getTime());
+		const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+		return diffDays;
 	});
 
-	function calcularDias(periodo: Periodo) {
-		if (!periodo.dataInicio || !periodo.dataFim) {
-			periodo.diasCorridos = 0;
-			return;
-		}
+	function calcularDias(dataInicio: string, dataFim: string): number {
+		if (!dataInicio || !dataFim) return 0;
 
-		const inicio = new Date(periodo.dataInicio);
-		const fim = new Date(periodo.dataFim);
+		const inicio = new Date(dataInicio);
+		const fim = new Date(dataFim);
 
 		if (fim < inicio) {
 			erro = 'Data final não pode ser anterior à data inicial';
-			periodo.diasCorridos = 0;
-			return;
+			return 0;
 		}
 
 		const diff = fim.getTime() - inicio.getTime();
 		const dias = Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
-		periodo.diasCorridos = dias;
 		erro = '';
+		return dias;
 	}
 
 	async function aprovar() {
@@ -64,19 +60,19 @@
 			erro = '';
 
 			// Validar se as datas e condições estão dentro do regime do funcionário
-			if (!solicitacao.funcionario?._id) {
+			if (!periodo.funcionario?._id) {
 				erro = 'Funcionário não encontrado';
 				processando = false;
 				return;
 			}
 
 			const validacao = await client.query(api.saldoFerias.validarSolicitacao, {
-				funcionarioId: solicitacao.funcionario._id,
-				anoReferencia: solicitacao.anoReferencia,
-				periodos: solicitacao.periodos.map((p) => ({
-					dataInicio: p.dataInicio,
-					dataFim: p.dataFim
-				}))
+				funcionarioId: periodo.funcionario._id,
+				anoReferencia: periodo.anoReferencia,
+				periodos: [{
+					dataInicio: periodo.dataInicio,
+					dataFim: periodo.dataFim
+				}]
 			});
 
 			if (!validacao.valido) {
@@ -86,7 +82,7 @@
 			}
 
 			await client.mutation(api.ferias.aprovar, {
-				solicitacaoId: solicitacao._id,
+				feriasId: periodo._id,
 				gestorId: gestorId
 			});
 
@@ -109,7 +105,7 @@
 			erro = '';
 
 			await client.mutation(api.ferias.reprovar, {
-				solicitacaoId: solicitacao._id,
+				feriasId: periodo._id,
 				gestorId: gestorId,
 				motivoReprovacao
 			});
@@ -128,28 +124,27 @@
 			erro = '';
 
 			// Validar se as datas ajustadas e condições estão dentro do regime do funcionário
-			if (!solicitacao.funcionario?._id) {
+			if (!periodo.funcionario?._id) {
 				erro = 'Funcionário não encontrado';
 				processando = false;
 				return;
 			}
 
-			// Validar todos os períodos ajustados
-			for (const periodo of periodos) {
-				if (!periodo.dataInicio || !periodo.dataFim) {
-					erro = 'Todos os períodos devem ter data de início e fim';
-					processando = false;
-					return;
-				}
+			// Validar datas ajustadas
+			if (!novaDataInicio || !novaDataFim) {
+				erro = 'Informe as novas datas de início e fim';
+				processando = false;
+				return;
 			}
 
 			const validacao = await client.query(api.saldoFerias.validarSolicitacao, {
-				funcionarioId: solicitacao.funcionario._id,
-				anoReferencia: solicitacao.anoReferencia,
-				periodos: periodos.map((p) => ({
-					dataInicio: p.dataInicio,
-					dataFim: p.dataFim
-				}))
+				funcionarioId: periodo.funcionario._id,
+				anoReferencia: periodo.anoReferencia,
+				periodos: [{
+					dataInicio: novaDataInicio,
+					dataFim: novaDataFim
+				}],
+				feriasIdExcluir: periodo._id // Excluir o período original do cálculo de saldo
 			});
 
 			if (!validacao.valido) {
@@ -159,9 +154,10 @@
 			}
 
 			await client.mutation(api.ferias.ajustarEAprovar, {
-				solicitacaoId: solicitacao._id,
+				feriasId: periodo._id,
 				gestorId: gestorId,
-				novosPeriodos: periodos
+				novaDataInicio,
+				novaDataFim
 			});
 
 			if (onSucesso) onSucesso();
@@ -177,7 +173,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';
 	}
@@ -187,7 +184,8 @@
 			aguardando_aprovacao: 'Aguardando Aprovação',
 			aprovado: 'Aprovado',
 			reprovado: 'Reprovado',
-			data_ajustada_aprovada: 'Data Ajustada e Aprovada'
+			data_ajustada_aprovada: 'Data Ajustada e Aprovada',
+			EmFérias: 'Em Férias'
 		};
 		return textos[status] || status;
 	}
@@ -195,6 +193,23 @@
 	function formatarData(data: number) {
 		return new Date(data).toLocaleString('pt-BR');
 	}
+
+	// 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]}`;
+	}
+
+	$effect(() => {
+		if (modoAjuste) {
+			novaDataInicio = periodo.dataInicio;
+			novaDataFim = periodo.dataFim;
+		}
+	});
 </script>
 
 <div class="card bg-base-100 shadow-xl">
@@ -202,63 +217,58 @@
 		<div class="mb-4 flex items-start justify-between">
 			<div>
 				<h2 class="card-title text-2xl">
-					{solicitacao.funcionario?.nome || 'Funcionário'}
+					{periodo.funcionario?.nome || 'Funcionário'}
 				</h2>
 				<p class="text-base-content/70 mt-1 text-sm">
-					Ano de Referência: {solicitacao.anoReferencia}
+					Ano de Referência: {periodo.anoReferencia}
 				</p>
 			</div>
-			<div class={`badge ${getStatusBadge(solicitacao.status)} badge-lg`}>
-				{getStatusTexto(solicitacao.status)}
+			<div class={`badge ${getStatusBadge(periodo.status)} badge-lg`}>
+				{getStatusTexto(periodo.status)}
 			</div>
 		</div>
 
-		<!-- Períodos Solicitados -->
+		<!-- Período Solicitado -->
 		<div class="mt-4">
-			<h3 class="mb-3 text-lg font-semibold">Períodos Solicitados</h3>
-			<div class="space-y-2">
-				{#each solicitacao.periodos as periodo, index}
-					<div class="bg-base-200 flex items-center gap-4 rounded-lg p-3">
-						<div class="badge badge-primary">{index + 1}</div>
-						<div class="grid flex-1 grid-cols-3 gap-2 text-sm">
-							<div>
-								<span class="text-base-content/70">Início:</span>
-								<span class="ml-1 font-semibold"
-									>{new Date(periodo.dataInicio).toLocaleDateString('pt-BR')}</span
-								>
-							</div>
-							<div>
-								<span class="text-base-content/70">Fim:</span>
-								<span class="ml-1 font-semibold"
-									>{new Date(periodo.dataFim).toLocaleDateString('pt-BR')}</span
-								>
-							</div>
-							<div>
-								<span class="text-base-content/70">Dias:</span>
-								<span class="text-primary ml-1 font-bold">{periodo.diasCorridos}</span>
-							</div>
-						</div>
+			<h3 class="mb-3 text-lg font-semibold">Período Solicitado</h3>
+			<div class="bg-base-200 rounded-lg p-4">
+				<div class="grid grid-cols-3 gap-4 text-sm">
+					<div>
+						<span class="text-base-content/70">Início:</span>
+						<span class="ml-1 font-semibold"
+							>{formatarDataString(periodo.dataInicio)}</span
+						>
 					</div>
-				{/each}
+					<div>
+						<span class="text-base-content/70">Fim:</span>
+						<span class="ml-1 font-semibold"
+							>{formatarDataString(periodo.dataFim)}</span
+						>
+					</div>
+					<div>
+						<span class="text-base-content/70">Dias:</span>
+						<span class="text-primary ml-1 font-bold">{periodo.diasFerias}</span>
+					</div>
+				</div>
 			</div>
 		</div>
 
 		<!-- Observações -->
-		{#if solicitacao.observacao}
+		{#if periodo.observacao}
 			<div class="mt-4">
 				<h3 class="mb-2 font-semibold">Observações</h3>
 				<div class="bg-base-200 rounded-lg p-3 text-sm">
-					{solicitacao.observacao}
+					{periodo.observacao}
 				</div>
 			</div>
 		{/if}
 
 		<!-- Histórico -->
-		{#if solicitacao.historicoAlteracoes && solicitacao.historicoAlteracoes.length > 0}
+		{#if periodo.historicoAlteracoes && periodo.historicoAlteracoes.length > 0}
 			<div class="mt-4">
 				<h3 class="mb-2 font-semibold">Histórico</h3>
 				<div class="space-y-1">
-					{#each solicitacao.historicoAlteracoes as hist}
+					{#each periodo.historicoAlteracoes as hist}
 						<div class="text-base-content/70 flex items-center gap-2 text-xs">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -284,7 +294,7 @@
 		{/if}
 
 		<!-- Ações (apenas para status aguardando_aprovacao) -->
-		{#if solicitacao.status === 'aguardando_aprovacao'}
+		{#if periodo.status === 'aguardando_aprovacao'}
 			<div class="divider mt-6"></div>
 
 			{#if !modoAjuste}
@@ -341,7 +351,7 @@
 					<!-- Reprovar -->
 					<div class="card bg-base-200">
 						<div class="card-body p-4">
-							<h4 class="mb-2 text-sm font-semibold">Reprovar Solicitação</h4>
+							<h4 class="mb-2 text-sm font-semibold">Reprovar Período</h4>
 							<textarea
 								class="textarea textarea-bordered textarea-sm mb-2"
 								placeholder="Motivo da reprovação..."
@@ -376,53 +386,49 @@
 			{:else}
 				<!-- Modo Ajuste -->
 				<div class="space-y-4">
-					<h4 class="font-semibold">Ajustar Períodos</h4>
-					{#each periodos as periodo, index}
-						<div class="card bg-base-200">
-							<div class="card-body p-4">
-								<h5 class="mb-2 font-medium">Período {index + 1}</h5>
-								<div class="grid grid-cols-3 gap-3">
-									<div class="form-control">
-										<label class="label" for={`ajuste-inicio-${index}`}>
-											<span class="label-text text-xs">Início</span>
-										</label>
-										<input
-											id={`ajuste-inicio-${index}`}
-											type="date"
-											class="input input-bordered input-sm"
-											bind:value={periodo.dataInicio}
-											onchange={() => calcularDias(periodo)}
-										/>
-									</div>
-									<div class="form-control">
-										<label class="label" for={`ajuste-fim-${index}`}>
-											<span class="label-text text-xs">Fim</span>
-										</label>
-										<input
-											id={`ajuste-fim-${index}`}
-											type="date"
-											class="input input-bordered input-sm"
-											bind:value={periodo.dataFim}
-											onchange={() => calcularDias(periodo)}
-										/>
-									</div>
-									<div class="form-control">
-										<label class="label" for={`ajuste-dias-${index}`}>
-											<span class="label-text text-xs">Dias</span>
-										</label>
-										<div
-											id={`ajuste-dias-${index}`}
-											class="bg-base-300 flex h-9 items-center rounded-lg px-3"
-											role="textbox"
-											aria-readonly="true"
-										>
-											<span class="font-bold">{periodo.diasCorridos}</span>
-										</div>
+					<h4 class="font-semibold">Ajustar Período</h4>
+					<div class="card bg-base-200">
+						<div class="card-body p-4">
+							<div class="grid grid-cols-3 gap-3">
+								<div class="form-control">
+									<label class="label" for="ajuste-inicio">
+										<span class="label-text text-xs">Início</span>
+									</label>
+									<input
+										id="ajuste-inicio"
+										type="date"
+										class="input input-bordered input-sm"
+										bind:value={novaDataInicio}
+									/>
+								</div>
+								<div class="form-control">
+									<label class="label" for="ajuste-fim">
+										<span class="label-text text-xs">Fim</span>
+									</label>
+									<input
+										id="ajuste-fim"
+										type="date"
+										class="input input-bordered input-sm"
+										bind:value={novaDataFim}
+									/>
+								</div>
+								<div class="form-control">
+									<label class="label" for="ajuste-dias">
+										<span class="label-text text-xs">Dias</span>
+									</label>
+									<div
+										id="ajuste-dias"
+										class="bg-base-300 flex h-9 items-center rounded-lg px-3"
+										role="textbox"
+										aria-readonly="true"
+									>
+										<span class="font-bold">{diasAjustados}</span>
+										<span class="ml-2 text-xs opacity-70">dias</span>
 									</div>
 								</div>
 							</div>
 						</div>
-					{/each}
+					</div>
 
 					<div class="flex gap-2">
 						<button
@@ -437,7 +443,7 @@
 							type="button"
 							class="btn btn-primary btn-sm gap-2"
 							onclick={ajustarEAprovar}
-							disabled={processando}
+							disabled={processando || !novaDataInicio || !novaDataFim || diasAjustados <= 0}
 						>
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -461,7 +467,7 @@
 		{/if}
 
 		<!-- Motivo Reprovação (se reprovado) -->
-		{#if solicitacao.status === 'reprovado' && solicitacao.motivoReprovacao}
+		{#if periodo.status === 'reprovado' && periodo.motivoReprovacao}
 			<div class="alert alert-error mt-4">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -478,7 +484,7 @@
 				</svg>
 				<div>
 					<div class="font-bold">Motivo da Reprovação:</div>
-					<div class="text-sm">{solicitacao.motivoReprovacao}</div>
+					<div class="text-sm">{periodo.motivoReprovacao}</div>
 				</div>
 			</div>
 		{/if}