Merge remote-tracking branch 'origin/master' into feat-ajuste-acesso
This commit is contained in:
@@ -204,6 +204,80 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Notificações e Mensagens -->
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="p-3 bg-info/20 rounded-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-info"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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>
|
||||
<h2 class="card-title text-xl">Notificações e Mensagens</h2>
|
||||
</div>
|
||||
<p class="text-base-content/70 mb-4">
|
||||
Envie notificações para usuários do sistema via chat ou email. Configure templates de mensagens reutilizáveis.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/ti/notificacoes" class="btn btn-info">
|
||||
Acessar Painel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Monitorar SGSE -->
|
||||
<div class="card bg-gradient-to-br from-error/10 to-error/5 shadow-xl hover:shadow-2xl transition-all duration-300 hover:scale-105 border-2 border-error/20">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<div class="p-3 bg-gradient-to-br from-error/30 to-error/20 rounded-2xl shadow-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-10 w-10 text-error"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="card-title text-xl text-error">Monitorar SGSE</h2>
|
||||
</div>
|
||||
<p class="text-base-content/70 mb-4">
|
||||
Monitore em tempo real as métricas técnicas do sistema: CPU, memória, rede, usuários online e muito mais. Configure alertas personalizados.
|
||||
</p>
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="badge badge-error badge-sm">Tempo Real</div>
|
||||
<div class="badge badge-outline badge-sm">Alertas</div>
|
||||
<div class="badge badge-outline badge-sm">Relatórios</div>
|
||||
</div>
|
||||
<div class="card-actions justify-end">
|
||||
<a href="/ti/monitoramento" class="btn btn-error shadow-lg hover:shadow-error/30">
|
||||
<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="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
Monitorar Sistema
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Documentação -->
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-shadow">
|
||||
<div class="card-body">
|
||||
@@ -230,7 +304,7 @@
|
||||
Manuais, guias e documentação técnica do sistema para usuários e administradores.
|
||||
</p>
|
||||
<div class="card-actions justify-end">
|
||||
<button class="btn btn-primary" disabled>
|
||||
<button type="button" class="btn btn-primary" disabled>
|
||||
Em breve
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
let abaAtiva = $state<"atividades" | "logins">("atividades");
|
||||
let limite = $state(50);
|
||||
|
||||
// Queries
|
||||
const atividades = useQuery(api.logsAtividades.listarAtividades, { limite });
|
||||
const logins = useQuery(api.logsLogin.listarTodosLogins, { limite });
|
||||
// Queries com $derived para garantir reatividade
|
||||
const atividades = $derived(useQuery(api.logsAtividades.listarAtividades, { limite }));
|
||||
const logins = $derived(useQuery(api.logsLogin.listarTodosLogins, { limite }));
|
||||
|
||||
function formatarData(timestamp: number) {
|
||||
return new Date(timestamp).toLocaleString('pt-BR', {
|
||||
|
||||
@@ -187,42 +187,45 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Servidor -->
|
||||
<div class="form-control md:col-span-1">
|
||||
<label class="label">
|
||||
<label class="label" for="smtp-servidor">
|
||||
<span class="label-text font-medium">Servidor SMTP *</span>
|
||||
</label>
|
||||
<input
|
||||
id="smtp-servidor"
|
||||
type="text"
|
||||
bind:value={servidor}
|
||||
placeholder="smtp.exemplo.com"
|
||||
class="input input-bordered"
|
||||
/>
|
||||
<label class="label">
|
||||
<div class="label">
|
||||
<span class="label-text-alt">Ex: smtp.gmail.com, smtp.office365.com</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Porta -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<label class="label" for="smtp-porta">
|
||||
<span class="label-text font-medium">Porta *</span>
|
||||
</label>
|
||||
<input
|
||||
id="smtp-porta"
|
||||
type="number"
|
||||
bind:value={porta}
|
||||
placeholder="587"
|
||||
class="input input-bordered"
|
||||
/>
|
||||
<label class="label">
|
||||
<div class="label">
|
||||
<span class="label-text-alt">Comum: 587 (TLS), 465 (SSL), 25</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Usuário -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<label class="label" for="smtp-usuario">
|
||||
<span class="label-text font-medium">Usuário/Email *</span>
|
||||
</label>
|
||||
<input
|
||||
id="smtp-usuario"
|
||||
type="text"
|
||||
bind:value={usuario}
|
||||
placeholder="usuario@exemplo.com"
|
||||
@@ -232,16 +235,17 @@
|
||||
|
||||
<!-- Senha -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<label class="label" for="smtp-senha">
|
||||
<span class="label-text font-medium">Senha *</span>
|
||||
</label>
|
||||
<input
|
||||
id="smtp-senha"
|
||||
type="password"
|
||||
bind:value={senha}
|
||||
placeholder="••••••••"
|
||||
class="input input-bordered"
|
||||
/>
|
||||
<label class="label">
|
||||
<div class="label">
|
||||
<span class="label-text-alt text-warning">
|
||||
{#if configAtual?.data?.ativo}
|
||||
Deixe em branco para manter a senha atual
|
||||
@@ -249,15 +253,16 @@
|
||||
Digite a senha da conta de email
|
||||
{/if}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Remetente -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<label class="label" for="smtp-email-remetente">
|
||||
<span class="label-text font-medium">Email Remetente *</span>
|
||||
</label>
|
||||
<input
|
||||
id="smtp-email-remetente"
|
||||
type="email"
|
||||
bind:value={emailRemetente}
|
||||
placeholder="noreply@sgse.pe.gov.br"
|
||||
@@ -267,10 +272,11 @@
|
||||
|
||||
<!-- Nome Remetente -->
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<label class="label" for="smtp-nome-remetente">
|
||||
<span class="label-text font-medium">Nome Remetente *</span>
|
||||
</label>
|
||||
<input
|
||||
id="smtp-nome-remetente"
|
||||
type="text"
|
||||
bind:value={nomeRemetente}
|
||||
placeholder="SGSE - Sistema de Gestão"
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import SystemMonitorCardLocal from "$lib/components/ti/SystemMonitorCardLocal.svelte";
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto px-4 py-6 max-w-7xl">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-3 bg-gradient-to-br from-primary/20 to-primary/10 rounded-2xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-primary">Monitoramento SGSE</h1>
|
||||
<p class="text-base-content/60 mt-2 text-lg">Sistema de monitoramento técnico em tempo real</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/ti" class="btn btn-ghost">
|
||||
<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>
|
||||
|
||||
<!-- Card de Monitoramento -->
|
||||
<SystemMonitorCardLocal />
|
||||
</div>
|
||||
|
||||
@@ -35,23 +35,97 @@
|
||||
|
||||
processando = true;
|
||||
try {
|
||||
// TODO: Implementar envio de notificação
|
||||
console.log("Enviar notificação", {
|
||||
destinatarioId,
|
||||
canal,
|
||||
templateId: usarTemplate ? templateId : undefined,
|
||||
mensagem: !usarTemplate ? mensagemPersonalizada : undefined
|
||||
});
|
||||
const destinatario = usuarios?.data?.find(u => u._id === destinatarioId);
|
||||
|
||||
alert("Notificação enviada com sucesso!");
|
||||
if (!destinatario) {
|
||||
alert("Destinatário não encontrado");
|
||||
return;
|
||||
}
|
||||
|
||||
let resultadoChat = null;
|
||||
let resultadoEmail = null;
|
||||
|
||||
// ENVIAR PARA CHAT
|
||||
if (canal === "chat" || canal === "ambos") {
|
||||
const conversaResult = await client.mutation(
|
||||
api.chat.criarOuBuscarConversaIndividual,
|
||||
{ outroUsuarioId: destinatarioId as any }
|
||||
);
|
||||
|
||||
if (conversaResult.conversaId) {
|
||||
const mensagem = usarTemplate
|
||||
? templateSelecionado?.corpo || ""
|
||||
: mensagemPersonalizada;
|
||||
|
||||
resultadoChat = await client.mutation(api.chat.enviarMensagem, {
|
||||
conversaId: conversaResult.conversaId,
|
||||
conteudo: mensagem,
|
||||
tipo: "texto", // Tipo de mensagem
|
||||
permitirNotificacaoParaSiMesmo: true, // ✅ Permite notificação para si mesmo via painel admin
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ENVIAR PARA EMAIL
|
||||
if (canal === "email" || canal === "ambos") {
|
||||
if (!destinatario.email) {
|
||||
alert("Destinatário não possui email cadastrado");
|
||||
processando = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (usarTemplate && templateId) {
|
||||
// Usar template
|
||||
const template = templateSelecionado;
|
||||
if (template) {
|
||||
resultadoEmail = await client.mutation(api.email.enviarEmailComTemplate, {
|
||||
destinatario: destinatario.email,
|
||||
destinatarioId: destinatario._id as any,
|
||||
templateCodigo: template.codigo,
|
||||
variaveis: {
|
||||
nome: destinatario.nome,
|
||||
matricula: destinatario.matricula,
|
||||
},
|
||||
enviadoPorId: destinatario._id as any, // TODO: Pegar usuário logado
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Mensagem personalizada
|
||||
resultadoEmail = await client.mutation(api.email.enfileirarEmail, {
|
||||
destinatario: destinatario.email,
|
||||
destinatarioId: destinatario._id as any,
|
||||
assunto: "Notificação do Sistema",
|
||||
corpo: mensagemPersonalizada,
|
||||
enviadoPorId: destinatario._id as any, // TODO: Pegar usuário logado
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Feedback de sucesso
|
||||
let mensagem = "Notificação enviada com sucesso!";
|
||||
if (canal === "ambos") {
|
||||
if (resultadoChat && resultadoEmail) {
|
||||
mensagem = "✅ Notificação enviada para Chat e Email!";
|
||||
} else if (resultadoChat) {
|
||||
mensagem = "✅ Notificação enviada para Chat. Email falhou.";
|
||||
} else if (resultadoEmail) {
|
||||
mensagem = "✅ Notificação enviada para Email. Chat falhou.";
|
||||
}
|
||||
} else if (canal === "chat" && resultadoChat) {
|
||||
mensagem = "✅ Mensagem enviada no Chat!";
|
||||
} else if (canal === "email" && resultadoEmail) {
|
||||
mensagem = "✅ Email enfileirado para envio!";
|
||||
}
|
||||
|
||||
alert(mensagem);
|
||||
|
||||
// Limpar form
|
||||
destinatarioId = "";
|
||||
templateId = "";
|
||||
mensagemPersonalizada = "";
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
console.error("Erro ao enviar notificação:", error);
|
||||
alert("Erro ao enviar notificação");
|
||||
alert("Erro ao enviar notificação: " + (error.message || "Erro desconhecido"));
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
@@ -82,10 +156,10 @@
|
||||
|
||||
<!-- Destinatário -->
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<label class="label" for="destinatario-select">
|
||||
<span class="label-text font-medium">Destinatário *</span>
|
||||
</label>
|
||||
<select bind:value={destinatarioId} class="select select-bordered">
|
||||
<select id="destinatario-select" bind:value={destinatarioId} class="select select-bordered">
|
||||
<option value="">Selecione um usuário</option>
|
||||
{#if usuarios?.data}
|
||||
{#each usuarios.data as usuario}
|
||||
@@ -99,9 +173,9 @@
|
||||
|
||||
<!-- Canal -->
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<div class="label">
|
||||
<span class="label-text font-medium">Canal de Envio *</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<label class="label cursor-pointer">
|
||||
<input
|
||||
@@ -135,9 +209,9 @@
|
||||
|
||||
<!-- Tipo de Mensagem -->
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<div class="label">
|
||||
<span class="label-text font-medium">Tipo de Mensagem</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<label class="label cursor-pointer">
|
||||
<input
|
||||
@@ -163,10 +237,10 @@
|
||||
{#if usarTemplate}
|
||||
<!-- Template -->
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<label class="label" for="template-select">
|
||||
<span class="label-text font-medium">Template *</span>
|
||||
</label>
|
||||
<select bind:value={templateId} class="select select-bordered">
|
||||
<select id="template-select" bind:value={templateId} class="select select-bordered">
|
||||
<option value="">Selecione um template</option>
|
||||
{#if templates?.data}
|
||||
{#each templates.data as template}
|
||||
@@ -192,10 +266,11 @@
|
||||
{:else}
|
||||
<!-- Mensagem Personalizada -->
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<label class="label" for="mensagem-textarea">
|
||||
<span class="label-text font-medium">Mensagem *</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="mensagem-textarea"
|
||||
bind:value={mensagemPersonalizada}
|
||||
class="textarea textarea-bordered h-32"
|
||||
placeholder="Digite sua mensagem personalizada..."
|
||||
@@ -267,14 +342,15 @@
|
||||
</div>
|
||||
{#if template.tipo !== "sistema"}
|
||||
<div class="dropdown dropdown-end">
|
||||
<label tabindex="0" class="btn btn-ghost btn-xs">
|
||||
<button type="button" tabindex="0" class="btn btn-ghost btn-xs" aria-label="Opções do template">
|
||||
<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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
|
||||
</svg>
|
||||
</label>
|
||||
</button>
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-32">
|
||||
<li><button>Editar</button></li>
|
||||
<li><button class="text-error">Excluir</button></li>
|
||||
<li><button type="button">Editar</button></li>
|
||||
<li><button type="button" class="text-error">Excluir</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
<div class="card bg-base-100 shadow-xl mb-8">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-2xl mb-4">Ações Rápidas</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<a href="/ti/usuarios" 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" />
|
||||
@@ -104,13 +104,6 @@
|
||||
</svg>
|
||||
Ver Logs
|
||||
</a>
|
||||
|
||||
<a href="/ti/notificacoes" class="btn btn-info">
|
||||
<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="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>
|
||||
Enviar Notificação
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -412,8 +412,10 @@
|
||||
<td>
|
||||
<div class="flex gap-2 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-info btn-square tooltip"
|
||||
data-tip="Ver Detalhes"
|
||||
aria-label="Ver Detalhes"
|
||||
onclick={() => abrirDetalhes(perfil)}
|
||||
disabled={processando}
|
||||
>
|
||||
@@ -439,8 +441,10 @@
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-warning btn-square tooltip"
|
||||
data-tip="Editar"
|
||||
aria-label="Editar"
|
||||
onclick={() => abrirEditar(perfil)}
|
||||
disabled={processando}
|
||||
>
|
||||
@@ -460,8 +464,10 @@
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-success btn-square tooltip"
|
||||
data-tip="Clonar"
|
||||
aria-label="Clonar"
|
||||
onclick={() => clonarPerfil(perfil)}
|
||||
disabled={processando}
|
||||
>
|
||||
@@ -481,8 +487,10 @@
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-error btn-square tooltip"
|
||||
data-tip={perfil.numeroUsuarios > 0 ? "Não pode excluir - Perfil em uso" : "Excluir"}
|
||||
aria-label="Excluir"
|
||||
onclick={() => abrirModalExcluir(perfil)}
|
||||
disabled={processando || perfil.numeroUsuarios > 0}
|
||||
>
|
||||
@@ -921,10 +929,10 @@
|
||||
<span>Esta ação não pode ser desfeita!</span>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<button class="btn btn-ghost" onclick={fecharModalExcluir} disabled={processando}>
|
||||
<button type="button" class="btn btn-ghost" onclick={fecharModalExcluir} disabled={processando}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button class="btn btn-error" onclick={confirmarExclusao} disabled={processando}>
|
||||
<button type="button" class="btn btn-error" onclick={confirmarExclusao} disabled={processando}>
|
||||
{#if processando}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
|
||||
505
apps/web/src/routes/(dashboard)/ti/times/+page.svelte
Normal file
505
apps/web/src/routes/(dashboard)/ti/times/+page.svelte
Normal file
@@ -0,0 +1,505 @@
|
||||
<script lang="ts">
|
||||
import { useConvexClient, useQuery } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import { authStore } from "$lib/stores/auth.svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
// Queries
|
||||
const timesQuery = useQuery(api.times.listar, {});
|
||||
const usuariosQuery = useQuery(api.usuarios.listar, {});
|
||||
const funcionariosQuery = useQuery(api.funcionarios.getAll, {});
|
||||
|
||||
const times = $derived(timesQuery?.data || []);
|
||||
const usuarios = $derived(usuariosQuery?.data || []);
|
||||
const funcionarios = $derived(funcionariosQuery?.data || []);
|
||||
|
||||
// Estados
|
||||
let modoEdicao = $state(false);
|
||||
let timeEmEdicao = $state<any>(null);
|
||||
let mostrarModalMembros = $state(false);
|
||||
let timeParaMembros = $state<any>(null);
|
||||
let mostrarConfirmacaoExclusao = $state(false);
|
||||
let timeParaExcluir = $state<any>(null);
|
||||
let processando = $state(false);
|
||||
|
||||
// Form
|
||||
let formNome = $state("");
|
||||
let formDescricao = $state("");
|
||||
let formGestorId = $state("");
|
||||
let formCor = $state("#3B82F6");
|
||||
|
||||
// Membros
|
||||
let membrosDisponiveis = $derived(
|
||||
funcionarios.filter((f: any) => {
|
||||
// Verificar se o funcionário já está em algum time ativo
|
||||
const jaNaEquipe = timeParaMembros?.membros?.some((m: any) => m.funcionario?._id === f._id);
|
||||
return !jaNaEquipe;
|
||||
})
|
||||
);
|
||||
|
||||
// Cores predefinidas
|
||||
const coresDisponiveis = [
|
||||
"#3B82F6", // Blue
|
||||
"#10B981", // Green
|
||||
"#F59E0B", // Yellow
|
||||
"#EF4444", // Red
|
||||
"#8B5CF6", // Purple
|
||||
"#EC4899", // Pink
|
||||
"#14B8A6", // Teal
|
||||
"#F97316", // Orange
|
||||
];
|
||||
|
||||
function novoTime() {
|
||||
modoEdicao = true;
|
||||
timeEmEdicao = null;
|
||||
formNome = "";
|
||||
formDescricao = "";
|
||||
formGestorId = "";
|
||||
formCor = coresDisponiveis[Math.floor(Math.random() * coresDisponiveis.length)];
|
||||
}
|
||||
|
||||
function editarTime(time: any) {
|
||||
modoEdicao = true;
|
||||
timeEmEdicao = time;
|
||||
formNome = time.nome;
|
||||
formDescricao = time.descricao || "";
|
||||
formGestorId = time.gestorId;
|
||||
formCor = time.cor || "#3B82F6";
|
||||
}
|
||||
|
||||
function cancelarEdicao() {
|
||||
modoEdicao = false;
|
||||
timeEmEdicao = null;
|
||||
formNome = "";
|
||||
formDescricao = "";
|
||||
formGestorId = "";
|
||||
formCor = "#3B82F6";
|
||||
}
|
||||
|
||||
async function salvarTime() {
|
||||
if (!formNome.trim() || !formGestorId) {
|
||||
alert("Preencha todos os campos obrigatórios!");
|
||||
return;
|
||||
}
|
||||
|
||||
processando = true;
|
||||
try {
|
||||
if (timeEmEdicao) {
|
||||
await client.mutation(api.times.atualizar, {
|
||||
id: timeEmEdicao._id,
|
||||
nome: formNome,
|
||||
descricao: formDescricao || undefined,
|
||||
gestorId: formGestorId as any,
|
||||
cor: formCor,
|
||||
});
|
||||
} else {
|
||||
await client.mutation(api.times.criar, {
|
||||
nome: formNome,
|
||||
descricao: formDescricao || undefined,
|
||||
gestorId: formGestorId as any,
|
||||
cor: formCor,
|
||||
});
|
||||
}
|
||||
cancelarEdicao();
|
||||
} catch (e: any) {
|
||||
alert("Erro ao salvar: " + (e.message || e));
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
function confirmarExclusao(time: any) {
|
||||
timeParaExcluir = time;
|
||||
mostrarConfirmacaoExclusao = true;
|
||||
}
|
||||
|
||||
async function excluirTime() {
|
||||
if (!timeParaExcluir) return;
|
||||
|
||||
processando = true;
|
||||
try {
|
||||
await client.mutation(api.times.desativar, { id: timeParaExcluir._id });
|
||||
mostrarConfirmacaoExclusao = false;
|
||||
timeParaExcluir = null;
|
||||
} catch (e: any) {
|
||||
alert("Erro ao excluir: " + (e.message || e));
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function abrirGerenciarMembros(time: any) {
|
||||
const detalhes = await client.query(api.times.obterPorId, { id: time._id });
|
||||
timeParaMembros = detalhes;
|
||||
mostrarModalMembros = true;
|
||||
}
|
||||
|
||||
async function adicionarMembro(funcionarioId: string) {
|
||||
if (!timeParaMembros) return;
|
||||
|
||||
processando = true;
|
||||
try {
|
||||
await client.mutation(api.times.adicionarMembro, {
|
||||
timeId: timeParaMembros._id,
|
||||
funcionarioId: funcionarioId as any,
|
||||
});
|
||||
|
||||
// Recarregar detalhes do time
|
||||
const detalhes = await client.query(api.times.obterPorId, { id: timeParaMembros._id });
|
||||
timeParaMembros = detalhes;
|
||||
} catch (e: any) {
|
||||
alert("Erro: " + (e.message || e));
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removerMembro(membroId: string) {
|
||||
if (!confirm("Deseja realmente remover este membro do time?")) return;
|
||||
|
||||
processando = true;
|
||||
try {
|
||||
await client.mutation(api.times.removerMembro, { membroId: membroId as any });
|
||||
|
||||
// Recarregar detalhes do time
|
||||
const detalhes = await client.query(api.times.obterPorId, { id: timeParaMembros._id });
|
||||
timeParaMembros = detalhes;
|
||||
} catch (e: any) {
|
||||
alert("Erro: " + (e.message || e));
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
function fecharModalMembros() {
|
||||
mostrarModalMembros = false;
|
||||
timeParaMembros = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-6 max-w-7xl">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/ti" class="text-primary hover:underline">Tecnologia da Informação</a></li>
|
||||
<li>Gestão de Times</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="p-3 bg-blue-500/20 rounded-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Gestão de Times</h1>
|
||||
<p class="text-base-content/70">Organize funcionários em equipes e defina gestores</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-ghost gap-2" onclick={() => goto("/ti")}>
|
||||
<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
|
||||
</button>
|
||||
<button class="btn btn-primary gap-2" onclick={novoTime}>
|
||||
<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 Time
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formulário de Edição -->
|
||||
{#if modoEdicao}
|
||||
<div class="card bg-gradient-to-br from-primary/10 to-primary/5 shadow-xl mb-6 border-2 border-primary/20">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-xl mb-4">
|
||||
{timeEmEdicao ? "Editar Time" : "Novo Time"}
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="nome">
|
||||
<span class="label-text font-semibold">Nome do Time *</span>
|
||||
</label>
|
||||
<input
|
||||
id="nome"
|
||||
type="text"
|
||||
class="input input-bordered"
|
||||
bind:value={formNome}
|
||||
placeholder="Ex: Equipe Administrativa"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="gestor">
|
||||
<span class="label-text font-semibold">Gestor *</span>
|
||||
</label>
|
||||
<select id="gestor" class="select select-bordered" bind:value={formGestorId}>
|
||||
<option value="">Selecione um gestor</option>
|
||||
{#each usuarios as usuario}
|
||||
<option value={usuario._id}>{usuario.nome}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-control md:col-span-2">
|
||||
<label class="label" for="descricao">
|
||||
<span class="label-text font-semibold">Descrição</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="descricao"
|
||||
class="textarea textarea-bordered"
|
||||
bind:value={formDescricao}
|
||||
placeholder="Descrição opcional do time"
|
||||
rows="2"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label" for="cor">
|
||||
<span class="label-text font-semibold">Cor do Time</span>
|
||||
</label>
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
{#each coresDisponiveis as cor}
|
||||
<button
|
||||
type="button"
|
||||
class="w-10 h-10 rounded-lg border-2 transition-all hover:scale-110"
|
||||
style="background-color: {cor}; border-color: {formCor === cor ? '#000' : cor}"
|
||||
onclick={() => formCor = cor}
|
||||
aria-label="Selecionar cor"
|
||||
></button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-actions justify-end mt-6">
|
||||
<button class="btn btn-ghost" onclick={cancelarEdicao} disabled={processando}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button class="btn btn-primary" onclick={salvarTime} disabled={processando}>
|
||||
{processando ? "Salvando..." : "Salvar"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Lista de Times -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{#each times as time}
|
||||
{#if time.ativo}
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all border-l-4" style="border-color: {time.cor}">
|
||||
<div class="card-body">
|
||||
<div class="flex items-start justify-between">
|
||||
<h2 class="card-title text-lg">{time.nome}</h2>
|
||||
<div class="dropdown dropdown-end">
|
||||
<button tabindex="0" class="btn btn-ghost btn-sm btn-square" aria-label="Menu do time">
|
||||
<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 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow-xl bg-base-100 rounded-box w-52 border border-base-300">
|
||||
<li>
|
||||
<button type="button" onclick={() => editarTime(time)}>
|
||||
<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>
|
||||
Editar
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" onclick={() => abrirGerenciarMembros(time)}>
|
||||
<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 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
Gerenciar Membros
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" onclick={() => confirmarExclusao(time)} class="text-error">
|
||||
<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>
|
||||
Desativar
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-base-content/70 mb-3">{time.descricao || "Sem descrição"}</p>
|
||||
|
||||
<div class="divider my-2"></div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span><strong>Gestor:</strong> {time.gestor?.nome}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<span><strong>Membros:</strong> {time.totalMembros || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
{#if times.filter((t: any) => t.ativo).length === 0}
|
||||
<div class="col-span-full">
|
||||
<div class="alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info 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>Nenhum time cadastrado. Clique em "Novo Time" para começar.</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Modal de Gerenciar Membros -->
|
||||
{#if mostrarModalMembros && timeParaMembros}
|
||||
<dialog class="modal modal-open">
|
||||
<div class="modal-box max-w-4xl">
|
||||
<h3 class="font-bold text-2xl mb-4 flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full" style="background-color: {timeParaMembros.cor}"></div>
|
||||
{timeParaMembros.nome}
|
||||
</h3>
|
||||
|
||||
<!-- Membros Atuais -->
|
||||
<div class="mb-6">
|
||||
<h4 class="font-bold text-lg mb-3">Membros Atuais ({timeParaMembros.membros?.length || 0})</h4>
|
||||
|
||||
{#if timeParaMembros.membros && timeParaMembros.membros.length > 0}
|
||||
<div class="space-y-2 max-h-60 overflow-y-auto">
|
||||
{#each timeParaMembros.membros as membro}
|
||||
<div class="flex items-center justify-between p-3 bg-base-200 rounded-lg">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-primary text-primary-content rounded-full w-10">
|
||||
<span class="text-xs">{membro.funcionario?.nome.substring(0, 2).toUpperCase()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold">{membro.funcionario?.nome}</div>
|
||||
<div class="text-xs text-base-content/50">
|
||||
Desde {new Date(membro.dataEntrada).toLocaleDateString("pt-BR")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm btn-error btn-square"
|
||||
onclick={() => removerMembro(membro._id)}
|
||||
disabled={processando}
|
||||
aria-label="Remover membro"
|
||||
>
|
||||
<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="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<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>
|
||||
<span>Nenhum membro neste time ainda.</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Adicionar Membros -->
|
||||
<div>
|
||||
<h4 class="font-bold text-lg mb-3">Adicionar Membros</h4>
|
||||
|
||||
{#if membrosDisponiveis.length > 0}
|
||||
<div class="space-y-2 max-h-60 overflow-y-auto">
|
||||
{#each membrosDisponiveis as funcionario}
|
||||
<div class="flex items-center justify-between p-3 bg-base-200 rounded-lg hover:bg-base-300 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="avatar placeholder">
|
||||
<div class="bg-neutral text-neutral-content rounded-full w-10">
|
||||
<span class="text-xs">{funcionario.nome.substring(0, 2).toUpperCase()}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-semibold">{funcionario.nome}</div>
|
||||
<div class="text-xs text-base-content/50">{funcionario.matricula || "S/N"}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
onclick={() => adicionarMembro(funcionario._id)}
|
||||
disabled={processando}
|
||||
>
|
||||
Adicionar
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="alert">
|
||||
<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>Todos os funcionários já estão em times.</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<button class="btn" onclick={fecharModalMembros}>Fechar</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button type="button" onclick={fecharModalMembros} aria-label="Fechar modal">Fechar</button>
|
||||
</form>
|
||||
</dialog>
|
||||
{/if}
|
||||
|
||||
<!-- Modal de Confirmação de Exclusão -->
|
||||
{#if mostrarConfirmacaoExclusao && timeParaExcluir}
|
||||
<dialog class="modal modal-open">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg">Confirmar Desativação</h3>
|
||||
<p class="py-4">
|
||||
Tem certeza que deseja desativar o time <strong>{timeParaExcluir.nome}</strong>?
|
||||
Todos os membros serão removidos.
|
||||
</p>
|
||||
<div class="modal-action">
|
||||
<button class="btn" onclick={() => mostrarConfirmacaoExclusao = false} disabled={processando}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button class="btn btn-error" onclick={excluirTime} disabled={processando}>
|
||||
{processando ? "Processando..." : "Desativar"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button type="button" onclick={() => mostrarConfirmacaoExclusao = false} aria-label="Fechar modal">Fechar</button>
|
||||
</form>
|
||||
</dialog>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
@@ -14,9 +14,18 @@
|
||||
let filtroStatus = $state<"todos" | "ativo" | "bloqueado" | "inativo">("todos");
|
||||
let usuarioSelecionado = $state<any>(null);
|
||||
let modalAberto = $state(false);
|
||||
let modalAcao = $state<"bloquear" | "desbloquear" | "reset">("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, {});
|
||||
|
||||
// Usuários filtrados
|
||||
const usuariosFiltrados = $derived.by(() => {
|
||||
@@ -36,6 +45,21 @@
|
||||
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));
|
||||
});
|
||||
|
||||
const stats = $derived.by(() => {
|
||||
if (!usuarios?.data || !Array.isArray(usuarios.data)) return null;
|
||||
@@ -59,6 +83,59 @@
|
||||
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">
|
||||
});
|
||||
|
||||
alert("Funcionário associado com sucesso!");
|
||||
fecharModalAssociar();
|
||||
} catch (error: any) {
|
||||
alert("Erro ao associar funcionário: " + error.message);
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function desassociarFuncionario() {
|
||||
if (!usuarioParaAssociar) 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">
|
||||
});
|
||||
|
||||
alert("Funcionário desassociado com sucesso!");
|
||||
fecharModalAssociar();
|
||||
} catch (error: any) {
|
||||
alert("Erro ao desassociar funcionário: " + error.message);
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function executarAcao() {
|
||||
if (!usuarioSelecionado) return;
|
||||
@@ -140,10 +217,11 @@
|
||||
<div class="card-body">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<label class="label" for="buscar-usuario-input">
|
||||
<span class="label-text">Buscar por nome, matrícula ou email</span>
|
||||
</label>
|
||||
<input
|
||||
id="buscar-usuario-input"
|
||||
type="text"
|
||||
bind:value={filtroNome}
|
||||
placeholder="Digite para buscar..."
|
||||
@@ -152,10 +230,10 @@
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<label class="label" for="filtro-status-select">
|
||||
<span class="label-text">Filtrar por status</span>
|
||||
</label>
|
||||
<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>
|
||||
@@ -180,6 +258,7 @@
|
||||
<th>Matrícula</th>
|
||||
<th>Nome</th>
|
||||
<th>Email</th>
|
||||
<th>Funcionário</th>
|
||||
<th>Status</th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
@@ -190,11 +269,40 @@
|
||||
<td class="font-mono">{usuario.matricula}</td>
|
||||
<td>{usuario.nome}</td>
|
||||
<td>{usuario.email || "-"}</td>
|
||||
<td>
|
||||
{#if usuario.funcionarioId}
|
||||
<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>
|
||||
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>
|
||||
Não associado
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<UserStatusBadge ativo={usuario.ativo} bloqueado={usuario.bloqueado} />
|
||||
</td>
|
||||
<td>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<!-- Botão Associar Funcionário -->
|
||||
<button
|
||||
class="btn btn-sm btn-info"
|
||||
onclick={() => abrirModalAssociar(usuario)}
|
||||
title={usuario.funcionarioId ? "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>
|
||||
{usuario.funcionarioId ? "Alterar" : "Associar"}
|
||||
</button>
|
||||
|
||||
{#if usuario.bloqueado}
|
||||
<button
|
||||
class="btn btn-sm btn-success"
|
||||
@@ -261,10 +369,11 @@
|
||||
|
||||
{#if modalAcao === "bloquear"}
|
||||
<div class="form-control mb-4">
|
||||
<label class="label">
|
||||
<label class="label" for="motivo-bloqueio-textarea">
|
||||
<span class="label-text">Motivo do bloqueio *</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="motivo-bloqueio-textarea"
|
||||
bind:value={motivo}
|
||||
class="textarea textarea-bordered"
|
||||
placeholder="Digite o motivo..."
|
||||
@@ -302,7 +411,126 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="modal-backdrop" onclick={fecharModal}></div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Modal Associar Funcionário -->
|
||||
{#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>
|
||||
|
||||
<div class="mb-6">
|
||||
<p class="text-base-content/80 mb-2">
|
||||
<strong>Usuário:</strong> {usuarioParaAssociar.nome} ({usuarioParaAssociar.matricula})
|
||||
</p>
|
||||
|
||||
{#if usuarioParaAssociar.funcionarioId}
|
||||
<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>
|
||||
<span>Este usuário já possui um funcionário associado. Você pode alterá-lo ou desassociá-lo.</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Busca de Funcionários -->
|
||||
<div class="form-control mb-4">
|
||||
<label for="busca-funcionario" class="label">
|
||||
<span class="label-text">Buscar Funcionário</span>
|
||||
</label>
|
||||
<input
|
||||
id="busca-funcionario"
|
||||
type="text"
|
||||
bind:value={buscaFuncionario}
|
||||
placeholder="Digite nome, CPF ou matrícula..."
|
||||
class="input input-bordered"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Lista de Funcionários -->
|
||||
<div class="form-control mb-6">
|
||||
<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..."}
|
||||
</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"
|
||||
value={func._id}
|
||||
bind:group={funcionarioSelecionadoId}
|
||||
class="radio radio-primary"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<div class="font-semibold">{func.nome}</div>
|
||||
<div class="text-sm text-base-content/70">
|
||||
CPF: {func.cpf || "N/A"}
|
||||
{#if func.matricula}
|
||||
| Matrícula: {func.matricula}
|
||||
{/if}
|
||||
</div>
|
||||
{#if func.descricaoCargo}
|
||||
<div class="text-xs text-base-content/60">{func.descricaoCargo}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</label>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ações -->
|
||||
<div class="modal-action">
|
||||
<button
|
||||
class="btn btn-ghost"
|
||||
onclick={fecharModalAssociar}
|
||||
disabled={processando}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
{#if usuarioParaAssociar.funcionarioId}
|
||||
<button
|
||||
class="btn btn-error"
|
||||
onclick={desassociarFuncionario}
|
||||
disabled={processando}
|
||||
>
|
||||
{#if processando}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
Desassociar
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
onclick={associarFuncionario}
|
||||
disabled={processando || !funcionarioSelecionadoId}
|
||||
>
|
||||
{#if processando}
|
||||
<span class="loading loading-spinner loading-sm"></span>
|
||||
{/if}
|
||||
{usuarioParaAssociar.funcionarioId ? "Alterar" : "Associar"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="modal-backdrop" onclick={fecharModalAssociar}></div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user