feat: add user and template counters to notifications page header for improved visibility and user engagement

This commit is contained in:
2025-12-01 09:54:34 -03:00
parent 4c2d12f443
commit 4af566e54c

View File

@@ -95,6 +95,9 @@
return []; return [];
}); });
const totalUsuarios = $derived(usuarios.length);
const totalTemplates = $derived(templates.length);
function templateDisponivelParaCanal( function templateDisponivelParaCanal(
template: Doc<'templatesMensagens'>, template: Doc<'templatesMensagens'>,
canalAtual: 'chat' | 'email' | 'ambos' canalAtual: 'chat' | 'email' | 'ambos'
@@ -1140,34 +1143,54 @@
} }
</script> </script>
<div class="container mx-auto max-w-7xl px-4 py-6"> <div class="container mx-auto max-w-7xl px-4 py-8">
<!-- Header --> <div
<div class="mb-6 flex items-center justify-between"> class="rounded-2xl bg-base-100/80 shadow-xl border border-base-200/60 p-6 lg:p-8 space-y-6 backdrop-blur"
<div class="flex items-center gap-4"> >
<div class="bg-info/10 rounded-xl p-3"> <!-- Header -->
<svg <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
xmlns="http://www.w3.org/2000/svg" <div class="flex items-center gap-4">
class="text-info h-8 w-8" <div class="bg-gradient-to-br from-primary/15 via-info/10 to-secondary/10 rounded-2xl p-3">
fill="none" <svg
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
stroke="currentColor" class="text-primary h-9 w-9"
> fill="none"
<path viewBox="0 0 24 24"
stroke-linecap="round" stroke="currentColor"
stroke-linejoin="round" >
stroke-width="2" <path
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" stroke-linecap="round"
/> stroke-linejoin="round"
</svg> stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
</div>
<div>
<h1 class="text-base-content text-3xl font-bold">Notificações e Mensagens</h1>
<p class="text-base-content/60 mt-1 text-sm lg:text-base">
Envie avisos importantes por <span class="font-semibold">chat</span> e
<span class="font-semibold">email HTML padronizado</span> para os usuários do SGSE.
</p>
</div>
</div> </div>
<div> <div class="grid grid-cols-2 gap-3 text-sm">
<h1 class="text-base-content text-3xl font-bold">Notificações e Mensagens</h1> <div class="bg-base-200/80 rounded-xl px-4 py-3 text-right">
<p class="text-base-content/60 mt-1">Enviar notificações para usuários do sistema</p> <div class="text-base-content/60 text-xs">Usuários alcançáveis</div>
<div class="text-base-content text-lg font-semibold">
{totalUsuarios}
</div>
</div>
<div class="bg-base-200/80 rounded-xl px-4 py-3 text-right">
<div class="text-base-content/60 text-xs">Templates cadastrados</div>
<div class="text-base-content text-lg font-semibold">
{totalTemplates}
</div>
</div>
</div> </div>
</div> </div>
</div>
<!-- Mensagens de Feedback --> <!-- Mensagens de Feedback -->
{#if mensagem} {#if mensagem}
<div <div
class="alert mb-6 shadow-lg" class="alert mb-6 shadow-lg"