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

feat: add tab navigation and content management for notifications page, allowing users to switch between Enviar Notificação, Gerenciar Templates, and Agendamentos for improved organization and usability

Browse Source
This commit is contained in:
deyvisonwanderley
2025-11-30 16:33:52 -03:00
parent 2fb7df8849
commit 4ab151bed7
11 changed files with 1370 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/web/src/routes/(dashboard)/ti/notificacoes/+page.svelte
View File

@@ -134,6 +134,9 @@
let processando = $state(false);
let criandoTemplates = $state(false);
let progressoEnvio = $state({ total: 0, enviados: 0, falhas: 0 });
// Aba ativa
let abaAtiva = $state<'enviar' | 'templates' | 'agendamentos'>('enviar');
// Estrutura de dados para logs de envio
type StatusLog = 'sucesso' | 'erro' | 'fila' | 'info' | 'enviando';
@@ -1173,6 +1176,36 @@
</div>
{/if}
<!-- Abas de Navegação -->
<div class="tabs tabs-boxed mb-6">
<button
type="button"
class="tab"
class:tab-active={abaAtiva === 'enviar'}
onclick={() => (abaAtiva = 'enviar')}
>
Enviar Notificação
</button>
<button
type="button"
class="tab"
class:tab-active={abaAtiva === 'templates'}
onclick={() => (abaAtiva = 'templates')}
>
Gerenciar Templates
</button>
<button
type="button"
class="tab"
class:tab-active={abaAtiva === 'agendamentos'}
onclick={() => (abaAtiva = 'agendamentos')}
>
Agendamentos
</button>
</div>
<!-- Conteúdo da Aba: Enviar Notificação -->
{#if abaAtiva === 'enviar'}
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
<!-- Formulário -->
<div class="card bg-base-100 shadow-xl">
@@ -1645,7 +1678,28 @@
</div>
</div>
</div>
{/if}
<!-- Conteúdo da Aba: Templates -->
{#if abaAtiva === 'templates'}
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<div class="mb-4 flex items-center justify-between">
<h2 class="card-title">Templates de Mensagens</h2>
<a href="/ti/notificacoes/templates" class="btn btn-primary">
Gerenciar Templates
</a>
</div>
<p class="text-base-content/60">
Acesse a página de gerenciamento de templates para criar, editar e excluir templates de emails e
mensagens.
</p>
</div>
</div>
{/if}
<!-- Conteúdo da Aba: Agendamentos -->
{#if abaAtiva === 'agendamentos'}
<!-- Histórico de Agendamentos -->
<div class="card bg-base-100 mt-6 shadow-xl">
<div class="card-body">
@@ -1864,6 +1918,7 @@
{/if}
</div>
</div>
{/if}
<!-- Info -->
<div class="alert alert-warning mt-6">

314
apps/web/src/routes/(dashboard)/ti/notificacoes/templates/+page.svelte Normal file
View File

@@ -0,0 +1,314 @@
<script lang="ts">
import { useQuery, useConvexClient } from 'convex-svelte';
import { api } from '@sgse-app/backend/convex/_generated/api';
import type { FunctionReference } from 'convex/server';
import type { Id, Doc } from '@sgse-app/backend/convex/_generated/dataModel';
const client = useConvexClient();
const currentUser = useQuery(api.auth.getCurrentUser as FunctionReference<'query'>);
// Queries
const templatesQuery = useQuery(api.templatesMensagens.listarTemplates, {});
const templates = $derived.by(() => {
if (templatesQuery === undefined || templatesQuery === null) {
return [];
}
if ('data' in templatesQuery && templatesQuery.data !== undefined) {
return Array.isArray(templatesQuery.data) ? templatesQuery.data : [];
}
if (Array.isArray(templatesQuery)) {
return templatesQuery;
}
return [];
});
// Estados
let templateEditando = $state<Doc<'templatesMensagens'> | null>(null);
let modalAberto = $state(false);
let filtroCategoria = $state<'todos' | 'email' | 'chat' | 'ambos'>('todos');
let buscaTexto = $state('');
let processando = $state(false);
let mensagem = $state<{ tipo: 'success' | 'error' | 'info'; texto: string } | null>(null);
// Filtrar templates
const templatesFiltrados = $derived.by(() => {
let filtrados = templates;
// Filtro por categoria
if (filtroCategoria !== 'todos') {
filtrados = filtrados.filter((t) => t.categoria === filtroCategoria);
}
// Filtro por busca
if (buscaTexto.trim()) {
const busca = buscaTexto.toLowerCase();
filtrados = filtrados.filter(
(t) =>
t.nome.toLowerCase().includes(busca) ||
t.codigo.toLowerCase().includes(busca) ||
t.titulo.toLowerCase().includes(busca)
);
}
return filtrados;
});
function mostrarMensagem(tipo: 'success' | 'error' | 'info', texto: string) {
mensagem = { tipo, texto };
setTimeout(() => {
mensagem = null;
}, 5000);
}
async function excluirTemplate(templateId: Id<'templatesMensagens'>) {
if (!currentUser.data) return;
if (!confirm('Tem certeza que deseja excluir este template?')) return;
try {
processando = true;
const resultado = await client.mutation(api.templatesMensagens.excluirTemplate, {
templateId,
excluidoPorId: currentUser.data._id,
});
if (resultado.sucesso) {
mostrarMensagem('success', 'Template excluído com sucesso!');
} else {
mostrarMensagem('error', resultado.erro || 'Erro ao excluir template');
}
} catch (error) {
const erro = error instanceof Error ? error.message : 'Erro desconhecido';
mostrarMensagem('error', `Erro ao excluir template: ${erro}`);
} finally {
processando = false;
}
}
function abrirModalEdicao(template: Doc<'templatesMensagens'>) {
templateEditando = template;
modalAberto = true;
}
function fecharModal() {
modalAberto = false;
templateEditando = null;
}
</script>
<div class="container mx-auto max-w-7xl px-4 py-6">
<!-- Header -->
<div class="mb-6 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="bg-info/10 rounded-xl p-3">
<svg
xmlns="http://www.w3.org/2000/svg"
class="text-info h-8 w-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
/>
</svg>
</div>
<div>
<h1 class="text-base-content text-3xl font-bold">Gerenciar Templates</h1>
<p class="text-base-content/60 mt-1">Criar, editar e excluir templates de emails e mensagens</p>
</div>
</div>
<a href="/ti/notificacoes" class="btn btn-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Voltar
</a>
</div>
<!-- Mensagens de Feedback -->
{#if mensagem}
<div
class="alert mb-6 shadow-lg"
class:alert-success={mensagem.tipo === 'success'}
class:alert-error={mensagem.tipo === 'error'}
class:alert-info={mensagem.tipo === 'info'}
>
<span class="font-medium">{mensagem.texto}</span>
<button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={() => (mensagem = null)}>
✕
</button>
</div>
{/if}
<!-- Filtros e Busca -->
<div class="card bg-base-100 mb-6 shadow-xl">
<div class="card-body">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Buscar</span>
</label>
<input
type="text"
bind:value={buscaTexto}
placeholder="Buscar por nome, código ou título..."
class="input input-bordered"
/>
</div>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Categoria</span>
</label>
<select bind:value={filtroCategoria} class="select select-bordered">
<option value="todos">Todas</option>
<option value="email">Email</option>
<option value="chat">Chat</option>
<option value="ambos">Ambos</option>
</select>
</div>
</div>
</div>
</div>
<!-- Lista de Templates -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<div class="mb-4 flex items-center justify-between">
<h2 class="card-title">Templates ({templatesFiltrados.length})</h2>
<a href="/ti/notificacoes/templates/novo" class="btn btn-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
Novo Template
</a>
</div>
{#if templatesFiltrados.length === 0}
<div class="py-10 text-center">
<p class="text-base-content/60">Nenhum template encontrado.</p>
</div>
{:else}
<div class="overflow-x-auto">
<table class="table-zebra table">
<thead>
<tr>
<th>Código</th>
<th>Nome</th>
<th>Tipo</th>
<th>Categoria</th>
<th>Variáveis</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
{#each templatesFiltrados as template (template._id)}
<tr>
<td>
<code class="badge badge-ghost">{template.codigo}</code>
</td>
<td>
<div class="font-medium">{template.nome}</div>
<div class="text-sm text-base-content/60">{template.titulo}</div>
</td>
<td>
{#if template.tipo === 'sistema'}
<span class="badge badge-info">Sistema</span>
{:else}
<span class="badge badge-success">Customizado</span>
{/if}
</td>
<td>
{#if template.categoria}
<span class="badge badge-outline">{template.categoria}</span>
{:else}
<span class="badge badge-ghost">-</span>
{/if}
</td>
<td>
{#if template.variaveis && template.variaveis.length > 0}
<div class="flex flex-wrap gap-1">
{#each template.variaveis.slice(0, 3) as var}
<span class="badge badge-sm">{{var}}</span>
{/each}
{#if template.variaveis.length > 3}
<span class="badge badge-sm">+{template.variaveis.length - 3}</span>
{/if}
</div>
{:else}
<span class="text-base-content/40">-</span>
{/if}
</td>
<td>
<div class="flex gap-2">
<a
href="/ti/notificacoes/templates/{template._id}"
class="btn btn-sm btn-ghost"
title="Editar"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
</a>
{#if template.tipo === 'customizado'}
<button
type="button"
class="btn btn-sm btn-ghost text-error"
onclick={() => excluirTemplate(template._id)}
disabled={processando}
title="Excluir"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
</button>
{/if}
</div>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
</div>
</div>
</div>