From ed00739b307fae27431e7eb1f32ad5242ccdbb22 Mon Sep 17 00:00:00 2001 From: killer-cf Date: Mon, 10 Nov 2025 15:03:16 -0300 Subject: [PATCH] refactor: enhance chat components and improve user interaction - 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. --- apps/web/src/lib/components/Sidebar.svelte | 1137 ++++++++--------- .../src/lib/components/chat/ChatList.svelte | 882 ++++++------- .../src/lib/components/chat/ChatWindow.svelte | 962 +++++++------- .../chat/NewConversationModal.svelte | 811 ++++++------ .../lib/components/ti/AlertConfigModal.svelte | 919 +++++++------ packages/backend/convex/monitoramento.ts | 19 - 6 files changed, 2249 insertions(+), 2481 deletions(-) diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte index f184db7..554b237 100644 --- a/apps/web/src/lib/components/Sidebar.svelte +++ b/apps/web/src/lib/components/Sidebar.svelte @@ -1,661 +1,618 @@
-
-
+ + + + {/if} +
- -
- -
- {@render children?.()} -
+ +
+ +
+ {@render children?.()} +
- -
-
- - • - Contato - • - Suporte - • - Privacidade -
-
-
-
- Logo -
-
-
-

- Governo do Estado de Pernambuco -

-

Secretaria de Esportes

-
-
-

- © {new Date().getFullYear()} - Todos os direitos reservados -

-
-
-
- -
- - -
-
+ +
+
+ + • + Contato + • + Suporte + • + Privacidade +
+
+
+
+ Logo +
+
+
+

Governo do Estado de Pernambuco

+

Secretaria de Esportes

+
+
+

+ © {new Date().getFullYear()} - Todos os direitos reservados +

+
+
+
+ +
+ + +
+
{#if loginModalStore.showModal} - -
- + +
+ -
-
-
-
- Logo -
-
-

Login

-

- Acesse o sistema com suas credenciais -

-
+
+
+
+
+ Logo +
+
+

Login

+

Acesse o sistema com suas credenciais

+
- {#if erroLogin} -
- - {erroLogin} -
- {/if} + {#if erroLogin} +
+ + {erroLogin} +
+ {/if} -
-
- - -
-
- - -
-
- -
-
- - Não tem acesso? Solicite aqui - - - Esqueceu sua senha? - -
-
+
+
+ + +
+
+ + +
+
+ +
+
+ + Não tem acesso? Solicite aqui + + + Esqueceu sua senha? + +
+
-
- Credenciais de teste -
-
-

Admin:

-

- Matrícula: 0000 -

-

- Senha: Admin@123 -

-
-
-
- - -
- -
-
+
Credenciais de teste
+
+

Admin:

+

+ Matrícula: 0000 +

+

+ Senha: Admin@123 +

+
+
+ + + +
+ +
+ {/if} {#if showAboutModal} - -
- + +
+ -
- -
-
-
- Logo SGSE -
-
-
-

SGSE

-

- Sistema de Gerenciamento da
Secretaria de Esportes -

-
-
+
+ +
+
+
+ Logo SGSE +
+
+
+

SGSE

+

+ Sistema de Gerenciamento da
Secretaria de Esportes +

+
+
- -
+ +
- -
-
- -

Versão

-
-

1.0 26_2025

-
- - Em Desenvolvimento -
-
+ +
+
+ +

Versão

+
+

1.0 26_2025

+
+ + Em Desenvolvimento +
+
- -
-

- Desenvolvido por -

-

- Secretaria de Esportes de Pernambuco -

-
+ +
+

Desenvolvido por

+

Secretaria de Esportes de Pernambuco

+
- -
+ +
- -
-
-

Governo

-

Estado de Pernambuco

-
-
-

Ano

-

2025

-
-
+ +
+
+

Governo

+

Estado de Pernambuco

+
+
+

Ano

+

2025

+
+
- -
- -
-
-
-
e.key === "Escape" && closeAboutModal()} - >
-
+ +
+ +
+
+ +
e.key === 'Escape' && closeAboutModal()} + >
+ {/if} {#if currentUser.data} - - + + {/if} diff --git a/apps/web/src/lib/components/chat/ChatList.svelte b/apps/web/src/lib/components/chat/ChatList.svelte index 4468fe3..61fe005 100644 --- a/apps/web/src/lib/components/chat/ChatList.svelte +++ b/apps/web/src/lib/components/chat/ChatList.svelte @@ -1,514 +1,448 @@ -
- -
-
- - - - -
-
+
+ +
+
+ + + + +
+
- -
- -
- - -
+ +
+ +
+ + +
- -
- -
-
+ +
+ +
+
- -
- {#if activeTab === "usuarios"} - - {#if usuarios?.data && usuariosFiltrados.length > 0} - {#each usuariosFiltrados as usuario (usuario._id)} - - {/each} - {:else if !usuarios?.data} - -
- -
- {:else} - -
- - - -

Nenhum usuário encontrado

-
- {/if} - {:else} - - {#if conversas?.data && conversasFiltradas().length > 0} - {#each conversasFiltradas() as conversa (conversa._id)} - + {/each} + {:else if !usuarios?.data} + +
+ +
+ {:else} + +
+ + + +

Nenhum usuário encontrado

+
+ {/if} + {:else} + + {#if conversas?.data && conversasFiltradas().length > 0} + {#each conversasFiltradas() as conversa (conversa._id)} + - {/each} - {:else if !conversas?.data} - -
- -
- {:else} - -
- - - -

- Nenhuma conversa encontrada -

-

- Crie um grupo ou sala de reunião para começar -

-
- {/if} - {/if} -
+ +
+
+

+ {conversa.nome || + (conversa.tipo === 'sala_reuniao' ? 'Sala sem nome' : 'Grupo sem nome')} +

+ {#if conversa.naoLidas > 0} + {conversa.naoLidas} + {/if} +
+
+ + {conversa.tipo === 'sala_reuniao' ? '👑 Sala de Reunião' : '👥 Grupo'} + + {#if conversa.participantesInfo} + + {conversa.participantesInfo.length} participante{conversa.participantesInfo + .length !== 1 + ? 's' + : ''} + + {/if} +
+
+ + {/each} + {:else if !conversas?.data} + +
+ +
+ {:else} + +
+ + + +

Nenhuma conversa encontrada

+

Crie um grupo ou sala de reunião para começar

+
+ {/if} + {/if} +
{#if showNewConversationModal} - (showNewConversationModal = false)} /> + (showNewConversationModal = false)} /> {/if} diff --git a/apps/web/src/lib/components/chat/ChatWindow.svelte b/apps/web/src/lib/components/chat/ChatWindow.svelte index 9cecb9d..6bf9dad 100644 --- a/apps/web/src/lib/components/chat/ChatWindow.svelte +++ b/apps/web/src/lib/components/chat/ChatWindow.svelte @@ -1,545 +1,499 @@ -
(showAdminMenu = false)}> - -
e.stopPropagation()} - > - - + - -
- {#if conversa() && conversa()?.tipo === "individual" && conversa()?.outroUsuario} - - {:else} -
- {getAvatarConversa()} -
- {/if} - {#if getStatusConversa()} -
- -
- {/if} -
+
+ +
+ + -
-

- {getNomeConversa()} -

- {#if getStatusMensagem()} -

- {getStatusMensagem()} -

- {:else if getStatusConversa()} -

- {getStatusConversa() === "online" - ? "Online" - : getStatusConversa() === "ausente" - ? "Ausente" - : getStatusConversa() === "em_reuniao" - ? "Em reunião" - : getStatusConversa() === "externo" - ? "Externo" - : "Offline"} -

- {:else if conversa() && (conversa()?.tipo === "grupo" || conversa()?.tipo === "sala_reuniao")} -
-

- {conversa()?.participantesInfo?.length || 0} - {conversa()?.participantesInfo?.length === 1 - ? "participante" - : "participantes"} -

- {#if conversa()?.participantesInfo && conversa()?.participantesInfo.length > 0} -
-
- {#each conversa()?.participantesInfo.slice(0, 5) as participante (participante._id)} -
- {#if participante.fotoPerfilUrl} - {participante.nome} - {:else if participante.avatar} - {participante.nome} - {:else} - {participante.nome} - {/if} -
- {/each} - {#if conversa()?.participantesInfo.length > 5} -
- +{conversa()?.participantesInfo.length - 5} -
- {/if} -
- {#if conversa()?.tipo === "sala_reuniao" && isAdmin?.data} - • Admin - {/if} -
- {/if} -
- {/if} -
+ +
+ {#if conversa() && conversa()?.tipo === 'individual' && conversa()?.outroUsuario} + + {:else} +
+ {getAvatarConversa()} +
+ {/if} + {#if getStatusConversa()} +
+ +
+ {/if} +
- -
- - {#if conversa() && (conversa()?.tipo === "grupo" || conversa()?.tipo === "sala_reuniao")} - - {/if} +
+

+ {getNomeConversa()} +

+ {#if getStatusMensagem()} +

+ {getStatusMensagem()} +

+ {:else if getStatusConversa()} +

+ {getStatusConversa() === 'online' + ? 'Online' + : getStatusConversa() === 'ausente' + ? 'Ausente' + : getStatusConversa() === 'em_reuniao' + ? 'Em reunião' + : getStatusConversa() === 'externo' + ? 'Externo' + : 'Offline'} +

+ {:else if conversa() && (conversa()?.tipo === 'grupo' || conversa()?.tipo === 'sala_reuniao')} +
+

+ {conversa()?.participantesInfo?.length || 0} + {conversa()?.participantesInfo?.length === 1 ? 'participante' : 'participantes'} +

+ {#if conversa()?.participantesInfo && conversa()?.participantesInfo.length > 0} +
+
+ {#each conversa()?.participantesInfo.slice(0, 5) as participante (participante._id)} +
+ {#if participante.fotoPerfilUrl} + {participante.nome} + {:else if participante.avatar} + {participante.nome} + {:else} + {participante.nome} + {/if} +
+ {/each} + {#if conversa()?.participantesInfo.length > 5} +
+ +{conversa()?.participantesInfo.length - 5} +
+ {/if} +
+ {#if conversa()?.tipo === 'sala_reuniao' && isAdmin?.data} + • Admin + {/if} +
+ {/if} +
+ {/if} +
- - {#if conversa()?.tipo === "sala_reuniao" && isAdmin?.data} -
- - {#if showAdminMenu} -
    e.stopPropagation()} - > -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- {/if} -
- {/if} + +
+ + {#if conversa() && (conversa()?.tipo === 'grupo' || conversa()?.tipo === 'sala_reuniao')} + + {/if} - - -
-
+ + {#if conversa()?.tipo === 'sala_reuniao' && isAdmin?.data} +
+ + {#if showAdminMenu} +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ {/if} +
+ {/if} - -
- } /> -
+ + +
+
- -
- } /> -
+ +
+ } /> +
+ + +
+ } /> +
{#if showScheduleModal} - } - onClose={() => (showScheduleModal = false)} - /> + } + onClose={() => (showScheduleModal = false)} + /> {/if} -{#if showSalaManager && conversa()?.tipo === "sala_reuniao"} - } - isAdmin={isAdmin?.data ?? false} - onClose={() => (showSalaManager = false)} - /> +{#if showSalaManager && conversa()?.tipo === 'sala_reuniao'} + } + isAdmin={isAdmin?.data ?? false} + onClose={() => (showSalaManager = false)} + /> {/if} -{#if showNotificacaoModal && conversa()?.tipo === "sala_reuniao" && isAdmin?.data} - - e.target === e.currentTarget && (showNotificacaoModal = false)} - > -
e.stopPropagation()}> -
-

- - Enviar Notificação -

- -
-
-
{ - e.preventDefault(); - const formData = new FormData(e.currentTarget); - const titulo = formData.get("titulo") as string; - const mensagem = formData.get("mensagem") as string; +{#if showNotificacaoModal && conversa()?.tipo === 'sala_reuniao' && isAdmin?.data} + e.target === e.currentTarget && (showNotificacaoModal = false)} + > +
e.stopPropagation()}> +
+

+ + Enviar Notificação +

+ +
+
+ { + e.preventDefault(); + const formData = new FormData(e.currentTarget); + const titulo = formData.get('titulo') as string; + const mensagem = formData.get('mensagem') as string; - if (!titulo.trim() || !mensagem.trim()) { - alert("Preencha todos os campos"); - return; - } + if (!titulo.trim() || !mensagem.trim()) { + alert('Preencha todos os campos'); + return; + } - try { - const resultado = await client.mutation( - api.chat.enviarNotificacaoReuniao, - { - conversaId: conversaId as Id<"conversas">, - titulo: titulo.trim(), - mensagem: mensagem.trim(), - }, - ); + try { + const resultado = await client.mutation(api.chat.enviarNotificacaoReuniao, { + conversaId: conversaId as Id<'conversas'>, + titulo: titulo.trim(), + mensagem: mensagem.trim() + }); - if (resultado.sucesso) { - alert("Notificação enviada com sucesso!"); - showNotificacaoModal = false; - } else { - alert(resultado.erro || "Erro ao enviar notificação"); - } - } catch (error) { - const errorMessage = - error instanceof Error - ? error.message - : "Erro ao enviar notificação"; - alert(errorMessage); - } - }} - > -
- - -
-
- - -
-
- - -
- -
-
-
- -
-
+ if (resultado.sucesso) { + alert('Notificação enviada com sucesso!'); + showNotificacaoModal = false; + } else { + alert(resultado.erro || 'Erro ao enviar notificação'); + } + } catch (error) { + const errorMessage = + error instanceof Error ? error.message : 'Erro ao enviar notificação'; + alert(errorMessage); + } + }} + > +
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ +
+ {/if} diff --git a/apps/web/src/lib/components/chat/NewConversationModal.svelte b/apps/web/src/lib/components/chat/NewConversationModal.svelte index 3489113..0fb65a8 100644 --- a/apps/web/src/lib/components/chat/NewConversationModal.svelte +++ b/apps/web/src/lib/components/chat/NewConversationModal.svelte @@ -1,454 +1,417 @@ - e.target === e.currentTarget && onClose()} -> -
e.stopPropagation()} - > - -
-

- - Nova Conversa -

- -
+ +
+ +
+

+ + Nova Conversa +

+ +
- -
- - - -
+ +
+ + + +
- -
- {#if activeTab === "grupo"} - -
- - -
+ +
+ {#if activeTab === 'grupo'} + +
+
+ Nome do Grupo +
+ +
-
- -
- {:else if activeTab === "sala_reuniao"} - -
- - -
+
+
+ + Participantes {selectedUsers.length > 0 + ? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})` + : ''} + +
+
+ {:else if activeTab === 'sala_reuniao'} + +
+
+ Nome da Sala de Reunião + 👑 Você será o administrador +
+ +
-
- -
- {/if} +
+
+ + Participantes {selectedUsers.length > 0 + ? `(${selectedUsers.length} selecionado${selectedUsers.length > 1 ? 's' : ''})` + : ''} + +
+
+ {/if} - -
- - -
+ +
+ + +
- -
- {#if usuarios?.data && usuariosFiltrados().length > 0} - {#each usuariosFiltrados() as usuario (usuario._id)} - {@const isSelected = selectedUsers.includes(usuario._id)} - - {/each} - {:else if !usuarios?.data} -
- -

Carregando usuários...

-
- {:else} -
- -

- {searchQuery.trim() - ? "Nenhum usuário encontrado" - : "Nenhum usuário disponível"} -

- {#if searchQuery.trim()} -

- Tente buscar por nome, email ou matrícula -

- {/if} -
- {/if} -
-
+ + {#if activeTab === 'grupo' || activeTab === 'sala_reuniao'} +
+ +
+ {:else} + + + {/if} + + {/each} + {:else if !usuarios?.data} +
+ +

Carregando usuários...

+
+ {:else} +
+ +

+ {searchQuery.trim() ? 'Nenhum usuário encontrado' : 'Nenhum usuário disponível'} +

+ {#if searchQuery.trim()} +

+ Tente buscar por nome, email ou matrícula +

+ {/if} +
+ {/if} +
+
- - {#if activeTab === "grupo"} -
- - {#if selectedUsers.length < 2 && activeTab === "grupo"} -

- Selecione pelo menos 2 participantes -

- {/if} -
- {:else if activeTab === "sala_reuniao"} -
- - {#if selectedUsers.length < 1 && activeTab === "sala_reuniao"} -

- Selecione pelo menos 1 participante -

- {/if} -
- {/if} -
-
- -
+ + {#if activeTab === 'grupo'} +
+ + {#if selectedUsers.length < 2 && activeTab === 'grupo'} +

+ Selecione pelo menos 2 participantes +

+ {/if} +
+ {:else if activeTab === 'sala_reuniao'} +
+ + {#if selectedUsers.length < 1 && activeTab === 'sala_reuniao'} +

+ Selecione pelo menos 1 participante +

+ {/if} +
+ {/if} +
+
+ +
diff --git a/apps/web/src/lib/components/ti/AlertConfigModal.svelte b/apps/web/src/lib/components/ti/AlertConfigModal.svelte index 0551e90..76df517 100644 --- a/apps/web/src/lib/components/ti/AlertConfigModal.svelte +++ b/apps/web/src/lib/components/ti/AlertConfigModal.svelte @@ -1,502 +1,481 @@ -
- +
+ -

- ⚙️ Configuração de Alertas -

-

- Configure alertas personalizados para monitoramento do sistema -

+

⚙️ Configuração de Alertas

+

+ Configure alertas personalizados para monitoramento do sistema +

- - {#if !showForm} - - {/if} + + {#if !showForm} + + {/if} - - {#if showForm} -
-
-

- {editingAlertId ? "Editar Alerta" : "Novo Alerta"} -

+ + {#if showForm} +
+
+

+ {editingAlertId ? 'Editar Alerta' : 'Novo Alerta'} +

-
- -
- - -
+
+ +
+ + +
- -
- - -
+ +
+ + +
- -
- - -
+ +
+ + +
- -
- -
-
+ +
+ +
+
- -
Método de Notificação
-
- + +
Método de Notificação
+
+ - -
+ +
- -
- - - -
-

Preview do Alerta:

-

- Alertar quando {getMetricLabel(metricName)} for - {getOperatorLabel(operator)} a - {threshold} -

-
-
+ +
+ + + +
+

Preview do Alerta:

+

+ Alertar quando {getMetricLabel(metricName)} for + {getOperatorLabel(operator)} a + {threshold} +

+
+
- -
- - -
-
-
- {/if} + +
+ + +
+
+
+ {/if} - -
Alertas Configurados
+ +
Alertas Configurados
- {#if alertas.length > 0} -
- - - - - - - - - - - - {#each alertas as alerta} - - - - - - - - {/each} - -
MétricaCondiçãoStatusNotificaçõesAções
-
- {getMetricLabel(alerta.metricName)} -
- 		-
- {getOperatorLabel(alerta.operator)} - {alerta.threshold} -
- 		- {#if alerta.enabled} -
- - - - Ativo -
- {:else} -
- - - - Inativo -
- {/if} - 		-
- {#if alerta.notifyByChat} -
Chat
- {/if} - {#if alerta.notifyByEmail} -
Email
- {/if} -
- 		-
- - -
-
-
- {:else} -
- - - - Nenhum alerta configurado. Clique em "Novo Alerta" para criar um. -
- {/if} + {#if alertas.data && alertas.data.length > 0} +
+ + + + + + + + + + + + {#each alertas.data as alerta (alerta._id)} + + + + + + + + {/each} + +
MétricaCondiçãoStatusNotificaçõesAções
+
+ {getMetricLabel(alerta.metricName)} +
+ 		+
+ {getOperatorLabel(alerta.operator)} + {alerta.threshold} +
+ 		+ {#if alerta.enabled} +
+ + + + Ativo +
+ {:else} +
+ + + + Inativo +
+ {/if} + 		+
+ {#if alerta.notifyByChat} +
Chat
+ {/if} + {#if alerta.notifyByEmail} +
Email
+ {/if} +
+ 		+
+ + +
+
+
+ {:else} +
+ + + + Nenhum alerta configurado. Clique em "Novo Alerta" para criar um. +
+ {/if} -
- -
-
- - -
- -
+
+ +
+
+ + +
+ +
diff --git a/packages/backend/convex/monitoramento.ts b/packages/backend/convex/monitoramento.ts index 3d32bc3..6189bed 100644 --- a/packages/backend/convex/monitoramento.ts +++ b/packages/backend/convex/monitoramento.ts @@ -139,25 +139,6 @@ export const configurarAlerta = mutation({ */ export const listarAlertas = query({ 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) => { const alertas = await ctx.db.query('alertConfigurations').collect(); return alertas;