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/ferias/WizardSolicitacaoFerias.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { useQuery, useConvexClient } from 'convex-svelte';
 	import { api } from '@sgse-app/backend/convex/_generated/api';
-	import CalendarioFerias from './CalendarioFerias.svelte';
 	import { toast } from 'svelte-sonner';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 
@@ -30,7 +29,15 @@
 	let observacao = $state('');
 	let processando = $state(false);
 
+	// Estados para os selects de data
+	let dataInicioPeriodo = $state('');
+	let dataFimPeriodo = $state('');
+
 	// Queries
+	const funcionarioQuery = useQuery(api.funcionarios.getById, { id: funcionarioId });
+	const funcionario = $derived(funcionarioQuery?.data);
+	const regimeTrabalho = $derived(funcionario?.regimeTrabalho || 'clt');
+
 	const saldoQuery = $derived(
 		useQuery(api.saldoFerias.obterSaldo, {
 			funcionarioId,
@@ -62,9 +69,98 @@
 		return [anoAtual - 1, anoAtual, anoAtual + 1];
 	});
 
-	// Configurações do calendário (baseado no saldo/regime)
-	const maxPeriodos = $derived(saldo?.regimeTrabalho?.includes('Servidor') ? 2 : 3);
-	const minDiasPorPeriodo = $derived(saldo?.regimeTrabalho?.includes('Servidor') ? 10 : 5);
+	// Verificar se é regime estatutário PE ou Municipal
+	const ehEstatutarioPEOuMunicipal = $derived(
+		regimeTrabalho === 'estatutario_pe' || regimeTrabalho === 'estatutario_municipal'
+	);
+
+	// Função para calcular dias entre duas datas
+	function calcularDias(dataInicio: string, dataFim: string): number {
+		if (!dataInicio || !dataFim) return 0;
+		const inicio = new Date(dataInicio);
+		const fim = new Date(dataFim);
+		const diffTime = Math.abs(fim.getTime() - inicio.getTime());
+		const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+		return diffDays;
+	}
+
+	// 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]}`;
+	}
+
+	// Função para adicionar período
+	function adicionarPeriodo() {
+		if (!dataInicioPeriodo || !dataFimPeriodo) {
+			toast.error('Selecione as datas de início e fim');
+			return;
+		}
+
+		const dias = calcularDias(dataInicioPeriodo, dataFimPeriodo);
+
+		if (dias <= 0) {
+			toast.error('Data de fim deve ser posterior à data de início');
+			return;
+		}
+
+		// Validações específicas para estatutário PE e Municipal
+		// Permite períodos fracionados: cada período deve ser 15 ou 30 dias
+		// Total não pode exceder 30 dias, mas pode ser menos
+		if (ehEstatutarioPEOuMunicipal) {
+			// Verificar se o período individual é válido (15 ou 30 dias)
+			if (dias !== 15 && dias !== 30) {
+				toast.error('Para seu regime, cada período deve ter exatamente 15 ou 30 dias');
+				return;
+			}
+
+			// Verificar se já tem 2 períodos
+			if (periodosFerias.length >= 2) {
+				toast.error('Máximo de 2 períodos permitidos para seu regime');
+				return;
+			}
+
+			// Verificar se o total não excede 30 dias
+			const novoTotal = totalDiasSelecionados + dias;
+			if (novoTotal > 30) {
+				toast.error(`O total não pode exceder 30 dias. Você já tem ${totalDiasSelecionados} dias, adicionando ${dias} dias totalizaria ${novoTotal} dias.`);
+				return;
+			}
+		}
+
+		// Verificar se o total não excede o saldo disponível
+		const novoTotal = totalDiasSelecionados + dias;
+		if (saldo && novoTotal > saldo.diasDisponiveis) {
+			toast.error(`Total de dias (${novoTotal}) excede saldo disponível (${saldo.diasDisponiveis})`);
+			return;
+		}
+
+		periodosFerias = [
+			...periodosFerias,
+			{
+				dataInicio: dataInicioPeriodo,
+				dataFim: dataFimPeriodo,
+				dias
+			}
+		];
+
+		toast.success(`Período de ${dias} dias adicionado! ✅`);
+		
+		// Limpar campos
+		dataInicioPeriodo = '';
+		dataFimPeriodo = '';
+	}
+
+	// Função para remover período
+	function removerPeriodo(index: number) {
+		const removido = periodosFerias[index];
+		periodosFerias = periodosFerias.filter((_, i) => i !== index);
+		toast.info(`Período de ${removido.dias} dias removido`);
+	}
 
 	// Funções
 	function proximoPasso() {
@@ -74,7 +170,7 @@
 		}
 
 		if (passoAtual === 2 && periodosFerias.length === 0) {
-			toast.error('Selecione pelo menos 1 período de férias');
+			toast.error('Adicione pelo menos 1 período de férias');
 			return;
 		}
 
@@ -124,16 +220,8 @@
 		}
 	}
 
-	function handlePeriodoAdicionado(periodo: { dataInicio: string; dataFim: string; dias: number }) {
-		periodosFerias = [...periodosFerias, periodo];
-		toast.success(`Período de ${periodo.dias} dias adicionado! ✅`);
-	}
-
-	function handlePeriodoRemovido(index: number) {
-		const removido = periodosFerias[index];
-		periodosFerias = periodosFerias.filter((_, i) => i !== index);
-		toast.info(`Período de ${removido.dias} dias removido`);
-	}
+	// Calcular dias do período atual
+	const diasPeriodoAtual = $derived(calcularDias(dataInicioPeriodo, dataFimPeriodo));
 </script>
 
 <div class="wizard-ferias-container">
@@ -216,8 +304,12 @@
 						<button
 							type="button"
 							class="btn btn-lg transition-all duration-300 hover:scale-105"
-							class:btn-primary={anoSelecionado === ano}
 							class:btn-outline={anoSelecionado !== ano}
+							style:border-color={anoSelecionado === ano ? '#f97316' : undefined}
+							style:border-width={anoSelecionado === ano ? '2px' : undefined}
+							style:color={anoSelecionado === ano ? '#000000' : undefined}
+							style:background-color={anoSelecionado === ano ? 'transparent' : undefined}
+							style:box-shadow={anoSelecionado === ano ? '0 0 10px rgba(249, 115, 22, 0.3)' : undefined}
 							onclick={() => (anoSelecionado = ano)}
 						>
 							{ano}
@@ -322,9 +414,14 @@
 								<div>
 									<h4 class="font-bold">{saldo.regimeTrabalho}</h4>
 									<p class="text-sm">
-										Período aquisitivo: {new Date(saldo.dataInicio).toLocaleDateString('pt-BR')}
-										a {new Date(saldo.dataFim).toLocaleDateString('pt-BR')}
+										Período aquisitivo: {formatarDataString(saldo.dataInicio)}
+										a {formatarDataString(saldo.dataFim)}
 									</p>
+									{#if ehEstatutarioPEOuMunicipal}
+										<p class="mt-2 text-sm font-semibold">
+											⚠️ Regras: Períodos de 15 ou 30 dias. Máximo 2 períodos. Total não pode exceder 30 dias.
+										</p>
+									{/if}
 								</div>
 							</div>
 
@@ -401,18 +498,131 @@
 							{totalDiasSelecionados} dias | <strong>Restante:</strong>
 							{(saldo?.diasDisponiveis || 0) - totalDiasSelecionados} dias
 						</p>
+						{#if ehEstatutarioPEOuMunicipal}
+							<p class="mt-2 text-sm font-semibold">
+								⚠️ Regras: Períodos de 15 ou 30 dias. Máximo 2 períodos. Total não pode exceder 30 dias.
+							</p>
+						{/if}
 					</div>
 				</div>
 
-				<!-- Calendário -->
-				<CalendarioFerias
-					periodosExistentes={periodosFerias}
-					onPeriodoAdicionado={handlePeriodoAdicionado}
-					onPeriodoRemovido={handlePeriodoRemovido}
-					{maxPeriodos}
-					{minDiasPorPeriodo}
-					modoVisualizacao="month"
-				></CalendarioFerias>
+				<!-- Formulário para adicionar período -->
+				<div class="card bg-base-100 shadow-lg mb-6">
+					<div class="card-body">
+						<h3 class="card-title mb-4">Adicionar Período</h3>
+						
+						<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+							<div class="form-control">
+								<label class="label">
+									<span class="label-text font-semibold">Data Início</span>
+								</label>
+								<input
+									type="date"
+									class="input input-bordered"
+									bind:value={dataInicioPeriodo}
+								/>
+							</div>
+
+							<div class="form-control">
+								<label class="label">
+									<span class="label-text font-semibold">Data Fim</span>
+								</label>
+								<input
+									type="date"
+									class="input input-bordered"
+									bind:value={dataFimPeriodo}
+									min={dataInicioPeriodo || undefined}
+								/>
+							</div>
+
+							<div class="form-control">
+								<label class="label">
+									<span class="label-text font-semibold">Dias</span>
+								</label>
+								<div class="input input-bordered flex items-center">
+									<span class="font-bold text-primary">{diasPeriodoAtual}</span>
+									<span class="ml-2 text-sm opacity-70">dias</span>
+								</div>
+							</div>
+						</div>
+
+						<div class="card-actions mt-4">
+							<button
+								type="button"
+								class="btn btn-primary gap-2"
+								onclick={adicionarPeriodo}
+								disabled={!dataInicioPeriodo || !dataFimPeriodo || diasPeriodoAtual <= 0}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+										d="M12 4v16m8-8H4"
+									/>
+								</svg>
+								Adicionar Período
+							</button>
+						</div>
+					</div>
+				</div>
+
+				<!-- Lista de períodos adicionados -->
+				{#if periodosFerias.length > 0}
+					<div class="card bg-base-100 shadow-lg mb-6">
+						<div class="card-body">
+							<h3 class="card-title mb-4">Períodos Adicionados ({periodosFerias.length})</h3>
+							<div class="space-y-3">
+								{#each periodosFerias as periodo, index (index)}
+									<div class="bg-base-200 flex items-center gap-4 rounded-lg p-4">
+										<div
+											class="badge badge-lg badge-primary flex h-12 w-12 items-center justify-center font-bold text-white"
+										>
+											{index + 1}
+										</div>
+										<div class="flex-1">
+											<p class="font-semibold">
+												{formatarDataString(periodo.dataInicio)}
+												até
+												{formatarDataString(periodo.dataFim)}
+											</p>
+											<p class="text-base-content/70 text-sm">
+												{periodo.dias} dias corridos
+											</p>
+										</div>
+										<button
+											type="button"
+											class="btn btn-error btn-sm gap-2"
+											onclick={() => removerPeriodo(index)}
+										>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												class="h-4 w-4"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke="currentColor"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M6 18L18 6M6 6l12 12"
+												/>
+											</svg>
+											Remover
+										</button>
+									</div>
+								{/each}
+							</div>
+						</div>
+					</div>
+				{/if}
 
 				<!-- Validações -->
 				{#if validacao && periodosFerias.length > 0}
@@ -529,17 +739,9 @@
 									</div>
 									<div class="flex-1">
 										<p class="font-semibold">
-											{new Date(periodo.dataInicio).toLocaleDateString('pt-BR', {
-												day: '2-digit',
-												month: 'long',
-												year: 'numeric'
-											})}
+											{formatarDataString(periodo.dataInicio)}
 											até
-											{new Date(periodo.dataFim).toLocaleDateString('pt-BR', {
-												day: '2-digit',
-												month: 'long',
-												year: 'numeric'
-											})}
+											{formatarDataString(periodo.dataFim)}
 										</p>
 										<p class="text-base-content/70 text-sm">
 											{periodo.dias} dias corridos