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

feat: add svelte-sonner dependency and enhance NotificationBell component

Browse Source 
- Added `svelte-sonner` to dependencies for improved notification handling.
- Refactored the `NotificationBell.svelte` component for better readability and maintainability, including code formatting and structure improvements.
- Updated `package.json` and `bun.lock` to reflect the new dependency.
This commit is contained in:
killer-cf
2025-10-30 14:55:51 -03:00
parent 1b751efc5e
commit 5469c50d90
8 changed files with 1393 additions and 559 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

354
apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
View File

@@ -9,65 +9,74 @@
const client = useConvexClient();
const usuarios = useQuery(api.usuarios.listar, {});
let filtroNome = $state("");
let filtroStatus = $state<"todos" | "ativo" | "bloqueado" | "inativo">("todos");
let filtroStatus = $state<"todos" | "ativo" | "bloqueado" | "inativo">(
"todos"
);
let usuarioSelecionado = $state<any>(null);
let modalAberto = $state(false);
let modalAcao = $state<"bloquear" | "desbloquear" | "reset" | "associar">("bloquear");
let modalAcao = $state<"bloquear" | "desbloquear" | "reset" | "associar">(
"bloquear"
);
let motivo = $state("");
let processando = $state(false);
// Modal de associar funcionário
let modalAssociarAberto = $state(false);
let usuarioParaAssociar = $state<any>(null);
let funcionarioSelecionadoId = $state<string>("");
let buscaFuncionario = $state("");
// Query de funcionários
const funcionarios = useQuery(api.funcionarios.list, {});
const funcionarios = useQuery(api.funcionarios.getAll, {});
// Usuários filtrados
const usuariosFiltrados = $derived.by(() => {
if (!usuarios?.data || !Array.isArray(usuarios.data)) return [];
return usuarios.data.filter(u => {
const matchNome = !filtroNome ||
return usuarios.data.filter((u) => {
const matchNome =
!filtroNome ||
u.nome.toLowerCase().includes(filtroNome.toLowerCase()) ||
u.matricula.includes(filtroNome) ||
u.email?.toLowerCase().includes(filtroNome.toLowerCase());
const matchStatus = filtroStatus === "todos" ||
const matchStatus =
filtroStatus === "todos" ||
(filtroStatus === "ativo" && u.ativo && !u.bloqueado) ||
(filtroStatus === "bloqueado" && u.bloqueado) ||
(filtroStatus === "inativo" && !u.ativo);
return matchNome && matchStatus;
});
});
// Funcionários filtrados (sem associação ou disponíveis)
const funcionariosFiltrados = $derived.by(() => {
if (!funcionarios?.data || !Array.isArray(funcionarios.data)) return [];
return funcionarios.data.filter(f => {
// Filtro por busca
const matchBusca = !buscaFuncionario ||
f.nome.toLowerCase().includes(buscaFuncionario.toLowerCase()) ||
f.cpf?.includes(buscaFuncionario) ||
f.matricula?.includes(buscaFuncionario);
return matchBusca;
}).sort((a, b) => a.nome.localeCompare(b.nome));
return funcionarios.data
.filter((f) => {
// Filtro por busca
const matchBusca =
!buscaFuncionario ||
f.nome.toLowerCase().includes(buscaFuncionario.toLowerCase()) ||
f.cpf?.includes(buscaFuncionario) ||
f.matricula?.includes(buscaFuncionario);
return matchBusca;
})
.sort((a, b) => a.nome.localeCompare(b.nome));
});
const stats = $derived.by(() => {
if (!usuarios?.data || !Array.isArray(usuarios.data)) return null;
return {
total: usuarios.data.length,
ativos: usuarios.data.filter(u => u.ativo && !u.bloqueado).length,
bloqueados: usuarios.data.filter(u => u.bloqueado).length,
inativos: usuarios.data.filter(u => !u.ativo).length
ativos: usuarios.data.filter((u) => u.ativo && !u.bloqueado).length,
bloqueados: usuarios.data.filter((u) => u.bloqueado).length,
inativos: usuarios.data.filter((u) => !u.ativo).length,
};
});
@@ -83,31 +92,31 @@
usuarioSelecionado = null;
motivo = "";
}
function abrirModalAssociar(usuario: any) {
usuarioParaAssociar = usuario;
funcionarioSelecionadoId = usuario.funcionarioId || "";
buscaFuncionario = "";
modalAssociarAberto = true;
}
function fecharModalAssociar() {
modalAssociarAberto = false;
usuarioParaAssociar = null;
funcionarioSelecionadoId = "";
buscaFuncionario = "";
}
async function associarFuncionario() {
if (!usuarioParaAssociar || !funcionarioSelecionadoId) return;
processando = true;
try {
await client.mutation(api.usuarios.associarFuncionario, {
usuarioId: usuarioParaAssociar._id as Id<"usuarios">,
funcionarioId: funcionarioSelecionadoId as Id<"funcionarios">
funcionarioId: funcionarioSelecionadoId as Id<"funcionarios">,
});
alert("Funcionário associado com sucesso!");
fecharModalAssociar();
} catch (error: any) {
@@ -116,18 +125,19 @@
processando = false;
}
}
async function desassociarFuncionario() {
if (!usuarioParaAssociar) return;
if (!confirm("Deseja realmente desassociar o funcionário deste usuário?")) return;
if (!confirm("Deseja realmente desassociar o funcionário deste usuário?"))
return;
processando = true;
try {
await client.mutation(api.usuarios.desassociarFuncionario, {
usuarioId: usuarioParaAssociar._id as Id<"usuarios">
usuarioId: usuarioParaAssociar._id as Id<"usuarios">,
});
alert("Funcionário desassociado com sucesso!");
fecharModalAssociar();
} catch (error: any) {
@@ -139,32 +149,32 @@
async function executarAcao() {
if (!usuarioSelecionado) return;
if (!authStore.usuario) {
alert("Usuário não autenticado");
return;
}
processando = true;
try {
if (modalAcao === "bloquear") {
await client.mutation(api.usuarios.bloquearUsuario, {
usuarioId: usuarioSelecionado._id as Id<"usuarios">,
motivo,
bloqueadoPorId: authStore.usuario._id as Id<"usuarios">
bloqueadoPorId: authStore.usuario._id as Id<"usuarios">,
});
} else if (modalAcao === "desbloquear") {
await client.mutation(api.usuarios.desbloquearUsuario, {
usuarioId: usuarioSelecionado._id as Id<"usuarios">,
desbloqueadoPorId: authStore.usuario._id as Id<"usuarios">
desbloqueadoPorId: authStore.usuario._id as Id<"usuarios">,
});
} else if (modalAcao === "reset") {
await client.mutation(api.usuarios.resetarSenhaUsuario, {
usuarioId: usuarioSelecionado._id as Id<"usuarios">,
resetadoPorId: authStore.usuario._id as Id<"usuarios">
resetadoPorId: authStore.usuario._id as Id<"usuarios">,
});
}
fecharModal();
} catch (error) {
console.error("Erro ao executar ação:", error);
@@ -183,8 +193,19 @@
<p class="text-base-content/60 mt-1">Gerenciar usuários do sistema</p>
</div>
<a href="/ti/usuarios/criar" 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
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>
Criar Usuário
</a>
@@ -220,20 +241,24 @@
<label class="label" for="buscar-usuario-input">
<span class="label-text">Buscar por nome, matrícula ou email</span>
</label>
<input
<input
id="buscar-usuario-input"
type="text"
type="text"
bind:value={filtroNome}
placeholder="Digite para buscar..."
placeholder="Digite para buscar..."
class="input input-bordered"
/>
</div>
<div class="form-control">
<label class="label" for="filtro-status-select">
<span class="label-text">Filtrar por status</span>
</label>
<select id="filtro-status-select" bind:value={filtroStatus} class="select select-bordered">
<select
id="filtro-status-select"
bind:value={filtroStatus}
class="select select-bordered"
>
<option value="todos">Todos</option>
<option value="ativo">Ativos</option>
<option value="bloqueado">Bloqueados</option>
@@ -250,7 +275,7 @@
<h2 class="card-title mb-4">
Usuários ({usuariosFiltrados.length})
</h2>
<div class="overflow-x-auto">
<table class="table table-zebra">
<thead>
@@ -270,67 +295,138 @@
<td>{usuario.nome}</td>
<td>{usuario.email || "-"}</td>
<td>
{#if usuario.funcionarioId}
{#if usuario.funcionario?._id}
<div class="badge badge-success gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
Associado
</div>
{:else}
<div class="badge badge-warning gap-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
Não associado
</div>
{/if}
</td>
<td>
<UserStatusBadge ativo={usuario.ativo} bloqueado={usuario.bloqueado} />
<UserStatusBadge
ativo={usuario.ativo}
bloqueado={usuario.bloqueado}
/>
</td>
<td>
<div class="flex gap-2 flex-wrap">
<!-- Botão Associar Funcionário -->
<button
<button
class="btn btn-sm btn-info"
onclick={() => abrirModalAssociar(usuario)}
title={usuario.funcionarioId ? "Alterar funcionário associado" : "Associar funcionário"}
title={usuario.funcionario?._id
? "Alterar funcionário associado"
: "Associar funcionário"}
>
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
{usuario.funcionarioId ? "Alterar" : "Associar"}
{usuario.funcionario?._id ? "Alterar" : "Associar"}
</button>
{#if usuario.bloqueado}
<button
<button
class="btn btn-sm btn-success"
onclick={() => abrirModal(usuario, "desbloquear")}
>
<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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" />
<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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"
/>
</svg>
Desbloquear
</button>
{:else}
<button
<button
class="btn btn-sm btn-error"
onclick={() => abrirModal(usuario, "bloquear")}
>
<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
Bloquear
</button>
{/if}
<button
<button
class="btn btn-sm btn-warning"
onclick={() => abrirModal(usuario, "reset")}
>
<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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
<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="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
/>
</svg>
Reset Senha
</button>
@@ -356,14 +452,17 @@
<div class="modal modal-open">
<div class="modal-box">
<h3 class="font-bold text-lg mb-4">
{modalAcao === "bloquear" ? "Bloquear Usuário" :
modalAcao === "desbloquear" ? "Desbloquear Usuário" :
"Resetar Senha"}
{modalAcao === "bloquear"
? "Bloquear Usuário"
: modalAcao === "desbloquear"
? "Desbloquear Usuário"
: "Resetar Senha"}
</h3>
<div class="mb-4">
<p class="text-base-content/80">
<strong>Usuário:</strong> {usuarioSelecionado?.nome} ({usuarioSelecionado?.matricula})
<strong>Usuário:</strong>
{usuarioSelecionado?.nome} ({usuarioSelecionado?.matricula})
</p>
</div>
@@ -372,10 +471,10 @@
<label class="label" for="motivo-bloqueio-textarea">
<span class="label-text">Motivo do bloqueio *</span>
</label>
<textarea
<textarea
id="motivo-bloqueio-textarea"
bind:value={motivo}
class="textarea textarea-bordered"
class="textarea textarea-bordered"
placeholder="Digite o motivo..."
rows="3"
></textarea>
@@ -384,22 +483,32 @@
{#if modalAcao === "reset"}
<div class="alert alert-info mb-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="stroke-current shrink-0 w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span>Uma senha temporária será gerada automaticamente.</span>
</div>
{/if}
<div class="modal-action">
<button
class="btn btn-ghost"
<button
class="btn btn-ghost"
onclick={fecharModal}
disabled={processando}
>
Cancelar
</button>
<button
<button
class="btn btn-primary"
onclick={executarAcao}
disabled={processando || (modalAcao === "bloquear" && !motivo.trim())}
@@ -421,21 +530,33 @@
{#if modalAssociarAberto && usuarioParaAssociar}
<div class="modal modal-open">
<div class="modal-box max-w-2xl">
<h3 class="font-bold text-lg mb-4">
Associar Funcionário ao Usuário
</h3>
<h3 class="font-bold text-lg mb-4">Associar Funcionário ao Usuário</h3>
<div class="mb-6">
<p class="text-base-content/80 mb-2">
<strong>Usuário:</strong> {usuarioParaAssociar.nome} ({usuarioParaAssociar.matricula})
<strong>Usuário:</strong>
{usuarioParaAssociar.nome} ({usuarioParaAssociar.matricula})
</p>
{#if usuarioParaAssociar.funcionarioId}
{#if usuarioParaAssociar.funcionario?._id}
<div class="alert alert-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="stroke-current shrink-0 w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span>Este usuário já possui um funcionário associado. Você pode alterá-lo ou desassociá-lo.</span>
<span
>Este usuário já possui um funcionário associado. Você pode
alterá-lo ou desassociá-lo.</span
>
</div>
{/if}
</div>
@@ -445,11 +566,11 @@
<label for="busca-funcionario" class="label">
<span class="label-text">Buscar Funcionário</span>
</label>
<input
<input
id="busca-funcionario"
type="text"
type="text"
bind:value={buscaFuncionario}
placeholder="Digite nome, CPF ou matrícula..."
placeholder="Digite nome, CPF ou matrícula..."
class="input input-bordered"
/>
</div>
@@ -459,21 +580,25 @@
<div class="label">
<span class="label-text">Selecione o Funcionário *</span>
</div>
<div class="border rounded-lg max-h-96 overflow-y-auto">
{#if funcionariosFiltrados.length === 0}
<div class="p-4 text-center text-base-content/60">
{buscaFuncionario ? "Nenhum funcionário encontrado com esse critério" : "Carregando funcionários..."}
{buscaFuncionario
? "Nenhum funcionário encontrado com esse critério"
: "Carregando funcionários..."}
</div>
{:else}
{#each funcionariosFiltrados as func}
<label class="flex items-center gap-3 p-3 hover:bg-base-200 cursor-pointer border-b last:border-b-0">
<input
type="radio"
name="funcionario"
<label
class="flex items-center gap-3 p-3 hover:bg-base-200 cursor-pointer border-b last:border-b-0"
>
<input
type="radio"
name="funcionario"
value={func._id}
bind:group={funcionarioSelecionadoId}
class="radio radio-primary"
class="radio radio-primary"
/>
<div class="flex-1">
<div class="font-semibold">{func.nome}</div>
@@ -484,7 +609,9 @@
{/if}
</div>
{#if func.descricaoCargo}
<div class="text-xs text-base-content/60">{func.descricaoCargo}</div>
<div class="text-xs text-base-content/60">
{func.descricaoCargo}
</div>
{/if}
</div>
</label>
@@ -495,16 +622,16 @@
<!-- Ações -->
<div class="modal-action">
<button
class="btn btn-ghost"
<button
class="btn btn-ghost"
onclick={fecharModalAssociar}
disabled={processando}
>
Cancelar
</button>
{#if usuarioParaAssociar.funcionarioId}
<button
<button
class="btn btn-error"
onclick={desassociarFuncionario}
disabled={processando}
@@ -515,8 +642,8 @@
Desassociar
</button>
{/if}
<button
<button
class="btn btn-primary"
onclick={associarFuncionario}
disabled={processando || !funcionarioSelecionadoId}
@@ -533,4 +660,3 @@
<div class="modal-backdrop" onclick={fecharModalAssociar}></div>
</div>
{/if}