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

fix: foto perfil url

Browse Source
This commit is contained in:
killer-cf
2025-11-12 14:26:51 -03:00
parent 87b59af8da
commit 553fc578a6
5 changed files with 972 additions and 1114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
apps/web/src/lib/components/Sidebar.svelte
View File

@@ -1,27 +1,18 @@
<script lang="ts">
import { page } from "$app/state";
import { goto } from "$app/navigation";
import logo from "$lib/assets/logo_governo_PE.png";
import type { Snippet } from "svelte";
import { loginModalStore } from "$lib/stores/loginModal.svelte";
import { useQuery } from "convex-svelte";
import { api } from "@sgse-app/backend/convex/_generated/api";
import NotificationBell from "$lib/components/chat/NotificationBell.svelte";
import ChatWidget from "$lib/components/chat/ChatWidget.svelte";
import PresenceManager from "$lib/components/chat/PresenceManager.svelte";
import { getAvatarUrl } from "$lib/utils/avatarGenerator";
import {
Menu,
User,
Home,
UserPlus,
XCircle,
LogIn,
Tag,
Plus,
Check,
} from "lucide-svelte";
import { authClient } from "$lib/auth";
import { page } from '$app/state';
import { goto } from '$app/navigation';
import logo from '$lib/assets/logo_governo_PE.png';
import type { Snippet } from 'svelte';
import { loginModalStore } from '$lib/stores/loginModal.svelte';
import { useQuery } from 'convex-svelte';
import { api } from '@sgse-app/backend/convex/_generated/api';
import NotificationBell from '$lib/components/chat/NotificationBell.svelte';
import ChatWidget from '$lib/components/chat/ChatWidget.svelte';
import PresenceManager from '$lib/components/chat/PresenceManager.svelte';
import { getAvatarUrl } from '$lib/utils/avatarGenerator';
import { Menu, User, Home, UserPlus, XCircle, LogIn, Tag, Plus, Check } from 'lucide-svelte';
import { authClient } from '$lib/auth';
import { resolve } from '$app/paths';
let { children }: { children: Snippet } = $props();
@@ -34,8 +25,12 @@
if (!currentUser.data) return null;
// Prioridade: fotoPerfilUrl > avatar > fallback com nome
if (currentUser.data.fotoPerfil) {
return currentUser.data.fotoPerfil;
if (currentUser.data.fotoPerfilUrl) {
return currentUser.data.fotoPerfilUrl;
}
if (currentUser.data.avatar) {
return currentUser.data.avatar;
}
// Fallback: gerar avatar baseado no nome
@@ -45,7 +40,7 @@
// Função para gerar classes do menu ativo
function getMenuClasses(isActive: boolean) {
const baseClasses =
"group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
'group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105';
if (isActive) {
return `${baseClasses} border-primary bg-primary text-white shadow-lg scale-105`;
@@ -57,7 +52,7 @@
// Função para gerar classes do botão "Solicitar Acesso"
function getSolicitarClasses(isActive: boolean) {
const baseClasses =
"group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105";
'group font-semibold flex items-center justify-center gap-2 text-center p-3.5 rounded-xl border-2 transition-all duration-300 shadow-md hover:shadow-lg hover:scale-105';
if (isActive) {
return `${baseClasses} border-success bg-success text-white shadow-lg scale-105`;
@@ -67,49 +62,49 @@
}
const setores = [
{ nome: "Recursos Humanos", link: "/recursos-humanos" },
{ nome: "Financeiro", link: "/financeiro" },
{ nome: "Controladoria", link: "/controladoria" },
{ nome: "Licitações", link: "/licitacoes" },
{ nome: "Compras", link: "/compras" },
{ nome: "Jurídico", link: "/juridico" },
{ nome: "Comunicação", link: "/comunicacao" },
{ nome: "Programas Esportivos", link: "/programas-esportivos" },
{ nome: "Secretaria Executiva", link: "/secretaria-executiva" },
{ nome: 'Recursos Humanos', link: '/recursos-humanos' },
{ nome: 'Financeiro', link: '/financeiro' },
{ nome: 'Controladoria', link: '/controladoria' },
{ nome: 'Licitações', link: '/licitacoes' },
{ nome: 'Compras', link: '/compras' },
{ nome: 'Jurídico', link: '/juridico' },
{ nome: 'Comunicação', link: '/comunicacao' },
{ nome: 'Programas Esportivos', link: '/programas-esportivos' },
{ nome: 'Secretaria Executiva', link: '/secretaria-executiva' },
{
nome: "Secretaria de Gestão de Pessoas",
link: "/gestao-pessoas",
nome: 'Secretaria de Gestão de Pessoas',
link: '/gestao-pessoas'
},
{ nome: "Tecnologia da Informação", link: "/ti" },
{ nome: 'Tecnologia da Informação', link: '/ti' }
];
let showAboutModal = $state(false);
let matricula = $state("");
let senha = $state("");
let erroLogin = $state("");
let matricula = $state('');
let senha = $state('');
let erroLogin = $state('');
let carregandoLogin = $state(false);
// Sincronizar com o store global
$effect(() => {
if (loginModalStore.showModal && !matricula && !senha) {
matricula = "";
senha = "";
erroLogin = "";
matricula = '';
senha = '';
erroLogin = '';
}
});
function openLoginModal() {
loginModalStore.open();
matricula = "";
senha = "";
erroLogin = "";
matricula = '';
senha = '';
erroLogin = '';
}
function closeLoginModal() {
loginModalStore.close();
matricula = "";
senha = "";
erroLogin = "";
matricula = '';
senha = '';
erroLogin = '';
}
function openAboutModal() {
@@ -122,7 +117,7 @@
async function handleLogin(e: Event) {
e.preventDefault();
erroLogin = "";
erroLogin = '';
carregandoLogin = true;
// const browserInfo = await getBrowserInfo();
@@ -132,115 +127,109 @@
{
onError: (ctx) => {
alert(ctx.error.message);
},
},
}
}
);
if (result.data) {
closeLoginModal();
goto("/");
goto(resolve('/'));
} else {
erroLogin = "Erro ao fazer login";
erroLogin = 'Erro ao fazer login';
}
}
async function handleLogout() {
const result = await authClient.signOut();
if (result.error) {
console.error("Sign out error:", result.error);
console.error('Sign out error:', result.error);
}
goto("/");
goto(resolve('/'));
}
</script>
<!-- Header Fixo acima de tudo -->
<div
class="navbar bg-linear-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm shadow-lg border-b border-primary/10 px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-24"
class="navbar from-primary/30 via-primary/20 to-primary/30 border-primary/10 fixed top-0 right-0 left-0 z-50 min-h-24 border-b bg-linear-to-r px-6 shadow-lg backdrop-blur-sm lg:px-8"
>
<div class="flex-none lg:hidden">
<label
for="my-drawer-3"
class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden cursor-pointer group transition-all duration-300 hover:scale-105"
class="group relative flex h-14 w-14 cursor-pointer items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
aria-label="Abrir menu"
>
<!-- Efeito de brilho no hover -->
<div
class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
></div>
<!-- Ícone de menu hambúrguer -->
<Menu
class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
class="relative z-10 h-7 w-7 text-white transition-transform duration-300 group-hover:scale-110"
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
strokeWidth={2.5}
/>
</label>
</div>
<div class="flex-1 flex items-center gap-4 lg:gap-6">
<div class="flex flex-1 items-center gap-4 lg:gap-6">
<!-- Logo MODERNO do Governo -->
<div class="avatar">
<div
class="w-16 lg:w-20 rounded-2xl shadow-xl p-2 relative overflow-hidden group transition-all duration-300 hover:scale-105"
class="group relative w-16 overflow-hidden rounded-2xl p-2 shadow-xl transition-all duration-300 hover:scale-105 lg:w-20"
style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 2px solid rgba(102, 126, 234, 0.1);"
>
<!-- Efeito de brilho no hover -->
<div
class="absolute inset-0 bg-linear-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
class="from-primary/5 absolute inset-0 bg-linear-to-br to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
></div>
<!-- Logo -->
<img
src={logo}
alt="Logo do Governo de PE"
class="w-full h-full object-contain relative z-10 transition-transform duration-300 group-hover:scale-105"
class="relative z-10 h-full w-full object-contain transition-transform duration-300 group-hover:scale-105"
style="filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));"
/>
<!-- Brilho sutil no canto -->
<div
class="absolute top-0 right-0 w-8 h-8 bg-linear-to-br from-white/40 to-transparent rounded-bl-full opacity-70"
class="absolute top-0 right-0 h-8 w-8 rounded-bl-full bg-linear-to-br from-white/40 to-transparent opacity-70"
></div>
</div>
</div>
<div class="flex flex-col">
<h1 class="text-xl lg:text-3xl font-bold text-primary tracking-tight">
SGSE
</h1>
<h1 class="text-primary text-xl font-bold tracking-tight lg:text-3xl">SGSE</h1>
<p
class="text-xs lg:text-base text-base-content/80 hidden sm:block font-medium leading-tight"
class="text-base-content/80 hidden text-xs leading-tight font-medium sm:block lg:text-base"
>
Sistema de Gerenciamento da<br class="lg:hidden" /> Secretaria de Esportes
</p>
</div>
</div>
<div class="flex-none flex items-center gap-4 ml-auto">
<div class="ml-auto flex flex-none items-center gap-4">
{#if currentUser.data}
<!-- Sino de notificações no canto superior direito -->
<div class="relative">
<NotificationBell />
</div>
<div class="hidden lg:flex flex-col items-end mr-2">
<span class="text-sm font-semibold text-primary"
>{currentUser.data.nome}</span
>
<span class="text-xs text-base-content/60"
>{currentUser.data.role?.nome}</span
>
<div class="mr-2 hidden flex-col items-end lg:flex">
<span class="text-primary text-sm font-semibold">{currentUser.data.nome}</span>
<span class="text-base-content/60 text-xs">{currentUser.data.role?.nome}</span>
</div>
<div class="dropdown dropdown-end">
<!-- Botão de Perfil ULTRA MODERNO -->
<button
type="button"
tabindex="0"
class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden group transition-all duration-300 hover:scale-105"
class="group relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl transition-all duration-300 hover:scale-105"
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
aria-label="Menu do usuário"
>
<!-- Efeito de brilho no hover -->
<div
class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
class="absolute inset-0 bg-linear-to-br from-white/0 to-white/20 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
></div>
<!-- Anel de pulso sutil -->
@@ -253,62 +242,58 @@
{#if avatarUrlDoUsuario()}
<img
src={avatarUrlDoUsuario()}
alt={currentUser.data?.nome || "Usuário"}
class="w-full h-full object-cover relative z-10"
alt={currentUser.data?.nome || 'Usuário'}
class="relative z-10 h-full w-full object-cover"
/>
{:else}
<!-- Ícone de usuário moderno (fallback) -->
<User
class="w-7 h-7 text-white relative z-10 group-hover:scale-110 transition-transform duration-300"
class="relative z-10 h-7 w-7 text-white transition-transform duration-300 group-hover:scale-110"
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
/>
{/if}
<!-- Badge de status online -->
<div
class="absolute top-1 right-1 w-3 h-3 bg-success rounded-full border-2 border-white shadow-lg z-20"
class="bg-success absolute top-1 right-1 z-20 h-3 w-3 rounded-full border-2 border-white shadow-lg"
style="animation: pulse-dot 2s ease-in-out infinite;"
></div>
</button>
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
<ul
tabindex="0"
class="dropdown-content z-1 menu p-2 shadow-xl bg-base-100 rounded-box w-52 mt-4 border border-primary/20"
class="dropdown-content menu bg-base-100 rounded-box border-primary/20 z-1 mt-4 w-52 border p-2 shadow-xl"
>
<li class="menu-title">
<span class="text-primary font-bold">{currentUser.data?.nome}</span>
</li>
<li><a href="/perfil">Meu Perfil</a></li>
<li><a href="/alterar-senha">Alterar Senha</a></li>
<li><a href={resolve('/perfil')}>Meu Perfil</a></li>
<li><a href={resolve('/alterar-senha')}>Alterar Senha</a></li>
<div class="divider my-0"></div>
<li>
<button type="button" onclick={handleLogout} class="text-error"
>Sair</button
>
<button type="button" onclick={handleLogout} class="text-error">Sair</button>
</li>
</ul>
</div>
{:else}
<button
type="button"
class="btn btn-lg shadow-2xl hover:shadow-primary/30 transition-all duration-500 hover:scale-110 group relative overflow-hidden border-0 bg-linear-to-br from-primary via-primary to-primary/80 hover:from-primary/90 hover:via-primary/80 hover:to-primary/70"
class="btn btn-lg hover:shadow-primary/30 group from-primary via-primary to-primary/80 hover:from-primary/90 hover:via-primary/80 hover:to-primary/70 relative overflow-hidden border-0 bg-linear-to-br shadow-2xl transition-all duration-500 hover:scale-110"
style="width: 4rem; height: 4rem; border-radius: 9999px;"
onclick={() => openLoginModal()}
aria-label="Login"
>
<!-- Efeito de brilho animado -->
<div
class="absolute inset-0 bg-linear-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"
class="absolute inset-0 -translate-x-full bg-linear-to-r from-transparent via-white/30 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
></div>
<!-- Anel pulsante de fundo -->
<div
class="absolute inset-0 rounded-full bg-white/10 group-hover:animate-ping"
></div>
<div class="absolute inset-0 rounded-full bg-white/10 group-hover:animate-ping"></div>
<!-- Ícone de login premium -->
<User
class="h-8 w-8 relative z-10 text-white group-hover:scale-110 transition-all duration-500"
class="relative z-10 h-8 w-8 text-white transition-all duration-500 group-hover:scale-110"
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));"
strokeWidth={2.5}
/>
@@ -319,10 +304,7 @@
<div class="drawer lg:drawer-open" style="margin-top: 96px;">
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
<div
class="drawer-content flex flex-col lg:ml-72"
style="min-height: calc(100vh - 96px);"
>
<div class="drawer-content flex flex-col lg:ml-72" style="min-height: calc(100vh - 96px);">
<!-- Page content -->
<div class="flex-1 overflow-y-auto">
{@render children?.()}
@@ -330,7 +312,7 @@
<!-- Footer -->
<footer
class="footer footer-center bg-linear-to-r from-primary/30 via-primary/20 to-primary/30 backdrop-blur-sm text-base-content p-6 border-t-2 border-primary/20 shadow-inner shrink-0"
class="footer footer-center from-primary/30 via-primary/20 to-primary/30 text-base-content border-primary/20 shrink-0 border-t-2 bg-linear-to-r p-6 shadow-inner backdrop-blur-sm"
>
<div class="grid grid-flow-col gap-6 text-sm font-medium">
<button
@@ -339,50 +321,44 @@
onclick={() => openAboutModal()}>Sobre</button
>
<span class="text-base-content/30">•</span>
<a href="/" class="link link-hover hover:text-primary transition-colors"
<a href={resolve('/')} class="link link-hover hover:text-primary transition-colors"
>Contato</a
>
<span class="text-base-content/30">•</span>
<a href="/" class="link link-hover hover:text-primary transition-colors"
<a href={resolve('/')} class="link link-hover hover:text-primary transition-colors"
>Suporte</a
>
<span class="text-base-content/30">•</span>
<a href="/" class="link link-hover hover:text-primary transition-colors"
<a href={resolve('/')} class="link link-hover hover:text-primary transition-colors"
>Privacidade</a
>
</div>
<div class="flex items-center gap-3 mt-2">
<div class="mt-2 flex items-center gap-3">
<div class="avatar">
<div class="w-10 rounded-lg bg-white p-1.5 shadow-md">
<img src={logo} alt="Logo" class="w-full h-full object-contain" />
<img src={logo} alt="Logo" class="h-full w-full object-contain" />
</div>
</div>
<div class="text-left">
<p class="text-xs font-bold text-primary">
Governo do Estado de Pernambuco
</p>
<p class="text-xs text-base-content/70">Secretaria de Esportes</p>
<p class="text-primary text-xs font-bold">Governo do Estado de Pernambuco</p>
<p class="text-base-content/70 text-xs">Secretaria de Esportes</p>
</div>
</div>
<p class="text-xs text-base-content/60 mt-2">
<p class="text-base-content/60 mt-2 text-xs">
© {new Date().getFullYear()} - Todos os direitos reservados
</p>
</footer>
</div>
<div class="drawer-side z-40 fixed" style="margin-top: 96px;">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
></label>
<div class="drawer-side fixed z-40" style="margin-top: 96px;">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
<div
class="menu bg-linear-to-b from-primary/25 to-primary/15 backdrop-blur-sm w-72 p-4 flex flex-col gap-2 h-[calc(100vh-96px)] overflow-y-auto border-r-2 border-primary/20 shadow-xl"
class="menu from-primary/25 to-primary/15 border-primary/20 flex h-[calc(100vh-96px)] w-72 flex-col gap-2 overflow-y-auto border-r-2 bg-linear-to-b p-4 shadow-xl backdrop-blur-sm"
>
<!-- Sidebar menu items -->
<ul class="flex flex-col gap-2">
<li class="rounded-xl">
<a href="/" class={getMenuClasses(currentPath === "/")}>
<Home
class="h-5 w-5 group-hover:scale-110 transition-transform"
strokeWidth={2}
/>
<a href={resolve('/')} class={getMenuClasses(currentPath === '/')}>
<Home class="h-5 w-5 transition-transform group-hover:scale-110" strokeWidth={2} />
<span>Dashboard</span>
</a>
</li>
@@ -391,17 +367,17 @@
<li class="rounded-xl">
<a
href={s.link}
aria-current={isActive ? "page" : undefined}
aria-current={isActive ? 'page' : undefined}
class={getMenuClasses(isActive)}
>
<span>{s.nome}</span>
</a>
</li>
{/each}
<li class="rounded-xl mt-auto">
<li class="mt-auto rounded-xl">
<a
href="/solicitar-acesso"
class={getSolicitarClasses(currentPath === "/solicitar-acesso")}
href={resolve('/solicitar-acesso')}
class={getSolicitarClasses(currentPath === '/solicitar-acesso')}
>
<UserPlus class="h-5 w-5" strokeWidth={2} />
<span>Solicitar acesso</span>
@@ -415,31 +391,29 @@
<!-- Modal de Login -->
{#if loginModalStore.showModal}
<dialog class="modal modal-open">
<div class="modal-box relative overflow-hidden bg-base-100 max-w-md">
<div class="modal-box bg-base-100 relative max-w-md overflow-hidden">
<button
type="button"
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
onclick={closeLoginModal}
>
✕
</button>
<div class="p-4">
<div class="text-center mb-6">
<div class="mb-6 text-center">
<div class="avatar mb-4">
<div class="w-20 rounded-lg bg-primary/10 p-3">
<img src={logo} alt="Logo" class="w-full h-full object-contain" />
<div class="bg-primary/10 w-20 rounded-lg p-3">
<img src={logo} alt="Logo" class="h-full w-full object-contain" />
</div>
</div>
<h3 class="font-bold text-3xl text-primary">Login</h3>
<p class="text-sm text-base-content/60 mt-2">
Acesse o sistema com suas credenciais
</p>
<h3 class="text-primary text-3xl font-bold">Login</h3>
<p class="text-base-content/60 mt-2 text-sm">Acesse o sistema com suas credenciais</p>
</div>
{#if erroLogin}
<div class="alert alert-error mb-4">
<XCircle class="stroke-current shrink-0 h-6 w-6" strokeWidth={2} />
<XCircle class="h-6 w-6 shrink-0 stroke-current" strokeWidth={2} />
<span>{erroLogin}</span>
</div>
{/if}
@@ -474,11 +448,7 @@
/>
</div>
<div class="form-control mt-6">
<button
type="submit"
class="btn btn-primary w-full"
disabled={carregandoLogin}
>
<button type="submit" class="btn btn-primary w-full" disabled={carregandoLogin}>
{#if carregandoLogin}
<span class="loading loading-spinner loading-sm"></span>
Entrando...
@@ -488,17 +458,17 @@
{/if}
</button>
</div>
<div class="text-center mt-4 space-y-2">
<div class="mt-4 space-y-2 text-center">
<a
href="/solicitar-acesso"
class="link link-primary text-sm block"
href={resolve('/solicitar-acesso')}
class="link link-primary block text-sm"
onclick={closeLoginModal}
>
Não tem acesso? Solicite aqui
</a>
<a
href="/esqueci-senha"
class="link link-secondary text-sm block"
href={resolve('/esqueci-senha')}
class="link link-secondary block text-sm"
onclick={closeLoginModal}
>
Esqueceu sua senha?
@@ -506,16 +476,14 @@
</div>
</form>
<div class="divider text-xs text-base-content/40">
Credenciais de teste
</div>
<div class="bg-base-200 p-3 rounded-lg text-xs">
<p class="font-semibold mb-1">Admin:</p>
<div class="divider text-base-content/40 text-xs">Credenciais de teste</div>
<div class="bg-base-200 rounded-lg p-3 text-xs">
<p class="mb-1 font-semibold">Admin:</p>
<p>
Matrícula: <code class="bg-base-300 px-2 py-1 rounded">0000</code>
Matrícula: <code class="bg-base-300 rounded px-2 py-1">0000</code>
</p>
<p>
Senha: <code class="bg-base-300 px-2 py-1 rounded">Admin@123</code>
Senha: <code class="bg-base-300 rounded px-2 py-1">Admin@123</code>
</p>
</div>
</div>
@@ -532,31 +500,27 @@
{#if showAboutModal}
<dialog class="modal modal-open">
<div
class="modal-box max-w-2xl relative overflow-hidden bg-linear-to-br from-base-100 to-base-200"
class="modal-box from-base-100 to-base-200 relative max-w-2xl overflow-hidden bg-linear-to-br"
>
<button
type="button"
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
onclick={closeAboutModal}
>
✕
</button>
<div class="text-center space-y-6 py-4">
<div class="space-y-6 py-4 text-center">
<!-- Logo e Título -->
<div class="flex flex-col items-center gap-4">
<div class="avatar">
<div class="w-24 rounded-xl bg-white p-3 shadow-lg">
<img
src={logo}
alt="Logo SGSE"
class="w-full h-full object-contain"
/>
<img src={logo} alt="Logo SGSE" class="h-full w-full object-contain" />
</div>
</div>
<div>
<h3 class="text-3xl font-bold text-primary mb-2">SGSE</h3>
<p class="text-lg font-semibold text-base-content/80">
<h3 class="text-primary mb-2 text-3xl font-bold">SGSE</h3>
<p class="text-base-content/80 text-lg font-semibold">
Sistema de Gerenciamento da<br />Secretaria de Esportes
</p>
</div>
@@ -566,12 +530,12 @@
<div class="divider"></div>
<!-- Informações de Versão -->
<div class="bg-primary/10 rounded-xl p-6 space-y-3">
<div class="bg-primary/10 space-y-3 rounded-xl p-6">
<div class="flex items-center justify-center gap-2">
<Tag class="h-5 w-5 text-primary" strokeWidth={2} />
<p class="text-sm font-medium text-base-content/70">Versão</p>
<Tag class="text-primary h-5 w-5" strokeWidth={2} />
<p class="text-base-content/70 text-sm font-medium">Versão</p>
</div>
<p class="text-2xl font-bold text-primary">1.0 26_2025</p>
<p class="text-primary text-2xl font-bold">1.0 26_2025</p>
<div class="badge badge-warning badge-lg gap-2">
<Plus class="h-4 w-4" strokeWidth={2} />
Em Desenvolvimento
@@ -580,12 +544,8 @@
<!-- Desenvolvido por -->
<div class="space-y-2">
<p class="text-sm font-medium text-base-content/60">
Desenvolvido por
</p>
<p class="text-lg font-bold text-primary">
Secretaria de Esportes de Pernambuco
</p>
<p class="text-base-content/60 text-sm font-medium">Desenvolvido por</p>
<p class="text-primary text-lg font-bold">Secretaria de Esportes de Pernambuco</p>
</div>
<!-- Divider -->
@@ -594,12 +554,12 @@
<!-- Informações Adicionais -->
<div class="grid grid-cols-2 gap-4 text-sm">
<div class="bg-base-200 rounded-lg p-3">
<p class="font-semibold text-primary">Governo</p>
<p class="text-xs text-base-content/70">Estado de Pernambuco</p>
<p class="text-primary font-semibold">Governo</p>
<p class="text-base-content/70 text-xs">Estado de Pernambuco</p>
</div>
<div class="bg-base-200 rounded-lg p-3">
<p class="font-semibold text-primary">Ano</p>
<p class="text-xs text-base-content/70">2025</p>
<p class="text-primary font-semibold">Ano</p>
<p class="text-base-content/70 text-xs">2025</p>
</div>
</div>
@@ -607,7 +567,7 @@
<div class="pt-4">
<button
type="button"
class="btn btn-primary btn-lg w-full max-w-xs mx-auto shadow-lg hover:shadow-xl transition-all duration-300"
class="btn btn-primary btn-lg mx-auto w-full max-w-xs shadow-lg transition-all duration-300 hover:shadow-xl"
onclick={closeAboutModal}
>
<Check class="h-6 w-6" strokeWidth={2} />
@@ -621,7 +581,7 @@
onclick={closeAboutModal}
role="button"
tabindex="0"
onkeydown={(e) => e.key === "Escape" && closeAboutModal()}
onkeydown={(e) => e.key === 'Escape' && closeAboutModal()}
></div>
</dialog>
{/if}

5
apps/web/src/lib/components/chat/ChatWidget.svelte
View File

@@ -34,9 +34,10 @@
if (!usuario) return null;
// Prioridade: fotoPerfilUrl > avatar > fallback com nome
if (usuario.fotoPerfil) {
return usuario.fotoPerfil;
if (usuario.fotoPerfilUrl) {
return usuario.fotoPerfilUrl;
}
if (usuario.avatar) {
return getAvatarUrl(usuario.avatar);
}

241
apps/web/src/lib/components/chat/SalaReuniaoManager.svelte
View File

@@ -1,21 +1,13 @@
<script lang="ts">
import { useQuery, useConvexClient } from "convex-svelte";
import { api } from "@sgse-app/backend/convex/_generated/api";
import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
import UserAvatar from "./UserAvatar.svelte";
import UserStatusBadge from "./UserStatusBadge.svelte";
import {
X,
Users,
UserPlus,
ArrowUp,
ArrowDown,
Trash2,
Search,
} from "lucide-svelte";
import { useQuery, useConvexClient } from 'convex-svelte';
import { api } from '@sgse-app/backend/convex/_generated/api';
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
import UserAvatar from './UserAvatar.svelte';
import UserStatusBadge from './UserStatusBadge.svelte';
import { X, Users, UserPlus, ArrowUp, ArrowDown, Trash2, Search } from 'lucide-svelte';
interface Props {
conversaId: Id<"conversas">;
conversaId: Id<'conversas'>;
isAdmin: boolean;
onClose: () => void;
}
@@ -26,8 +18,8 @@
const conversas = useQuery(api.chat.listarConversas, {});
const todosUsuariosQuery = useQuery(api.chat.listarTodosUsuarios, {});
let activeTab = $state<"participantes" | "adicionar">("participantes");
let searchQuery = $state("");
let activeTab = $state<'participantes' | 'adicionar'>('participantes');
let searchQuery = $state('');
let loading = $state<string | null>(null);
let error = $state<string | null>(null);
@@ -47,8 +39,7 @@
if (!conv || !usuarios || usuarios.length === 0) return [];
const participantesInfo = conv.participantesInfo || [];
if (!Array.isArray(participantesInfo) || participantesInfo.length === 0)
return [];
if (!Array.isArray(participantesInfo) || participantesInfo.length === 0) return [];
return participantesInfo
.map((p: any) => {
@@ -69,20 +60,18 @@
// Combinar dados do usuário com dados do participante (se p for objeto)
return {
...usuario,
...(typeof p === "object" && p !== null && p !== undefined
? p
: {}),
...(typeof p === 'object' && p !== null && p !== undefined ? p : {}),
// Garantir que _id existe e priorizar o do usuario
_id: usuario._id,
_id: usuario._id
};
} catch (err) {
console.error("Erro ao processar participante:", err, p);
console.error('Erro ao processar participante:', err, p);
return null;
}
})
.filter((p: any) => p !== null && p._id);
} catch (err) {
console.error("Erro ao calcular participantes:", err);
console.error('Erro ao calcular participantes:', err);
return [];
}
});
@@ -96,8 +85,7 @@
if (!usuarios || usuarios.length === 0) return [];
const participantesIds = conversa()?.participantes || [];
return usuarios.filter(
(u: any) =>
!participantesIds.some((pid: any) => String(pid) === String(u._id)),
(u: any) => !participantesIds.some((pid: any) => String(pid) === String(u._id))
);
});
@@ -107,9 +95,9 @@
const query = searchQuery.toLowerCase();
return disponiveis.filter(
(u: any) =>
(u.nome || "").toLowerCase().includes(query) ||
(u.email || "").toLowerCase().includes(query) ||
(u.matricula || "").toLowerCase().includes(query),
(u.nome || '').toLowerCase().includes(query) ||
(u.email || '').toLowerCase().includes(query) ||
(u.matricula || '').toLowerCase().includes(query)
);
});
@@ -124,66 +112,63 @@
}
async function removerParticipante(participanteId: string) {
if (!confirm("Tem certeza que deseja remover este participante?")) return;
if (!confirm('Tem certeza que deseja remover este participante?')) return;
try {
loading = `remover-${participanteId}`;
error = null;
const resultado = await client.mutation(
api.chat.removerParticipanteSala,
{
const resultado = await client.mutation(api.chat.removerParticipanteSala, {
conversaId,
participanteId: participanteId as any,
},
);
participanteId: participanteId as any
});
if (!resultado.sucesso) {
error = resultado.erro || "Erro ao remover participante";
error = resultado.erro || 'Erro ao remover participante';
}
} catch (err: any) {
error = err.message || "Erro ao remover participante";
error = err.message || 'Erro ao remover participante';
} finally {
loading = null;
}
}
async function promoverAdmin(participanteId: string) {
if (!confirm("Promover este participante a administrador?")) return;
if (!confirm('Promover este participante a administrador?')) return;
try {
loading = `promover-${participanteId}`;
error = null;
const resultado = await client.mutation(api.chat.promoverAdministrador, {
conversaId,
participanteId: participanteId as any,
participanteId: participanteId as any
});
if (!resultado.sucesso) {
error = resultado.erro || "Erro ao promover administrador";
error = resultado.erro || 'Erro ao promover administrador';
}
} catch (err: any) {
error = err.message || "Erro ao promover administrador";
error = err.message || 'Erro ao promover administrador';
} finally {
loading = null;
}
}
async function rebaixarAdmin(participanteId: string) {
if (!confirm("Rebaixar este administrador a participante?")) return;
if (!confirm('Rebaixar este administrador a participante?')) return;
try {
loading = `rebaixar-${participanteId}`;
error = null;
const resultado = await client.mutation(api.chat.rebaixarAdministrador, {
conversaId,
participanteId: participanteId as any,
participanteId: participanteId as any
});
if (!resultado.sucesso) {
error = resultado.erro || "Erro ao rebaixar administrador";
error = resultado.erro || 'Erro ao rebaixar administrador';
}
} catch (err: any) {
error = err.message || "Erro ao rebaixar administrador";
error = err.message || 'Erro ao rebaixar administrador';
} finally {
loading = null;
}
@@ -193,46 +178,38 @@
try {
loading = `adicionar-${usuarioId}`;
error = null;
const resultado = await client.mutation(
api.chat.adicionarParticipanteSala,
{
const resultado = await client.mutation(api.chat.adicionarParticipanteSala, {
conversaId,
participanteId: usuarioId as any,
},
);
participanteId: usuarioId as any
});
if (!resultado.sucesso) {
error = resultado.erro || "Erro ao adicionar participante";
error = resultado.erro || 'Erro ao adicionar participante';
} else {
searchQuery = "";
searchQuery = '';
}
} catch (err: any) {
error = err.message || "Erro ao adicionar participante";
error = err.message || 'Erro ao adicionar participante';
} finally {
loading = null;
}
}
</script>
<dialog
class="modal modal-open"
onclick={(e) => e.target === e.currentTarget && onClose()}
>
<dialog class="modal modal-open" onclick={(e) => e.target === e.currentTarget && onClose()}>
<div
class="modal-box max-w-2xl max-h-[80vh] flex flex-col p-0"
class="modal-box flex max-h-[80vh] max-w-2xl flex-col p-0"
onclick={(e) => e.stopPropagation()}
>
<!-- Header -->
<div
class="flex items-center justify-between px-6 py-4 border-b border-base-300"
>
<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
<div>
<h2 class="text-xl font-semibold flex items-center gap-2">
<Users class="w-5 h-5 text-primary" />
<h2 class="flex items-center gap-2 text-xl font-semibold">
<Users class="text-primary h-5 w-5" />
Gerenciar Sala de Reunião
</h2>
<p class="text-sm text-base-content/60">
{conversa()?.nome || "Sem nome"}
<p class="text-base-content/60 text-sm">
{conversa()?.nome || 'Sem nome'}
</p>
</div>
<button
@@ -241,7 +218,7 @@
onclick={onClose}
aria-label="Fechar"
>
<X class="w-5 h-5" />
<X class="h-5 w-5" />
</button>
</div>
@@ -250,18 +227,18 @@
<div class="tabs tabs-boxed p-4">
<button
type="button"
class={`tab flex items-center gap-2 ${activeTab === "participantes" ? "tab-active" : ""}`}
onclick={() => (activeTab = "participantes")}
class={`tab flex items-center gap-2 ${activeTab === 'participantes' ? 'tab-active' : ''}`}
onclick={() => (activeTab = 'participantes')}
>
<Users class="w-4 h-4" />
<Users class="h-4 w-4" />
Participantes
</button>
<button
type="button"
class={`tab flex items-center gap-2 ${activeTab === "adicionar" ? "tab-active" : ""}`}
onclick={() => (activeTab = "adicionar")}
class={`tab flex items-center gap-2 ${activeTab === 'adicionar' ? 'tab-active' : ''}`}
onclick={() => (activeTab = 'adicionar')}
>
<UserPlus class="w-4 h-4" />
<UserPlus class="h-4 w-4" />
Adicionar Participante
</button>
</div>
@@ -269,14 +246,10 @@
<!-- Error Message -->
{#if error}
<div class="mx-6 mt-2 alert alert-error">
<div class="alert alert-error mx-6 mt-2">
<span>{error}</span>
<button
type="button"
class="btn btn-sm btn-ghost"
onclick={() => (error = null)}
>
<X class="w-4 h-4" />
<button type="button" class="btn btn-sm btn-ghost" onclick={() => (error = null)}>
<X class="h-4 w-4" />
</button>
</div>
{/if}
@@ -287,19 +260,15 @@
<!-- Loading conversas -->
<div class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-lg"></span>
<span class="ml-2 text-sm text-base-content/60"
>Carregando conversa...</span
>
<span class="text-base-content/60 ml-2 text-sm">Carregando conversa...</span>
</div>
{:else if !todosUsuariosQuery?.data}
<!-- Loading usuários -->
<div class="flex items-center justify-center py-8">
<span class="loading loading-spinner loading-lg"></span>
<span class="ml-2 text-sm text-base-content/60"
>Carregando usuários...</span
>
<span class="text-base-content/60 ml-2 text-sm">Carregando usuários...</span>
</div>
{:else if activeTab === "participantes"}
{:else if activeTab === 'participantes'}
<!-- Lista de Participantes -->
<div class="space-y-2 py-2">
{#if participantes().length > 0}
@@ -309,41 +278,36 @@
{@const ehCriador = isCriador(participanteId)}
{@const isLoading = loading?.includes(participanteId)}
<div
class="flex items-center gap-3 p-3 rounded-lg border border-base-300 hover:bg-base-200 transition-colors"
class="border-base-300 hover:bg-base-200 flex items-center gap-3 rounded-lg border p-3 transition-colors"
>
<!-- Avatar -->
<div class="relative shrink-0">
<UserAvatar
avatar={participante.avatar}
fotoPerfilUrl={participante.fotoPerfilUrl ||
participante.fotoPerfil}
nome={participante.nome || "Usuário"}
size="sm"
/>
<div class="absolute bottom-0 right-0">
<UserStatusBadge
status={participante.statusPresenca || "offline"}
fotoPerfilUrl={participante.fotoPerfilUrl || participante.avatar}
nome={participante.nome || 'Usuário'}
size="sm"
/>
<div class="absolute right-0 bottom-0">
<UserStatusBadge status={participante.statusPresenca || 'offline'} size="sm" />
</div>
</div>
<!-- Info -->
<div class="flex-1 min-w-0">
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<p class="font-medium text-base-content truncate">
{participante.nome || "Usuário"}
<p class="text-base-content truncate font-medium">
{participante.nome || 'Usuário'}
</p>
{#if ehAdmin}
<span class="badge badge-primary badge-sm">Admin</span>
{/if}
{#if ehCriador}
<span class="badge badge-secondary badge-sm">Criador</span
>
<span class="badge badge-secondary badge-sm">Criador</span>
{/if}
</div>
<p class="text-sm text-base-content/60 truncate">
{participante.setor || participante.email || ""}
<p class="text-base-content/60 truncate text-sm">
{participante.setor || participante.email || ''}
</p>
</div>
@@ -358,11 +322,10 @@
disabled={isLoading}
title="Rebaixar administrador"
>
{#if isLoading && loading?.includes("rebaixar")}
<span class="loading loading-spinner loading-xs"
></span>
{#if isLoading && loading?.includes('rebaixar')}
<span class="loading loading-spinner loading-xs"></span>
{:else}
<ArrowDown class="w-4 h-4" />
<ArrowDown class="h-4 w-4" />
{/if}
</button>
{:else}
@@ -373,11 +336,10 @@
disabled={isLoading}
title="Promover a administrador"
>
{#if isLoading && loading?.includes("promover")}
<span class="loading loading-spinner loading-xs"
></span>
{#if isLoading && loading?.includes('promover')}
<span class="loading loading-spinner loading-xs"></span>
{:else}
<ArrowUp class="w-4 h-4" />
<ArrowUp class="h-4 w-4" />
{/if}
</button>
{/if}
@@ -388,10 +350,10 @@
disabled={isLoading}
title="Remover participante"
>
{#if isLoading && loading?.includes("remover")}
{#if isLoading && loading?.includes('remover')}
<span class="loading loading-spinner loading-xs"></span>
{:else}
<Trash2 class="w-4 h-4" />
<Trash2 class="h-4 w-4" />
{/if}
</button>
</div>
@@ -399,23 +361,19 @@
</div>
{/each}
{:else}
<div class="text-center py-8 text-base-content/50">
Nenhum participante encontrado
</div>
<div class="text-base-content/50 py-8 text-center">Nenhum participante encontrado</div>
{/if}
</div>
{:else if activeTab === "adicionar" && isAdmin}
{:else if activeTab === 'adicionar' && isAdmin}
<!-- Adicionar Participante -->
<div class="mb-4 relative">
<div class="relative mb-4">
<input
type="text"
placeholder="Buscar usuários..."
class="input input-bordered w-full pl-10"
bind:value={searchQuery}
/>
<Search
class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40"
/>
<Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
</div>
<div class="space-y-2">
@@ -425,7 +383,7 @@
{@const isLoading = loading?.includes(usuarioId)}
<button
type="button"
class="w-full text-left px-4 py-3 rounded-lg border border-base-300 hover:bg-base-200 transition-colors flex items-center gap-3"
class="border-base-300 hover:bg-base-200 flex w-full items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors"
onclick={() => adicionarParticipante(usuarioId)}
disabled={isLoading}
>
@@ -433,25 +391,22 @@
<div class="relative shrink-0">
<UserAvatar
avatar={usuario.avatar}
fotoPerfilUrl={usuario.fotoPerfilUrl || usuario.fotoPerfil}
nome={usuario.nome || "Usuário"}
size="sm"
/>
<div class="absolute bottom-0 right-0">
<UserStatusBadge
status={usuario.statusPresenca || "offline"}
fotoPerfilUrl={usuario.fotoPerfilUrl || usuario.avatar}
nome={usuario.nome || 'Usuário'}
size="sm"
/>
<div class="absolute right-0 bottom-0">
<UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
</div>
</div>
<!-- Info -->
<div class="flex-1 min-w-0">
<p class="font-medium text-base-content truncate">
{usuario.nome || "Usuário"}
<div class="min-w-0 flex-1">
<p class="text-base-content truncate font-medium">
{usuario.nome || 'Usuário'}
</p>
<p class="text-sm text-base-content/60 truncate">
{usuario.setor || usuario.email || ""}
<p class="text-base-content/60 truncate text-sm">
{usuario.setor || usuario.email || ''}
</p>
</div>
@@ -459,15 +414,15 @@
{#if isLoading}
<span class="loading loading-spinner loading-sm"></span>
{:else}
<UserPlus class="w-5 h-5 text-primary" />
<UserPlus class="text-primary h-5 w-5" />
{/if}
</button>
{/each}
{:else}
<div class="text-center py-8 text-base-content/50">
<div class="text-base-content/50 py-8 text-center">
{searchQuery.trim()
? "Nenhum usuário encontrado"
: "Todos os usuários já são participantes"}
? 'Nenhum usuário encontrado'
: 'Todos os usuários já são participantes'}
</div>
{/if}
</div>
@@ -475,10 +430,8 @@
</div>
<!-- Footer -->
<div class="px-6 py-4 border-t border-base-300">
<button type="button" class="btn btn-block" onclick={onClose}>
Fechar
</button>
<div class="border-base-300 border-t px-6 py-4">
<button type="button" class="btn btn-block" onclick={onClose}> Fechar </button>
</div>
</div>
<form method="dialog" class="modal-backdrop">

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

@@ -9,6 +9,7 @@
import { generateAvatarGallery } from '$lib/utils/avatars';
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
import { X, Calendar } from 'lucide-svelte';
import type { FunctionReturnType } from 'convex/server';
const client = useConvexClient();
const currentUser = useQuery(api.auth.getCurrentUser, {});
@@ -28,11 +29,6 @@
let avatarSelecionado = $state<string>('');
let mostrarBotaoCamera = $state(false);
// Estados locais para atualização imediata
let fotoPerfilLocal = $state<string | null>(null);
let avatarLocal = $state<string | null>(null);
let perfilCarregado = $state(false);
// Estados para Minhas Férias
let mostrarWizard = $state(false);
let filtroStatusFerias = $state<string>('todos');
@@ -47,29 +43,6 @@
// Galeria de avatares (30 avatares profissionais 3D realistas)
const avatarGallery = generateAvatarGallery(30);
// Carregar perfil ao montar a página para garantir dados atualizados (apenas uma vez)
$effect(() => {
if (currentUser?.data && !perfilCarregado) {
perfilCarregado = true;
}
});
// Sincronizar com currentUser - atualiza automaticamente quando o usuário muda
$effect(() => {
const usuario = currentUser?.data;
if (usuario) {
// Atualizar foto de perfil (pode ser null ou string)
fotoPerfilLocal = usuario.fotoPerfil ?? null;
// Atualizar avatar (pode ser undefined ou string)
avatarLocal = usuario.avatar ?? null;
} else {
// Se não há usuário, limpar estados locais
fotoPerfilLocal = null;
avatarLocal = null;
perfilCarregado = false; // Reset para permitir recarregar quando houver usuário novamente
}
});
// FuncionarioId disponível diretamente do usuário atual
const funcionarioIdDisponivel = $derived(currentUser?.data?.funcionarioId ?? null);
@@ -238,14 +211,6 @@
erroUpload = '';
try {
// 1. Criar preview local IMEDIATAMENTE para feedback visual
const reader = new FileReader();
reader.onload = (e) => {
fotoPerfilLocal = e.target?.result as string;
avatarLocal = null;
};
reader.readAsDataURL(file);
// 2. Gerar URL de upload
const uploadUrl = await client.mutation(api.usuarios.uploadFotoPerfil, {});
@@ -271,12 +236,6 @@
// 5. Aguardar um pouco para garantir que o backend processou
await new Promise((resolve) => setTimeout(resolve, 300));
// 6. Atualizar localmente com a URL retornada pelo backend (ou pelo currentUser)
if (currentUser?.data?.fotoPerfil) {
fotoPerfilLocal = currentUser.data.fotoPerfil;
avatarLocal = null;
}
// 8. Limpar o input para permitir novo upload
input.value = '';
@@ -299,12 +258,8 @@
} catch (e: unknown) {
const errorMessage = e instanceof Error ? e.message : String(e);
erroUpload = errorMessage || 'Erro ao fazer upload da foto';
// Reverter mudança local se houver erro
fotoPerfilLocal = currentUser?.data?.fotoPerfil || null;
avatarLocal = currentUser?.data?.avatar || null;
} finally {
uploadandoFoto = false;
}
uploadandoFoto = false;
}
async function handleSelecionarAvatar(avatarUrl: string) {
@@ -312,25 +267,12 @@
erroUpload = '';
try {
// 1. Atualizar localmente IMEDIATAMENTE para feedback visual instantâneo
avatarLocal = avatarUrl;
fotoPerfilLocal = null;
// 2. Salvar avatar selecionado no backend
await client.mutation(api.usuarios.atualizarPerfil, {
avatar: avatarUrl,
fotoPerfil: undefined // Remove foto se colocar avatar
});
// 3. Aguardar um pouco para garantir que o backend processou
await new Promise((resolve) => setTimeout(resolve, 300));
// 4. Garantir que os estados locais estão sincronizados com o usuário atual
if (currentUser?.data?.avatar) {
avatarLocal = currentUser.data.avatar;
fotoPerfilLocal = null;
}
// 6. Fechar modal após sucesso
mostrarModalFoto = false;
@@ -350,9 +292,6 @@
} catch (e: unknown) {
const errorMessage = e instanceof Error ? e.message : String(e);
erroUpload = errorMessage || 'Erro ao salvar avatar';
// Reverter mudança local se houver erro
avatarLocal = currentUser?.data?.avatar || null;
fotoPerfilLocal = currentUser?.data?.fotoPerfil || null;
} finally {
uploadandoFoto = false;
}
@@ -391,6 +330,7 @@
onmouseenter={() => (mostrarBotaoCamera = true)}
onmouseleave={() => (mostrarBotaoCamera = false)}
>
s
<button
type="button"
class="avatar cursor-pointer border-0 bg-transparent p-0"
@@ -399,10 +339,14 @@
<div
class="animate-float h-40 w-40 rounded-full shadow-2xl ring-4 ring-white ring-offset-4 ring-offset-transparent transition-all duration-300 hover:scale-105 hover:ring-8"
>
{#if fotoPerfilLocal}
<img src={fotoPerfilLocal} alt="Foto de perfil" class="object-cover" />
{:else if avatarLocal}
<img src={avatarLocal} alt="Avatar" class="object-cover" />
{#if currentUser.data?.fotoPerfilUrl}
<img
src={currentUser.data.fotoPerfilUrl}
alt="Foto de perfil"
class="object-cover"
/>
{:else if currentUser.data?.avatar}
<img src={currentUser.data.avatar} alt="Avatar" class="object-cover" />
{:else}
<div class="flex items-center justify-center bg-white text-purple-700">
<span class="text-5xl font-black"
@@ -2038,10 +1982,10 @@
<div
class="ring-primary ring-offset-base-100 h-32 w-32 rounded-full shadow-2xl ring-4 ring-offset-4"
>
{#if fotoPerfilLocal}
<img src={fotoPerfilLocal} alt="Foto atual" class="object-cover" />
{:else if avatarLocal}
<img src={avatarLocal} alt="Avatar atual" class="object-cover" />
{#if currentUser.data?.fotoPerfilUrl}
<img src={currentUser.data.fotoPerfilUrl} alt="Foto atual" class="object-cover" />
{:else if currentUser.data?.avatar}
<img src={currentUser.data.avatar} alt="Avatar atual" class="object-cover" />
{:else}
<div class="bg-primary text-primary-content flex items-center justify-center">
<span class="text-4xl font-bold"

8
packages/backend/convex/auth.ts
View File

@@ -40,7 +40,7 @@ export const createAuth = (
export const getCurrentUser = query({
args: {},
handler: async (ctx) => {
const authUser = await authComponent.safeGetAuthUser(ctx as any);
const authUser = await authComponent.safeGetAuthUser(ctx);
if (!authUser) {
return;
}
@@ -70,7 +70,7 @@ export const getCurrentUser = query({
});
export const getCurrentUserFunction = async (ctx: QueryCtx | MutationCtx) => {
const authUser = await authComponent.safeGetAuthUser(ctx as any);
const authUser = await authComponent.safeGetAuthUser(ctx);
if (!authUser) {
return;
}
@@ -89,7 +89,7 @@ export const createAuthUser = async (
ctx: MutationCtx,
args: { nome: string; email: string; password: string }
) => {
const { auth, headers } = await authComponent.getAuth(createAuth, ctx as any);
const { auth, headers } = await authComponent.getAuth(createAuth, ctx);
const result = await auth.api.signUpEmail({
headers,
@@ -107,7 +107,7 @@ export const updatePassword = async (
ctx: MutationCtx,
args: { newPassword: string; currentPassword: string }
) => {
const { auth, headers } = await authComponent.getAuth(createAuth, ctx as any);
const { auth, headers } = await authComponent.getAuth(createAuth, ctx);
await auth.api.changePassword({
headers,