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

@@ -8,6 +8,7 @@
 	import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
 	import CalendarioAusencias from '$lib/components/ausencias/CalendarioAusencias.svelte';
 	import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
+	import UserAvatar from '$lib/components/chat/UserAvatar.svelte';
 	import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
 	import type { FunctionReturnType } from 'convex/server';
 	import {
@@ -2208,9 +2209,16 @@
 												class="hover:bg-base-200/50 border-base-300 border-b transition-all duration-200"
 											>
 											<td>
+												<div class="flex items-center gap-3">
+													<UserAvatar
+														fotoPerfilUrl={periodo.funcionario?.fotoPerfilUrl}
+														nome={periodo.funcionario?.nome || 'Funcionário'}
+														size="sm"
+													/>
 													<div class="text-base-content font-semibold">
 														{periodo.funcionario?.nome}
 													</div>
+												</div>
 											</td>
 												<td>
 													{#if periodo.time}
@@ -2332,9 +2340,16 @@
 												class="hover:bg-base-200/50 border-base-300 border-b transition-all duration-200"
 											>
 											<td>
+												<div class="flex items-center gap-3">
+													<UserAvatar
+														fotoPerfilUrl={ausencia.funcionario?.fotoPerfilUrl}
+														nome={ausencia.funcionario?.nome || 'N/A'}
+														size="sm"
+													/>
 													<div class="text-base-content font-semibold">
 														{ausencia.funcionario?.nome || 'N/A'}
 													</div>
+												</div>
 											</td>
 												<td>
 													{#if ausencia.time}