SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add UserAvatar component to display employee profile pictures in absence and vacation requests; update backend to include profile picture URLs for employees

Browse Source
This commit is contained in:
deyvisonwanderley
2025-12-02 14:54:45 -03:00
parent ffa4dc5fb2
commit 75ab4d261d
4 changed files with 94 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/src/lib/components/AprovarAusencias.svelte
View File

@@ -3,6 +3,7 @@
import { api } from '@sgse-app/backend/convex/_generated/api';
import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
import ErrorModal from './ErrorModal.svelte';
import UserAvatar from './chat/UserAvatar.svelte';
type SolicitacaoAusencia = Doc<'solicitacoesAusencias'> & {
funcionario?: Doc<'funcionarios'> | null;
@@ -166,9 +167,16 @@
<p class="mb-2 text-sm font-semibold uppercase tracking-wide text-base-content/60">
Nome
</p>
<p class="text-lg font-bold text-base-content">
{solicitacao.funcionario?.nome || 'N/A'}
</p>
<div class="flex items-center gap-3">
<UserAvatar
fotoPerfilUrl={solicitacao.funcionario?.fotoPerfilUrl}
nome={solicitacao.funcionario?.nome || 'N/A'}
size="md"
/>
<p class="text-lg font-bold text-base-content">
{solicitacao.funcionario?.nome || 'N/A'}
</p>
</div>
</div>
{#if solicitacao.time}
<div class="rounded-xl bg-base-200/50 p-4 transition-all hover:bg-base-200">

22
apps/web/src/lib/components/AprovarFerias.svelte
View File

@@ -2,6 +2,7 @@
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';
import UserAvatar from './chat/UserAvatar.svelte';
type PeriodoFerias = Doc<'ferias'> & {
funcionario?: Doc<'funcionarios'> | null;
@@ -215,13 +216,20 @@
<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">
{periodo.funcionario?.nome || 'Funcionário'}
</h2>
<p class="text-base-content/70 mt-1 text-sm">
Ano de Referência: {periodo.anoReferencia}
</p>
<div class="flex items-center gap-3">
<UserAvatar
fotoPerfilUrl={periodo.funcionario?.fotoPerfilUrl}
nome={periodo.funcionario?.nome || 'Funcionário'}
size="md"
/>
<div>
<h2 class="card-title text-2xl">
{periodo.funcionario?.nome || 'Funcionário'}
</h2>
<p class="text-base-content/70 mt-1 text-sm">
Ano de Referência: {periodo.anoReferencia}
</p>
</div>
</div>
<div class={`badge ${getStatusBadge(periodo.status)} badge-lg`}>
{getStatusTexto(periodo.status)}