refactor: streamline absence management interface and enhance user experience
- Reorganized the absence management page to improve navigation and accessibility. - Introduced a menu structure for better categorization of absence-related options. - Updated the layout and styling for a more modern and user-friendly interface. - Enhanced the overall user experience by providing clearer descriptions and visual cues for actions related to absence management.
This commit is contained in:
@@ -1,214 +1,141 @@
|
||||
<script lang="ts">
|
||||
import { useQuery, useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
// Buscar todas as solicitações de ausências
|
||||
const ausenciasQuery = useQuery(api.ausencias.listarTodas, {});
|
||||
|
||||
const ausencias = $derived(ausenciasQuery?.data || []);
|
||||
|
||||
// Estatísticas
|
||||
const stats = $derived({
|
||||
total: ausencias.length,
|
||||
pendentes: ausencias.filter((a) => a.status === "aguardando_aprovacao").length,
|
||||
aprovadas: ausencias.filter((a) => a.status === "aprovado").length,
|
||||
reprovadas: ausencias.filter((a) => a.status === "reprovado").length,
|
||||
});
|
||||
|
||||
// Solicitações pendentes (últimas 5)
|
||||
const pendentes = $derived(
|
||||
ausencias
|
||||
.filter((a) => a.status === "aguardando_aprovacao")
|
||||
.slice(0, 5)
|
||||
);
|
||||
|
||||
function calcularDias(dataInicio: string, dataFim: string): number {
|
||||
const inicio = new Date(dataInicio);
|
||||
const fim = new Date(dataFim);
|
||||
const diff = fim.getTime() - inicio.getTime();
|
||||
return Math.ceil(diff / (1000 * 60 * 60 * 24)) + 1;
|
||||
}
|
||||
|
||||
function getStatusBadge(status: string) {
|
||||
const badges: Record<string, string> = {
|
||||
aguardando_aprovacao: "badge-warning",
|
||||
aprovado: "badge-success",
|
||||
reprovado: "badge-error",
|
||||
};
|
||||
return badges[status] || "badge-neutral";
|
||||
}
|
||||
|
||||
function getStatusTexto(status: string) {
|
||||
const textos: Record<string, string> = {
|
||||
aguardando_aprovacao: "Aguardando",
|
||||
aprovado: "Aprovado",
|
||||
reprovado: "Reprovado",
|
||||
};
|
||||
return textos[status] || status;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Secretaria Executiva</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<div class="p-3 bg-indigo-500/20 rounded-xl">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-8 w-8 text-indigo-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-primary">Secretaria Executiva</h1>
|
||||
<p class="text-base-content/70">Gestão executiva e administrativa</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card: Gestão de Ausências -->
|
||||
<div class="card bg-base-100 shadow-xl mb-6 border-t-4 border-orange-500">
|
||||
<div class="card-body">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="card-title text-2xl">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-7 w-7 text-orange-600"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
Gestão de Ausências
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline btn-primary"
|
||||
onclick={() => goto("/recursos-humanos/ausencias")}
|
||||
>
|
||||
Ver Todas
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Estatísticas -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<div class="stat bg-base-200 rounded-lg">
|
||||
<div class="stat-title">Total</div>
|
||||
<div class="stat-value text-orange-600">{stats.total}</div>
|
||||
<div class="stat-desc">Solicitações</div>
|
||||
</div>
|
||||
<div class="stat bg-warning/10 rounded-lg">
|
||||
<div class="stat-title">Pendentes</div>
|
||||
<div class="stat-value text-warning">{stats.pendentes}</div>
|
||||
<div class="stat-desc">Aguardando</div>
|
||||
</div>
|
||||
<div class="stat bg-success/10 rounded-lg">
|
||||
<div class="stat-title">Aprovadas</div>
|
||||
<div class="stat-value text-success">{stats.aprovadas}</div>
|
||||
<div class="stat-desc">Deferidas</div>
|
||||
</div>
|
||||
<div class="stat bg-error/10 rounded-lg">
|
||||
<div class="stat-title">Reprovadas</div>
|
||||
<div class="stat-value text-error">{stats.reprovadas}</div>
|
||||
<div class="stat-desc">Indeferidas</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lista de Pendentes -->
|
||||
<div>
|
||||
<h3 class="font-bold text-lg mb-3">Solicitações Pendentes de Aprovação</h3>
|
||||
{#if pendentes.length === 0}
|
||||
<div class="alert alert-success">
|
||||
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>Nenhuma solicitação pendente no momento.</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Funcionário</th>
|
||||
<th>Período</th>
|
||||
<th>Dias</th>
|
||||
<th>Status</th>
|
||||
<th>Solicitado em</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each pendentes as ausencia}
|
||||
<tr>
|
||||
<td class="font-semibold">
|
||||
{ausencia.funcionario?.nome || "N/A"}
|
||||
</td>
|
||||
<td>
|
||||
{new Date(ausencia.dataInicio).toLocaleDateString("pt-BR")} até{" "}
|
||||
{new Date(ausencia.dataFim).toLocaleDateString("pt-BR")}
|
||||
</td>
|
||||
<td class="font-bold">
|
||||
{calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias
|
||||
</td>
|
||||
<td>
|
||||
<div class={`badge ${getStatusBadge(ausencia.status)}`}>
|
||||
{getStatusTexto(ausencia.status)}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-xs">
|
||||
{new Date(ausencia.criadoEm).toLocaleDateString("pt-BR")}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if stats.pendentes > 5}
|
||||
<div class="mt-4 text-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-outline"
|
||||
onclick={() => goto("/recursos-humanos/ausencias")}
|
||||
>
|
||||
Ver todas as {stats.pendentes} pendentes
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script lang="ts">
|
||||
const menuItems = [
|
||||
{
|
||||
categoria: "Gestão de Ausências",
|
||||
descricao: "Gerencie solicitações de ausências e aprovações",
|
||||
icon: `<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>`,
|
||||
gradient: "from-orange-500/10 to-orange-600/20",
|
||||
accentColor: "text-orange-600",
|
||||
bgIcon: "bg-orange-500/20",
|
||||
opcoes: [
|
||||
{
|
||||
nome: "Gestão de Ausências",
|
||||
descricao: "Visualizar e gerenciar solicitações de ausências",
|
||||
href: "/secretaria-executiva/gestao-ausencias",
|
||||
icon: `<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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>`,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-4">
|
||||
<!-- Breadcrumb -->
|
||||
<div class="text-sm breadcrumbs mb-4">
|
||||
<ul>
|
||||
<li><a href="/" class="text-primary hover:underline">Dashboard</a></li>
|
||||
<li>Secretaria Executiva</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Cabeçalho -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-4xl font-bold text-primary mb-2">Secretaria Executiva</h1>
|
||||
<p class="text-lg text-base-content/70">
|
||||
Gerencie processos executivos e administrativos
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Menu de Opções -->
|
||||
<div class="space-y-8">
|
||||
{#each menuItems as categoria}
|
||||
<div class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300">
|
||||
<div class="card-body">
|
||||
<!-- Cabeçalho da Categoria -->
|
||||
<div class="flex items-start gap-6 mb-6">
|
||||
<div class="p-4 {categoria.bgIcon} rounded-2xl">
|
||||
<div class="{categoria.accentColor}">
|
||||
{@html categoria.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="card-title text-2xl mb-2 {categoria.accentColor}">
|
||||
{categoria.categoria}
|
||||
</h2>
|
||||
<p class="text-base-content/70">{categoria.descricao}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid de Opções -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{#each categoria.opcoes as opcao}
|
||||
<a
|
||||
href={opcao.href}
|
||||
class="group relative overflow-hidden rounded-xl border-2 border-base-300 bg-gradient-to-br {categoria.gradient} p-6 hover:border-primary hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
|
||||
>
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div class="p-3 bg-base-100 rounded-lg group-hover:bg-primary group-hover:text-white transition-colors duration-300">
|
||||
<div class="{categoria.accentColor} group-hover:text-white">
|
||||
{@html opcao.icon}
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 text-base-content/30 group-hover:text-primary transition-colors duration-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-base-content mb-2 group-hover:text-primary transition-colors duration-300">
|
||||
{opcao.nome}
|
||||
</h3>
|
||||
<p class="text-sm text-base-content/70 flex-1">
|
||||
{opcao.descricao}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Card de Ajuda -->
|
||||
<div class="alert alert-info shadow-lg mt-8">
|
||||
<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>
|
||||
<div>
|
||||
<h3 class="font-bold">Precisa de ajuda?</h3>
|
||||
<div class="text-sm">
|
||||
Entre em contato com o suporte técnico ou consulte a documentação do sistema para mais informações sobre as funcionalidades da Secretaria Executiva.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user