From ebde59c6d21533fe4e4d0d1c6491d4ebe384d192 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Thu, 13 Nov 2025 05:51:55 -0300
Subject: [PATCH] refactor: enhance vacation management components and add
 status update functionality

- Improved the vacation request component with better loading states and error handling.
- Added a new mutation to update the status of vacation requests, allowing transitions between different states.
- Enhanced the calendar display for vacation periods and integrated a 3D bar chart for visualizing vacation data.
- Refactored the code for better readability and maintainability, ensuring a smoother user experience.
---
 .../lib/components/AlterarStatusFerias.svelte |  277 +++++
 .../components/ti/charts/BarChart3D.svelte    |  372 ++++++
 .../routes/(dashboard)/perfil/+page.svelte    |    3 +
 .../atestados-licencas/+page.svelte           |  466 ++++----
 .../recursos-humanos/ferias/+page.svelte      | 1023 +++++++++--------
 packages/backend/convex/ferias.ts             |   83 ++
 6 files changed, 1503 insertions(+), 721 deletions(-)
 create mode 100644 apps/web/src/lib/components/AlterarStatusFerias.svelte
 create mode 100644 apps/web/src/lib/components/ti/charts/BarChart3D.svelte

diff --git a/apps/web/src/lib/components/AlterarStatusFerias.svelte b/apps/web/src/lib/components/AlterarStatusFerias.svelte
new file mode 100644
index 0000000..43f2a44
--- /dev/null
+++ b/apps/web/src/lib/components/AlterarStatusFerias.svelte
@@ -0,0 +1,277 @@
+<script lang="ts">
+	import { useConvexClient } from 'convex-svelte';
+	import { api } from '@sgse-app/backend/convex/_generated/api';
+	import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
+
+	type SolicitacaoFerias = Doc<'solicitacoesFerias'> & {
+		funcionario?: Doc<'funcionarios'> | null;
+		gestor?: Doc<'usuarios'> | null;
+	};
+
+	interface Props {
+		solicitacao: SolicitacaoFerias;
+		usuarioId: Id<'usuarios'>;
+		onSucesso?: () => void;
+		onCancelar?: () => void;
+	}
+
+	let { solicitacao, usuarioId, onSucesso, onCancelar }: Props = $props();
+
+	const client = useConvexClient();
+
+	let processando = $state(false);
+	let erro = $state('');
+
+	function getStatusBadge(status: string) {
+		const badges: Record<string, string> = {
+			aguardando_aprovacao: 'badge-warning',
+			aprovado: 'badge-success',
+			reprovado: 'badge-error',
+			data_ajustada_aprovada: 'badge-info'
+		};
+		return badges[status] || 'badge-neutral';
+	}
+
+	function getStatusTexto(status: string) {
+		const textos: Record<string, string> = {
+			aguardando_aprovacao: 'Aguardando Aprovação',
+			aprovado: 'Aprovado',
+			reprovado: 'Reprovado',
+			data_ajustada_aprovada: 'Data Ajustada e Aprovada'
+		};
+		return textos[status] || status;
+	}
+
+	async function voltarParaAguardando() {
+		try {
+			processando = true;
+			erro = '';
+
+			await client.mutation(api.ferias.atualizarStatus, {
+				solicitacaoId: solicitacao._id,
+				novoStatus: 'aguardando_aprovacao',
+				usuarioId: usuarioId
+			});
+
+			if (onSucesso) onSucesso();
+		} catch (e) {
+			erro = e instanceof Error ? e.message : String(e);
+		} finally {
+			processando = false;
+		}
+	}
+
+	function formatarData(data: number) {
+		return new Date(data).toLocaleString('pt-BR');
+	}
+</script>
+
+<div class="card bg-base-100 shadow-xl">
+	<div class="card-body">
+		<div class="mb-4 flex items-start justify-between">
+			<div>
+				<h2 class="card-title text-2xl">
+					{solicitacao.funcionario?.nome || 'Funcionário'}
+				</h2>
+				<p class="text-base-content/70 mt-1 text-sm">
+					Ano de Referência: {solicitacao.anoReferencia}
+				</p>
+			</div>
+			<div class={`badge ${getStatusBadge(solicitacao.status)} badge-lg`}>
+				{getStatusTexto(solicitacao.status)}
+			</div>
+		</div>
+
+		<!-- Períodos Solicitados -->
+		<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 (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>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<!-- Observações -->
+		{#if solicitacao.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}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Histórico -->
+		{#if solicitacao.historicoAlteracoes && solicitacao.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 (hist.data)}
+						<div class="text-base-content/70 flex items-center gap-2 text-xs">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-3 w-3"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke="currentColor"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+								/>
+							</svg>
+							<span>{formatarData(hist.data)}</span>
+							<span>-</span>
+							<span>{hist.acao}</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Ação: Voltar para Aguardando Aprovação -->
+		{#if solicitacao.status !== 'aguardando_aprovacao'}
+			<div class="divider mt-6"></div>
+			<div class="alert alert-info">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					class="h-6 w-6 shrink-0 stroke-current"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					></path>
+				</svg>
+				<div>
+					<h3 class="font-bold">Alterar Status</h3>
+					<div class="text-sm">
+						Ao voltar para "Aguardando Aprovação", a solicitação ficará disponível para aprovação ou
+						reprovação pelo gestor.
+					</div>
+				</div>
+			</div>
+
+			<div class="card-actions mt-4 justify-end">
+				<button
+					type="button"
+					class="btn btn-warning gap-2"
+					onclick={voltarParaAguardando}
+					disabled={processando}
+				>
+					<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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+						/>
+					</svg>
+					Voltar para Aguardando Aprovação
+				</button>
+			</div>
+		{:else}
+			<div class="divider mt-6"></div>
+			<div class="alert">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					class="stroke-info h-6 w-6 shrink-0"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					></path>
+				</svg>
+				<span>Esta solicitação já está aguardando aprovação.</span>
+			</div>
+		{/if}
+
+		<!-- Motivo Reprovação (se reprovado) -->
+		{#if solicitacao.status === 'reprovado' && solicitacao.motivoReprovacao}
+			<div class="alert alert-error mt-4">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<div>
+					<div class="font-bold">Motivo da Reprovação:</div>
+					<div class="text-sm">{solicitacao.motivoReprovacao}</div>
+				</div>
+			</div>
+		{/if}
+
+		<!-- Erro -->
+		{#if erro}
+			<div class="alert alert-error mt-4">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6 shrink-0 stroke-current"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+					/>
+				</svg>
+				<span>{erro}</span>
+			</div>
+		{/if}
+
+		<!-- Botão Fechar -->
+		{#if onCancelar}
+			<div class="card-actions mt-4 justify-end">
+				<button type="button" class="btn" onclick={onCancelar} disabled={processando}>
+					Cancelar
+				</button>
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/apps/web/src/lib/components/ti/charts/BarChart3D.svelte b/apps/web/src/lib/components/ti/charts/BarChart3D.svelte
new file mode 100644
index 0000000..cef1b58
--- /dev/null
+++ b/apps/web/src/lib/components/ti/charts/BarChart3D.svelte
@@ -0,0 +1,372 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+	import { Chart, registerables } from 'chart.js';
+
+	Chart.register(...registerables);
+
+	type Props = {
+		data: {
+			labels: string[];
+			datasets: Array<{
+				label: string;
+				data: number[];
+				backgroundColor?: string | string[];
+				borderColor?: string | string[];
+				borderWidth?: number;
+			}>;
+		};
+		title?: string;
+		height?: number;
+		stacked?: boolean;
+	};
+
+	let { data, title = '', height = 400, stacked = false }: Props = $props();
+
+	let canvas: HTMLCanvasElement;
+	let chart: Chart | null = null;
+
+	// Função para clarear cor
+	function lightenColor(color: string, percent: number): string {
+		const num = parseInt(color.replace('#', ''), 16);
+		const amt = Math.round(2.55 * percent);
+		const R = Math.min(255, (num >> 16) + amt);
+		const G = Math.min(255, ((num >> 8) & 0x00ff) + amt);
+		const B = Math.min(255, (num & 0x0000ff) + amt);
+		return `#${(0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1)}`;
+	}
+
+	// Função para escurecer cor
+	function darkenColor(color: string, percent: number): string {
+		const num = parseInt(color.replace('#', ''), 16);
+		const amt = Math.round(2.55 * percent);
+		const R = Math.max(0, (num >> 16) - amt);
+		const G = Math.max(0, ((num >> 8) & 0x00ff) - amt);
+		const B = Math.max(0, (num & 0x0000ff) - amt);
+		return `#${(0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1)}`;
+	}
+
+	// Criar gradientes 3D para cada cor
+	function create3DGradientColors(colors: string[]): string[] {
+		// Retornar cores com sombra 3D aplicada (usando cores mais claras e escuras)
+		return colors.map((color) => {
+			// Criar gradiente simulando 3D usando múltiplas cores
+			return color; // Por enquanto retornar cor original, gradiente será aplicado via plugin
+		});
+	}
+
+	onMount(() => {
+		if (canvas) {
+			const ctx = canvas.getContext('2d');
+			if (ctx) {
+				// Preparar dados com cores 3D
+				const processedData = {
+					labels: data.labels,
+					datasets: data.datasets.map((dataset) => {
+						// Processar cores de background
+						let backgroundColor: string[];
+						if (Array.isArray(dataset.backgroundColor)) {
+							backgroundColor = dataset.backgroundColor;
+						} else if (dataset.backgroundColor) {
+							backgroundColor = data.labels.map(() => dataset.backgroundColor as string);
+						} else {
+							backgroundColor = data.labels.map(() => '#3b82f6');
+						}
+
+						// Processar cores de borda
+						let borderColor: string[];
+						if (Array.isArray(dataset.borderColor)) {
+							borderColor = dataset.borderColor;
+						} else if (dataset.borderColor) {
+							borderColor = data.labels.map(() => dataset.borderColor as string);
+						} else {
+							borderColor = backgroundColor.map((color) => darkenColor(color, 15));
+						}
+
+						return {
+							...dataset,
+							backgroundColor,
+							borderColor,
+							borderWidth: dataset.borderWidth || 2,
+							borderRadius: {
+								topLeft: 10,
+								topRight: 10,
+								bottomLeft: 10,
+								bottomRight: 10
+							},
+							borderSkipped: false,
+							barThickness: 'flex',
+							maxBarThickness: 60
+						};
+					})
+				};
+
+				chart = new Chart(ctx, {
+					type: 'bar',
+					data: processedData,
+					options: {
+						indexAxis: 'x',
+						responsive: true,
+						maintainAspectRatio: false,
+						layout: {
+							padding: {
+								top: 15,
+								right: 15,
+								bottom: 15,
+								left: 15
+							}
+						},
+						plugins: {
+							legend: {
+								display: true,
+								position: 'top',
+								labels: {
+									color: '#374151', // Cinza escuro para melhor legibilidade
+									font: {
+										size: 13,
+										family: "'Inter', sans-serif",
+										weight: '600'
+									},
+									usePointStyle: false,
+									padding: 18,
+									boxWidth: 18,
+									boxHeight: 14,
+									generateLabels: function (chart: any) {
+										const datasets = chart.data.datasets;
+										return datasets.map((dataset: any, datasetIndex: number) => {
+											// Priorizar cor da legenda se disponível, senão usar a cor do background
+											let backgroundColor: string;
+											
+											if (dataset.legendColor) {
+												// Se há uma cor específica para a legenda, usar ela
+												backgroundColor = dataset.legendColor;
+											} else if (Array.isArray(dataset.backgroundColor)) {
+												// Se todas as cores são iguais, usar a primeira
+												const firstColor = dataset.backgroundColor[0];
+												if (dataset.backgroundColor.every((c: string) => c === firstColor)) {
+													backgroundColor = firstColor;
+												} else {
+													// Para múltiplas cores diferentes, usar a primeira como representativa
+													backgroundColor = firstColor;
+												}
+											} else {
+												backgroundColor = dataset.backgroundColor || '#3b82f6';
+											}
+
+											// Cor da borda para a legenda
+											let borderColor: string;
+											if (Array.isArray(dataset.borderColor)) {
+												borderColor = dataset.borderColor[0] || backgroundColor;
+											} else {
+												borderColor = dataset.borderColor || backgroundColor;
+											}
+
+											return {
+												text: dataset.label || `Dataset ${datasetIndex + 1}`,
+												fillStyle: backgroundColor,
+												strokeStyle: borderColor,
+												lineWidth: dataset.borderWidth || 2,
+												hidden: !chart.isDatasetVisible(datasetIndex),
+												index: datasetIndex
+											};
+										});
+									}
+								}
+							},
+							title: {
+								display: !!title,
+								text: title,
+								color: '#1f2937',
+								font: {
+									size: 18,
+									weight: 'bold',
+									family: "'Inter', sans-serif"
+								},
+								padding: {
+									top: 10,
+									bottom: 25
+								}
+							},
+							tooltip: {
+								backgroundColor: 'rgba(0, 0, 0, 0.9)',
+								titleColor: '#fff',
+								bodyColor: '#fff',
+								borderColor: '#3b82f6',
+								borderWidth: 2,
+								padding: 14,
+								cornerRadius: 10,
+								displayColors: true,
+								titleFont: {
+									size: 14,
+									weight: 'bold',
+									family: "'Inter', sans-serif"
+								},
+								bodyFont: {
+									size: 13,
+									family: "'Inter', sans-serif"
+								},
+								callbacks: {
+									label: function (context: any) {
+										let label = context.dataset.label || '';
+										if (label) {
+											label += ': ';
+										}
+										if (context.parsed.y !== null && context.parsed.y !== undefined) {
+											label += context.parsed.y.toLocaleString('pt-BR');
+											// Verificar se é número de solicitações ou dias
+											if (label.includes('Solicitações')) {
+												label += ' solicitação(ões)';
+											} else {
+												label += ' dia(s)';
+											}
+										}
+										return label;
+									}
+								}
+							}
+						},
+						scales: {
+							x: {
+								stacked: stacked,
+								grid: {
+									display: false
+								},
+								ticks: {
+									color: '#6b7280',
+									font: {
+										size: 12,
+										family: "'Inter', sans-serif",
+										weight: '500'
+									},
+									maxRotation: 45,
+									minRotation: 0
+								},
+								border: {
+									display: true,
+									color: '#e5e7eb',
+									width: 2
+								}
+							},
+							y: {
+								stacked: stacked,
+								beginAtZero: true,
+								grid: {
+									color: 'rgba(0, 0, 0, 0.06)',
+									lineWidth: 1,
+									drawBorder: false
+								},
+								ticks: {
+									color: '#6b7280',
+									font: {
+										size: 11,
+										family: "'Inter', sans-serif",
+										weight: '500'
+									},
+									callback: function (value: any) {
+										if (typeof value === 'number') {
+											return value.toLocaleString('pt-BR');
+										}
+										return value;
+									}
+								},
+								border: {
+									display: true,
+									color: '#e5e7eb',
+									width: 2
+								}
+							}
+						},
+						animation: {
+							duration: 1200,
+							easing: 'easeInOutQuart'
+						},
+						interaction: {
+							mode: 'index',
+							intersect: false
+						},
+						// Plugin customizado para aplicar gradiente 3D
+						onHover: (event: any, activeElements: any[]) => {
+							if (event.native) {
+								const target = event.native.target as HTMLElement;
+								if (activeElements.length > 0) {
+									target.style.cursor = 'pointer';
+								} else {
+									target.style.cursor = 'default';
+								}
+							}
+						}
+					},
+					plugins: [
+						{
+							id: 'gradient3D',
+							beforeDraw: (chart: any) => {
+								const ctx = chart.ctx;
+								const chartArea = chart.chartArea;
+
+								chart.data.datasets.forEach((dataset: any, datasetIndex: number) => {
+									const meta = chart.getDatasetMeta(datasetIndex);
+									if (!meta || !meta.data) return;
+
+									meta.data.forEach((bar: any, index: number) => {
+										if (!bar || bar.hidden) return;
+
+										const backgroundColor = Array.isArray(dataset.backgroundColor)
+											? dataset.backgroundColor[index]
+											: dataset.backgroundColor;
+
+										if (!backgroundColor || typeof backgroundColor !== 'string') return;
+
+										// Criar gradiente 3D para a barra
+										const gradient = ctx.createLinearGradient(
+											bar.x - bar.width / 2,
+											bar.y,
+											bar.x + bar.width / 2,
+											bar.base
+										);
+
+										// Aplicar gradiente com efeito 3D
+										const lightColor = lightenColor(backgroundColor, 25);
+										const darkColor = darkenColor(backgroundColor, 15);
+
+										gradient.addColorStop(0, lightColor);
+										gradient.addColorStop(0.3, backgroundColor);
+										gradient.addColorStop(0.7, backgroundColor);
+										gradient.addColorStop(1, darkColor);
+
+										// Redesenhar a barra com gradiente
+										ctx.save();
+										ctx.fillStyle = gradient;
+										ctx.fillRect(
+											bar.x - bar.width / 2,
+											bar.y,
+											bar.width,
+											bar.base - bar.y
+										);
+										ctx.restore();
+									});
+								});
+							}
+						}
+					]
+				} as any);
+			}
+		}
+	});
+
+	$effect(() => {
+		if (chart && data) {
+			// Atualizar dados do gráfico
+			chart.data = data;
+			chart.update('active');
+		}
+	});
+
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<div style="height: {height}px; position: relative;">
+	<canvas bind:this={canvas}></canvas>
+</div>
diff --git a/apps/web/src/routes/(dashboard)/perfil/+page.svelte b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
index 3da2728..dc835ef 100644
--- a/apps/web/src/routes/(dashboard)/perfil/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/perfil/+page.svelte
@@ -91,6 +91,7 @@
 			: { data: null }
 	);
 
+	// Query para times onde o usuário é gestor - usando $derived para garantir reatividade
 	const meusTimesGestorQuery = $derived(
 		currentUser?.data?._id
 			? useQuery(api.times.listarPorGestor, {
@@ -105,6 +106,8 @@
 	const minhasSolicitacoes = $derived(minhasSolicitacoesQuery?.data || []);
 	const minhasAusencias = $derived(minhasAusenciasQuery?.data || []);
 	const meuTime = $derived(meuTimeQuery?.data);
+	
+	// Extração de meusTimesGestor
 	const meusTimesGestor = $derived(meusTimesGestorQuery?.data || []);
 
 	// Verificar se é gestor
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
index a346d4b..028d93f 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
@@ -776,9 +776,243 @@
 
 		<!-- Calendário Interativo -->
 		{#if eventosQuery?.data}
-			<CalendarioAfastamentos eventos={eventosQuery.data} tipoFiltro={filtroTipo} />
+			<div class="mb-6">
+				<CalendarioAfastamentos eventos={eventosQuery.data} tipoFiltro={filtroTipo} />
+			</div>
 		{/if}
 
+		<!-- Lista de Funcionários Afastados -->
+		{#if graficosQuery?.data}
+			<div class="card bg-base-100 mb-6 shadow-xl">
+				<div class="card-body">
+					<h2 class="card-title mb-4">Funcionários Atualmente Afastados</h2>
+					{#if graficosQuery.data.funcionariosAfastados.length > 0}
+						<div class="overflow-x-auto">
+							<table class="table-zebra table">
+								<thead>
+									<tr>
+										<th>Funcionário</th>
+										<th>Tipo</th>
+										<th>Data Início</th>
+										<th>Data Fim</th>
+									</tr>
+								</thead>
+								<tbody>
+									{#each graficosQuery.data.funcionariosAfastados as item}
+										<tr>
+											<td>{item.funcionarioNome}</td>
+											<td>
+												<span
+													class="badge {item.tipo === 'atestado_medico'
+														? 'badge-error'
+														: item.tipo === 'declaracao_comparecimento'
+															? 'badge-warning'
+															: item.tipo === 'maternidade'
+																? 'badge-secondary'
+																: item.tipo === 'paternidade'
+																	? 'badge-info'
+																	: 'badge-success'}"
+												>
+													{item.tipo === 'atestado_medico'
+														? 'Atestado Médico'
+														: item.tipo === 'declaracao_comparecimento'
+															? 'Declaração'
+															: item.tipo === 'maternidade'
+																? 'Licença Maternidade'
+																: item.tipo === 'paternidade'
+																	? 'Licença Paternidade'
+																	: item.tipo}
+												</span>
+											</td>
+											<td>{formatarData(item.dataInicio)}</td>
+											<td>{formatarData(item.dataFim)}</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						</div>
+					{:else}
+						<div class="text-base-content/60 py-10 text-center">
+							Nenhum funcionário afastado no momento
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		<!-- Tabela de Registros -->
+		<div class="card bg-base-100 mb-6 shadow-xl">
+			<div class="card-body">
+				<h2 class="card-title mb-4">Registros</h2>
+				<div class="overflow-x-auto">
+					<table class="table-zebra table">
+						<thead>
+							<tr>
+								<th>Funcionário</th>
+								<th>Tipo</th>
+								<th>Data Início</th>
+								<th>Data Fim</th>
+								<th>Dias</th>
+								<th>Status</th>
+								<th>Ações</th>
+							</tr>
+						</thead>
+						<tbody>
+							{#each registrosFiltrados.atestados as atestado}
+								<tr>
+									<td>{atestado.funcionario?.nome || '-'}</td>
+									<td>
+										<span
+											class="badge {atestado.tipo === 'atestado_medico'
+												? 'badge-error'
+												: 'badge-warning'}"
+										>
+											{atestado.tipo === 'atestado_medico' ? 'Atestado Médico' : 'Declaração'}
+										</span>
+									</td>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(atestado.dataInicio)}</td
+									>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(atestado.dataFim)}</td
+									>
+									<td>{atestado.dias}</td>
+									<td>
+										<span
+											class="badge {atestado.status === 'ativo'
+												? 'badge-success'
+												: 'badge-neutral'}"
+										>
+											{atestado.status === 'ativo' ? 'Ativo' : 'Finalizado'}
+										</span>
+									</td>
+									<td>
+										<div class="flex gap-2">
+											{#if atestado.documentoId}
+												<button
+													class="btn btn-xs btn-ghost"
+													onclick={async () => {
+														try {
+															const url = await client.query(
+																api.atestadosLicencas.obterUrlDocumento,
+																{
+																	storageId: atestado.documentoId as any
+																}
+															);
+															if (url) {
+																window.open(url, '_blank');
+															} else {
+																mostrarErro(
+																	'Erro ao visualizar documento',
+																	'Não foi possível obter a URL do documento.',
+																	'O documento pode ter sido removido ou não existe mais.'
+																);
+															}
+														} catch (err: any) {
+															console.error('Erro ao obter URL do documento:', err);
+															mostrarErro(
+																'Erro ao visualizar documento',
+																'Não foi possível abrir o documento.',
+																err?.message || err?.toString() || 'Erro desconhecido'
+															);
+														}
+													}}
+												>
+													Ver Doc
+												</button>
+											{/if}
+											<button
+												class="btn btn-xs btn-error"
+												onclick={() => excluirRegistro('atestado', atestado._id)}
+											>
+												Excluir
+											</button>
+										</div>
+									</td>
+								</tr>
+							{/each}
+							{#each registrosFiltrados.licencas as licenca}
+								<tr>
+									<td>{licenca.funcionario?.nome || '-'}</td>
+									<td>
+										<span
+											class="badge {licenca.tipo === 'maternidade'
+												? 'badge-secondary'
+												: 'badge-info'}"
+										>
+											Licença{' '}
+											{licenca.tipo === 'maternidade' ? 'Maternidade' : 'Paternidade'}
+											{licenca.ehProrrogacao ? ' (Prorrogação)' : ''}
+										</span>
+									</td>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(licenca.dataInicio)}</td
+									>
+									<td class="font-mono text-xs whitespace-nowrap"
+										>{formatarData(licenca.dataFim)}</td
+									>
+									<td>{licenca.dias}</td>
+									<td>
+										<span
+											class="badge {licenca.status === 'ativo' ? 'badge-success' : 'badge-neutral'}"
+										>
+											{licenca.status === 'ativo' ? 'Ativo' : 'Finalizado'}
+										</span>
+									</td>
+									<td>
+										<div class="flex gap-2">
+											{#if licenca.documentoId}
+												<button
+													class="btn btn-xs btn-ghost"
+													onclick={async () => {
+														try {
+															const url = await client.query(
+																api.atestadosLicencas.obterUrlDocumento,
+																{
+																	storageId: licenca.documentoId as any
+																}
+															);
+															if (url) {
+																window.open(url, '_blank');
+															} else {
+																mostrarErro(
+																	'Erro ao visualizar documento',
+																	'Não foi possível obter a URL do documento.',
+																	'O documento pode ter sido removido ou não existe mais.'
+																);
+															}
+														} catch (err: any) {
+															console.error('Erro ao obter URL do documento:', err);
+															mostrarErro(
+																'Erro ao visualizar documento',
+																'Não foi possível abrir o documento.',
+																err?.message || err?.toString() || 'Erro desconhecido'
+															);
+														}
+													}}
+												>
+													Ver Doc
+												</button>
+											{/if}
+											<button
+												class="btn btn-xs btn-error"
+												onclick={() => excluirRegistro('licenca', licenca._id)}
+											>
+												Excluir
+											</button>
+										</div>
+									</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+					{#if registrosFiltrados.atestados.length === 0 && registrosFiltrados.licencas.length === 0}
+						<div class="text-base-content/60 py-10 text-center">Nenhum registro encontrado</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+
 		<!-- Gráficos -->
 		{#if graficosQuery?.data}
 			{@const dados = graficosQuery.data.totalDiasPorTipo}
@@ -1060,237 +1294,7 @@
 					</div>
 				</div>
 			</div>
-
-			<!-- Lista de Funcionários Afastados -->
-			<div class="card bg-base-100 mb-6 shadow-xl">
-				<div class="card-body">
-					<h2 class="card-title mb-4">Funcionários Atualmente Afastados</h2>
-					{#if graficosQuery.data.funcionariosAfastados.length > 0}
-						<div class="overflow-x-auto">
-							<table class="table-zebra table">
-								<thead>
-									<tr>
-										<th>Funcionário</th>
-										<th>Tipo</th>
-										<th>Data Início</th>
-										<th>Data Fim</th>
-									</tr>
-								</thead>
-								<tbody>
-									{#each graficosQuery.data.funcionariosAfastados as item}
-										<tr>
-											<td>{item.funcionarioNome}</td>
-											<td>
-												<span
-													class="badge {item.tipo === 'atestado_medico'
-														? 'badge-error'
-														: item.tipo === 'declaracao_comparecimento'
-															? 'badge-warning'
-															: item.tipo === 'maternidade'
-																? 'badge-secondary'
-																: item.tipo === 'paternidade'
-																	? 'badge-info'
-																	: 'badge-success'}"
-												>
-													{item.tipo === 'atestado_medico'
-														? 'Atestado Médico'
-														: item.tipo === 'declaracao_comparecimento'
-															? 'Declaração'
-															: item.tipo === 'maternidade'
-																? 'Licença Maternidade'
-																: item.tipo === 'paternidade'
-																	? 'Licença Paternidade'
-																	: item.tipo}
-												</span>
-											</td>
-											<td>{formatarData(item.dataInicio)}</td>
-											<td>{formatarData(item.dataFim)}</td>
-										</tr>
-									{/each}
-								</tbody>
-							</table>
-						</div>
-					{:else}
-						<div class="text-base-content/60 py-10 text-center">
-							Nenhum funcionário afastado no momento
-						</div>
-					{/if}
-				</div>
-			</div>
 		{/if}
-
-		<!-- Tabela de Registros -->
-		<div class="card bg-base-100 shadow-xl">
-			<div class="card-body">
-				<h2 class="card-title mb-4">Registros</h2>
-				<div class="overflow-x-auto">
-					<table class="table-zebra table">
-						<thead>
-							<tr>
-								<th>Funcionário</th>
-								<th>Tipo</th>
-								<th>Data Início</th>
-								<th>Data Fim</th>
-								<th>Dias</th>
-								<th>Status</th>
-								<th>Ações</th>
-							</tr>
-						</thead>
-						<tbody>
-							{#each registrosFiltrados.atestados as atestado}
-								<tr>
-									<td>{atestado.funcionario?.nome || '-'}</td>
-									<td>
-										<span
-											class="badge {atestado.tipo === 'atestado_medico'
-												? 'badge-error'
-												: 'badge-warning'}"
-										>
-											{atestado.tipo === 'atestado_medico' ? 'Atestado Médico' : 'Declaração'}
-										</span>
-									</td>
-									<td class="font-mono text-xs whitespace-nowrap"
-										>{formatarData(atestado.dataInicio)}</td
-									>
-									<td class="font-mono text-xs whitespace-nowrap"
-										>{formatarData(atestado.dataFim)}</td
-									>
-									<td>{atestado.dias}</td>
-									<td>
-										<span
-											class="badge {atestado.status === 'ativo'
-												? 'badge-success'
-												: 'badge-neutral'}"
-										>
-											{atestado.status === 'ativo' ? 'Ativo' : 'Finalizado'}
-										</span>
-									</td>
-									<td>
-										<div class="flex gap-2">
-											{#if atestado.documentoId}
-												<button
-													class="btn btn-xs btn-ghost"
-													onclick={async () => {
-														try {
-															const url = await client.query(
-																api.atestadosLicencas.obterUrlDocumento,
-																{
-																	storageId: atestado.documentoId as any
-																}
-															);
-															if (url) {
-																window.open(url, '_blank');
-															} else {
-																mostrarErro(
-																	'Erro ao visualizar documento',
-																	'Não foi possível obter a URL do documento.',
-																	'O documento pode ter sido removido ou não existe mais.'
-																);
-															}
-														} catch (err: any) {
-															console.error('Erro ao obter URL do documento:', err);
-															mostrarErro(
-																'Erro ao visualizar documento',
-																'Não foi possível abrir o documento.',
-																err?.message || err?.toString() || 'Erro desconhecido'
-															);
-														}
-													}}
-												>
-													Ver Doc
-												</button>
-											{/if}
-											<button
-												class="btn btn-xs btn-error"
-												onclick={() => excluirRegistro('atestado', atestado._id)}
-											>
-												Excluir
-											</button>
-										</div>
-									</td>
-								</tr>
-							{/each}
-							{#each registrosFiltrados.licencas as licenca}
-								<tr>
-									<td>{licenca.funcionario?.nome || '-'}</td>
-									<td>
-										<span
-											class="badge {licenca.tipo === 'maternidade'
-												? 'badge-secondary'
-												: 'badge-info'}"
-										>
-											Licença{' '}
-											{licenca.tipo === 'maternidade' ? 'Maternidade' : 'Paternidade'}
-											{licenca.ehProrrogacao ? ' (Prorrogação)' : ''}
-										</span>
-									</td>
-									<td class="font-mono text-xs whitespace-nowrap"
-										>{formatarData(licenca.dataInicio)}</td
-									>
-									<td class="font-mono text-xs whitespace-nowrap"
-										>{formatarData(licenca.dataFim)}</td
-									>
-									<td>{licenca.dias}</td>
-									<td>
-										<span
-											class="badge {licenca.status === 'ativo' ? 'badge-success' : 'badge-neutral'}"
-										>
-											{licenca.status === 'ativo' ? 'Ativo' : 'Finalizado'}
-										</span>
-									</td>
-									<td>
-										<div class="flex gap-2">
-											{#if licenca.documentoId}
-												<button
-													class="btn btn-xs btn-ghost"
-													onclick={async () => {
-														try {
-															const url = await client.query(
-																api.atestadosLicencas.obterUrlDocumento,
-																{
-																	storageId: licenca.documentoId as any
-																}
-															);
-															if (url) {
-																window.open(url, '_blank');
-															} else {
-																mostrarErro(
-																	'Erro ao visualizar documento',
-																	'Não foi possível obter a URL do documento.',
-																	'O documento pode ter sido removido ou não existe mais.'
-																);
-															}
-														} catch (err: any) {
-															console.error('Erro ao obter URL do documento:', err);
-															mostrarErro(
-																'Erro ao visualizar documento',
-																'Não foi possível abrir o documento.',
-																err?.message || err?.toString() || 'Erro desconhecido'
-															);
-														}
-													}}
-												>
-													Ver Doc
-												</button>
-											{/if}
-											<button
-												class="btn btn-xs btn-error"
-												onclick={() => excluirRegistro('licenca', licenca._id)}
-											>
-												Excluir
-											</button>
-										</div>
-									</td>
-								</tr>
-							{/each}
-						</tbody>
-					</table>
-					{#if registrosFiltrados.atestados.length === 0 && registrosFiltrados.licencas.length === 0}
-						<div class="text-base-content/60 py-10 text-center">Nenhum registro encontrado</div>
-					{/if}
-				</div>
-			</div>
-		</div>
 	{:else if abaAtiva === 'atestado'}
 		<!-- Formulário Atestado Médico -->
 		<div class="card bg-base-100 shadow-xl">
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
index cd6d2f2..2ac2bf0 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/ferias/+page.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import { SvelteDate, SvelteMap } from 'svelte/reactivity';
-	import { useQuery } from 'convex-svelte';
+	import { useQuery, useConvexClient } from 'convex-svelte';
 	import { api } from '@sgse-app/backend/convex/_generated/api';
 	import type { FunctionReturnType } from 'convex/server';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
+	import BarChart3D from '$lib/components/ti/charts/BarChart3D.svelte';
+	import AlterarStatusFerias from '$lib/components/AlterarStatusFerias.svelte';
 	type CalendarConstructor = typeof import('@fullcalendar/core').Calendar;
 	type CalendarInstance = import('@fullcalendar/core').Calendar;
 	type EventInput = import('@fullcalendar/core').EventInput;
@@ -34,10 +36,29 @@
 
 	// Buscar TODAS as solicitações de férias (Dashboard RH)
 	const todasSolicitacoesQuery = useQuery(api.ferias.listarTodas, {});
+	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);
 
 	// Estados de loading e error
 	const isLoading = $derived(todasSolicitacoesQuery?.isLoading ?? true);
 
+	// Debug: Log dos dados carregados
+	$effect(() => {
+		if (todasSolicitacoesQuery?.data) {
+			console.log('📦 [Backend] Dados carregados:', {
+				total: todasSolicitacoesQuery.data.length,
+				isLoading: todasSolicitacoesQuery.isLoading,
+				dados: todasSolicitacoesQuery.data
+			});
+		}
+		if (todasSolicitacoesQuery?.isLoading !== undefined) {
+			console.log('🔄 [Backend] Estado de loading:', todasSolicitacoesQuery.isLoading);
+		}
+	});
+
 	// Verificar erro de forma segura
 	const queryResult = $derived(todasSolicitacoesQuery);
 	const hasError = $derived(
@@ -306,6 +327,106 @@
 		})()
 	);
 
+	// Dados para gráfico de barras 3D - Dias por Mês
+	const chartDataMes = $derived(() => {
+		if (periodosPorMesAtivos.length === 0) {
+			return {
+				labels: [],
+				datasets: []
+			};
+		}
+
+		const cores = [
+			'#3b82f6', // Azul
+			'#10b981', // Verde
+			'#f59e0b', // Amarelo
+			'#ef4444', // Vermelho
+			'#8b5cf6', // Roxo
+			'#06b6d4', // Ciano
+			'#f97316', // Laranja
+			'#ec4899' // Rosa
+		];
+
+		// Cor principal para a legenda (azul primary)
+		const corPrincipal = '#3b82f6';
+
+		return {
+			labels: periodosPorMesAtivos.map((p) => p.label),
+			datasets: [
+				{
+					label: 'Dias de Férias',
+					data: periodosPorMesAtivos.map((p) => p.totalDias),
+					backgroundColor: periodosPorMesAtivos.map((_, index) => cores[index % cores.length]),
+					borderColor: periodosPorMesAtivos.map((_, index) => cores[index % cores.length]),
+					// Cor representativa para a legenda (primeira cor da paleta)
+					legendColor: corPrincipal,
+					borderWidth: 2
+				}
+			]
+		};
+	});
+
+	// Dados para gráfico de barras 3D - Dias por Ano
+	const chartDataAno = $derived(() => {
+		if (solicitacoesPorAno.length === 0) {
+			return {
+				labels: [],
+				datasets: []
+			};
+		}
+
+		const cores = [
+			'#10b981', // Verde
+			'#3b82f6', // Azul
+			'#f59e0b', // Amarelo
+			'#ef4444', // Vermelho
+			'#8b5cf6', // Roxo
+			'#06b6d4', // Ciano
+			'#f97316', // Laranja
+			'#ec4899' // Rosa
+		];
+
+		// Cores representativas para a legenda
+		const corDias = '#10b981'; // Verde para dias
+		const corSolicitacoes = lightenColor('#10b981', 25); // Verde claro para solicitações
+
+		return {
+			labels: solicitacoesPorAno.map((s) => String(s.ano)),
+			datasets: [
+				{
+					label: 'Dias Totais Aprovados',
+					data: solicitacoesPorAno.map((s) => s.diasTotais),
+					backgroundColor: solicitacoesPorAno.map((_, index) => cores[index % cores.length]),
+					borderColor: solicitacoesPorAno.map((_, index) => cores[index % cores.length]),
+					// Cor representativa para a legenda (verde)
+					legendColor: corDias,
+					borderWidth: 2
+				},
+				{
+					label: 'Número de Solicitações',
+					data: solicitacoesPorAno.map((s) => s.solicitacoes),
+					backgroundColor: solicitacoesPorAno.map((_, index) =>
+						lightenColor(cores[index % cores.length], 20)
+					),
+					borderColor: solicitacoesPorAno.map((_, index) => cores[index % cores.length]),
+					// Cor representativa para a legenda (verde claro)
+					legendColor: corSolicitacoes,
+					borderWidth: 2
+				}
+			]
+		};
+	});
+
+	// Função auxiliar para clarear cores
+	function lightenColor(color: string, percent: number): string {
+		const num = parseInt(color.replace('#', ''), 16);
+		const amt = Math.round(2.55 * percent);
+		const R = Math.min(255, (num >> 16) + amt);
+		const G = Math.min(255, ((num >> 8) & 0x00ff) + amt);
+		const B = Math.min(255, (num & 0x0000ff) + amt);
+		return `#${(0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1)}`;
+	}
+
 	const coresCalendario = [
 		'#2563eb',
 		'#16a34a',
@@ -338,89 +459,146 @@
 		})
 	);
 
+	// Debug: Log dos eventos gerados
+	$effect(() => {
+		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);
+		if (eventosFerias.length > 0) {
+			console.log('📅 [Eventos] Primeiro evento:', eventosFerias[0]);
+		}
+	});
+
 	let calendarioContainer: HTMLDivElement | null = null;
 	let calendarioInstance: CalendarInstance | null = null;
 	let CalendarClass: CalendarConstructor | null = null;
 	let calendarioInicializado = $state(false);
 
-	// Inicializar calendário quando o container estiver disponível
+	// Função para inicializar o calendário
+	async function inicializarCalendario() {
+		if (
+			!calendarioContainer ||
+			calendarioInstance ||
+			calendarioInicializado ||
+			isLoading ||
+			hasError
+		) {
+			return;
+		}
+
+		try {
+			console.log('🔄 [Calendário] Iniciando inicialização...');
+			console.log('📊 [Calendário] Estado:', {
+				container: !!calendarioContainer,
+				loading: isLoading,
+				error: hasError,
+				eventos: eventosFerias.length,
+				solicitacoes: solicitacoes.length,
+				solicitacoesAprovadas: solicitacoesAprovadas.length,
+				periodosDetalhados: periodosDetalhados.length
+			});
+
+			const [coreModule, dayGridModule, interactionModule, localeModule] = await Promise.all([
+				import('@fullcalendar/core'),
+				import('@fullcalendar/daygrid'),
+				import('@fullcalendar/interaction'),
+				import('@fullcalendar/core/locales/pt-br')
+			]);
+
+			// Verificar novamente após os imports
+			if (
+				!calendarioContainer ||
+				isLoading ||
+				hasError ||
+				calendarioInstance ||
+				calendarioInicializado
+			) {
+				console.log('⚠️ [Calendário] Condições alteradas após imports');
+				return;
+			}
+
+			CalendarClass = coreModule.Calendar;
+			const dayGridPlugin = dayGridModule.default;
+			const interactionPlugin = interactionModule.default;
+			const ptBrLocale = localeModule.default;
+
+			console.log('✅ [Calendário] Criando instância com', eventosFerias.length, 'eventos');
+			if (eventosFerias.length > 0) {
+				console.log('📅 [Calendário] Primeiro evento:', eventosFerias[0]);
+			}
+
+			calendarioInstance = new CalendarClass(calendarioContainer, {
+				plugins: [dayGridPlugin, interactionPlugin],
+				initialView: 'dayGridMonth',
+				height: 'auto',
+				locale: 'pt-br',
+				locales: [ptBrLocale],
+				navLinks: true,
+				weekNumbers: false,
+				headerToolbar: {
+					left: 'prev,next today',
+					center: 'title',
+					right: 'dayGridMonth,dayGridWeek'
+				},
+				buttonText: {
+					today: 'Hoje',
+					month: 'Mês',
+					week: 'Semana'
+				},
+				events: eventosFerias
+			});
+
+			calendarioInstance.render();
+			calendarioInicializado = true;
+			console.log('✅ [Calendário] Inicializado com sucesso!');
+		} catch (error) {
+			console.error('❌ [Calendário] Erro ao inicializar:', error);
+			if (error instanceof Error) {
+				console.error('❌ [Calendário] Mensagem de erro:', error.message);
+				console.error('❌ [Calendário] Stack:', error.stack);
+			}
+		}
+	}
+
+	// Monitorar quando o container está disponível e os dados estão prontos
 	$effect(() => {
-		// Verificar se o container está disponível e o calendário ainda não foi inicializado
+		// Verificar se não está mais carregando e não há erro
+		const loading = isLoading;
+		const error = hasError;
 		const container = calendarioContainer;
 
+		// Se estiver carregando ou houver erro, não fazer nada
+		if (loading || error) {
+			return;
+		}
+
+		// Se não tiver container ou já estiver inicializado, não fazer nada
 		if (!container || calendarioInicializado || calendarioInstance) {
 			return;
 		}
 
-		// Usar setTimeout para garantir que o elemento está completamente no DOM
-		let timeoutId: ReturnType<typeof setTimeout> | null = null;
+		// Aguardar o DOM estar pronto e inicializar
+		(async () => {
+			await tick();
 
-		timeoutId = setTimeout(async () => {
-			if (!calendarioContainer || calendarioInstance || calendarioInicializado) {
+			// Verificar novamente após o tick
+			if (
+				!calendarioContainer ||
+				isLoading ||
+				hasError ||
+				calendarioInstance ||
+				calendarioInicializado
+			) {
 				return;
 			}
 
-			try {
-				const [coreModule, dayGridModule, interactionModule, localeModule] = await Promise.all([
-					import('@fullcalendar/core'),
-					import('@fullcalendar/daygrid'),
-					import('@fullcalendar/interaction'),
-					import('@fullcalendar/core/locales/pt-br')
-				]);
-
-				// Verificar novamente após os imports
-				if (!calendarioContainer || calendarioInstance || calendarioInicializado) {
-					return;
-				}
-
-				CalendarClass = coreModule.Calendar;
-				const dayGridPlugin = dayGridModule.default;
-				const interactionPlugin = interactionModule.default;
-				const ptBrLocale = localeModule.default;
-
-				calendarioInstance = new CalendarClass(calendarioContainer, {
-					plugins: [dayGridPlugin, interactionPlugin],
-					initialView: 'dayGridMonth',
-					height: 'auto',
-					locale: 'pt-br',
-					locales: [ptBrLocale],
-					navLinks: true,
-					weekNumbers: false,
-					headerToolbar: {
-						left: 'prev,next today',
-						center: 'title',
-						right: 'dayGridMonth,dayGridWeek'
-					},
-					buttonText: {
-						today: 'Hoje',
-						month: 'Mês',
-						week: 'Semana'
-					},
-					events: eventosFerias
+			// Aguardar um pouco mais para garantir que o elemento está completamente renderizado
+			setTimeout(() => {
+				inicializarCalendario().catch((error) => {
+					console.error('❌ [Calendário] Erro ao inicializar:', error);
 				});
-
-				calendarioInstance.render();
-				calendarioInicializado = true;
-			} catch (error) {
-				console.error('Erro ao inicializar calendário:', error);
-			}
-		}, 300);
-
-		// Cleanup
-		return () => {
-			if (timeoutId) {
-				clearTimeout(timeoutId);
-			}
-			if (calendarioInstance && !calendarioContainer) {
-				try {
-					calendarioInstance.destroy();
-				} catch (error) {
-					console.error('Erro ao destruir calendário:', error);
-				}
-				calendarioInstance = null;
-				calendarioInicializado = false;
-			}
-		};
+			}, 100);
+		})();
 	});
 
 	// Cleanup ao desmontar o componente
@@ -430,7 +608,7 @@
 				try {
 					calendarioInstance.destroy();
 				} catch (error) {
-					console.error('Erro ao destruir calendário:', error);
+					console.error('❌ [Calendário] Erro ao destruir no unmount:', error);
 				}
 				calendarioInstance = null;
 				calendarioInicializado = false;
@@ -440,12 +618,14 @@
 
 	// Sincronizar eventos do calendário quando mudarem
 	$effect(() => {
-		// Não atualizar se o calendário não estiver inicializado
-		if (!calendarioInstance || !calendarioInicializado) {
+		// Não atualizar se o calendário não estiver inicializado ou estiver carregando
+		if (!calendarioInstance || !calendarioInicializado || isLoading || hasError) {
 			return;
 		}
 
 		try {
+			console.log('🔄 Atualizando eventos do calendário:', eventosFerias.length, 'eventos');
+
 			// Remover todos os eventos existentes
 			calendarioInstance.removeAllEvents();
 
@@ -459,12 +639,14 @@
 			for (const evento of eventosClonados) {
 				calendarioInstance.addEvent(evento);
 			}
+
+			console.log('✅ Eventos atualizados com sucesso!');
 		} catch (error) {
 			// Log do erro, mas não interromper o fluxo
 			if (error instanceof Error) {
-				console.error('Erro ao atualizar eventos do calendário:', error.message);
+				console.error('❌ Erro ao atualizar eventos do calendário:', error.message);
 			} else {
-				console.error('Erro ao atualizar eventos do calendário:', error);
+				console.error('❌ Erro ao atualizar eventos do calendário:', error);
 			}
 		}
 	});
@@ -593,62 +775,15 @@
 		return solicitacao.periodos.reduce((acc, periodo) => acc + periodo.diasCorridos, 0);
 	}
 
+	async function selecionarSolicitacao(solicitacaoId: Id<'solicitacoesFerias'>) {
+		solicitacaoSelecionada = solicitacaoId;
+	}
+
+	async function recarregar() {
+		solicitacaoSelecionada = null;
+	}
+
 	let chartContainer: HTMLDivElement | null = null;
-	let containerWidth = $state(960);
-
-	onMount(() => {
-		const atualizarLargura = () => {
-			if (chartContainer) {
-				containerWidth = chartContainer.getBoundingClientRect().width;
-			}
-		};
-
-		atualizarLargura();
-		window.addEventListener('resize', atualizarLargura);
-		return () => window.removeEventListener('resize', atualizarLargura);
-	});
-
-	const chartHeight = 340;
-	const padding = { top: 20, right: 20, bottom: 70, left: 70 };
-	let chartWidth = $derived(containerWidth);
-
-	function getMax<T>(arr: Array<T>, seletor: (item: T) => number): number {
-		let max = 0;
-		for (const item of arr) {
-			max = Math.max(max, seletor(item));
-		}
-		return max;
-	}
-
-	function scaleY(valor: number, max: number): number {
-		if (max <= 0) return 0;
-		const innerHeight = chartHeight - padding.top - padding.bottom;
-		return (valor / max) * innerHeight;
-	}
-
-	function getX(index: number, total: number): number {
-		const innerWidth = chartWidth - padding.left - padding.right;
-		if (total <= 1) {
-			return padding.left + innerWidth / 2;
-		}
-		return padding.left + (innerWidth / (total - 1)) * index;
-	}
-
-	function createAreaPath<T>(dados: Array<T>, seletor: (valor: T) => number, max: number): string {
-		if (dados.length === 0) return '';
-		const n = dados.length;
-		let path = `M ${getX(0, n)} ${chartHeight - padding.bottom}`;
-
-		for (let i = 0; i < n; i += 1) {
-			const x = getX(i, n);
-			const y = chartHeight - padding.bottom - scaleY(seletor(dados[i]), max);
-			path += ` L ${x} ${y}`;
-		}
-
-		path += ` L ${getX(n - 1, n)} ${chartHeight - padding.bottom}`;
-		path += ' Z';
-		return path;
-	}
 
 	function converteParaData(dateStr: string): Date {
 		return new SvelteDate(`${dateStr}T00:00:00`);
@@ -825,64 +960,116 @@
               </tr>
             </tfoot>
           </table>
-          <script>
-            window.addEventListener("load", () => {
-              setTimeout(() => {
-                window.print();
-              }, 150);
-            });
-            window.addEventListener("afterprint", () => {
-              window.close();
-            });
-          ${'</scr' + 'ipt>'}
         </body>
       </html>
     `;
 
-		const relatorioJanela = window.open(
-			'about:blank',
-			'programacao-ferias',
-			'noopener=yes,width=1200,height=800'
-		);
-		if (relatorioJanela) {
-			relatorioJanela.document.open();
-			relatorioJanela.document.write(relatorioHTML);
-			relatorioJanela.document.close();
-			relatorioJanela.focus();
+		// Criar blob URL com o HTML para garantir que o conteúdo seja carregado corretamente
+		const blob = new Blob([relatorioHTML], { type: 'text/html;charset=utf-8' });
+		const url = URL.createObjectURL(blob);
+
+		// Abrir nova janela com o conteúdo
+		const relatorioJanela = window.open(url, 'programacao-ferias', 'width=1200,height=800');
+
+		if (
+			!relatorioJanela ||
+			relatorioJanela.closed ||
+			typeof relatorioJanela.closed === 'undefined'
+		) {
+			URL.revokeObjectURL(url);
+			window.alert(
+				'Pop-ups estão bloqueados. Por favor, permita pop-ups para este site e tente novamente.'
+			);
 			return;
 		}
 
-		const iframe = document.createElement('iframe');
-		iframe.style.position = 'fixed';
-		iframe.style.right = '0';
-		iframe.style.bottom = '0';
-		iframe.style.width = '0';
-		iframe.style.height = '0';
-		iframe.style.border = '0';
-		document.body.appendChild(iframe);
+		// Função para limpar a URL do blob
+		const limparURL = () => {
+			try {
+				URL.revokeObjectURL(url);
+			} catch {
+				// Ignorar erros ao revogar URL
+			}
+		};
 
-		iframe.addEventListener(
-			'load',
-			() => {
-				try {
-					iframe.contentWindow?.focus();
-					iframe.contentWindow?.print();
-				} finally {
-					setTimeout(() => {
-						document.body.removeChild(iframe);
-					}, 1000);
+		// Flag para garantir que a impressão aconteça apenas uma vez
+		let jaImprimiu = false;
+
+		// Função para imprimir (garantir que execute apenas uma vez)
+		const executarImpressao = () => {
+			if (jaImprimiu || relatorioJanela.closed) {
+				return;
+			}
+
+			jaImprimiu = true;
+
+			try {
+				relatorioJanela.focus();
+				relatorioJanela.print();
+
+				// Fechar janela após impressão
+				relatorioJanela.addEventListener(
+					'afterprint',
+					() => {
+						setTimeout(() => {
+							if (!relatorioJanela.closed) {
+								relatorioJanela.close();
+							}
+							limparURL();
+						}, 100);
+					},
+					{ once: true }
+				);
+			} catch (error) {
+				console.error('Erro ao imprimir:', error);
+				limparURL();
+				window.alert(
+					'Erro ao abrir diálogo de impressão. Verifique as configurações do navegador.'
+				);
+			}
+		};
+
+		// Aguardar o conteúdo carregar completamente antes de imprimir
+		// Usar evento load da janela quando disponível
+		const prepararImpressao = () => {
+			try {
+				if (relatorioJanela.closed) {
+					limparURL();
+					return;
 				}
-			},
-			{ once: true }
-		);
 
-		if (iframe.contentDocument) {
-			iframe.contentDocument.open();
-			iframe.contentDocument.write(relatorioHTML);
-			iframe.contentDocument.close();
-		} else {
-			iframe.srcdoc = relatorioHTML;
+				// Aguardar um delay para garantir que o conteúdo foi renderizado
+				setTimeout(() => {
+					executarImpressao();
+				}, 600);
+			} catch (error) {
+				console.error('Erro ao preparar impressão:', error);
+				limparURL();
+			}
+		};
+
+		// Tentar usar evento load da janela
+		try {
+			relatorioJanela.addEventListener(
+				'load',
+				() => {
+					prepararImpressao();
+				},
+				{ once: true }
+			);
+		} catch {
+			// Se não conseguir adicionar listener, usar timeout direto
+			prepararImpressao();
 		}
+
+		// Fallback: se após 1.5 segundos ainda não imprimiu, tentar imprimir diretamente
+		setTimeout(() => {
+			if (!jaImprimiu && !relatorioJanela.closed) {
+				executarImpressao();
+			} else if (relatorioJanela.closed) {
+				limparURL();
+			}
+		}, 1500);
 	}
 </script>
 
@@ -1316,6 +1503,51 @@
 		</div>
 	{/if}
 
+	<!-- Calendário Geral de Férias -->
+	{#if isLoading && !hasError}
+		<div class="card bg-base-100 border-primary/20 mb-6 border shadow-lg">
+			<div class="card-body space-y-4 p-6">
+				<div class="skeleton mb-4 h-6 w-64"></div>
+				<div class="skeleton h-96 w-full"></div>
+			</div>
+		</div>
+	{:else if !hasError}
+		<div class="card bg-base-100 border-primary/20 mb-6 border shadow-lg">
+			<div class="card-body space-y-4 p-6">
+				<div class="flex items-center gap-3">
+					<div class="bg-primary/10 rounded-lg p-2.5">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-primary h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h3 class="text-base-content text-lg font-semibold">Calendário Geral de Férias</h3>
+						<p class="text-base-content/60 text-sm">
+							Visualize os períodos aprovados diretamente no calendário interativo
+						</p>
+					</div>
+				</div>
+				<div class="bg-base-200/40 relative w-full overflow-hidden rounded-xl p-4">
+					<div
+						class="calendario-ferias overflow-hidden rounded-xl shadow-2xl"
+						bind:this={calendarioContainer}
+					></div>
+				</div>
+			</div>
+		</div>
+	{/if}
+
 	<!-- Impressão da Programação -->
 	{#if !isLoading || !hasError}
 		<div class="card border-accent/30 bg-base-100 mb-6 border shadow-xl">
@@ -1450,6 +1682,7 @@
 									<th>Total Dias</th>
 									<th>Status</th>
 									<th>Solicitado em</th>
+									<th>Ações</th>
 								</tr>
 							</thead>
 							<tbody>
@@ -1495,6 +1728,35 @@
 											</div>
 										</td>
 										<td class="text-xs">{formatarData(solicitacao._creationTime)}</td>
+										<td>
+											<button
+												type="button"
+												class="btn btn-primary btn-sm gap-2"
+												onclick={() => selecionarSolicitacao(solicitacao._id)}
+											>
+												<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+													/>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+													/>
+												</svg>
+												Alterar Status
+											</button>
+										</td>
 									</tr>
 								{/each}
 							</tbody>
@@ -1549,168 +1811,60 @@
 						</div>
 					</div>
 					<div class="bg-base-200/40 w-full overflow-x-auto rounded-xl p-4">
-						<svg
-							width={chartWidth}
-							height={chartHeight}
-							role="img"
-							aria-label="Gráfico de área com os dias de férias por mês"
-						>
-							{#if periodosPorMesAtivos.length === 0}
-								<text x="24" y="48" class="opacity-60">Sem dados registrados até o momento.</text>
-							{:else}
-								{@const maxDias = Math.max(
-									1,
-									getMax(periodosPorMesAtivos, (p) => p.totalDias)
-								)}
-								{#each [0, 1, 2, 3, 4, 5] as passo (passo)}
-									{@const valor = Math.round((maxDias / 5) * passo)}
-									{@const y = chartHeight - padding.bottom - scaleY(valor, maxDias)}
-									<line
-										x1={padding.left}
-										y1={y}
-										x2={chartWidth - padding.right}
-										y2={y}
-										stroke="currentColor"
-										stroke-opacity="0.08"
-										stroke-dasharray="4,4"
-									/>
-									<text
-										x={padding.left - 10}
-										y={y + 4}
-										text-anchor="end"
-										class="text-[10px] font-medium opacity-70"
-									>
-										{valor} dia(s)
-									</text>
-								{/each}
-								<line
-									x1={padding.left}
-									y1={chartHeight - padding.bottom}
-									x2={chartWidth - padding.right}
-									y2={chartHeight - padding.bottom}
-									stroke="currentColor"
-									stroke-opacity="0.3"
-									stroke-width="2"
-								/>
-								<line
-									x1={padding.left}
-									y1={padding.top}
-									x2={padding.left}
-									y2={chartHeight - padding.bottom}
-									stroke="currentColor"
-									stroke-opacity="0.3"
-									stroke-width="2"
-								/>
-								<path
-									d={createAreaPath(periodosPorMesAtivos, (p) => p.totalDias, maxDias)}
-									fill="url(#gradient-ferias-mes)"
-									opacity="0.75"
-								/>
-								<polyline
-									points={periodosPorMesAtivos
-										.map((item, index) => {
-											const x = getX(index, periodosPorMesAtivos.length);
-											const y = chartHeight - padding.bottom - scaleY(item.totalDias, maxDias);
-											return `${x},${y}`;
-										})
-										.join(' ')}
-									fill="none"
-									stroke="rgb(59, 130, 246)"
-									stroke-width="3"
-									stroke-linecap="round"
-								/>
-								{#each periodosPorMesAtivos as item, index (item.label)}
-									{@const x = getX(index, periodosPorMesAtivos.length)}
-									{@const y = chartHeight - padding.bottom - scaleY(item.totalDias, maxDias)}
-									<circle
-										cx={x}
-										cy={y}
-										r="5"
-										fill="rgb(59, 130, 246)"
-										stroke="white"
-										stroke-width="2"
-									/>
-									<text
-										{x}
-										y={y - 14}
-										text-anchor="middle"
-										class="fill-primary text-[10px] font-semibold"
-									>
-										{item.totalDias} dia(s)
-									</text>
-									<text {x} y={y + 16} text-anchor="middle" class="fill-base-content/60 text-[9px]">
-										{item.quantidadePeriodos} período(s)
-									</text>
-								{/each}
-								{#each periodosPorMesAtivos as item, index (item.label)}
-									{@const x = getX(index, periodosPorMesAtivos.length)}
-									<foreignObject
-										x={x - 42}
-										y={chartHeight - padding.bottom + 14}
-										width="84"
-										height="56"
-									>
-										<div
-											class="text-base-content/80 text-center text-[11px] leading-tight font-medium"
-										>
-											{item.label}
-										</div>
-									</foreignObject>
-								{/each}
-								<defs>
-									<linearGradient id="gradient-ferias-mes" x1="0%" y1="0%" x2="0%" y2="100%">
-										<stop offset="0%" style="stop-color:rgb(59,130,246);stop-opacity:0.85" />
-										<stop offset="100%" style="stop-color:rgb(59,130,246);stop-opacity:0.08" />
-									</linearGradient>
-								</defs>
-							{/if}
-						</svg>
-						{#if periodosPorMes.length > 1}
-							<div class="border-base-300/60 bg-base-200/60 mt-4 space-y-2 rounded-xl border p-4">
-								<div
-									class="text-base-content/60 flex flex-wrap items-center justify-between text-xs font-semibold tracking-wide uppercase"
-								>
-									<span>Janela exibida</span>
-									<span class="text-base-content">
-										{periodosPorMes[rangeInicioIndice]?.label ?? '-'}
-										→
-										{periodosPorMes[rangeFimIndice]?.label ?? '-'}
-									</span>
-								</div>
-								<div class="flex flex-col gap-3">
-									<div class="flex items-center gap-3">
-										<label class="text-base-content/70 w-14 text-xs font-medium" for="range-inicio"
-											>Início</label
-										>
-										<input
-											id="range-inicio"
-											type="range"
-											min="0"
-											max={Math.max(periodosPorMes.length - 1, 0)}
-											value={rangeInicioIndice}
-											class="range range-primary flex-1"
-											oninput={handleRangeInicio}
-										/>
-									</div>
-									<div class="flex items-center gap-3">
-										<label class="text-base-content/70 w-14 text-xs font-medium" for="range-fim"
-											>Fim</label
-										>
-										<input
-											id="range-fim"
-											type="range"
-											min="0"
-											max={Math.max(periodosPorMes.length - 1, 0)}
-											value={rangeFimIndice}
-											class="range range-primary flex-1"
-											oninput={handleRangeFim}
-										/>
-									</div>
-								</div>
-								<p class="text-base-content/60 text-[11px]">
-									Ajuste com o mouse os intervalos exibidos no gráfico.
-								</p>
+						{#if periodosPorMesAtivos.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>
+						{:else}
+							<BarChart3D data={chartDataMes()} height={400} />
+							{#if periodosPorMes.length > 1}
+								<div class="border-base-300/60 bg-base-200/60 mt-4 space-y-2 rounded-xl border p-4">
+									<div
+										class="text-base-content/60 flex flex-wrap items-center justify-between text-xs font-semibold tracking-wide uppercase"
+									>
+										<span>Janela exibida</span>
+										<span class="text-base-content">
+											{periodosPorMes[rangeInicioIndice]?.label ?? '-'}
+											→
+											{periodosPorMes[rangeFimIndice]?.label ?? '-'}
+										</span>
+									</div>
+									<div class="flex flex-col gap-3">
+										<div class="flex items-center gap-3">
+											<label
+												class="text-base-content/70 w-14 text-xs font-medium"
+												for="range-inicio">Início</label
+											>
+											<input
+												id="range-inicio"
+												type="range"
+												min="0"
+												max={Math.max(periodosPorMes.length - 1, 0)}
+												value={rangeInicioIndice}
+												class="range range-primary flex-1"
+												oninput={handleRangeInicio}
+											/>
+										</div>
+										<div class="flex items-center gap-3">
+											<label class="text-base-content/70 w-14 text-xs font-medium" for="range-fim"
+												>Fim</label
+											>
+											<input
+												id="range-fim"
+												type="range"
+												min="0"
+												max={Math.max(periodosPorMes.length - 1, 0)}
+												value={rangeFimIndice}
+												class="range range-primary flex-1"
+												oninput={handleRangeFim}
+											/>
+										</div>
+									</div>
+									<p class="text-base-content/60 text-[11px]">
+										Ajuste com o mouse os intervalos exibidos no gráfico.
+									</p>
+								</div>
+							{/if}
 						{/if}
 					</div>
 				</div>
@@ -1746,166 +1900,49 @@
 						</div>
 					</div>
 					<div class="bg-base-200/40 w-full overflow-x-auto rounded-xl p-4">
-						<svg
-							width={chartWidth}
-							height={chartHeight}
-							role="img"
-							aria-label="Gráfico de área com dias aprovados por ano"
-						>
-							{#if solicitacoesPorAno.length === 0}
-								<text x="24" y="48" class="opacity-60"
-									>Ainda não há solicitações registradas para exibição.</text
-								>
-							{:else}
-								{@const maxDiasAno = Math.max(
-									1,
-									getMax(solicitacoesPorAno, (item) => item.diasTotais)
-								)}
-								{#each [0, 1, 2, 3, 4, 5] as passo (passo)}
-									{@const valor = Math.round((maxDiasAno / 5) * passo)}
-									{@const y = chartHeight - padding.bottom - scaleY(valor, maxDiasAno)}
-									<line
-										x1={padding.left}
-										y1={y}
-										x2={chartWidth - padding.right}
-										y2={y}
-										stroke="currentColor"
-										stroke-opacity="0.08"
-										stroke-dasharray="4,4"
-									/>
-									<text
-										x={padding.left - 10}
-										y={y + 4}
-										text-anchor="end"
-										class="text-[10px] font-medium opacity-70"
-									>
-										{valor} dia(s)
-									</text>
-								{/each}
-								<line
-									x1={padding.left}
-									y1={chartHeight - padding.bottom}
-									x2={chartWidth - padding.right}
-									y2={chartHeight - padding.bottom}
-									stroke="currentColor"
-									stroke-opacity="0.3"
-									stroke-width="2"
-								/>
-								<line
-									x1={padding.left}
-									y1={padding.top}
-									x2={padding.left}
-									y2={chartHeight - padding.bottom}
-									stroke="currentColor"
-									stroke-opacity="0.3"
-									stroke-width="2"
-								/>
-								<path
-									d={createAreaPath(solicitacoesPorAno, (item) => item.diasTotais, maxDiasAno)}
-									fill="url(#gradient-ferias-ano)"
-									opacity="0.75"
-								/>
-								<polyline
-									points={solicitacoesPorAno
-										.map((item, index) => {
-											const x = getX(index, solicitacoesPorAno.length);
-											const y = chartHeight - padding.bottom - scaleY(item.diasTotais, maxDiasAno);
-											return `${x},${y}`;
-										})
-										.join(' ')}
-									fill="none"
-									stroke="rgb(16, 185, 129)"
-									stroke-width="3"
-									stroke-linecap="round"
-								/>
-								{#each solicitacoesPorAno as item, index (item.ano)}
-									{@const x = getX(index, solicitacoesPorAno.length)}
-									{@const y = chartHeight - padding.bottom - scaleY(item.diasTotais, maxDiasAno)}
-									<circle
-										cx={x}
-										cy={y}
-										r="5"
-										fill="rgb(16, 185, 129)"
-										stroke="white"
-										stroke-width="2"
-									/>
-									<text
-										{x}
-										y={y - 14}
-										text-anchor="middle"
-										class="fill-secondary text-[10px] font-semibold"
-									>
-										{item.diasTotais} dia(s)
-									</text>
-									<text {x} y={y + 16} text-anchor="middle" class="fill-base-content/60 text-[9px]">
-										{item.solicitacoes} solicitação(ões)
-									</text>
-								{/each}
-								{#each solicitacoesPorAno as item, index (item.ano)}
-									{@const x = getX(index, solicitacoesPorAno.length)}
-									<foreignObject
-										x={x - 34}
-										y={chartHeight - padding.bottom + 14}
-										width="68"
-										height="48"
-									>
-										<div
-											class="text-base-content/80 text-center text-[11px] leading-tight font-medium"
-										>
-											{item.ano}
-										</div>
-									</foreignObject>
-								{/each}
-								<defs>
-									<linearGradient id="gradient-ferias-ano" x1="0%" y1="0%" x2="0%" y2="100%">
-										<stop offset="0%" style="stop-color:rgb(16,185,129);stop-opacity:0.85" />
-										<stop offset="100%" style="stop-color:rgb(16,185,129);stop-opacity:0.08" />
-									</linearGradient>
-								</defs>
-							{/if}
-						</svg>
-					</div>
-				</div>
-			</div>
-
-			<!-- Gráfico 3 -->
-			<div class="card bg-base-100 border-primary/20 border shadow-lg">
-				<div class="card-body space-y-4 p-6">
-					<div class="flex items-center gap-3">
-						<div class="bg-secondary/10 rounded-lg p-2.5">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="text-secondary h-6 w-6"
-								fill="none"
-								viewBox="0 0 24 24"
-								stroke="currentColor"
-							>
-								<path
-									stroke-linecap="round"
-									stroke-linejoin="round"
-									stroke-width="2"
-									d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-								/>
-							</svg>
-						</div>
-						<div>
-							<h3 class="text-base-content text-lg font-semibold">Calendário Geral de Férias</h3>
-							<p class="text-base-content/60 text-sm">
-								Visualize os períodos aprovados diretamente no calendário interativo
-							</p>
-						</div>
-					</div>
-					<div class="bg-base-200/40 relative w-full overflow-hidden rounded-xl p-4">
-						<div
-							class="calendario-ferias overflow-hidden rounded-xl shadow-2xl"
-							bind:this={calendarioContainer}
-						></div>
+						{#if solicitacoesPorAno.length === 0}
+							<div class="flex h-96 items-center justify-center">
+								<p class="text-base-content/60">
+									Ainda não há solicitações registradas para exibição.
+								</p>
+							</div>
+						{:else}
+							<BarChart3D data={chartDataAno()} height={400} stacked={true} />
+						{/if}
 					</div>
 				</div>
 			</div>
 		</div>
 	{/if}
 </main>
+
+<!-- Modal de Mudança de Status -->
+{#if solicitacaoSelecionada && currentUser.data}
+	{#await client.query( api.ferias.obterDetalhes, { solicitacaoId: solicitacaoSelecionada } ) then detalhes}
+		{#if detalhes}
+			<dialog class="modal modal-open">
+				<div class="modal-box max-w-4xl">
+					<AlterarStatusFerias
+						solicitacao={detalhes}
+						usuarioId={currentUser.data._id}
+						onSucesso={recarregar}
+						onCancelar={() => (solicitacaoSelecionada = null)}
+					/>
+				</div>
+				<form method="dialog" class="modal-backdrop">
+					<button
+						type="button"
+						onclick={() => (solicitacaoSelecionada = null)}
+						aria-label="Fechar modal"
+					>
+						Fechar
+					</button>
+				</form>
+			</dialog>
+		{/if}
+	{/await}
+{/if}
+
 <footer
 	class="border-base-300/60 bg-base-100 text-base-content/70 mt-8 border-t py-6 text-center text-sm"
 >
@@ -2034,6 +2071,12 @@
 		min-height: 80px;
 	}
 
+	/* Garantir que o calendário seja visível */
+	:global(.calendario-ferias .fc) {
+		min-height: 400px;
+		width: 100%;
+	}
+
 	/* Responsivo */
 	@media (max-width: 768px) {
 		:global(.calendario-ferias .fc .fc-toolbar) {
diff --git a/packages/backend/convex/ferias.ts b/packages/backend/convex/ferias.ts
index d08633f..a1eb20a 100644
--- a/packages/backend/convex/ferias.ts
+++ b/packages/backend/convex/ferias.ts
@@ -509,6 +509,89 @@ export const marcarComoLida = mutation({
   },
 });
 
+// Mutation: Atualizar status da solicitação (para voltar para aguardando_aprovacao)
+export const atualizarStatus = mutation({
+  args: {
+    solicitacaoId: v.id("solicitacoesFerias"),
+    novoStatus: v.union(
+      v.literal("aguardando_aprovacao"),
+      v.literal("aprovado"),
+      v.literal("reprovado"),
+      v.literal("data_ajustada_aprovada")
+    ),
+    usuarioId: v.id("usuarios"),
+  },
+  returns: v.null(),
+  handler: async (ctx, args) => {
+    const solicitacao = await ctx.db.get(args.solicitacaoId);
+    if (!solicitacao) throw new Error("Solicitação não encontrada");
+
+    // Se está mudando de aprovado para aguardando_aprovacao, precisa liberar os dias
+    if (solicitacao.status === "aprovado" || solicitacao.status === "data_ajustada_aprovada") {
+      if (args.novoStatus === "aguardando_aprovacao") {
+        // Liberar dias de volta ao saldo
+        await ctx.runMutation(internal.saldoFerias.liberarDias, {
+          solicitacaoId: args.solicitacaoId,
+        });
+      }
+    }
+
+    // Se está mudando de reprovado para aguardando_aprovacao, os dias já foram liberados anteriormente
+    // Mas precisamos reservar novamente
+    if (solicitacao.status === "reprovado" && args.novoStatus === "aguardando_aprovacao") {
+      // Calcular total de dias
+      let totalDias = 0;
+      for (const p of solicitacao.periodos) {
+        totalDias += p.diasCorridos;
+      }
+
+      // Reservar dias novamente
+      await ctx.runMutation(internal.saldoFerias.reservarDias, {
+        funcionarioId: solicitacao.funcionarioId,
+        anoReferencia: solicitacao.anoReferencia,
+        totalDias,
+      });
+    }
+
+    // Atualizar status e histórico
+    const acao = `Status alterado de ${solicitacao.status} para ${args.novoStatus}`;
+    
+    // Preparar dados de atualização
+    const updateData: {
+      status: typeof args.novoStatus;
+      historicoAlteracoes: Array<{
+        data: number;
+        usuarioId: Id<"usuarios">;
+        acao: string;
+      }>;
+    } = {
+      status: args.novoStatus,
+      historicoAlteracoes: [
+        ...(solicitacao.historicoAlteracoes || []),
+        {
+          data: Date.now(),
+          usuarioId: args.usuarioId,
+          acao,
+        },
+      ],
+    };
+
+    // Se voltar para aguardando_aprovacao, limpar campos relacionados usando replace
+    if (args.novoStatus === "aguardando_aprovacao") {
+      // Usar replace para limpar campos opcionais - omitir os campos que queremos limpar
+      const { gestorId, dataAprovacao, dataReprovacao, motivoReprovacao, ...solicitacaoLimpa } = solicitacao;
+      await ctx.db.replace(args.solicitacaoId, {
+        ...solicitacaoLimpa,
+        ...updateData,
+      });
+    } else {
+      await ctx.db.patch(args.solicitacaoId, updateData);
+    }
+
+    return null;
+  },
+});
+
 // Internal Mutation: Atualizar status de todos os funcionários
 export const atualizarStatusTodosFuncionarios = internalMutation({
   args: {},