killer-cf
b503045b41
- Added the ProtectedRoute component to various dashboard pages to enforce authentication and role-based access control. - Updated allowedRoles and maxLevel parameters for specific routes to align with the new permission management structure. - Enhanced user experience by ensuring consistent access checks across the application.
837 lines
24 KiB
Svelte
837 lines
24 KiB
Svelte
<script lang="ts">
|
|
import { useQuery, useConvexClient } from 'convex-svelte';
|
|
import { api } from '@sgse-app/backend/convex/_generated/api';
|
|
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
|
|
import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
|
|
import StatsCard from '$lib/components/ti/StatsCard.svelte';
|
|
import { format } from 'date-fns';
|
|
import { ptBR } from 'date-fns/locale';
|
|
import { FileText, Clock, CheckCircle2, XCircle } from 'lucide-svelte';
|
|
|
|
type StatusSolicitacao = 'pendente' | 'aprovado' | 'rejeitado';
|
|
|
|
type SolicitacaoAcesso = {
|
|
_id: Id<'solicitacoesAcesso'>;
|
|
_creationTime: number;
|
|
nome: string;
|
|
matricula: string;
|
|
email: string;
|
|
telefone: string;
|
|
status: StatusSolicitacao;
|
|
dataSolicitacao: number;
|
|
dataResposta: number | null;
|
|
observacoes: string | null;
|
|
};
|
|
|
|
type FiltroStatus = 'todos' | 'pendente' | 'aprovado' | 'rejeitado';
|
|
|
|
type Mensagem = {
|
|
tipo: 'success' | 'error' | 'info';
|
|
texto: string;
|
|
};
|
|
|
|
const client = useConvexClient();
|
|
|
|
// Queries
|
|
const solicitacoesQuery = useQuery(api.solicitacoesAcesso.getAll, {});
|
|
|
|
// Estados
|
|
let filtroStatus = $state<FiltroStatus>('todos');
|
|
let busca = $state('');
|
|
let solicitacaoSelecionada = $state<SolicitacaoAcesso | null>(null);
|
|
let modalDetalhesAberto = $state(false);
|
|
let modalAprovarAberto = $state(false);
|
|
let modalRejeitarAberto = $state(false);
|
|
let observacoes = $state('');
|
|
let mensagem = $state<Mensagem | null>(null);
|
|
let processando = $state(false);
|
|
|
|
// Extrair dados das solicitações
|
|
const solicitacoes = $derived.by(() => {
|
|
if (solicitacoesQuery === undefined || solicitacoesQuery === null) {
|
|
return [];
|
|
}
|
|
|
|
if ('data' in solicitacoesQuery && solicitacoesQuery.data !== undefined) {
|
|
return Array.isArray(solicitacoesQuery.data) ? solicitacoesQuery.data : [];
|
|
}
|
|
|
|
if (Array.isArray(solicitacoesQuery)) {
|
|
return solicitacoesQuery;
|
|
}
|
|
|
|
return [];
|
|
});
|
|
|
|
const carregando = $derived.by(() => {
|
|
return solicitacoesQuery === undefined || solicitacoesQuery === null;
|
|
});
|
|
|
|
// Estatísticas
|
|
const stats = $derived.by(() => {
|
|
if (carregando) return null;
|
|
|
|
const total = solicitacoes.length;
|
|
const pendentes = solicitacoes.filter((s) => s.status === 'pendente').length;
|
|
const aprovadas = solicitacoes.filter((s) => s.status === 'aprovado').length;
|
|
const rejeitadas = solicitacoes.filter((s) => s.status === 'rejeitado').length;
|
|
|
|
return {
|
|
total,
|
|
pendentes,
|
|
aprovadas,
|
|
rejeitadas
|
|
};
|
|
});
|
|
|
|
// Filtrar e buscar solicitações
|
|
const solicitacoesFiltradas = $derived.by(() => {
|
|
let resultado = solicitacoes;
|
|
|
|
// Filtrar por status
|
|
if (filtroStatus !== 'todos') {
|
|
resultado = resultado.filter((s) => s.status === filtroStatus);
|
|
}
|
|
|
|
// Buscar por nome, matrícula ou email
|
|
if (busca.trim()) {
|
|
const termo = busca.toLowerCase().trim();
|
|
resultado = resultado.filter(
|
|
(s) =>
|
|
s.nome.toLowerCase().includes(termo) ||
|
|
s.matricula.toLowerCase().includes(termo) ||
|
|
s.email.toLowerCase().includes(termo)
|
|
);
|
|
}
|
|
|
|
// Ordenar por data (mais recente primeiro)
|
|
return resultado.sort((a, b) => b.dataSolicitacao - a.dataSolicitacao);
|
|
});
|
|
|
|
// Funções auxiliares
|
|
function formatarData(timestamp: number): string {
|
|
return format(new Date(timestamp), "dd/MM/yyyy 'às' HH:mm", { locale: ptBR });
|
|
}
|
|
|
|
function formatarDataRelativa(timestamp: number): string {
|
|
const agora = Date.now();
|
|
const diff = agora - timestamp;
|
|
const dias = Math.floor(diff / (1000 * 60 * 60 * 24));
|
|
const horas = Math.floor(diff / (1000 * 60 * 60));
|
|
const minutos = Math.floor(diff / (1000 * 60));
|
|
|
|
if (dias > 0) return `${dias} dia${dias > 1 ? 's' : ''} atrás`;
|
|
if (horas > 0) return `${horas} hora${horas > 1 ? 's' : ''} atrás`;
|
|
if (minutos > 0) return `${minutos} minuto${minutos > 1 ? 's' : ''} atrás`;
|
|
return 'Agora';
|
|
}
|
|
|
|
function getStatusBadge(status: StatusSolicitacao): string {
|
|
switch (status) {
|
|
case 'pendente':
|
|
return 'badge-warning';
|
|
case 'aprovado':
|
|
return 'badge-success';
|
|
case 'rejeitado':
|
|
return 'badge-error';
|
|
default:
|
|
return 'badge-neutral';
|
|
}
|
|
}
|
|
|
|
function getStatusTexto(status: StatusSolicitacao): string {
|
|
switch (status) {
|
|
case 'pendente':
|
|
return 'Pendente';
|
|
case 'aprovado':
|
|
return 'Aprovado';
|
|
case 'rejeitado':
|
|
return 'Rejeitado';
|
|
default:
|
|
return status;
|
|
}
|
|
}
|
|
|
|
// Funções de modal
|
|
function abrirDetalhes(solicitacao: SolicitacaoAcesso) {
|
|
solicitacaoSelecionada = solicitacao;
|
|
modalDetalhesAberto = true;
|
|
}
|
|
|
|
function fecharDetalhes() {
|
|
modalDetalhesAberto = false;
|
|
solicitacaoSelecionada = null;
|
|
}
|
|
|
|
function abrirAprovar(solicitacao: SolicitacaoAcesso) {
|
|
solicitacaoSelecionada = solicitacao;
|
|
observacoes = '';
|
|
modalAprovarAberto = true;
|
|
}
|
|
|
|
function fecharAprovar() {
|
|
modalAprovarAberto = false;
|
|
solicitacaoSelecionada = null;
|
|
observacoes = '';
|
|
}
|
|
|
|
function abrirRejeitar(solicitacao: SolicitacaoAcesso) {
|
|
solicitacaoSelecionada = solicitacao;
|
|
observacoes = '';
|
|
modalRejeitarAberto = true;
|
|
}
|
|
|
|
function fecharRejeitar() {
|
|
modalRejeitarAberto = false;
|
|
solicitacaoSelecionada = null;
|
|
observacoes = '';
|
|
}
|
|
|
|
// Funções de ação
|
|
async function aprovarSolicitacao() {
|
|
if (!solicitacaoSelecionada) return;
|
|
|
|
processando = true;
|
|
mensagem = null;
|
|
|
|
try {
|
|
await client.mutation(api.solicitacoesAcesso.aprovar, {
|
|
solicitacaoId: solicitacaoSelecionada._id,
|
|
observacoes: observacoes.trim() || undefined
|
|
});
|
|
|
|
mensagem = {
|
|
tipo: 'success',
|
|
texto: 'Solicitação aprovada com sucesso!'
|
|
};
|
|
|
|
fecharAprovar();
|
|
|
|
// Limpar mensagem após 3 segundos
|
|
setTimeout(() => {
|
|
mensagem = null;
|
|
}, 3000);
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : 'Erro ao aprovar solicitação';
|
|
mensagem = {
|
|
tipo: 'error',
|
|
texto: errorMessage
|
|
};
|
|
} finally {
|
|
processando = false;
|
|
}
|
|
}
|
|
|
|
async function rejeitarSolicitacao() {
|
|
if (!solicitacaoSelecionada) return;
|
|
|
|
processando = true;
|
|
mensagem = null;
|
|
|
|
try {
|
|
await client.mutation(api.solicitacoesAcesso.rejeitar, {
|
|
solicitacaoId: solicitacaoSelecionada._id,
|
|
observacoes: observacoes.trim() || undefined
|
|
});
|
|
|
|
mensagem = {
|
|
tipo: 'success',
|
|
texto: 'Solicitação rejeitada com sucesso!'
|
|
};
|
|
|
|
fecharRejeitar();
|
|
|
|
// Limpar mensagem após 3 segundos
|
|
setTimeout(() => {
|
|
mensagem = null;
|
|
}, 3000);
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : 'Erro ao rejeitar solicitação';
|
|
mensagem = {
|
|
tipo: 'error',
|
|
texto: errorMessage
|
|
};
|
|
} finally {
|
|
processando = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
|
|
<div class="container mx-auto max-w-7xl px-4 py-6">
|
|
<!-- Mensagem de Feedback -->
|
|
{#if mensagem}
|
|
<div class="alert alert-{mensagem.tipo} mb-6 shadow-lg">
|
|
{#if mensagem.tipo === 'success'}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6 shrink-0 stroke-current"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
{:else if mensagem.tipo === 'error'}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-6 w-6 shrink-0 stroke-current"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
{/if}
|
|
<span>{mensagem.texto}</span>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Header -->
|
|
<div class="mb-8 flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="bg-primary/10 rounded-xl p-3">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-primary h-8 w-8"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-base-content text-3xl font-bold">Solicitações de Acesso</h1>
|
|
<p class="text-base-content/60 mt-1">
|
|
Gerencie e analise solicitações de acesso ao sistema
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Estatísticas -->
|
|
{#if stats}
|
|
<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
|
<StatsCard
|
|
title="Total de Solicitações"
|
|
value={stats.total}
|
|
Icon={FileText}
|
|
color="primary"
|
|
/>
|
|
|
|
<StatsCard
|
|
title="Pendentes"
|
|
value={stats.pendentes}
|
|
description={stats.total > 0
|
|
? ((stats.pendentes / stats.total) * 100).toFixed(1) + '% do total'
|
|
: '0% do total'}
|
|
Icon={Clock}
|
|
color="warning"
|
|
/>
|
|
|
|
<StatsCard
|
|
title="Aprovadas"
|
|
value={stats.aprovadas}
|
|
description={stats.total > 0
|
|
? ((stats.aprovadas / stats.total) * 100).toFixed(1) + '% do total'
|
|
: '0% do total'}
|
|
Icon={CheckCircle2}
|
|
color="success"
|
|
/>
|
|
|
|
<StatsCard
|
|
title="Rejeitadas"
|
|
value={stats.rejeitadas}
|
|
description={stats.total > 0
|
|
? ((stats.rejeitadas / stats.total) * 100).toFixed(1) + '% do total'
|
|
: '0% do total'}
|
|
Icon={XCircle}
|
|
color="error"
|
|
/>
|
|
</div>
|
|
{:else}
|
|
<div class="flex items-center justify-center py-20">
|
|
<span class="loading loading-spinner loading-lg text-primary"></span>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Filtros e Busca -->
|
|
<div class="card bg-base-100 mb-6 shadow-xl">
|
|
<div class="card-body">
|
|
<!-- Tabs de Status -->
|
|
<div class="tabs tabs-boxed bg-base-200 mb-4 p-2">
|
|
<button
|
|
class="tab {filtroStatus === 'todos' ? 'tab-active' : ''}"
|
|
onclick={() => (filtroStatus = 'todos')}
|
|
>
|
|
Todas
|
|
</button>
|
|
<button
|
|
class="tab {filtroStatus === 'pendente' ? 'tab-active' : ''}"
|
|
onclick={() => (filtroStatus = 'pendente')}
|
|
>
|
|
Pendentes
|
|
</button>
|
|
<button
|
|
class="tab {filtroStatus === 'aprovado' ? 'tab-active' : ''}"
|
|
onclick={() => (filtroStatus = 'aprovado')}
|
|
>
|
|
Aprovadas
|
|
</button>
|
|
<button
|
|
class="tab {filtroStatus === 'rejeitado' ? 'tab-active' : ''}"
|
|
onclick={() => (filtroStatus = 'rejeitado')}
|
|
>
|
|
Rejeitadas
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Campo de Busca -->
|
|
<div class="form-control">
|
|
<label class="label">
|
|
<span class="label-text font-semibold">Buscar por nome, matrícula ou e-mail</span>
|
|
</label>
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Digite para buscar..."
|
|
class="input input-bordered w-full pl-10"
|
|
bind:value={busca}
|
|
/>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-base-content/50 absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lista de Solicitações -->
|
|
{#if carregando}
|
|
<div class="flex items-center justify-center py-20">
|
|
<span class="loading loading-spinner loading-lg text-primary"></span>
|
|
</div>
|
|
{:else if solicitacoesFiltradas.length === 0}
|
|
<div class="card bg-base-100 shadow-xl">
|
|
<div class="card-body py-20 text-center">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-base-content/30 mx-auto mb-4 h-16 w-16"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
<h3 class="text-base-content/70 mb-2 text-xl font-semibold">
|
|
Nenhuma solicitação encontrada
|
|
</h3>
|
|
<p class="text-base-content/50">
|
|
{#if busca.trim() || filtroStatus !== 'todos'}
|
|
Tente ajustar os filtros ou a busca.
|
|
{:else}
|
|
Ainda não há solicitações de acesso cadastradas.
|
|
{/if}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="grid grid-cols-1 gap-4">
|
|
{#each solicitacoesFiltradas as solicitacao}
|
|
<div class="card bg-base-100 shadow-xl transition-shadow hover:shadow-2xl">
|
|
<div class="card-body">
|
|
<div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div class="flex-1">
|
|
<div class="mb-2 flex items-center gap-3">
|
|
<h3 class="text-base-content text-xl font-bold">{solicitacao.nome}</h3>
|
|
<span class="badge {getStatusBadge(solicitacao.status)} badge-lg">
|
|
{getStatusTexto(solicitacao.status)}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="text-base-content/70 grid grid-cols-1 gap-2 text-sm md:grid-cols-3">
|
|
<div class="flex items-center gap-2">
|
|
<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="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
|
|
/>
|
|
</svg>
|
|
<span class="font-semibold">Matrícula:</span>
|
|
<span>{solicitacao.matricula}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
<span class="font-semibold">E-mail:</span>
|
|
<span>{solicitacao.email}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
|
|
/>
|
|
</svg>
|
|
<span class="font-semibold">Telefone:</span>
|
|
<span>{solicitacao.telefone}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-base-content/50 mt-3 text-xs">
|
|
<span class="font-semibold">Solicitado em:</span>
|
|
{formatarData(solicitacao.dataSolicitacao)} ({formatarDataRelativa(
|
|
solicitacao.dataSolicitacao
|
|
)})
|
|
{#if solicitacao.dataResposta}
|
|
<span class="ml-4 font-semibold">Processado em:</span>
|
|
{formatarData(solicitacao.dataResposta)}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<button
|
|
class="btn btn-sm btn-outline btn-primary"
|
|
onclick={() => abrirDetalhes(solicitacao)}
|
|
>
|
|
<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 12a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
|
|
/>
|
|
</svg>
|
|
Ver Detalhes
|
|
</button>
|
|
|
|
{#if solicitacao.status === 'pendente'}
|
|
<button
|
|
class="btn btn-sm btn-success"
|
|
onclick={() => abrirAprovar(solicitacao)}
|
|
>
|
|
<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="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
Aprovar
|
|
</button>
|
|
|
|
<button class="btn btn-sm btn-error" onclick={() => abrirRejeitar(solicitacao)}>
|
|
<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>
|
|
Rejeitar
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Modal de Detalhes -->
|
|
{#if modalDetalhesAberto && solicitacaoSelecionada}
|
|
<dialog class="modal modal-open">
|
|
<div class="modal-box max-w-2xl">
|
|
<h3 class="mb-4 text-2xl font-bold">Detalhes da Solicitação</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div class="mb-4 flex items-center gap-3">
|
|
<span class="badge {getStatusBadge(solicitacaoSelecionada.status)} badge-lg">
|
|
{getStatusTexto(solicitacaoSelecionada.status)}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text font-semibold">Nome Completo</span>
|
|
</label>
|
|
<div class="input input-bordered">{solicitacaoSelecionada.nome}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text font-semibold">Matrícula</span>
|
|
</label>
|
|
<div class="input input-bordered">{solicitacaoSelecionada.matricula}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text font-semibold">E-mail</span>
|
|
</label>
|
|
<div class="input input-bordered">{solicitacaoSelecionada.email}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text font-semibold">Telefone</span>
|
|
</label>
|
|
<div class="input input-bordered">{solicitacaoSelecionada.telefone}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text font-semibold">Data da Solicitação</span>
|
|
</label>
|
|
<div class="input input-bordered">
|
|
{formatarData(solicitacaoSelecionada.dataSolicitacao)}
|
|
</div>
|
|
</div>
|
|
|
|
{#if solicitacaoSelecionada.dataResposta}
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text font-semibold">Data de Processamento</span>
|
|
</label>
|
|
<div class="input input-bordered">
|
|
{formatarData(solicitacaoSelecionada.dataResposta)}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if solicitacaoSelecionada.observacoes}
|
|
<div>
|
|
<label class="label">
|
|
<span class="label-text font-semibold">Observações</span>
|
|
</label>
|
|
<div class="textarea textarea-bordered min-h-24">
|
|
{solicitacaoSelecionada.observacoes}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="modal-action">
|
|
<button class="btn" onclick={fecharDetalhes}>Fechar</button>
|
|
</div>
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button onclick={fecharDetalhes}>fechar</button>
|
|
</form>
|
|
</dialog>
|
|
{/if}
|
|
|
|
<!-- Modal de Aprovar -->
|
|
{#if modalAprovarAberto && solicitacaoSelecionada}
|
|
<dialog class="modal modal-open">
|
|
<div class="modal-box">
|
|
<h3 class="mb-4 text-2xl font-bold">Aprovar Solicitação</h3>
|
|
|
|
<div class="mb-4">
|
|
<p class="text-base-content/70 mb-2">
|
|
Você está prestes a aprovar a solicitação de acesso de <strong
|
|
>{solicitacaoSelecionada.nome}</strong
|
|
>.
|
|
</p>
|
|
<p class="text-base-content/60 text-sm">
|
|
Após aprovar, o sistema permitirá que esta pessoa solicite acesso ao sistema.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="form-control mb-4">
|
|
<label class="label">
|
|
<span class="label-text font-semibold">Observações (opcional)</span>
|
|
</label>
|
|
<textarea
|
|
class="textarea textarea-bordered"
|
|
placeholder="Adicione observações sobre a aprovação..."
|
|
bind:value={observacoes}
|
|
rows="3"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="modal-action">
|
|
<button class="btn" onclick={fecharAprovar} disabled={processando}> Cancelar </button>
|
|
<button class="btn btn-success" onclick={aprovarSolicitacao} disabled={processando}>
|
|
{#if processando}
|
|
<span class="loading loading-spinner loading-sm"></span>
|
|
Processando...
|
|
{:else}
|
|
<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="M5 13l4 4L19 7"
|
|
/>
|
|
</svg>
|
|
Confirmar Aprovação
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button onclick={fecharAprovar}>fechar</button>
|
|
</form>
|
|
</dialog>
|
|
{/if}
|
|
|
|
<!-- Modal de Rejeitar -->
|
|
{#if modalRejeitarAberto && solicitacaoSelecionada}
|
|
<dialog class="modal modal-open">
|
|
<div class="modal-box">
|
|
<h3 class="mb-4 text-2xl font-bold">Rejeitar Solicitação</h3>
|
|
|
|
<div class="mb-4">
|
|
<p class="text-base-content/70 mb-2">
|
|
Você está prestes a rejeitar a solicitação de acesso de <strong
|
|
>{solicitacaoSelecionada.nome}</strong
|
|
>.
|
|
</p>
|
|
<p class="text-base-content/60 text-sm">
|
|
Esta ação não pode ser desfeita. Recomendamos adicionar um motivo para a rejeição.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="form-control mb-4">
|
|
<label class="label">
|
|
<span class="label-text font-semibold">Motivo da Rejeição (recomendado)</span>
|
|
</label>
|
|
<textarea
|
|
class="textarea textarea-bordered"
|
|
placeholder="Descreva o motivo da rejeição..."
|
|
bind:value={observacoes}
|
|
rows="3"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div class="modal-action">
|
|
<button class="btn" onclick={fecharRejeitar} disabled={processando}> Cancelar </button>
|
|
<button class="btn btn-error" onclick={rejeitarSolicitacao} disabled={processando}>
|
|
{#if processando}
|
|
<span class="loading loading-spinner loading-sm"></span>
|
|
Processando...
|
|
{:else}
|
|
<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="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
Confirmar Rejeição
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button onclick={fecharRejeitar}>fechar</button>
|
|
</form>
|
|
</dialog>
|
|
{/if}
|
|
</div>
|
|
</ProtectedRoute>
|