feat: add svelte-sonner dependency and enhance NotificationBell component
- 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:
@@ -5,18 +5,27 @@
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { ptBR } from "date-fns/locale";
|
||||
import { onMount } from "svelte";
|
||||
import { authStore } from "$lib/stores/auth.svelte";
|
||||
|
||||
// Queries e Client
|
||||
const client = useConvexClient();
|
||||
const notificacoesQuery = useQuery(api.chat.obterNotificacoes, { apenasPendentes: true });
|
||||
const notificacoesQuery = useQuery(api.chat.obterNotificacoes, {
|
||||
apenasPendentes: true,
|
||||
});
|
||||
const countQuery = useQuery(api.chat.contarNotificacoesNaoLidas, {});
|
||||
|
||||
let dropdownOpen = $state(false);
|
||||
let notificacoesFerias = $state<any[]>([]);
|
||||
|
||||
// Helpers para obter valores das queries
|
||||
const count = $derived((typeof countQuery === 'number' ? countQuery : countQuery?.data) ?? 0);
|
||||
const notificacoes = $derived((Array.isArray(notificacoesQuery) ? notificacoesQuery : notificacoesQuery?.data) ?? []);
|
||||
const count = $derived(
|
||||
(typeof countQuery === "number" ? countQuery : countQuery?.data) ?? 0
|
||||
);
|
||||
const notificacoes = $derived(
|
||||
(Array.isArray(notificacoesQuery)
|
||||
? notificacoesQuery
|
||||
: notificacoesQuery?.data) ?? []
|
||||
);
|
||||
|
||||
// Atualizar contador no store
|
||||
$effect(() => {
|
||||
@@ -27,11 +36,15 @@
|
||||
// Buscar notificações de férias
|
||||
async function buscarNotificacoesFerias() {
|
||||
try {
|
||||
const usuarioStore = await import("$lib/stores/auth.svelte").then(m => m.authStore);
|
||||
const usuarioStore = authStore;
|
||||
|
||||
if (usuarioStore.usuario?._id) {
|
||||
const notifsFerias = await client.query(api.ferias.obterNotificacoesNaoLidas, {
|
||||
usuarioId: usuarioStore.usuario._id as any,
|
||||
});
|
||||
const notifsFerias = await client.query(
|
||||
api.ferias.obterNotificacoesNaoLidas,
|
||||
{
|
||||
usuarioId: usuarioStore.usuario._id as any,
|
||||
}
|
||||
);
|
||||
notificacoesFerias = notifsFerias || [];
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -61,19 +74,25 @@
|
||||
await client.mutation(api.chat.marcarTodasNotificacoesLidas, {});
|
||||
// Marcar todas as notificações de férias como lidas
|
||||
for (const notif of notificacoesFerias) {
|
||||
await client.mutation(api.ferias.marcarComoLida, { notificacaoId: notif._id });
|
||||
await client.mutation(api.ferias.marcarComoLida, {
|
||||
notificacaoId: notif._id,
|
||||
});
|
||||
}
|
||||
dropdownOpen = false;
|
||||
await buscarNotificacoesFerias();
|
||||
}
|
||||
|
||||
async function handleClickNotificacao(notificacaoId: string) {
|
||||
await client.mutation(api.chat.marcarNotificacaoLida, { notificacaoId: notificacaoId as any });
|
||||
await client.mutation(api.chat.marcarNotificacaoLida, {
|
||||
notificacaoId: notificacaoId as any,
|
||||
});
|
||||
dropdownOpen = false;
|
||||
}
|
||||
|
||||
async function handleClickNotificacaoFerias(notificacaoId: string) {
|
||||
await client.mutation(api.ferias.marcarComoLida, { notificacaoId: notificacaoId as any });
|
||||
await client.mutation(api.ferias.marcarComoLida, {
|
||||
notificacaoId: notificacaoId as any,
|
||||
});
|
||||
await buscarNotificacoesFerias();
|
||||
dropdownOpen = false;
|
||||
// Redirecionar para a página de férias
|
||||
@@ -98,43 +117,6 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@keyframes badge-bounce {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-ring-subtle {
|
||||
0%, 100% {
|
||||
opacity: 0.1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bell-ring {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
10%, 30% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
20%, 40% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="dropdown dropdown-end notification-bell">
|
||||
<!-- Botão de Notificação ULTRA MODERNO (igual ao perfil) -->
|
||||
<button
|
||||
@@ -146,25 +128,39 @@
|
||||
aria-label="Notificações"
|
||||
>
|
||||
<!-- Efeito de brilho no hover -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-br from-white/0 to-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||
></div>
|
||||
|
||||
<!-- Anel de pulso sutil -->
|
||||
<div class="absolute inset-0 rounded-2xl" style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></div>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl"
|
||||
style="animation: pulse-ring-subtle 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
|
||||
></div>
|
||||
|
||||
<!-- Glow effect quando tem notificações -->
|
||||
{#if count && count > 0}
|
||||
<div class="absolute inset-0 rounded-2xl bg-error/30 blur-lg animate-pulse"></div>
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-error/30 blur-lg animate-pulse"
|
||||
></div>
|
||||
{/if}
|
||||
|
||||
|
||||
<!-- Ícone do sino PREENCHIDO moderno -->
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="w-7 h-7 text-white relative z-10 transition-all duration-300 group-hover:scale-110"
|
||||
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); animation: {count && count > 0 ? 'bell-ring 2s ease-in-out infinite' : 'none'};"
|
||||
style="filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); animation: {count &&
|
||||
count > 0
|
||||
? 'bell-ring 2s ease-in-out infinite'
|
||||
: 'none'};"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- Badge premium MODERNO com gradiente -->
|
||||
@@ -186,7 +182,9 @@
|
||||
class="dropdown-content z-50 mt-3 w-80 max-h-96 overflow-auto rounded-box bg-base-100 p-2 shadow-2xl border border-base-300"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-4 py-2 border-b border-base-300">
|
||||
<div
|
||||
class="flex items-center justify-between px-4 py-2 border-b border-base-300"
|
||||
>
|
||||
<h3 class="text-lg font-semibold">Notificações</h3>
|
||||
{#if count > 0}
|
||||
<button
|
||||
@@ -297,11 +295,22 @@
|
||||
<div class="flex items-start gap-3">
|
||||
<!-- Ícone -->
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-5 h-5 text-purple-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Conteúdo -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-base-content">
|
||||
@@ -311,7 +320,7 @@
|
||||
{formatarTempo(notificacao._creationTime)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Badge -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="badge badge-primary badge-xs"></div>
|
||||
@@ -346,3 +355,44 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes badge-bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-ring-subtle {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bell-ring {
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
10%,
|
||||
30% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
20%,
|
||||
40% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { browser } from "$app/environment";
|
||||
import { goto } from "$app/navigation";
|
||||
import type { Id } from "@sgse-app/backend/convex/betterAuth/_generated/dataModel";
|
||||
|
||||
interface Usuario {
|
||||
_id: string;
|
||||
matricula: string;
|
||||
nome: string;
|
||||
email: string;
|
||||
funcionarioId?: string;
|
||||
funcionarioId?: Id<"funcionarios">;
|
||||
role: {
|
||||
_id: string;
|
||||
nome: string;
|
||||
@@ -100,19 +101,25 @@ class AuthStore {
|
||||
// Importação dinâmica do convex para evitar problemas de SSR
|
||||
const { ConvexHttpClient } = await import("convex/browser");
|
||||
const { api } = await import("@sgse-app/backend/convex/_generated/api");
|
||||
|
||||
|
||||
const client = new ConvexHttpClient(import.meta.env.VITE_CONVEX_URL);
|
||||
client.setAuth(this.state.token);
|
||||
|
||||
const usuarioAtualizado = await client.query(api.usuarios.obterPerfil, {});
|
||||
|
||||
|
||||
const usuarioAtualizado = await client.query(
|
||||
api.usuarios.obterPerfil,
|
||||
{}
|
||||
);
|
||||
|
||||
if (usuarioAtualizado && this.state.usuario) {
|
||||
this.state.usuario = {
|
||||
...this.state.usuario,
|
||||
...usuarioAtualizado,
|
||||
};
|
||||
|
||||
localStorage.setItem("auth_usuario", JSON.stringify(this.state.usuario));
|
||||
|
||||
localStorage.setItem(
|
||||
"auth_usuario",
|
||||
JSON.stringify(this.state.usuario)
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erro ao atualizar perfil:", error);
|
||||
@@ -139,4 +146,3 @@ class AuthStore {
|
||||
}
|
||||
|
||||
export const authStore = new AuthStore();
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user