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

refactor: enhance chat components and improve user interaction

Browse Source 
- Refactored Sidebar, ChatList, ChatWindow, and NewConversationModal components for better readability and maintainability.
- Updated user data handling to utilize the latest API responses, ensuring accurate display of user statuses and notifications.
- Improved modal interactions and user feedback mechanisms across chat components.
- Cleaned up unused code and optimized state management for a smoother user experience.
This commit is contained in:
killer-cf
2025-11-10 15:03:16 -03:00
parent 3cc774d7df
commit ed00739b30
6 changed files with 2249 additions and 2481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

282
apps/web/src/lib/components/chat/ChatList.svelte
View File

@@ -1,12 +1,11 @@
<script lang="ts"> <script lang="ts">
import { useQuery, useConvexClient } from "convex-svelte"; import { useQuery, useConvexClient } from 'convex-svelte';
import { api } from "@sgse-app/backend/convex/_generated/api"; import { api } from '@sgse-app/backend/convex/_generated/api';
import { abrirConversa } from "$lib/stores/chatStore"; import { abrirConversa } from '$lib/stores/chatStore';
import { formatDistanceToNow } from "date-fns"; import UserStatusBadge from './UserStatusBadge.svelte';
import { ptBR } from "date-fns/locale"; import UserAvatar from './UserAvatar.svelte';
import UserStatusBadge from "./UserStatusBadge.svelte"; import NewConversationModal from './NewConversationModal.svelte';
import UserAvatar from "./UserAvatar.svelte"; import type { Doc, Id } from '@sgse-app/backend/convex/_generated/dataModel';
import NewConversationModal from "./NewConversationModal.svelte";
const client = useConvexClient(); const client = useConvexClient();
@@ -19,138 +18,102 @@
// Buscar conversas (grupos e salas de reunião) // Buscar conversas (grupos e salas de reunião)
const conversas = useQuery(api.chat.listarConversas, {}); const conversas = useQuery(api.chat.listarConversas, {});
let searchQuery = $state(""); let searchQuery = $state('');
let activeTab = $state<"usuarios" | "conversas">("usuarios"); let activeTab = $state<'usuarios' | 'conversas'>('usuarios');
// Debug: monitorar carregamento de dados
$effect(() => {
console.log(
"📊 [ChatList] Usuários carregados:",
usuarios?.data?.length || 0,
);
console.log(
"👤 [ChatList] Meu perfil:",
meuPerfil?.data?.nome || "Carregando...",
);
console.log(
"🆔 [ChatList] Meu ID:",
meuPerfil?.data?._id || "Não encontrado",
);
if (usuarios?.data) {
const meuId = meuPerfil?.data?._id;
const meusDadosNaLista = usuarios.data.find((u: any) => u._id === meuId);
if (meusDadosNaLista) {
console.warn(
"⚠️ [ChatList] ATENÇÃO: Meu usuário está na lista do backend!",
meusDadosNaLista.nome,
);
}
}
});
const usuariosFiltrados = $derived.by(() => { const usuariosFiltrados = $derived.by(() => {
if (!usuarios?.data || !Array.isArray(usuarios.data)) return []; if (!usuarios?.data || !Array.isArray(usuarios.data)) return [];
// Se não temos o perfil ainda, retornar lista vazia para evitar mostrar usuários incorretos // Se não temos o perfil ainda, retornar lista vazia para evitar mostrar usuários incorretos
if (!meuPerfil?.data) { if (!meuPerfil?.data) {
console.log("⏳ [ChatList] Aguardando perfil do usuário..."); console.log('⏳ [ChatList] Aguardando perfil do usuário...');
return []; return [];
} }
const meuId = meuPerfil.data._id; const meuId = meuPerfil.data._id;
// Filtrar o próprio usuário da lista (filtro de segurança no frontend) // Filtrar o próprio usuário da lista (filtro de segurança no frontend)
let listaFiltrada = usuarios.data.filter((u: any) => u._id !== meuId); let listaFiltrada = usuarios.data.filter((u) => u._id !== meuId);
// Log se ainda estiver na lista após filtro (não deveria acontecer) // Log se ainda estiver na lista após filtro (não deveria acontecer)
const aindaNaLista = listaFiltrada.find((u: any) => u._id === meuId); const aindaNaLista = listaFiltrada.find((u) => u._id === meuId);
if (aindaNaLista) { if (aindaNaLista) {
console.error( console.error('❌ [ChatList] ERRO: Meu usuário ainda está na lista após filtro!');
"❌ [ChatList] ERRO: Meu usuário ainda está na lista após filtro!",
);
} }
// Aplicar busca por nome/email/matrícula // Aplicar busca por nome/email/matrícula
if (searchQuery.trim()) { if (searchQuery.trim()) {
const query = searchQuery.toLowerCase(); const query = searchQuery.toLowerCase();
listaFiltrada = listaFiltrada.filter( listaFiltrada = listaFiltrada.filter(
(u: any) => (u) =>
u.nome?.toLowerCase().includes(query) || u.nome?.toLowerCase().includes(query) ||
u.email?.toLowerCase().includes(query) || u.email?.toLowerCase().includes(query) ||
u.matricula?.toLowerCase().includes(query), u.matricula?.toLowerCase().includes(query)
); );
} }
// Ordenar: Online primeiro, depois por nome // Ordenar: Online primeiro, depois por nome
return listaFiltrada.sort((a: any, b: any) => { return listaFiltrada.sort((a, b) => {
const statusOrder = { const statusOrder = {
online: 0, online: 0,
ausente: 1, ausente: 1,
externo: 2, externo: 2,
em_reuniao: 3, em_reuniao: 3,
offline: 4, offline: 4
}; };
const statusA = const statusA = statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4; const statusB = statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
const statusB =
statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
if (statusA !== statusB) return statusA - statusB; if (statusA !== statusB) return statusA - statusB;
return a.nome.localeCompare(b.nome); return a.nome.localeCompare(b.nome);
}); });
}); });
function formatarTempo(timestamp: number | undefined): string {
if (!timestamp) return "";
try {
return formatDistanceToNow(new Date(timestamp), {
addSuffix: true,
locale: ptBR,
});
} catch {
return "";
}
}
let processando = $state(false); let processando = $state(false);
let showNewConversationModal = $state(false); let showNewConversationModal = $state(false);
async function handleClickUsuario(usuario: any) { async function handleClickUsuario(usuario: {
_id: Id<'usuarios'>;
nome: string;
email: string;
matricula: string | undefined;
avatar: string | undefined;
fotoPerfil: Id<'_storage'> | undefined;
fotoPerfilUrl: string | null;
statusPresenca: 'online' | 'offline' | 'ausente' | 'externo' | 'em_reuniao';
statusMensagem: string | undefined;
ultimaAtividade: number | undefined;
}) {
if (processando) { if (processando) {
console.log("⏳ Já está processando uma ação, aguarde..."); console.log('⏳ Já está processando uma ação, aguarde...');
return; return;
} }
try { try {
processando = true; processando = true;
console.log("🔄 Clicou no usuário:", usuario.nome, "ID:", usuario._id); console.log('🔄 Clicou no usuário:', usuario.nome, 'ID:', usuario._id);
// Criar ou buscar conversa individual com este usuário // Criar ou buscar conversa individual com este usuário
console.log("📞 Chamando mutation criarOuBuscarConversaIndividual..."); console.log('📞 Chamando mutation criarOuBuscarConversaIndividual...');
const conversaId = await client.mutation( const conversaId = await client.mutation(api.chat.criarOuBuscarConversaIndividual, {
api.chat.criarOuBuscarConversaIndividual, outroUsuarioId: usuario._id
{ });
outroUsuarioId: usuario._id,
},
);
console.log("✅ Conversa criada/encontrada. ID:", conversaId); console.log('✅ Conversa criada/encontrada. ID:', conversaId);
// Abrir a conversa // Abrir a conversa
console.log("📂 Abrindo conversa..."); console.log('📂 Abrindo conversa...');
abrirConversa(conversaId as any); abrirConversa(conversaId);
console.log("✅ Conversa aberta com sucesso!"); console.log('✅ Conversa aberta com sucesso!');
} catch (error) { } catch (error) {
console.error("❌ Erro ao abrir conversa:", error); console.error('❌ Erro ao abrir conversa:', error);
console.error("Detalhes do erro:", { console.error('Detalhes do erro:', {
message: error instanceof Error ? error.message : String(error), message: error instanceof Error ? error.message : String(error),
stack: error instanceof Error ? error.stack : undefined, stack: error instanceof Error ? error.stack : undefined,
usuario: usuario, usuario: usuario
}); });
alert( alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`,
);
} finally { } finally {
processando = false; processando = false;
} }
@@ -158,51 +121,47 @@
function getStatusLabel(status: string | undefined): string { function getStatusLabel(status: string | undefined): string {
const labels: Record<string, string> = { const labels: Record<string, string> = {
online: "Online", online: 'Online',
offline: "Offline", offline: 'Offline',
ausente: "Ausente", ausente: 'Ausente',
externo: "Externo", externo: 'Externo',
em_reuniao: "Em Reunião", em_reuniao: 'Em Reunião'
}; };
return labels[status || "offline"] || "Offline"; return labels[status || 'offline'] || 'Offline';
} }
// Filtrar conversas por tipo e busca // Filtrar conversas por tipo e busca
const conversasFiltradas = $derived(() => { const conversasFiltradas = $derived(() => {
if (!conversas?.data) return []; if (!conversas?.data) return [];
let lista = conversas.data.filter( let lista = conversas.data.filter((c) => c.tipo === 'grupo' || c.tipo === 'sala_reuniao');
(c: any) => c.tipo === "grupo" || c.tipo === "sala_reuniao",
);
// Aplicar busca // Aplicar busca
if (searchQuery.trim()) { if (searchQuery.trim()) {
const query = searchQuery.toLowerCase(); const query = searchQuery.toLowerCase();
lista = lista.filter((c: any) => c.nome?.toLowerCase().includes(query)); lista = lista.filter((c) => c.nome?.toLowerCase().includes(query));
} }
return lista; return lista;
}); });
function handleClickConversa(conversa: any) { function handleClickConversa(conversa: Doc<'conversas'>) {
if (processando) return; if (processando) return;
try { try {
processando = true; processando = true;
abrirConversa(conversa._id); abrirConversa(conversa._id);
} catch (error) { } catch (error) {
console.error("Erro ao abrir conversa:", error); console.error('Erro ao abrir conversa:', error);
alert( alert(`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`);
`Erro ao abrir conversa: ${error instanceof Error ? error.message : String(error)}`,
);
} finally { } finally {
processando = false; processando = false;
} }
} }
</script> </script>
<div class="flex flex-col h-full"> <div class="flex h-full flex-col">
<!-- Search bar --> <!-- Search bar -->
<div class="p-4 border-b border-base-300"> <div class="border-base-300 border-b p-4">
<div class="relative"> <div class="relative">
<input <input
type="text" type="text"
@@ -216,7 +175,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50" class="text-base-content/50 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@@ -228,27 +187,27 @@
</div> </div>
<!-- Tabs e Título --> <!-- Tabs e Título -->
<div class="border-b border-base-300 bg-base-200"> <div class="border-base-300 bg-base-200 border-b">
<!-- Tabs --> <!-- Tabs -->
<div class="tabs tabs-boxed p-2"> <div class="tabs tabs-boxed p-2">
<button <button
type="button" type="button"
class={`tab flex-1 ${activeTab === "usuarios" ? "tab-active" : ""}`} class={`tab flex-1 ${activeTab === 'usuarios' ? 'tab-active' : ''}`}
onclick={() => (activeTab = "usuarios")} onclick={() => (activeTab = 'usuarios')}
> >
👥 Usuários ({usuariosFiltrados.length}) 👥 Usuários ({usuariosFiltrados.length})
</button> </button>
<button <button
type="button" type="button"
class={`tab flex-1 ${activeTab === "conversas" ? "tab-active" : ""}`} class={`tab flex-1 ${activeTab === 'conversas' ? 'tab-active' : ''}`}
onclick={() => (activeTab = "conversas")} onclick={() => (activeTab = 'conversas')}
> >
💬 Conversas ({conversasFiltradas().length}) 💬 Conversas ({conversasFiltradas().length})
</button> </button>
</div> </div>
<!-- Botão Nova Conversa --> <!-- Botão Nova Conversa -->
<div class="px-4 pb-2 flex justify-end"> <div class="flex justify-end px-4 pb-2">
<button <button
type="button" type="button"
class="btn btn-primary btn-sm" class="btn btn-primary btn-sm"
@@ -262,13 +221,9 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="2" stroke-width="2"
stroke="currentColor" stroke="currentColor"
class="w-4 h-4 mr-1" class="mr-1 h-4 w-4"
> >
<path <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
stroke-linecap="round"
stroke-linejoin="round"
d="M12 4.5v15m7.5-7.5h-15"
/>
</svg> </svg>
Nova Conversa Nova Conversa
</button> </button>
@@ -277,21 +232,21 @@
<!-- Lista de conteúdo --> <!-- Lista de conteúdo -->
<div class="flex-1 overflow-y-auto"> <div class="flex-1 overflow-y-auto">
{#if activeTab === "usuarios"} {#if activeTab === 'usuarios'}
<!-- Lista de usuários --> <!-- Lista de usuários -->
{#if usuarios?.data && usuariosFiltrados.length > 0} {#if usuarios?.data && usuariosFiltrados.length > 0}
{#each usuariosFiltrados as usuario (usuario._id)} {#each usuariosFiltrados as usuario (usuario._id)}
<button <button
type="button" type="button"
class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando class="hover:bg-base-200 border-base-300 flex w-full items-center gap-3 border-b px-4 py-3 text-left transition-colors {processando
? 'opacity-50 cursor-wait' ? 'cursor-wait opacity-50'
: 'cursor-pointer'}" : 'cursor-pointer'}"
onclick={() => handleClickUsuario(usuario)} onclick={() => handleClickUsuario(usuario)}
disabled={processando} disabled={processando}
> >
<!-- Ícone de mensagem --> <!-- Ícone de mensagem -->
<div <div
class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110" class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-all duration-300 hover:scale-110"
style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border: 1px solid rgba(102, 126, 234, 0.2);" style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%); border: 1px solid rgba(102, 126, 234, 0.2);"
> >
<svg <svg
@@ -302,11 +257,9 @@
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
class="w-5 h-5 text-primary" class="text-primary h-5 w-5"
> >
<path <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
/>
<path d="M9 10h.01M15 10h.01" /> <path d="M9 10h.01M15 10h.01" />
</svg> </svg>
</div> </div>
@@ -320,23 +273,19 @@
size="md" size="md"
/> />
<!-- Status badge --> <!-- Status badge -->
<div class="absolute bottom-0 right-0"> <div class="absolute right-0 bottom-0">
<UserStatusBadge <UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
status={usuario.statusPresenca || "offline"}
size="sm"
/>
</div> </div>
</div> </div>
<!-- Conteúdo --> <!-- Conteúdo -->
<div class="flex-1 min-w-0"> <div class="min-w-0 flex-1">
<div class="flex items-center justify-between mb-1"> <div class="mb-1 flex items-center justify-between">
<p class="font-semibold text-base-content truncate"> <p class="text-base-content truncate font-semibold">
{usuario.nome} {usuario.nome}
</p> </p>
<span <span
class="text-xs px-2 py-0.5 rounded-full {usuario.statusPresenca === class="rounded-full px-2 py-0.5 text-xs {usuario.statusPresenca === 'online'
'online'
? 'bg-success/20 text-success' ? 'bg-success/20 text-success'
: usuario.statusPresenca === 'ausente' : usuario.statusPresenca === 'ausente'
? 'bg-warning/20 text-warning' ? 'bg-warning/20 text-warning'
@@ -348,7 +297,7 @@
</span> </span>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<p class="text-sm text-base-content/70 truncate"> <p class="text-base-content/70 truncate text-sm">
{usuario.statusMensagem || usuario.email} {usuario.statusMensagem || usuario.email}
</p> </p>
</div> </div>
@@ -357,21 +306,19 @@
{/each} {/each}
{:else if !usuarios?.data} {:else if !usuarios?.data}
<!-- Loading --> <!-- Loading -->
<div class="flex items-center justify-center h-full"> <div class="flex h-full items-center justify-center">
<span class="loading loading-spinner loading-lg"></span> <span class="loading loading-spinner loading-lg"></span>
</div> </div>
{:else} {:else}
<!-- Nenhum usuário encontrado --> <!-- Nenhum usuário encontrado -->
<div <div class="flex h-full flex-col items-center justify-center px-4 text-center">
class="flex flex-col items-center justify-center h-full text-center px-4"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="w-16 h-16 text-base-content/30 mb-4" class="text-base-content/30 mb-4 h-16 w-16"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@@ -388,27 +335,27 @@
{#each conversasFiltradas() as conversa (conversa._id)} {#each conversasFiltradas() as conversa (conversa._id)}
<button <button
type="button" type="button"
class="w-full text-left px-4 py-3 hover:bg-base-200 border-b border-base-300 transition-colors flex items-center gap-3 {processando class="hover:bg-base-200 border-base-300 flex w-full items-center gap-3 border-b px-4 py-3 text-left transition-colors {processando
? 'opacity-50 cursor-wait' ? 'cursor-wait opacity-50'
: 'cursor-pointer'}" : 'cursor-pointer'}"
onclick={() => handleClickConversa(conversa)} onclick={() => handleClickConversa(conversa)}
disabled={processando} disabled={processando}
> >
<!-- Ícone de grupo/sala --> <!-- Ícone de grupo/sala -->
<div <div
class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center transition-all duration-300 hover:scale-110 {conversa.tipo === class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-all duration-300 hover:scale-110 {conversa.tipo ===
'sala_reuniao' 'sala_reuniao'
? 'bg-linear-to-br from-blue-500/20 to-purple-500/20 border border-blue-300/30' ? 'border border-blue-300/30 bg-linear-to-br from-blue-500/20 to-purple-500/20'
: 'bg-linear-to-br from-primary/20 to-secondary/20 border border-primary/30'}" : 'from-primary/20 to-secondary/20 border-primary/30 border bg-linear-to-br'}"
> >
{#if conversa.tipo === "sala_reuniao"} {#if conversa.tipo === 'sala_reuniao'}
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="2" stroke-width="2"
stroke="currentColor" stroke="currentColor"
class="w-5 h-5 text-blue-500" class="h-5 w-5 text-blue-500"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@@ -423,7 +370,7 @@
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="2" stroke-width="2"
stroke="currentColor" stroke="currentColor"
class="w-5 h-5 text-primary" class="text-primary h-5 w-5"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@@ -435,37 +382,30 @@
</div> </div>
<!-- Conteúdo --> <!-- Conteúdo -->
<div class="flex-1 min-w-0"> <div class="min-w-0 flex-1">
<div class="flex items-center justify-between mb-1"> <div class="mb-1 flex items-center justify-between">
<p class="font-semibold text-base-content truncate"> <p class="text-base-content truncate font-semibold">
{conversa.nome || {conversa.nome ||
(conversa.tipo === "sala_reuniao" (conversa.tipo === 'sala_reuniao' ? 'Sala sem nome' : 'Grupo sem nome')}
? "Sala sem nome"
: "Grupo sem nome")}
</p> </p>
{#if conversa.naoLidas > 0} {#if conversa.naoLidas > 0}
<span class="badge badge-primary badge-sm" <span class="badge badge-primary badge-sm">{conversa.naoLidas}</span>
>{conversa.naoLidas}</span
>
{/if} {/if}
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span <span
class="text-xs px-2 py-0.5 rounded-full {conversa.tipo === class="rounded-full px-2 py-0.5 text-xs {conversa.tipo === 'sala_reuniao'
'sala_reuniao'
? 'bg-blue-500/20 text-blue-500' ? 'bg-blue-500/20 text-blue-500'
: 'bg-primary/20 text-primary'}" : 'bg-primary/20 text-primary'}"
> >
{conversa.tipo === "sala_reuniao" {conversa.tipo === 'sala_reuniao' ? '👑 Sala de Reunião' : '👥 Grupo'}
? "👑 Sala de Reunião"
: "👥 Grupo"}
</span> </span>
{#if conversa.participantesInfo} {#if conversa.participantesInfo}
<span class="text-xs text-base-content/50"> <span class="text-base-content/50 text-xs">
{conversa.participantesInfo.length} participante{conversa {conversa.participantesInfo.length} participante{conversa.participantesInfo
.participantesInfo.length !== 1 .length !== 1
? "s" ? 's'
: ""} : ''}
</span> </span>
{/if} {/if}
</div> </div>
@@ -474,21 +414,19 @@
{/each} {/each}
{:else if !conversas?.data} {:else if !conversas?.data}
<!-- Loading --> <!-- Loading -->
<div class="flex items-center justify-center h-full"> <div class="flex h-full items-center justify-center">
<span class="loading loading-spinner loading-lg"></span> <span class="loading loading-spinner loading-lg"></span>
</div> </div>
{:else} {:else}
<!-- Nenhuma conversa encontrada --> <!-- Nenhuma conversa encontrada -->
<div <div class="flex h-full flex-col items-center justify-center px-4 text-center">
class="flex flex-col items-center justify-center h-full text-center px-4"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke-width="1.5" stroke-width="1.5"
stroke="currentColor" stroke="currentColor"
class="w-16 h-16 text-base-content/30 mb-4" class="text-base-content/30 mb-4 h-16 w-16"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@@ -496,12 +434,8 @@
d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155" d="M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 0 1-.825-.242m9.345-8.334a2.126 2.126 0 0 0-.476-.095 48.64 48.64 0 0 0-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0 0 11.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155"
/> />
</svg> </svg>
<p class="text-base-content/70 font-medium mb-2"> <p class="text-base-content/70 mb-2 font-medium">Nenhuma conversa encontrada</p>
Nenhuma conversa encontrada <p class="text-base-content/50 text-sm">Crie um grupo ou sala de reunião para começar</p>
</p>
<p class="text-sm text-base-content/50">
Crie um grupo ou sala de reunião para começar
</p>
</div> </div>
{/if} {/if}
{/if} {/if}

306
apps/web/src/lib/components/chat/ChatWindow.svelte
View File

@@ -1,25 +1,16 @@
<script lang="ts"> <script lang="ts">
import { useQuery, useConvexClient } from "convex-svelte"; import { useQuery, useConvexClient } from 'convex-svelte';
import { api } from "@sgse-app/backend/convex/_generated/api"; import { api } from '@sgse-app/backend/convex/_generated/api';
import { voltarParaLista } from "$lib/stores/chatStore"; import { voltarParaLista } from '$lib/stores/chatStore';
import type { Id } from "@sgse-app/backend/convex/_generated/dataModel"; import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
import MessageList from "./MessageList.svelte"; import MessageList from './MessageList.svelte';
import MessageInput from "./MessageInput.svelte"; import MessageInput from './MessageInput.svelte';
import UserStatusBadge from "./UserStatusBadge.svelte"; import UserStatusBadge from './UserStatusBadge.svelte';
import UserAvatar from "./UserAvatar.svelte"; import UserAvatar from './UserAvatar.svelte';
import ScheduleMessageModal from "./ScheduleMessageModal.svelte"; import ScheduleMessageModal from './ScheduleMessageModal.svelte';
import SalaReuniaoManager from "./SalaReuniaoManager.svelte"; import SalaReuniaoManager from './SalaReuniaoManager.svelte';
import { getAvatarUrl } from "$lib/utils/avatarGenerator"; import { getAvatarUrl } from '$lib/utils/avatarGenerator';
import { import { Bell, X, ArrowLeft, LogOut, MoreVertical, Users, Clock, XCircle } from 'lucide-svelte';
Bell,
X,
ArrowLeft,
LogOut,
MoreVertical,
Users,
Clock,
XCircle,
} from "lucide-svelte";
interface Props { interface Props {
conversaId: string; conversaId: string;
@@ -38,67 +29,54 @@
const conversas = useQuery(api.chat.listarConversas, {}); const conversas = useQuery(api.chat.listarConversas, {});
const isAdmin = useQuery(api.chat.verificarSeEhAdmin, { const isAdmin = useQuery(api.chat.verificarSeEhAdmin, {
conversaId: conversaId as Id<"conversas">, conversaId: conversaId as Id<'conversas'>
}); });
const conversa = $derived(() => { const conversa = $derived(() => {
console.log("🔍 [ChatWindow] Buscando conversa ID:", conversaId); console.log('🔍 [ChatWindow] Buscando conversa ID:', conversaId);
console.log("📋 [ChatWindow] Conversas disponíveis:", conversas?.data); console.log('📋 [ChatWindow] Conversas disponíveis:', conversas?.data);
if (!conversas?.data || !Array.isArray(conversas.data)) { if (!conversas?.data || !Array.isArray(conversas.data)) {
console.log( console.log('⚠️ [ChatWindow] conversas.data não é um array ou está vazio');
"⚠️ [ChatWindow] conversas.data não é um array ou está vazio",
);
return null; return null;
} }
const encontrada = conversas.data.find( const encontrada = conversas.data.find((c: { _id: string }) => c._id === conversaId);
(c: { _id: string }) => c._id === conversaId, console.log('✅ [ChatWindow] Conversa encontrada:', encontrada);
);
console.log("✅ [ChatWindow] Conversa encontrada:", encontrada);
return encontrada; return encontrada;
}); });
function getNomeConversa(): string { function getNomeConversa(): string {
const c = conversa(); const c = conversa();
if (!c) return "Carregando..."; if (!c) return 'Carregando...';
if (c.tipo === "grupo" || c.tipo === "sala_reuniao") { if (c.tipo === 'grupo' || c.tipo === 'sala_reuniao') {
return ( return c.nome || (c.tipo === 'sala_reuniao' ? 'Sala sem nome' : 'Grupo sem nome');
c.nome ||
(c.tipo === "sala_reuniao" ? "Sala sem nome" : "Grupo sem nome")
);
} }
return c.outroUsuario?.nome || "Usuário"; return c.outroUsuario?.nome || 'Usuário';
} }
function getAvatarConversa(): string { function getAvatarConversa(): string {
const c = conversa(); const c = conversa();
if (!c) return "💬"; if (!c) return '💬';
if (c.tipo === "grupo") { if (c.tipo === 'grupo') {
return c.avatar || "👥"; return c.avatar || '👥';
} }
if (c.outroUsuario?.avatar) { if (c.outroUsuario?.avatar) {
return c.outroUsuario.avatar; return c.outroUsuario.avatar;
} }
return "👤"; return '👤';
} }
function getStatusConversa(): function getStatusConversa(): 'online' | 'offline' | 'ausente' | 'externo' | 'em_reuniao' | null {
| "online"
| "offline"
| "ausente"
| "externo"
| "em_reuniao"
| null {
const c = conversa(); const c = conversa();
if (c && c.tipo === "individual" && c.outroUsuario) { if (c && c.tipo === 'individual' && c.outroUsuario) {
return ( return (
(c.outroUsuario.statusPresenca as (c.outroUsuario.statusPresenca as
| "online" | 'online'
| "offline" | 'offline'
| "ausente" | 'ausente'
| "externo" | 'externo'
| "em_reuniao") || "offline" | 'em_reuniao') || 'offline'
); );
} }
return null; return null;
@@ -106,7 +84,7 @@
function getStatusMensagem(): string | null { function getStatusMensagem(): string | null {
const c = conversa(); const c = conversa();
if (c && c.tipo === "individual" && c.outroUsuario) { if (c && c.tipo === 'individual' && c.outroUsuario) {
return c.outroUsuario.statusMensagem || null; return c.outroUsuario.statusMensagem || null;
} }
return null; return null;
@@ -114,145 +92,139 @@
async function handleSairGrupoOuSala() { async function handleSairGrupoOuSala() {
const c = conversa(); const c = conversa();
if (!c || (c.tipo !== "grupo" && c.tipo !== "sala_reuniao")) return; if (!c || (c.tipo !== 'grupo' && c.tipo !== 'sala_reuniao')) return;
const tipoTexto = c.tipo === "sala_reuniao" ? "sala de reunião" : "grupo"; const tipoTexto = c.tipo === 'sala_reuniao' ? 'sala de reunião' : 'grupo';
if ( if (!confirm(`Tem certeza que deseja sair da ${tipoTexto} "${c.nome || 'Sem nome'}"?`)) {
!confirm(
`Tem certeza que deseja sair da ${tipoTexto} "${c.nome || "Sem nome"}"?`,
)
) {
return; return;
} }
try { try {
const resultado = await client.mutation(api.chat.sairGrupoOuSala, { const resultado = await client.mutation(api.chat.sairGrupoOuSala, {
conversaId: conversaId as Id<"conversas">, conversaId: conversaId as Id<'conversas'>
}); });
if (resultado.sucesso) { if (resultado.sucesso) {
voltarParaLista(); voltarParaLista();
} else { } else {
alert(resultado.erro || "Erro ao sair da conversa"); alert(resultado.erro || 'Erro ao sair da conversa');
} }
} catch (error) { } catch (error) {
console.error("Erro ao sair da conversa:", error); console.error('Erro ao sair da conversa:', error);
const errorMessage = const errorMessage = error instanceof Error ? error.message : 'Erro ao sair da conversa';
error instanceof Error ? error.message : "Erro ao sair da conversa";
alert(errorMessage); alert(errorMessage);
} }
} }
function handleDocumentClick() {
if (showAdminMenu) showAdminMenu = false;
}
</script> </script>
<div class="flex flex-col h-full" onclick={() => (showAdminMenu = false)}> <svelte:window onclick={handleDocumentClick} />
<div class="flex h-full flex-col">
<!-- Header --> <!-- Header -->
<div <div class="border-base-300 bg-base-200 flex items-center gap-3 border-b px-4 py-3">
class="flex items-center gap-3 px-4 py-3 border-b border-base-300 bg-base-200"
onclick={(e) => e.stopPropagation()}
>
<!-- Botão Voltar --> <!-- Botão Voltar -->
<button <button
type="button" type="button"
class="btn btn-ghost btn-sm btn-circle hover:bg-primary/20 transition-all duration-200 hover:scale-110" class="btn btn-circle hover:bg-primary/20 transition-all duration-200 hover:scale-110"
onclick={voltarParaLista} onclick={voltarParaLista}
aria-label="Voltar" aria-label="Voltar"
title="Voltar para lista de conversas" title="Voltar para lista de conversas"
> >
<ArrowLeft class="w-6 h-6 text-primary" strokeWidth={2.5} /> <ArrowLeft class="text-primary h-6 w-6" />
</button> </button>
<!-- Avatar e Info --> <!-- Avatar e Info -->
<div class="relative shrink-0"> <div class="relative shrink-0">
{#if conversa() && conversa()?.tipo === "individual" && conversa()?.outroUsuario} {#if conversa() && conversa()?.tipo === 'individual' && conversa()?.outroUsuario}
<UserAvatar <UserAvatar
avatar={conversa()?.outroUsuario?.avatar} avatar={conversa()?.outroUsuario?.avatar}
fotoPerfilUrl={conversa()?.outroUsuario?.fotoPerfilUrl} fotoPerfilUrl={conversa()?.outroUsuario?.fotoPerfilUrl}
nome={conversa()?.outroUsuario?.nome || "Usuário"} nome={conversa()?.outroUsuario?.nome || 'Usuário'}
size="md" size="md"
/> />
{:else} {:else}
<div <div class="bg-primary/20 flex h-10 w-10 items-center justify-center rounded-full text-xl">
class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-xl"
>
{getAvatarConversa()} {getAvatarConversa()}
</div> </div>
{/if} {/if}
{#if getStatusConversa()} {#if getStatusConversa()}
<div class="absolute bottom-0 right-0"> <div class="absolute right-0 bottom-0">
<UserStatusBadge status={getStatusConversa()} size="sm" /> <UserStatusBadge status={getStatusConversa()} size="sm" />
</div> </div>
{/if} {/if}
</div> </div>
<div class="flex-1 min-w-0"> <div class="min-w-0 flex-1">
<p class="font-semibold text-base-content truncate"> <p class="text-base-content truncate font-semibold">
{getNomeConversa()} {getNomeConversa()}
</p> </p>
{#if getStatusMensagem()} {#if getStatusMensagem()}
<p class="text-xs text-base-content/60 truncate"> <p class="text-base-content/60 truncate text-xs">
{getStatusMensagem()} {getStatusMensagem()}
</p> </p>
{:else if getStatusConversa()} {:else if getStatusConversa()}
<p class="text-xs text-base-content/60"> <p class="text-base-content/60 text-xs">
{getStatusConversa() === "online" {getStatusConversa() === 'online'
? "Online" ? 'Online'
: getStatusConversa() === "ausente" : getStatusConversa() === 'ausente'
? "Ausente" ? 'Ausente'
: getStatusConversa() === "em_reuniao" : getStatusConversa() === 'em_reuniao'
? "Em reunião" ? 'Em reunião'
: getStatusConversa() === "externo" : getStatusConversa() === 'externo'
? "Externo" ? 'Externo'
: "Offline"} : 'Offline'}
</p> </p>
{:else if conversa() && (conversa()?.tipo === "grupo" || conversa()?.tipo === "sala_reuniao")} {:else if conversa() && (conversa()?.tipo === 'grupo' || conversa()?.tipo === 'sala_reuniao')}
<div class="flex items-center gap-2 mt-1"> <div class="mt-1 flex items-center gap-2">
<p class="text-xs text-base-content/60"> <p class="text-base-content/60 text-xs">
{conversa()?.participantesInfo?.length || 0} {conversa()?.participantesInfo?.length || 0}
{conversa()?.participantesInfo?.length === 1 {conversa()?.participantesInfo?.length === 1 ? 'participante' : 'participantes'}
? "participante"
: "participantes"}
</p> </p>
{#if conversa()?.participantesInfo && conversa()?.participantesInfo.length > 0} {#if conversa()?.participantesInfo && conversa()?.participantesInfo.length > 0}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="flex -space-x-2"> <div class="flex -space-x-2">
{#each conversa()?.participantesInfo.slice(0, 5) as participante (participante._id)} {#each conversa()?.participantesInfo.slice(0, 5) as participante (participante._id)}
<div <div
class="relative w-5 h-5 rounded-full border-2 border-base-200 overflow-hidden bg-base-200" class="border-base-200 bg-base-200 relative h-5 w-5 overflow-hidden rounded-full border-2"
title={participante.nome} title={participante.nome}
> >
{#if participante.fotoPerfilUrl} {#if participante.fotoPerfilUrl}
<img <img
src={participante.fotoPerfilUrl} src={participante.fotoPerfilUrl}
alt={participante.nome} alt={participante.nome}
class="w-full h-full object-cover" class="h-full w-full object-cover"
/> />
{:else if participante.avatar} {:else if participante.avatar}
<img <img
src={getAvatarUrl(participante.avatar)} src={getAvatarUrl(participante.avatar)}
alt={participante.nome} alt={participante.nome}
class="w-full h-full object-cover" class="h-full w-full object-cover"
/> />
{:else} {:else}
<img <img
src={getAvatarUrl(participante.nome)} src={getAvatarUrl(participante.nome)}
alt={participante.nome} alt={participante.nome}
class="w-full h-full object-cover" class="h-full w-full object-cover"
/> />
{/if} {/if}
</div> </div>
{/each} {/each}
{#if conversa()?.participantesInfo.length > 5} {#if conversa()?.participantesInfo.length > 5}
<div <div
class="w-5 h-5 rounded-full border-2 border-base-200 bg-base-300 flex items-center justify-center text-[8px] font-semibold text-base-content/70" class="border-base-200 bg-base-300 text-base-content/70 flex h-5 w-5 items-center justify-center rounded-full border-2 text-[8px] font-semibold"
title={`+${conversa()?.participantesInfo.length - 5} mais`} title={`+${conversa()?.participantesInfo.length - 5} mais`}
> >
+{conversa()?.participantesInfo.length - 5} +{conversa()?.participantesInfo.length - 5}
</div> </div>
{/if} {/if}
</div> </div>
{#if conversa()?.tipo === "sala_reuniao" && isAdmin?.data} {#if conversa()?.tipo === 'sala_reuniao' && isAdmin?.data}
<span <span
class="text-[10px] text-primary font-semibold ml-1 whitespace-nowrap" class="text-primary ml-1 text-[10px] font-semibold whitespace-nowrap"
title="Você é administrador desta sala">• Admin</span title="Você é administrador desta sala">• Admin</span
> >
{/if} {/if}
@@ -265,10 +237,10 @@
<!-- Botões de ação --> <!-- Botões de ação -->
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<!-- Botão Sair (apenas para grupos e salas de reunião) --> <!-- Botão Sair (apenas para grupos e salas de reunião) -->
{#if conversa() && (conversa()?.tipo === "grupo" || conversa()?.tipo === "sala_reuniao")} {#if conversa() && (conversa()?.tipo === 'grupo' || conversa()?.tipo === 'sala_reuniao')}
<button <button
type="button" type="button"
class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden" class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);" style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2);"
onclick={(e) => { onclick={(e) => {
e.stopPropagation(); e.stopPropagation();
@@ -278,21 +250,21 @@
title="Sair da conversa" title="Sair da conversa"
> >
<div <div
class="absolute inset-0 bg-red-500/0 group-hover:bg-red-500/10 transition-colors duration-300" class="absolute inset-0 bg-red-500/0 transition-colors duration-300 group-hover:bg-red-500/10"
></div> ></div>
<LogOut <LogOut
class="w-5 h-5 text-red-500 relative z-10 group-hover:scale-110 transition-transform" class="relative z-10 h-5 w-5 text-red-500 transition-transform group-hover:scale-110"
strokeWidth={2} strokeWidth={2}
/> />
</button> </button>
{/if} {/if}
<!-- Botão Menu Administrativo (apenas para salas de reunião e apenas para admins) --> <!-- Botão Menu Administrativo (apenas para salas de reunião e apenas para admins) -->
{#if conversa()?.tipo === "sala_reuniao" && isAdmin?.data} {#if conversa()?.tipo === 'sala_reuniao' && isAdmin?.data}
<div class="relative admin-menu-container"> <div class="admin-menu-container relative">
<button <button
type="button" type="button"
class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden" class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2);" style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2);"
onclick={(e) => { onclick={(e) => {
e.stopPropagation(); e.stopPropagation();
@@ -302,84 +274,78 @@
title="Recursos administrativos" title="Recursos administrativos"
> >
<div <div
class="absolute inset-0 bg-blue-500/0 group-hover:bg-blue-500/10 transition-colors duration-300" class="absolute inset-0 bg-blue-500/0 transition-colors duration-300 group-hover:bg-blue-500/10"
></div> ></div>
<MoreVertical <MoreVertical
class="w-5 h-5 text-blue-500 relative z-10 group-hover:scale-110 transition-transform" class="relative z-10 h-5 w-5 text-blue-500 transition-transform group-hover:scale-110"
strokeWidth={2} strokeWidth={2}
/> />
</button> </button>
{#if showAdminMenu} {#if showAdminMenu}
<ul <ul
class="absolute right-0 top-full mt-2 bg-base-100 rounded-lg shadow-xl border border-base-300 w-56 z-[100] overflow-hidden" class="bg-base-100 border-base-300 absolute top-full right-0 z-[100] mt-2 w-56 overflow-hidden rounded-lg border shadow-xl"
onclick={(e) => e.stopPropagation()}
> >
<li> <li>
<button <button
type="button" type="button"
class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors flex items-center gap-2" class="hover:bg-base-200 flex w-full items-center gap-2 px-4 py-3 text-left transition-colors"
onclick={(e) => { onclick={(e) => {
e.stopPropagation(); e.stopPropagation();
showSalaManager = true; showSalaManager = true;
showAdminMenu = false; showAdminMenu = false;
}} }}
> >
<Users class="w-4 h-4" strokeWidth={2} /> <Users class="h-4 w-4" strokeWidth={2} />
Gerenciar Participantes Gerenciar Participantes
</button> </button>
</li> </li>
<li> <li>
<button <button
type="button" type="button"
class="w-full text-left px-4 py-3 hover:bg-base-200 transition-colors flex items-center gap-2" class="hover:bg-base-200 flex w-full items-center gap-2 px-4 py-3 text-left transition-colors"
onclick={(e) => { onclick={(e) => {
e.stopPropagation(); e.stopPropagation();
showNotificacaoModal = true; showNotificacaoModal = true;
showAdminMenu = false; showAdminMenu = false;
}} }}
> >
<Bell class="w-4 h-4" strokeWidth={2} /> <Bell class="h-4 w-4" strokeWidth={2} />
Enviar Notificação Enviar Notificação
</button> </button>
</li> </li>
<li> <li>
<button <button
type="button" type="button"
class="w-full text-left px-4 py-3 hover:bg-error/10 transition-colors flex items-center gap-2 text-error" class="hover:bg-error/10 text-error flex w-full items-center gap-2 px-4 py-3 text-left transition-colors"
onclick={(e) => { onclick={(e) => {
e.stopPropagation(); e.stopPropagation();
(async () => { (async () => {
if ( if (
!confirm( !confirm(
"Tem certeza que deseja encerrar esta reunião? Todos os participantes serão removidos.", 'Tem certeza que deseja encerrar esta reunião? Todos os participantes serão removidos.'
) )
) )
return; return;
try { try {
const resultado = await client.mutation( const resultado = await client.mutation(api.chat.encerrarReuniao, {
api.chat.encerrarReuniao, conversaId: conversaId as Id<'conversas'>
{ });
conversaId: conversaId as Id<"conversas">,
},
);
if (resultado.sucesso) { if (resultado.sucesso) {
alert("Reunião encerrada com sucesso!"); alert('Reunião encerrada com sucesso!');
voltarParaLista(); voltarParaLista();
} else { } else {
alert(resultado.erro || "Erro ao encerrar reunião"); alert(resultado.erro || 'Erro ao encerrar reunião');
} }
} catch (error) { } catch (error) {
const errorMessage = const errorMessage =
error instanceof Error error instanceof Error ? error.message : 'Erro ao encerrar reunião';
? error.message
: "Erro ao encerrar reunião";
alert(errorMessage); alert(errorMessage);
} }
showAdminMenu = false; showAdminMenu = false;
})(); })();
}} }}
> >
<XCircle class="w-4 h-4" strokeWidth={2} /> <XCircle class="h-4 w-4" strokeWidth={2} />
Encerrar Reunião Encerrar Reunião
</button> </button>
</li> </li>
@@ -391,17 +357,17 @@
<!-- Botão Agendar MODERNO --> <!-- Botão Agendar MODERNO -->
<button <button
type="button" type="button"
class="flex items-center justify-center w-9 h-9 rounded-lg transition-all duration-300 group relative overflow-hidden" class="group relative flex h-9 w-9 items-center justify-center overflow-hidden rounded-lg transition-all duration-300"
style="background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2);" style="background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2);"
onclick={() => (showScheduleModal = true)} onclick={() => (showScheduleModal = true)}
aria-label="Agendar mensagem" aria-label="Agendar mensagem"
title="Agendar mensagem" title="Agendar mensagem"
> >
<div <div
class="absolute inset-0 bg-purple-500/0 group-hover:bg-purple-500/10 transition-colors duration-300" class="absolute inset-0 bg-purple-500/0 transition-colors duration-300 group-hover:bg-purple-500/10"
></div> ></div>
<Clock <Clock
class="w-5 h-5 text-purple-500 relative z-10 group-hover:scale-110 transition-transform" class="relative z-10 h-5 w-5 text-purple-500 transition-transform group-hover:scale-110"
strokeWidth={2} strokeWidth={2}
/> />
</button> </button>
@@ -409,46 +375,43 @@
</div> </div>
<!-- Mensagens --> <!-- Mensagens -->
<div class="flex-1 overflow-hidden min-h-0"> <div class="min-h-0 flex-1 overflow-hidden">
<MessageList conversaId={conversaId as Id<"conversas">} /> <MessageList conversaId={conversaId as Id<'conversas'>} />
</div> </div>
<!-- Input --> <!-- Input -->
<div class="border-t border-base-300 shrink-0"> <div class="border-base-300 shrink-0 border-t">
<MessageInput conversaId={conversaId as Id<"conversas">} /> <MessageInput conversaId={conversaId as Id<'conversas'>} />
</div> </div>
</div> </div>
<!-- Modal de Agendamento --> <!-- Modal de Agendamento -->
{#if showScheduleModal} {#if showScheduleModal}
<ScheduleMessageModal <ScheduleMessageModal
conversaId={conversaId as Id<"conversas">} conversaId={conversaId as Id<'conversas'>}
onClose={() => (showScheduleModal = false)} onClose={() => (showScheduleModal = false)}
/> />
{/if} {/if}
<!-- Modal de Gerenciamento de Sala --> <!-- Modal de Gerenciamento de Sala -->
{#if showSalaManager && conversa()?.tipo === "sala_reuniao"} {#if showSalaManager && conversa()?.tipo === 'sala_reuniao'}
<SalaReuniaoManager <SalaReuniaoManager
conversaId={conversaId as Id<"conversas">} conversaId={conversaId as Id<'conversas'>}
isAdmin={isAdmin?.data ?? false} isAdmin={isAdmin?.data ?? false}
onClose={() => (showSalaManager = false)} onClose={() => (showSalaManager = false)}
/> />
{/if} {/if}
<!-- Modal de Enviar Notificação --> <!-- Modal de Enviar Notificação -->
{#if showNotificacaoModal && conversa()?.tipo === "sala_reuniao" && isAdmin?.data} {#if showNotificacaoModal && conversa()?.tipo === 'sala_reuniao' && isAdmin?.data}
<dialog <dialog
class="modal modal-open" class="modal modal-open"
onclick={(e) => onclick={(e) => e.target === e.currentTarget && (showNotificacaoModal = false)}
e.target === e.currentTarget && (showNotificacaoModal = false)}
> >
<div class="modal-box max-w-md" onclick={(e) => e.stopPropagation()}> <div class="modal-box max-w-md" onclick={(e) => e.stopPropagation()}>
<div <div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
class="flex items-center justify-between px-6 py-4 border-b border-base-300" <h2 class="flex items-center gap-2 text-xl font-semibold">
> <Bell class="text-primary h-5 w-5" />
<h2 class="text-xl font-semibold flex items-center gap-2">
<Bell class="w-5 h-5 text-primary" />
Enviar Notificação Enviar Notificação
</h2> </h2>
<button <button
@@ -456,7 +419,7 @@
class="btn btn-ghost btn-sm btn-circle" class="btn btn-ghost btn-sm btn-circle"
onclick={() => (showNotificacaoModal = false)} onclick={() => (showNotificacaoModal = false)}
> >
<X class="w-5 h-5" /> <X class="h-5 w-5" />
</button> </button>
</div> </div>
<div class="p-6"> <div class="p-6">
@@ -464,35 +427,30 @@
onsubmit={async (e) => { onsubmit={async (e) => {
e.preventDefault(); e.preventDefault();
const formData = new FormData(e.currentTarget); const formData = new FormData(e.currentTarget);
const titulo = formData.get("titulo") as string; const titulo = formData.get('titulo') as string;
const mensagem = formData.get("mensagem") as string; const mensagem = formData.get('mensagem') as string;
if (!titulo.trim() || !mensagem.trim()) { if (!titulo.trim() || !mensagem.trim()) {
alert("Preencha todos os campos"); alert('Preencha todos os campos');
return; return;
} }
try { try {
const resultado = await client.mutation( const resultado = await client.mutation(api.chat.enviarNotificacaoReuniao, {
api.chat.enviarNotificacaoReuniao, conversaId: conversaId as Id<'conversas'>,
{
conversaId: conversaId as Id<"conversas">,
titulo: titulo.trim(), titulo: titulo.trim(),
mensagem: mensagem.trim(), mensagem: mensagem.trim()
}, });
);
if (resultado.sucesso) { if (resultado.sucesso) {
alert("Notificação enviada com sucesso!"); alert('Notificação enviada com sucesso!');
showNotificacaoModal = false; showNotificacaoModal = false;
} else { } else {
alert(resultado.erro || "Erro ao enviar notificação"); alert(resultado.erro || 'Erro ao enviar notificação');
} }
} catch (error) { } catch (error) {
const errorMessage = const errorMessage =
error instanceof Error error instanceof Error ? error.message : 'Erro ao enviar notificação';
? error.message
: "Erro ao enviar notificação";
alert(errorMessage); alert(errorMessage);
} }
}} }}
@@ -529,17 +487,13 @@
> >
Cancelar Cancelar
</button> </button>
<button type="submit" class="btn btn-primary flex-1"> <button type="submit" class="btn btn-primary flex-1"> Enviar </button>
Enviar
</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<form method="dialog" class="modal-backdrop"> <form method="dialog" class="modal-backdrop">
<button type="button" onclick={() => (showNotificacaoModal = false)} <button type="button" onclick={() => (showNotificacaoModal = false)}>fechar</button>
>fechar</button
>
</form> </form>
</dialog> </dialog>
{/if} {/if}

277
apps/web/src/lib/components/chat/NewConversationModal.svelte
View File

@@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import { useQuery, useConvexClient } from "convex-svelte"; import { useQuery, useConvexClient } from 'convex-svelte';
import { api } from "@sgse-app/backend/convex/_generated/api"; import { api } from '@sgse-app/backend/convex/_generated/api';
import { abrirConversa } from "$lib/stores/chatStore"; import { abrirConversa } from '$lib/stores/chatStore';
import UserStatusBadge from "./UserStatusBadge.svelte"; import UserStatusBadge from './UserStatusBadge.svelte';
import UserAvatar from "./UserAvatar.svelte"; import UserAvatar from './UserAvatar.svelte';
import { import {
MessageSquare, MessageSquare,
User, User,
@@ -13,8 +13,9 @@
Search, Search,
ChevronRight, ChevronRight,
Plus, Plus,
UserX, UserX
} from "lucide-svelte"; } from 'lucide-svelte';
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
interface Props { interface Props {
onClose: () => void; onClose: () => void;
@@ -28,11 +29,11 @@
// Usuário atual // Usuário atual
const currentUser = useQuery(api.auth.getCurrentUser, {}); const currentUser = useQuery(api.auth.getCurrentUser, {});
let activeTab = $state<"individual" | "grupo" | "sala_reuniao">("individual"); let activeTab = $state<'individual' | 'grupo' | 'sala_reuniao'>('individual');
let searchQuery = $state(""); let searchQuery = $state('');
let selectedUsers = $state<string[]>([]); let selectedUsers = $state<Id<'usuarios'>[]>([]);
let groupName = $state(""); let groupName = $state('');
let salaReuniaoName = $state(""); let salaReuniaoName = $state('');
let loading = $state(false); let loading = $state(false);
const usuariosFiltrados = $derived(() => { const usuariosFiltrados = $derived(() => {
@@ -40,39 +41,37 @@
// Filtrar o próprio usuário // Filtrar o próprio usuário
const meuId = currentUser?.data?._id || meuPerfil?.data?._id; const meuId = currentUser?.data?._id || meuPerfil?.data?._id;
let lista = usuarios.data.filter((u: any) => u._id !== meuId); let lista = usuarios.data.filter((u) => u._id !== meuId);
// Aplicar busca // Aplicar busca
if (searchQuery.trim()) { if (searchQuery.trim()) {
const query = searchQuery.toLowerCase(); const query = searchQuery.toLowerCase();
lista = lista.filter( lista = lista.filter(
(u: any) => (u) =>
u.nome?.toLowerCase().includes(query) || u.nome?.toLowerCase().includes(query) ||
u.email?.toLowerCase().includes(query) || u.email?.toLowerCase().includes(query) ||
u.matricula?.toLowerCase().includes(query), u.matricula?.toLowerCase().includes(query)
); );
} }
// Ordenar: online primeiro, depois por nome // Ordenar: online primeiro, depois por nome
return lista.sort((a: any, b: any) => { return lista.sort((a, b) => {
const statusOrder = { const statusOrder = {
online: 0, online: 0,
ausente: 1, ausente: 1,
externo: 2, externo: 2,
em_reuniao: 3, em_reuniao: 3,
offline: 4, offline: 4
}; };
const statusA = const statusA = statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4;
statusOrder[a.statusPresenca as keyof typeof statusOrder] ?? 4; const statusB = statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
const statusB =
statusOrder[b.statusPresenca as keyof typeof statusOrder] ?? 4;
if (statusA !== statusB) return statusA - statusB; if (statusA !== statusB) return statusA - statusB;
return (a.nome || "").localeCompare(b.nome || ""); return (a.nome || '').localeCompare(b.nome || '');
}); });
}); });
function toggleUserSelection(userId: string) { function toggleUserSelection(userId: Id<'usuarios'>) {
if (selectedUsers.includes(userId)) { if (selectedUsers.includes(userId)) {
selectedUsers = selectedUsers.filter((id) => id !== userId); selectedUsers = selectedUsers.filter((id) => id !== userId);
} else { } else {
@@ -80,18 +79,18 @@
} }
} }
async function handleCriarIndividual(userId: string) { async function handleCriarIndividual(userId: Id<'usuarios'>) {
try { try {
loading = true; loading = true;
const conversaId = await client.mutation(api.chat.criarConversa, { const conversaId = await client.mutation(api.chat.criarConversa, {
tipo: "individual", tipo: 'individual',
participantes: [userId as any], participantes: [userId]
}); });
abrirConversa(conversaId); abrirConversa(conversaId);
onClose(); onClose();
} catch (error) { } catch (error) {
console.error("Erro ao criar conversa:", error); console.error('Erro ao criar conversa:', error);
alert("Erro ao criar conversa"); alert('Erro ao criar conversa');
} finally { } finally {
loading = false; loading = false;
} }
@@ -99,29 +98,27 @@
async function handleCriarGrupo() { async function handleCriarGrupo() {
if (selectedUsers.length < 2) { if (selectedUsers.length < 2) {
alert("Selecione pelo menos 2 participantes"); alert('Selecione pelo menos 2 participantes');
return; return;
} }
if (!groupName.trim()) { if (!groupName.trim()) {
alert("Digite um nome para o grupo"); alert('Digite um nome para o grupo');
return; return;
} }
try { try {
loading = true; loading = true;
const conversaId = await client.mutation(api.chat.criarConversa, { const conversaId = await client.mutation(api.chat.criarConversa, {
tipo: "grupo", tipo: 'grupo',
participantes: selectedUsers as any, participantes: selectedUsers,
nome: groupName.trim(), nome: groupName.trim()
}); });
abrirConversa(conversaId); abrirConversa(conversaId);
onClose(); onClose();
} catch (error: any) { } catch (error) {
console.error("Erro ao criar grupo:", error); console.error('Erro ao criar grupo:', error);
const mensagem = alert('Erro ao criar grupo');
error?.message || error?.data || "Erro desconhecido ao criar grupo";
alert(`Erro ao criar grupo: ${mensagem}`);
} finally { } finally {
loading = false; loading = false;
} }
@@ -129,12 +126,12 @@
async function handleCriarSalaReuniao() { async function handleCriarSalaReuniao() {
if (selectedUsers.length < 1) { if (selectedUsers.length < 1) {
alert("Selecione pelo menos 1 participante"); alert('Selecione pelo menos 1 participante');
return; return;
} }
if (!salaReuniaoName.trim()) { if (!salaReuniaoName.trim()) {
alert("Digite um nome para a sala de reunião"); alert('Digite um nome para a sala de reunião');
return; return;
} }
@@ -142,168 +139,147 @@
loading = true; loading = true;
const conversaId = await client.mutation(api.chat.criarSalaReuniao, { const conversaId = await client.mutation(api.chat.criarSalaReuniao, {
nome: salaReuniaoName.trim(), nome: salaReuniaoName.trim(),
participantes: selectedUsers as any, participantes: selectedUsers
}); });
abrirConversa(conversaId); abrirConversa(conversaId);
onClose(); onClose();
} catch (error: any) { } catch (error) {
console.error("Erro ao criar sala de reunião:", error); console.error('Erro ao criar sala de reunião:', error);
const mensagem = alert('Erro ao criar sala de reunião');
error?.message ||
error?.data ||
"Erro desconhecido ao criar sala de reunião";
alert(`Erro ao criar sala de reunião: ${mensagem}`);
} finally { } finally {
loading = false; loading = false;
} }
} }
</script> </script>
<dialog <dialog class="modal modal-open">
class="modal modal-open" <div class="modal-box flex max-h-[85vh] max-w-2xl flex-col p-0">
onclick={(e) => e.target === e.currentTarget && onClose()}
>
<div
class="modal-box max-w-2xl max-h-[85vh] flex flex-col p-0"
onclick={(e) => e.stopPropagation()}
>
<!-- Header --> <!-- Header -->
<div <div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
class="flex items-center justify-between px-6 py-4 border-b border-base-300" <h2 class="flex items-center gap-2 text-2xl font-bold">
> <MessageSquare class="text-primary h-6 w-6" />
<h2 class="text-2xl font-bold flex items-center gap-2">
<MessageSquare class="w-6 h-6 text-primary" />
Nova Conversa Nova Conversa
</h2> </h2>
<button <button type="button" class="btn btn-sm btn-circle" onclick={onClose} aria-label="Fechar">
type="button" <X class="h-5 w-5" />
class="btn btn-ghost btn-sm btn-circle"
onclick={onClose}
aria-label="Fechar"
>
<X class="w-5 h-5" />
</button> </button>
</div> </div>
<!-- Tabs melhoradas --> <!-- Tabs melhoradas -->
<div class="tabs tabs-boxed p-4 bg-base-200/50"> <div class="tabs tabs-boxed bg-base-200/50 p-4">
<button <button
type="button" type="button"
class={`tab flex items-center gap-2 transition-all duration-200 ${ class={`tab flex items-center gap-2 transition-all duration-200 ${
activeTab === "individual" activeTab === 'individual'
? "tab-active bg-primary text-primary-content font-semibold" ? 'tab-active bg-primary text-primary-content font-semibold'
: "hover:bg-base-300" : 'hover:bg-base-300'
}`} }`}
onclick={() => { onclick={() => {
activeTab = "individual"; activeTab = 'individual';
selectedUsers = []; selectedUsers = [];
searchQuery = ""; searchQuery = '';
}} }}
> >
<User class="w-4 h-4" /> <User class="h-4 w-4" />
Individual Individual
</button> </button>
<button <button
type="button" type="button"
class={`tab flex items-center gap-2 transition-all duration-200 ${ class={`tab flex items-center gap-2 transition-all duration-200 ${
activeTab === "grupo" activeTab === 'grupo'
? "tab-active bg-primary text-primary-content font-semibold" ? 'tab-active bg-primary text-primary-content font-semibold'
: "hover:bg-base-300" : 'hover:bg-base-300'
}`} }`}
onclick={() => { onclick={() => {
activeTab = "grupo"; activeTab = 'grupo';
selectedUsers = []; selectedUsers = [];
searchQuery = ""; searchQuery = '';
}} }}
> >
<Users class="w-4 h-4" /> <Users class="h-4 w-4" />
Grupo Grupo
</button> </button>
<button <button
type="button" type="button"
class={`tab flex items-center gap-2 transition-all duration-200 ${ class={`tab flex items-center gap-2 transition-all duration-200 ${
activeTab === "sala_reuniao" activeTab === 'sala_reuniao'
? "tab-active bg-primary text-primary-content font-semibold" ? 'tab-active bg-primary text-primary-content font-semibold'
: "hover:bg-base-300" : 'hover:bg-base-300'
}`} }`}
onclick={() => { onclick={() => {
activeTab = "sala_reuniao"; activeTab = 'sala_reuniao';
selectedUsers = []; selectedUsers = [];
searchQuery = ""; searchQuery = '';
}} }}
> >
<Video class="w-4 h-4" /> <Video class="h-4 w-4" />
Sala de Reunião Sala de Reunião
</button> </button>
</div> </div>
<!-- Content --> <!-- Content -->
<div class="flex-1 overflow-y-auto px-6 py-4"> <div class="flex-1 overflow-y-auto px-6 py-4">
{#if activeTab === "grupo"} {#if activeTab === 'grupo'}
<!-- Criar Grupo --> <!-- Criar Grupo -->
<div class="mb-4"> <div class="mb-4">
<label class="label pb-2"> <div class="label pb-2">
<span class="label-text font-semibold">Nome do Grupo</span> <span class="label-text font-semibold">Nome do Grupo</span>
</label> </div>
<input <input
type="text" type="text"
placeholder="Digite o nome do grupo..." placeholder="Digite o nome do grupo..."
class="input input-bordered w-full focus:input-primary transition-colors" class="input input-bordered focus:input-primary w-full transition-colors"
bind:value={groupName} bind:value={groupName}
maxlength="50" maxlength="50"
/> />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="label pb-2"> <div class="label pb-2">
<span class="label-text font-semibold"> <span class="label-text font-semibold">
Participantes {selectedUsers.length > 0 Participantes {selectedUsers.length > 0
? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? "s" : ""})` ? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})`
: ""} : ''}
</span> </span>
</label>
</div> </div>
{:else if activeTab === "sala_reuniao"} </div>
{:else if activeTab === 'sala_reuniao'}
<!-- Criar Sala de Reunião --> <!-- Criar Sala de Reunião -->
<div class="mb-4"> <div class="mb-4">
<label class="label pb-2"> <div class="label pb-2">
<span class="label-text font-semibold">Nome da Sala de Reunião</span <span class="label-text font-semibold">Nome da Sala de Reunião</span>
<span class="label-text-alt text-primary font-medium">👑 Você será o administrador</span
> >
<span class="label-text-alt text-primary font-medium" </div>
>👑 Você será o administrador</span
>
</label>
<input <input
type="text" type="text"
placeholder="Digite o nome da sala de reunião..." placeholder="Digite o nome da sala de reunião..."
class="input input-bordered w-full focus:input-primary transition-colors" class="input input-bordered focus:input-primary w-full transition-colors"
bind:value={salaReuniaoName} bind:value={salaReuniaoName}
maxlength="50" maxlength="50"
/> />
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="label pb-2"> <div class="label pb-2">
<span class="label-text font-semibold"> <span class="label-text font-semibold">
Participantes {selectedUsers.length > 0 Participantes {selectedUsers.length > 0
? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? "s" : ""})` ? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})`
: ""} : ''}
</span> </span>
</label> </div>
</div> </div>
{/if} {/if}
<!-- Search melhorado --> <!-- Search melhorado -->
<div class="mb-4 relative"> <div class="relative mb-4">
<input <input
type="text" type="text"
placeholder="Buscar usuários por nome, email ou matrícula..." placeholder="Buscar usuários por nome, email ou matrícula..."
class="input input-bordered w-full pl-10 focus:input-primary transition-colors" class="input input-bordered focus:input-primary w-full pl-10 transition-colors"
bind:value={searchQuery} bind:value={searchQuery}
/> />
<Search <Search class="text-base-content/40 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2" />
class="w-5 h-5 absolute left-3 top-1/2 -translate-y-1/2 text-base-content/40"
/>
</div> </div>
<!-- Lista de usuários --> <!-- Lista de usuários -->
@@ -313,14 +289,14 @@
{@const isSelected = selectedUsers.includes(usuario._id)} {@const isSelected = selectedUsers.includes(usuario._id)}
<button <button
type="button" type="button"
class={`w-full text-left px-4 py-3 rounded-xl border-2 transition-all duration-200 flex items-center gap-3 ${ class={`flex w-full items-center gap-3 rounded-xl border-2 px-4 py-3 text-left transition-all duration-200 ${
isSelected isSelected
? "border-primary bg-primary/10 shadow-md scale-[1.02]" ? 'border-primary bg-primary/10 scale-[1.02] shadow-md'
: "border-base-300 hover:bg-base-200 hover:border-primary/30 hover:shadow-sm" : 'border-base-300 hover:bg-base-200 hover:border-primary/30 hover:shadow-sm'
} ${loading ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`} } ${loading ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
onclick={() => { onclick={() => {
if (loading) return; if (loading) return;
if (activeTab === "individual") { if (activeTab === 'individual') {
handleCriarIndividual(usuario._id); handleCriarIndividual(usuario._id);
} else { } else {
toggleUserSelection(usuario._id); toggleUserSelection(usuario._id);
@@ -336,29 +312,23 @@
nome={usuario.nome} nome={usuario.nome}
size="md" size="md"
/> />
<div class="absolute -bottom-1 -right-1"> <div class="absolute -right-1 -bottom-1">
<UserStatusBadge <UserStatusBadge status={usuario.statusPresenca || 'offline'} size="sm" />
status={usuario.statusPresenca || "offline"}
size="sm"
/>
</div> </div>
</div> </div>
<!-- Info --> <!-- Info -->
<div class="flex-1 min-w-0"> <div class="min-w-0 flex-1">
<p class="font-semibold text-base-content truncate"> <p class="text-base-content truncate font-semibold">
{usuario.nome} {usuario.nome}
</p> </p>
<p class="text-sm text-base-content/60 truncate"> <p class="text-base-content/60 truncate text-sm">
{usuario.setor || {usuario.setor || usuario.email || usuario.matricula || 'Sem informações'}
usuario.email ||
usuario.matricula ||
"Sem informações"}
</p> </p>
</div> </div>
<!-- Checkbox melhorado (para grupo e sala de reunião) --> <!-- Checkbox melhorado (para grupo e sala de reunião) -->
{#if activeTab === "grupo" || activeTab === "sala_reuniao"} {#if activeTab === 'grupo' || activeTab === 'sala_reuniao'}
<div class="shrink-0"> <div class="shrink-0">
<input <input
type="checkbox" type="checkbox"
@@ -369,28 +339,23 @@
</div> </div>
{:else} {:else}
<!-- Ícone de seta para individual --> <!-- Ícone de seta para individual -->
<ChevronRight class="w-5 h-5 text-base-content/40" /> <ChevronRight class="text-base-content/40 h-5 w-5" />
{/if} {/if}
</button> </button>
{/each} {/each}
{:else if !usuarios?.data} {:else if !usuarios?.data}
<div class="flex flex-col items-center justify-center py-12"> <div class="flex flex-col items-center justify-center py-12">
<span class="loading loading-spinner loading-lg text-primary" <span class="loading loading-spinner loading-lg text-primary"></span>
></span> <p class="text-base-content/60 mt-4">Carregando usuários...</p>
<p class="mt-4 text-base-content/60">Carregando usuários...</p>
</div> </div>
{:else} {:else}
<div <div class="flex flex-col items-center justify-center py-12 text-center">
class="flex flex-col items-center justify-center py-12 text-center" <UserX class="text-base-content/30 mb-4 h-16 w-16" />
>
<UserX class="w-16 h-16 text-base-content/30 mb-4" />
<p class="text-base-content/70 font-medium"> <p class="text-base-content/70 font-medium">
{searchQuery.trim() {searchQuery.trim() ? 'Nenhum usuário encontrado' : 'Nenhum usuário disponível'}
? "Nenhum usuário encontrado"
: "Nenhum usuário disponível"}
</p> </p>
{#if searchQuery.trim()} {#if searchQuery.trim()}
<p class="text-sm text-base-content/50 mt-2"> <p class="text-base-content/50 mt-2 text-sm">
Tente buscar por nome, email ou matrícula Tente buscar por nome, email ou matrícula
</p> </p>
{/if} {/if}
@@ -400,11 +365,11 @@
</div> </div>
<!-- Footer (para grupo e sala de reunião) --> <!-- Footer (para grupo e sala de reunião) -->
{#if activeTab === "grupo"} {#if activeTab === 'grupo'}
<div class="px-6 py-4 border-t border-base-300 bg-base-200/50"> <div class="border-base-300 bg-base-200/50 border-t px-6 py-4">
<button <button
type="button" type="button"
class="btn btn-primary btn-block btn-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200" class="btn btn-primary btn-block btn-lg font-semibold shadow-lg transition-all duration-200 hover:shadow-xl"
onclick={handleCriarGrupo} onclick={handleCriarGrupo}
disabled={loading || selectedUsers.length < 2 || !groupName.trim()} disabled={loading || selectedUsers.length < 2 || !groupName.trim()}
> >
@@ -412,36 +377,34 @@
<span class="loading loading-spinner"></span> <span class="loading loading-spinner"></span>
Criando grupo... Criando grupo...
{:else} {:else}
<Plus class="w-5 h-5" /> <Plus class="h-5 w-5" />
Criar Grupo Criar Grupo
{/if} {/if}
</button> </button>
{#if selectedUsers.length < 2 && activeTab === "grupo"} {#if selectedUsers.length < 2 && activeTab === 'grupo'}
<p class="text-xs text-base-content/50 text-center mt-2"> <p class="text-base-content/50 mt-2 text-center text-xs">
Selecione pelo menos 2 participantes Selecione pelo menos 2 participantes
</p> </p>
{/if} {/if}
</div> </div>
{:else if activeTab === "sala_reuniao"} {:else if activeTab === 'sala_reuniao'}
<div class="px-6 py-4 border-t border-base-300 bg-base-200/50"> <div class="border-base-300 bg-base-200/50 border-t px-6 py-4">
<button <button
type="button" type="button"
class="btn btn-primary btn-block btn-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200" class="btn btn-primary btn-block btn-lg font-semibold shadow-lg transition-all duration-200 hover:shadow-xl"
onclick={handleCriarSalaReuniao} onclick={handleCriarSalaReuniao}
disabled={loading || disabled={loading || selectedUsers.length < 1 || !salaReuniaoName.trim()}
selectedUsers.length < 1 ||
!salaReuniaoName.trim()}
> >
{#if loading} {#if loading}
<span class="loading loading-spinner"></span> <span class="loading loading-spinner"></span>
Criando sala... Criando sala...
{:else} {:else}
<Plus class="w-5 h-5" /> <Plus class="h-5 w-5" />
Criar Sala de Reunião Criar Sala de Reunião
{/if} {/if}
</button> </button>
{#if selectedUsers.length < 1 && activeTab === "sala_reuniao"} {#if selectedUsers.length < 1 && activeTab === 'sala_reuniao'}
<p class="text-xs text-base-content/50 text-center mt-2"> <p class="text-base-content/50 mt-2 text-center text-xs">
Selecione pelo menos 1 participante Selecione pelo menos 1 participante
</p> </p>
{/if} {/if}

131
apps/web/src/lib/components/ti/AlertConfigModal.svelte
View File

@@ -1,24 +1,20 @@
<script lang="ts"> <script lang="ts">
import { useQuery, useConvexClient } from "convex-svelte"; import { useQuery, useConvexClient } from 'convex-svelte';
import { api } from "@sgse-app/backend/convex/_generated/api"; import { api } from '@sgse-app/backend/convex/_generated/api';
import type { Id } from "@sgse-app/backend/convex/_generated/dataModel"; import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
let { onClose }: { onClose: () => void } = $props(); let { onClose }: { onClose: () => void } = $props();
const client = useConvexClient(); const client = useConvexClient();
const alertasQuery = useQuery(api.monitoramento.listarAlertas, {}); const alertas = useQuery(api.monitoramento.listarAlertas, {});
const alertas = $derived.by(() => {
if (!alertasQuery) return []; $inspect(alertas);
// O useQuery pode retornar o array diretamente ou em .data
if (Array.isArray(alertasQuery)) return alertasQuery;
return alertasQuery.data ?? [];
});
// Estado para novo alerta // Estado para novo alerta
let editingAlertId = $state<Id<"alertConfigurations"> | null>(null); let editingAlertId = $state<Id<'alertConfigurations'> | null>(null);
let metricName = $state("cpuUsage"); let metricName = $state('cpuUsage');
let threshold = $state(80); let threshold = $state(80);
let operator = $state<">" | "<" | ">=" | "<=" | "==">(">"); let operator = $state<'>' | '<' | '>=' | '<=' | '=='>('>');
let enabled = $state(true); let enabled = $state(true);
let notifyByEmail = $state(false); let notifyByEmail = $state(false);
let notifyByChat = $state(true); let notifyByChat = $state(true);
@@ -26,29 +22,29 @@
let showForm = $state(false); let showForm = $state(false);
const metricOptions = [ const metricOptions = [
{ value: "cpuUsage", label: "Uso de CPU (%)" }, { value: 'cpuUsage', label: 'Uso de CPU (%)' },
{ value: "memoryUsage", label: "Uso de Memória (%)" }, { value: 'memoryUsage', label: 'Uso de Memória (%)' },
{ value: "networkLatency", label: "Latência de Rede (ms)" }, { value: 'networkLatency', label: 'Latência de Rede (ms)' },
{ value: "storageUsed", label: "Armazenamento Usado (%)" }, { value: 'storageUsed', label: 'Armazenamento Usado (%)' },
{ value: "usuariosOnline", label: "Usuários Online" }, { value: 'usuariosOnline', label: 'Usuários Online' },
{ value: "mensagensPorMinuto", label: "Mensagens por Minuto" }, { value: 'mensagensPorMinuto', label: 'Mensagens por Minuto' },
{ value: "tempoRespostaMedio", label: "Tempo de Resposta (ms)" }, { value: 'tempoRespostaMedio', label: 'Tempo de Resposta (ms)' },
{ value: "errosCount", label: "Contagem de Erros" }, { value: 'errosCount', label: 'Contagem de Erros' }
]; ];
const operatorOptions = [ const operatorOptions = [
{ value: ">", label: "Maior que (>)" }, { value: '>', label: 'Maior que (>)' },
{ value: ">=", label: "Maior ou igual (≥)" }, { value: '>=', label: 'Maior ou igual (≥)' },
{ value: "<", label: "Menor que (<)" }, { value: '<', label: 'Menor que (<)' },
{ value: "<=", label: "Menor ou igual (≤)" }, { value: '<=', label: 'Menor ou igual (≤)' },
{ value: "==", label: "Igual a (=)" }, { value: '==', label: 'Igual a (=)' }
]; ];
function resetForm() { function resetForm() {
editingAlertId = null; editingAlertId = null;
metricName = "cpuUsage"; metricName = 'cpuUsage';
threshold = 80; threshold = 80;
operator = ">"; operator = '>';
enabled = true; enabled = true;
notifyByEmail = false; notifyByEmail = false;
notifyByChat = true; notifyByChat = true;
@@ -76,33 +72,31 @@
operator, operator,
enabled, enabled,
notifyByEmail, notifyByEmail,
notifyByChat, notifyByChat
}); });
resetForm(); resetForm();
} catch (error) { } catch (error) {
console.error("Erro ao salvar alerta:", error); console.error('Erro ao salvar alerta:', error);
alert("Erro ao salvar alerta. Tente novamente."); alert('Erro ao salvar alerta. Tente novamente.');
} finally { } finally {
saving = false; saving = false;
} }
} }
async function deleteAlert(alertId: Id<"alertConfigurations">) { async function deleteAlert(alertId: Id<'alertConfigurations'>) {
if (!confirm("Tem certeza que deseja deletar este alerta?")) return; if (!confirm('Tem certeza que deseja deletar este alerta?')) return;
try { try {
await client.mutation(api.monitoramento.deletarAlerta, { alertId }); await client.mutation(api.monitoramento.deletarAlerta, { alertId });
} catch (error) { } catch (error) {
console.error("Erro ao deletar alerta:", error); console.error('Erro ao deletar alerta:', error);
alert("Erro ao deletar alerta. Tente novamente."); alert('Erro ao deletar alerta. Tente novamente.');
} }
} }
function getMetricLabel(metricName: string): string { function getMetricLabel(metricName: string): string {
return ( return metricOptions.find((m) => m.value === metricName)?.label || metricName;
metricOptions.find((m) => m.value === metricName)?.label || metricName
);
} }
function getOperatorLabel(op: string): string { function getOperatorLabel(op: string): string {
@@ -111,29 +105,23 @@
</script> </script>
<dialog class="modal modal-open"> <dialog class="modal modal-open">
<div class="modal-box max-w-4xl bg-linear-to-br from-base-100 to-base-200"> <div class="modal-box from-base-100 to-base-200 max-w-4xl bg-linear-to-br">
<button <button
type="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={onClose} onclick={onClose}
> >
✕ ✕
</button> </button>
<h3 class="font-bold text-3xl text-primary mb-2"> <h3 class="text-primary mb-2 text-3xl font-bold">⚙️ Configuração de Alertas</h3>
⚙️ Configuração de Alertas
</h3>
<p class="text-base-content/60 mb-6"> <p class="text-base-content/60 mb-6">
Configure alertas personalizados para monitoramento do sistema Configure alertas personalizados para monitoramento do sistema
</p> </p>
<!-- Botão Novo Alerta --> <!-- Botão Novo Alerta -->
{#if !showForm} {#if !showForm}
<button <button type="button" class="btn btn-primary mb-6" onclick={() => (showForm = true)}>
type="button"
class="btn btn-primary mb-6"
onclick={() => (showForm = true)}
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5" class="h-5 w-5"
@@ -154,13 +142,13 @@
<!-- Formulário de Alerta --> <!-- Formulário de Alerta -->
{#if showForm} {#if showForm}
<div class="card bg-base-100 shadow-xl mb-6 border-2 border-primary/20"> <div class="card bg-base-100 border-primary/20 mb-6 border-2 shadow-xl">
<div class="card-body"> <div class="card-body">
<h4 class="card-title text-xl"> <h4 class="card-title text-xl">
{editingAlertId ? "Editar Alerta" : "Novo Alerta"} {editingAlertId ? 'Editar Alerta' : 'Novo Alerta'}
</h4> </h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4"> <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
<!-- Métrica --> <!-- Métrica -->
<div class="form-control"> <div class="form-control">
<label class="label" for="metric"> <label class="label" for="metric">
@@ -171,7 +159,7 @@
class="select select-bordered select-primary" class="select select-bordered select-primary"
bind:value={metricName} bind:value={metricName}
> >
{#each metricOptions as option} {#each metricOptions as option (option.value)}
<option value={option.value}>{option.label}</option> <option value={option.value}>{option.label}</option>
{/each} {/each}
</select> </select>
@@ -187,7 +175,7 @@
class="select select-bordered select-primary" class="select select-bordered select-primary"
bind:value={operator} bind:value={operator}
> >
{#each operatorOptions as option} {#each operatorOptions as option (option.value)}
<option value={option.value}>{option.label}</option> <option value={option.value}>{option.label}</option>
{/each} {/each}
</select> </select>
@@ -212,11 +200,7 @@
<div class="form-control"> <div class="form-control">
<label class="label cursor-pointer justify-start gap-4"> <label class="label cursor-pointer justify-start gap-4">
<span class="label-text font-semibold">Alerta Ativo</span> <span class="label-text font-semibold">Alerta Ativo</span>
<input <input type="checkbox" class="toggle toggle-primary" bind:checked={enabled} />
type="checkbox"
class="toggle toggle-primary"
bind:checked={enabled}
/>
</label> </label>
</div> </div>
</div> </div>
@@ -233,7 +217,7 @@
<span class="label-text"> <span class="label-text">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 inline mr-2" class="mr-2 inline h-5 w-5"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@@ -258,7 +242,7 @@
<span class="label-text"> <span class="label-text">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 inline mr-2" class="mr-2 inline h-5 w-5"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
@@ -281,7 +265,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
class="stroke-current shrink-0 w-6 h-6" class="h-6 w-6 shrink-0 stroke-current"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@@ -301,13 +285,8 @@
</div> </div>
<!-- Botões --> <!-- Botões -->
<div class="card-actions justify-end mt-4"> <div class="card-actions mt-4 justify-end">
<button <button type="button" class="btn btn-ghost" onclick={resetForm} disabled={saving}>
type="button"
class="btn btn-ghost"
onclick={resetForm}
disabled={saving}
>
Cancelar Cancelar
</button> </button>
<button <button
@@ -345,9 +324,9 @@
<!-- Lista de Alertas --> <!-- Lista de Alertas -->
<div class="divider">Alertas Configurados</div> <div class="divider">Alertas Configurados</div>
{#if alertas.length > 0} {#if alertas.data && alertas.data.length > 0}
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table table-zebra"> <table class="table-zebra table">
<thead> <thead>
<tr> <tr>
<th>Métrica</th> <th>Métrica</th>
@@ -358,8 +337,8 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each alertas as alerta} {#each alertas.data as alerta (alerta._id)}
<tr class={!alerta.enabled ? "opacity-50" : ""}> <tr class={!alerta.enabled ? 'opacity-50' : ''}>
<td> <td>
<div class="font-semibold"> <div class="font-semibold">
{getMetricLabel(alerta.metricName)} {getMetricLabel(alerta.metricName)}
@@ -423,6 +402,7 @@
<td> <td>
<div class="flex gap-2"> <div class="flex gap-2">
<button <button
title="Editar Alerta"
type="button" type="button"
class="btn btn-ghost btn-xs" class="btn btn-ghost btn-xs"
onclick={() => editAlert(alerta)} onclick={() => editAlert(alerta)}
@@ -443,6 +423,7 @@
</svg> </svg>
</button> </button>
<button <button
title="Deletar Alerta"
type="button" type="button"
class="btn btn-ghost btn-xs text-error" class="btn btn-ghost btn-xs text-error"
onclick={() => deleteAlert(alerta._id)} onclick={() => deleteAlert(alerta._id)}
@@ -475,7 +456,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
class="stroke-info shrink-0 w-6 h-6" class="stroke-info h-6 w-6 shrink-0"
> >
<path <path
stroke-linecap="round" stroke-linecap="round"
@@ -484,9 +465,7 @@
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path> ></path>
</svg> </svg>
<span <span>Nenhum alerta configurado. Clique em "Novo Alerta" para criar um.</span>
>Nenhum alerta configurado. Clique em "Novo Alerta" para criar um.</span
>
</div> </div>
{/if} {/if}

19
packages/backend/convex/monitoramento.ts
View File

@@ -139,25 +139,6 @@ export const configurarAlerta = mutation({
*/ */
export const listarAlertas = query({ export const listarAlertas = query({
args: {}, args: {},
returns: v.array(
v.object({
_id: v.id('alertConfigurations'),
metricName: v.string(),
threshold: v.number(),
operator: v.union(
v.literal('>'),
v.literal('<'),
v.literal('>='),
v.literal('<='),
v.literal('==')
),
enabled: v.boolean(),
notifyByEmail: v.boolean(),
notifyByChat: v.boolean(),
createdBy: v.id('usuarios'),
lastModified: v.number()
})
),
handler: async (ctx) => { handler: async (ctx) => {
const alertas = await ctx.db.query('alertConfigurations').collect(); const alertas = await ctx.db.query('alertConfigurations').collect();
return alertas; return alertas;