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 96f290a..d9e4470 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
@@ -10,6 +10,7 @@
 	import FileUpload from '$lib/components/FileUpload.svelte';
 	import ErrorModal from '$lib/components/ErrorModal.svelte';
 	import CalendarioAfastamentos from '$lib/components/CalendarioAfastamentos.svelte';
+	import AreaChart from '$lib/components/ti/charts/AreaChart.svelte';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import jsPDF from 'jspdf';
 	import autoTable from 'jspdf-autotable';
@@ -141,6 +142,86 @@
 		};
 	}
 
+	// Dados para gráfico de área - Total de Dias por Tipo (Layerchart)
+	const chartDataTotalDiasPorTipo = $derived.by(() => {
+		if (!graficosQuery?.data?.totalDiasPorTipo) {
+			return {
+				labels: [],
+				datasets: []
+			};
+		}
+
+		const dados = graficosQuery.data.totalDiasPorTipo;
+		const cores = ['#ef4444', '#f97316', '#ec4899', '#3b82f6', '#10b981'];
+
+		return {
+			labels: dados.map((d) => d.tipo),
+			datasets: [
+				{
+					label: 'Total de Dias',
+					data: dados.map((d) => d.dias),
+					backgroundColor: dados.map((_, i) => `${cores[i % cores.length]}80`),
+					borderColor: dados.map((_, i) => cores[i % cores.length]),
+					borderWidth: 3,
+					pointBackgroundColor: dados.map((_, i) => cores[i % cores.length]),
+					pointBorderColor: '#ffffff',
+					pointBorderWidth: 2,
+					pointRadius: 6,
+					pointHoverRadius: 8,
+					pointHoverBackgroundColor: dados.map((_, i) => cores[i % cores.length]),
+					pointHoverBorderColor: '#ffffff',
+					pointHoverBorderWidth: 3,
+					fill: true,
+					tension: 0.4,
+					spanGaps: false
+				}
+			]
+		};
+	});
+
+	// Dados para gráfico de área - Tendências Mensais (Layerchart empilhado)
+	const chartDataTendenciasMensais = $derived.by(() => {
+		if (!graficosQuery?.data?.tendenciasMensais) {
+			return {
+				labels: [],
+				datasets: []
+			};
+		}
+
+		const tendencias = graficosQuery.data.tendenciasMensais;
+		const tipos = [
+			'atestado_medico',
+			'declaracao_comparecimento',
+			'maternidade',
+			'paternidade',
+			'ferias'
+		];
+		const cores = ['#ef4444', '#f97316', '#ec4899', '#3b82f6', '#10b981'];
+		const nomes = ['Atestado Médico', 'Declaração', 'Maternidade', 'Paternidade', 'Férias'];
+
+		return {
+			labels: tendencias.map((t) => t.mes),
+			datasets: tipos.map((tipo, idx) => ({
+				label: nomes[idx],
+				data: tendencias.map((t) => (t[tipo as keyof typeof t] as number) || 0),
+				backgroundColor: `${cores[idx]}60`,
+				borderColor: cores[idx],
+				borderWidth: 2,
+				pointBackgroundColor: cores[idx],
+				pointBorderColor: '#ffffff',
+				pointBorderWidth: 2,
+				pointRadius: 4,
+				pointHoverRadius: 6,
+				pointHoverBackgroundColor: cores[idx],
+				pointHoverBorderColor: '#ffffff',
+				pointHoverBorderWidth: 3,
+				fill: true,
+				tension: 0.4,
+				spanGaps: false
+			}))
+		};
+	});
+
 	// Salvar Atestado Médico
 	async function salvarAtestadoMedico() {
 		if (
@@ -1643,282 +1724,34 @@
 
 		<!-- Gráficos -->
 		{#if graficosQuery?.data}
-			{@const dados = graficosQuery.data.totalDiasPorTipo}
-			{@const maxDias = Math.max(...dados.map((d) => d.dias), 1)}
-			{@const chartWidth = 800}
-			{@const chartHeight = 350}
-			{@const padding = { top: 20, right: 40, bottom: 80, left: 70 }}
-			{@const barWidth = (chartWidth - padding.left - padding.right) / dados.length - 10}
-			{@const innerHeight = chartHeight - padding.top - padding.bottom}
-			{@const tendencias = graficosQuery.data.tendenciasMensais}
-			{@const tipos = [
-				'atestado_medico',
-				'declaracao_comparecimento',
-				'maternidade',
-				'paternidade',
-				'ferias'
-			]}
-			{@const cores = ['#ef4444', '#f97316', '#ec4899', '#3b82f6', '#10b981']}
-			{@const nomes = ['Atestado Médico', 'Declaração', 'Maternidade', 'Paternidade', 'Férias']}
-			{@const maxValor = Math.max(
-				...tendencias.flatMap((t) => tipos.map((tipo) => t[tipo as keyof typeof t] as number)),
-				1
-			)}
-			{@const chartWidth2 = 900}
-			{@const chartHeight2 = 400}
-			{@const padding2 = { top: 20, right: 40, bottom: 80, left: 70 }}
-			{@const innerWidth = chartWidth2 - padding2.left - padding2.right}
-			{@const innerHeight2 = chartHeight2 - padding2.top - padding2.bottom}
-			<!-- Gráfico 1: Total de Dias por Tipo (Gráfico de Barras) -->
+			<!-- Gráfico 1: Total de Dias por Tipo (Layerchart) -->
 			<div class="card bg-base-100 mb-6 shadow-xl">
 				<div class="card-body">
 					<h2 class="card-title mb-4">Total de Dias por Tipo</h2>
 					<div class="bg-base-200/30 w-full overflow-x-auto rounded-xl p-4">
-						<svg
-							width={chartWidth}
-							height={chartHeight}
-							class="w-full"
-							viewBox={`0 0 ${chartWidth} ${chartHeight}`}
-						>
-							<!-- Grid lines -->
-							{#each [0, 1, 2, 3, 4, 5] as t}
-								{@const val = Math.round((maxDias / 5) * t)}
-								{@const y = chartHeight - padding.bottom - (val / maxDias) * innerHeight}
-								<line
-									x1={padding.left}
-									y1={y}
-									x2={chartWidth - padding.right}
-									y2={y}
-									stroke="currentColor"
-									stroke-opacity="0.1"
-									stroke-dasharray="4,4"
-								/>
-								<text x={padding.left - 8} y={y + 4} text-anchor="end" class="text-xs opacity-70">
-									{val}
-								</text>
-							{/each}
-
-							<!-- Eixos -->
-							<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"
-							/>
-
-							<!-- Barras -->
-							{#each dados as item, i}
-								{@const x = padding.left + i * (barWidth + 10) + 5}
-								{@const height = (item.dias / maxDias) * innerHeight}
-								{@const y = chartHeight - padding.bottom - height}
-								{@const colors = ['#ef4444', '#f97316', '#ec4899', '#3b82f6', '#10b981']}
-
-								<!-- Gradiente da barra -->
-								<defs>
-									<linearGradient id="gradient-{i}" x1="0%" y1="0%" x2="0%" y2="100%">
-										<stop
-											offset="0%"
-											style="stop-color:{colors[i % colors.length]};stop-opacity:0.9"
-										/>
-										<stop
-											offset="100%"
-											style="stop-color:{colors[i % colors.length]};stop-opacity:0.5"
-										/>
-									</linearGradient>
-								</defs>
-
-								<!-- Barra -->
-								<rect
-									{x}
-									{y}
-									width={barWidth}
-									{height}
-									fill="url(#gradient-{i})"
-									rx="4"
-									class="cursor-pointer transition-opacity hover:opacity-80"
-								/>
-
-								<!-- Valor no topo da barra -->
-								{#if item.dias > 0}
-									<text
-										x={x + barWidth / 2}
-										y={y - 8}
-										text-anchor="middle"
-										class="fill-base-content text-xs font-semibold"
-									>
-										{item.dias}
-									</text>
-								{/if}
-
-								<!-- Label do eixo X -->
-								<foreignObject
-									x={x - 30}
-									y={chartHeight - padding.bottom + 15}
-									width="80"
-									height="60"
-								>
-									<div class="flex items-center justify-center text-center">
-										<span
-											class="text-base-content/80 text-xs leading-tight font-medium"
-											style="word-wrap: break-word; hyphens: auto;"
-										>
-											{item.tipo}
-										</span>
-									</div>
-								</foreignObject>
-							{/each}
-						</svg>
+						{#if chartDataTotalDiasPorTipo.labels.length === 0}
+							<div class="flex h-96 items-center justify-center">
+								<p class="text-base-content/60">Sem dados registrados até o momento.</p>
+							</div>
+						{:else}
+							<AreaChart data={chartDataTotalDiasPorTipo} height={400} />
+						{/if}
 					</div>
 				</div>
 			</div>
 
-			<!-- Gráfico 2: Tendências Mensais (Gráfico de Linha em Camadas) -->
+			<!-- Gráfico 2: Tendências Mensais (Layerchart empilhado) -->
 			<div class="card bg-base-100 mb-6 shadow-xl">
 				<div class="card-body">
 					<h2 class="card-title mb-4">Tendências Mensais (Últimos 6 Meses)</h2>
 					<div class="bg-base-200/30 w-full overflow-x-auto rounded-xl p-4">
-						<svg
-							width={chartWidth2}
-							height={chartHeight2}
-							class="w-full"
-							viewBox={`0 0 ${chartWidth2} ${chartHeight2}`}
-						>
-							<!-- Grid lines -->
-							{#each [0, 1, 2, 3, 4, 5] as t}
-								{@const val = Math.round((maxValor / 5) * t)}
-								{@const y = chartHeight2 - padding2.bottom - (val / maxValor) * innerHeight2}
-								<line
-									x1={padding2.left}
-									y1={y}
-									x2={chartWidth2 - padding2.right}
-									y2={y}
-									stroke="currentColor"
-									stroke-opacity="0.1"
-									stroke-dasharray="4,4"
-								/>
-								<text x={padding2.left - 8} y={y + 4} text-anchor="end" class="text-xs opacity-70">
-									{val}
-								</text>
-							{/each}
-
-							<!-- Eixos -->
-							<line
-								x1={padding2.left}
-								y1={chartHeight2 - padding2.bottom}
-								x2={chartWidth2 - padding2.right}
-								y2={chartHeight2 - padding2.bottom}
-								stroke="currentColor"
-								stroke-opacity="0.3"
-								stroke-width="2"
-							/>
-							<line
-								x1={padding2.left}
-								y1={padding2.top}
-								x2={padding2.left}
-								y2={chartHeight2 - padding2.bottom}
-								stroke="currentColor"
-								stroke-opacity="0.3"
-								stroke-width="2"
-							/>
-
-							<!-- Linhas para cada tipo (em camadas) -->
-							{#each tipos as tipo, tipoIdx}
-								{@const cor = cores[tipoIdx]}
-
-								<!-- Área preenchida (camada) -->
-								<defs>
-									<linearGradient id="gradient-{tipo}" x1="0%" y1="0%" x2="0%" y2="100%">
-										<stop offset="0%" style="stop-color:{cor};stop-opacity:0.4" />
-										<stop offset="100%" style="stop-color:{cor};stop-opacity:0.05" />
-									</linearGradient>
-								</defs>
-
-								{@const pontos = tendencias.map((t, i) => {
-									const x = padding2.left + (i / (tendencias.length - 1 || 1)) * innerWidth;
-									const valor = t[tipo as keyof typeof t] as number;
-									const y = chartHeight2 - padding2.bottom - (valor / maxValor) * innerHeight2;
-									return { x, y, valor };
-								})}
-
-								<!-- Área -->
-								{#if pontos.length > 0}
-									{@const pathArea =
-										`M ${pontos[0].x} ${chartHeight2 - padding2.bottom} ` +
-										pontos.map((p) => `L ${p.x} ${p.y}`).join(' ') +
-										` L ${pontos[pontos.length - 1].x} ${chartHeight2 - padding2.bottom} Z`}
-									<path d={pathArea} fill="url(#gradient-{tipo})" />
-								{/if}
-
-								<!-- Linha -->
-								{#if pontos.length > 1}
-									<polyline
-										points={pontos.map((p) => `${p.x},${p.y}`).join(' ')}
-										fill="none"
-										stroke={cor}
-										stroke-width="3"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								{/if}
-
-								<!-- Pontos -->
-								{#each pontos as ponto, pontoIdx}
-									<circle
-										cx={ponto.x}
-										cy={ponto.y}
-										r="5"
-										fill={cor}
-										stroke="white"
-										stroke-width="2"
-										class="hover:r-7 cursor-pointer transition-all"
-									/>
-									<!-- Tooltip no hover -->
-									<title
-										>{nomes[tipoIdx]}: {ponto.valor} dias em {tendencias[pontoIdx]?.mes ||
-											''}</title
-									>
-								{/each}
-							{/each}
-
-							<!-- Labels do eixo X -->
-							{#each tendencias as t, i}
-								{@const x = padding2.left + (i / (tendencias.length - 1 || 1)) * innerWidth}
-								<foreignObject
-									x={x - 40}
-									y={chartHeight2 - padding2.bottom + 15}
-									width="80"
-									height="60"
-								>
-									<div class="flex items-center justify-center text-center">
-										<span class="text-base-content/80 text-xs font-medium">
-											{t.mes}
-										</span>
-									</div>
-								</foreignObject>
-							{/each}
-						</svg>
-
-						<!-- Legenda -->
-						<div class="border-base-300 mt-4 flex flex-wrap justify-center gap-4 border-t pt-4">
-							{#each tipos as tipo, idx}
-								<div class="flex items-center gap-2">
-									<div class="h-4 w-4 rounded" style="background-color: {cores[idx]}"></div>
-									<span class="text-base-content/70 text-sm">{nomes[idx]}</span>
-								</div>
-							{/each}
-						</div>
+						{#if chartDataTendenciasMensais.labels.length === 0}
+							<div class="flex h-96 items-center justify-center">
+								<p class="text-base-content/60">Sem dados registrados até o momento.</p>
+							</div>
+						{:else}
+							<AreaChart data={chartDataTendenciasMensais} height={400} />
+						{/if}
 					</div>
 				</div>
 			</div>