feat: implement absence management features in the dashboard
- Added functionality for managing absence requests, including listing, approving, and rejecting requests. - Enhanced the user interface to display statistics and pending requests for better oversight. - Updated backend schema to support absence requests and notifications, ensuring data integrity and efficient handling. - Integrated new components for absence request forms and approval workflows, improving user experience and administrative efficiency.
This commit is contained in:
398
apps/web/src/lib/components/AprovarAusencias.svelte
Normal file
398
apps/web/src/lib/components/AprovarAusencias.svelte
Normal file
@@ -0,0 +1,398 @@
|
||||
<script lang="ts">
|
||||
import { useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import type { Id, Doc } from "@sgse-app/backend/convex/_generated/dataModel";
|
||||
import ErrorModal from "./ErrorModal.svelte";
|
||||
|
||||
type SolicitacaoAusencia = Doc<"solicitacoesAusencias"> & {
|
||||
funcionario?: Doc<"funcionarios"> | null;
|
||||
gestor?: Doc<"usuarios"> | null;
|
||||
time?: Doc<"times"> | null;
|
||||
};
|
||||
|
||||
interface Props {
|
||||
solicitacao: SolicitacaoAusencia;
|
||||
gestorId: Id<"usuarios">;
|
||||
onSucesso?: () => void;
|
||||
onCancelar?: () => void;
|
||||
}
|
||||
|
||||
let { solicitacao, gestorId, onSucesso, onCancelar }: Props = $props();
|
||||
|
||||
const client = useConvexClient();
|
||||
|
||||
let motivoReprovacao = $state("");
|
||||
let processando = $state(false);
|
||||
let erro = $state("");
|
||||
let mostrarModalErro = $state(false);
|
||||
let mensagemErroModal = $state("");
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const totalDias = $derived(
|
||||
calcularDias(solicitacao.dataInicio, solicitacao.dataFim)
|
||||
);
|
||||
|
||||
async function aprovar() {
|
||||
try {
|
||||
processando = true;
|
||||
erro = "";
|
||||
mostrarModalErro = false;
|
||||
|
||||
await client.mutation(api.ausencias.aprovar, {
|
||||
solicitacaoId: solicitacao._id,
|
||||
gestorId: gestorId,
|
||||
});
|
||||
|
||||
if (onSucesso) onSucesso();
|
||||
} catch (e) {
|
||||
const mensagemErro = e instanceof Error ? e.message : String(e);
|
||||
|
||||
// Verificar se é erro de permissão
|
||||
if (mensagemErro.includes("permissão") || mensagemErro.includes("permission") || mensagemErro.includes("Você não tem permissão")) {
|
||||
mensagemErroModal = "Você não tem permissão para aprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.";
|
||||
mostrarModalErro = true;
|
||||
} else {
|
||||
erro = mensagemErro;
|
||||
}
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function reprovar() {
|
||||
if (!motivoReprovacao.trim()) {
|
||||
erro = "Informe o motivo da reprovação";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
processando = true;
|
||||
erro = "";
|
||||
mostrarModalErro = false;
|
||||
|
||||
await client.mutation(api.ausencias.reprovar, {
|
||||
solicitacaoId: solicitacao._id,
|
||||
gestorId: gestorId,
|
||||
motivoReprovacao: motivoReprovacao.trim(),
|
||||
});
|
||||
|
||||
if (onSucesso) onSucesso();
|
||||
} catch (e) {
|
||||
const mensagemErro = e instanceof Error ? e.message : String(e);
|
||||
|
||||
// Verificar se é erro de permissão
|
||||
if (mensagemErro.includes("permissão") || mensagemErro.includes("permission") || mensagemErro.includes("Você não tem permissão")) {
|
||||
mensagemErroModal = "Você não tem permissão para reprovar esta solicitação de ausência. Apenas o gestor responsável pelo time do funcionário pode realizar esta ação.";
|
||||
mostrarModalErro = true;
|
||||
} else {
|
||||
erro = mensagemErro;
|
||||
}
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
function fecharModalErro() {
|
||||
mostrarModalErro = false;
|
||||
mensagemErroModal = "";
|
||||
}
|
||||
|
||||
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 Aprovação",
|
||||
aprovado: "Aprovado",
|
||||
reprovado: "Reprovado",
|
||||
};
|
||||
return textos[status] || status;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="aprovar-ausencia">
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<h2 class="text-3xl font-bold text-primary mb-2">Aprovar/Reprovar Ausência</h2>
|
||||
<p class="text-base-content/70">Analise a solicitação e tome uma decisão</p>
|
||||
</div>
|
||||
|
||||
<!-- Card Principal -->
|
||||
<div class="card bg-base-100 shadow-2xl border-t-4 border-orange-500">
|
||||
<div class="card-body">
|
||||
<!-- Informações do Funcionário -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-primary"
|
||||
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>
|
||||
Funcionário
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70">Nome</p>
|
||||
<p class="font-bold text-lg">{solicitacao.funcionario?.nome || "N/A"}</p>
|
||||
</div>
|
||||
{#if solicitacao.time}
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70">Time</p>
|
||||
<div
|
||||
class="badge badge-lg font-semibold"
|
||||
style="background-color: {solicitacao.time.cor}20; border-color: {solicitacao.time.cor}; color: {solicitacao.time.cor}"
|
||||
>
|
||||
{solicitacao.time.nome}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Período da Ausência -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-primary"
|
||||
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>
|
||||
Período da Ausência
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="stat bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30">
|
||||
<div class="stat-title">Data Início</div>
|
||||
<div class="stat-value text-orange-600 dark:text-orange-400 text-2xl">
|
||||
{new Date(solicitacao.dataInicio).toLocaleDateString("pt-BR")}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30">
|
||||
<div class="stat-title">Data Fim</div>
|
||||
<div class="stat-value text-orange-600 dark:text-orange-400 text-2xl">
|
||||
{new Date(solicitacao.dataFim).toLocaleDateString("pt-BR")}
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 rounded-xl border-2 border-orange-500/30">
|
||||
<div class="stat-title">Total de Dias</div>
|
||||
<div class="stat-value text-orange-600 dark:text-orange-400 text-3xl">
|
||||
{totalDias}
|
||||
</div>
|
||||
<div class="stat-desc">dias corridos</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Motivo -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-primary"
|
||||
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>
|
||||
Motivo da Ausência
|
||||
</h3>
|
||||
<div class="card bg-base-200">
|
||||
<div class="card-body">
|
||||
<p class="whitespace-pre-wrap">{solicitacao.motivo}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Atual -->
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm font-semibold">Status:</span>
|
||||
<div class={`badge badge-lg ${getStatusBadge(solicitacao.status)}`}>
|
||||
{getStatusTexto(solicitacao.status)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Erro -->
|
||||
{#if erro}
|
||||
<div class="alert alert-error mb-4">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current shrink-0 h-6 w-6"
|
||||
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>
|
||||
<span>{erro}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Ações -->
|
||||
{#if solicitacao.status === "aguardando_aprovacao"}
|
||||
<div class="card-actions justify-end gap-4 mt-6">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-error btn-lg gap-2"
|
||||
onclick={reprovar}
|
||||
disabled={processando}
|
||||
>
|
||||
{#if processando}
|
||||
<span class="loading loading-spinner"></span>
|
||||
{: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>
|
||||
{/if}
|
||||
Reprovar
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-success btn-lg gap-2"
|
||||
onclick={aprovar}
|
||||
disabled={processando}
|
||||
>
|
||||
{#if processando}
|
||||
<span class="loading loading-spinner"></span>
|
||||
{: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>
|
||||
{/if}
|
||||
Aprovar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal de Reprovação -->
|
||||
{#if motivoReprovacao !== undefined}
|
||||
<div class="mt-4">
|
||||
<div class="form-control">
|
||||
<label class="label" for="motivo-reprovacao">
|
||||
<span class="label-text font-bold">Motivo da Reprovação</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="motivo-reprovacao"
|
||||
class="textarea textarea-bordered h-24"
|
||||
placeholder="Informe o motivo da reprovação..."
|
||||
bind:value={motivoReprovacao}
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{: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>Esta solicitação já foi processada.</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Botão Cancelar -->
|
||||
<div class="mt-4 text-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost"
|
||||
onclick={() => {
|
||||
if (onCancelar) onCancelar();
|
||||
}}
|
||||
disabled={processando}
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal de Erro -->
|
||||
<ErrorModal
|
||||
open={mostrarModalErro}
|
||||
title="Erro de Permissão"
|
||||
message={mensagemErroModal || "Você não tem permissão para realizar esta ação."}
|
||||
onClose={fecharModalErro}
|
||||
/>
|
||||
|
||||
<style>
|
||||
.aprovar-ausencia {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
487
apps/web/src/lib/components/ausencias/CalendarioAusencias.svelte
Normal file
487
apps/web/src/lib/components/ausencias/CalendarioAusencias.svelte
Normal file
@@ -0,0 +1,487 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { Calendar } from "@fullcalendar/core";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import multiMonthPlugin from "@fullcalendar/multimonth";
|
||||
import ptBrLocale from "@fullcalendar/core/locales/pt-br";
|
||||
|
||||
interface Props {
|
||||
dataInicio?: string;
|
||||
dataFim?: string;
|
||||
ausenciasExistentes?: Array<{
|
||||
dataInicio: string;
|
||||
dataFim: string;
|
||||
status: "aguardando_aprovacao" | "aprovado" | "reprovado";
|
||||
}>;
|
||||
onPeriodoSelecionado?: (periodo: { dataInicio: string; dataFim: string }) => void;
|
||||
modoVisualizacao?: "month" | "multiMonth";
|
||||
readonly?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
dataInicio,
|
||||
dataFim,
|
||||
ausenciasExistentes = [],
|
||||
onPeriodoSelecionado,
|
||||
modoVisualizacao = "month",
|
||||
readonly = false,
|
||||
}: Props = $props();
|
||||
|
||||
let calendarEl: HTMLDivElement;
|
||||
let calendar: Calendar | null = null;
|
||||
let selecionando = $state(false); // Flag para evitar atualizações durante seleção
|
||||
let eventos: Array<{
|
||||
id: string;
|
||||
title: string;
|
||||
start: string;
|
||||
end: string;
|
||||
backgroundColor: string;
|
||||
borderColor: string;
|
||||
textColor: string;
|
||||
extendedProps: {
|
||||
status: string;
|
||||
};
|
||||
}> = $state([]);
|
||||
|
||||
// Cores por status
|
||||
const coresStatus: Record<string, { bg: string; border: string; text: string }> = {
|
||||
aguardando_aprovacao: { bg: "#f59e0b", border: "#d97706", text: "#ffffff" }, // Laranja
|
||||
aprovado: { bg: "#10b981", border: "#059669", text: "#ffffff" }, // Verde
|
||||
reprovado: { bg: "#ef4444", border: "#dc2626", text: "#ffffff" }, // Vermelho
|
||||
};
|
||||
|
||||
// Converter ausências existentes em eventos
|
||||
function atualizarEventos() {
|
||||
const novosEventos: Array<{
|
||||
id: string;
|
||||
title: string;
|
||||
start: string;
|
||||
end: string;
|
||||
backgroundColor: string;
|
||||
borderColor: string;
|
||||
textColor: string;
|
||||
extendedProps: {
|
||||
status: string;
|
||||
};
|
||||
}> = ausenciasExistentes.map((ausencia, index) => {
|
||||
const cor = coresStatus[ausencia.status] || coresStatus.aguardando_aprovacao;
|
||||
return {
|
||||
id: `ausencia-${index}`,
|
||||
title: `${getStatusTexto(ausencia.status)} - ${calcularDias(ausencia.dataInicio, ausencia.dataFim)} dias`,
|
||||
start: ausencia.dataInicio,
|
||||
end: calcularDataFim(ausencia.dataFim),
|
||||
backgroundColor: cor.bg,
|
||||
borderColor: cor.border,
|
||||
textColor: cor.text,
|
||||
extendedProps: {
|
||||
status: ausencia.status,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// Adicionar período selecionado atual se existir
|
||||
if (dataInicio && dataFim) {
|
||||
novosEventos.push({
|
||||
id: "periodo-selecionado",
|
||||
title: `Selecionado - ${calcularDias(dataInicio, dataFim)} dias`,
|
||||
start: dataInicio,
|
||||
end: calcularDataFim(dataFim),
|
||||
backgroundColor: "#667eea",
|
||||
borderColor: "#5568d3",
|
||||
textColor: "#ffffff",
|
||||
extendedProps: {
|
||||
status: "selecionado",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
eventos = novosEventos;
|
||||
}
|
||||
|
||||
function getStatusTexto(status: string): string {
|
||||
const textos: Record<string, string> = {
|
||||
aguardando_aprovacao: "Aguardando",
|
||||
aprovado: "Aprovado",
|
||||
reprovado: "Reprovado",
|
||||
};
|
||||
return textos[status] || status;
|
||||
}
|
||||
|
||||
// Helper: Adicionar 1 dia à data fim (FullCalendar usa exclusive end)
|
||||
function calcularDataFim(dataFim: string): string {
|
||||
const data = new Date(dataFim);
|
||||
data.setDate(data.getDate() + 1);
|
||||
return data.toISOString().split("T")[0];
|
||||
}
|
||||
|
||||
// Helper: Calcular dias entre datas (inclusivo)
|
||||
function calcularDias(inicio: string, fim: string): number {
|
||||
const dInicio = new Date(inicio);
|
||||
const dFim = new Date(fim);
|
||||
const diffTime = Math.abs(dFim.getTime() - dInicio.getTime());
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
|
||||
return diffDays;
|
||||
}
|
||||
|
||||
// Atualizar eventos quando mudanças ocorrem (evitar loop infinito)
|
||||
$effect(() => {
|
||||
if (!calendar || selecionando) return; // Não atualizar durante seleção
|
||||
|
||||
atualizarEventos();
|
||||
|
||||
// Usar requestAnimationFrame para evitar múltiplas atualizações durante seleção
|
||||
requestAnimationFrame(() => {
|
||||
if (calendar && !selecionando) {
|
||||
calendar.removeAllEvents();
|
||||
calendar.addEventSource(eventos);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (!calendarEl) return;
|
||||
|
||||
atualizarEventos();
|
||||
|
||||
calendar = new Calendar(calendarEl, {
|
||||
plugins: [dayGridPlugin, interactionPlugin, multiMonthPlugin],
|
||||
initialView: modoVisualizacao === "multiMonth" ? "multiMonthYear" : "dayGridMonth",
|
||||
locale: ptBrLocale,
|
||||
headerToolbar: {
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: modoVisualizacao === "multiMonth" ? "multiMonthYear" : "dayGridMonth",
|
||||
},
|
||||
height: "auto",
|
||||
selectable: !readonly,
|
||||
selectMirror: true,
|
||||
unselectAuto: false,
|
||||
events: eventos,
|
||||
|
||||
// Estilo customizado
|
||||
buttonText: {
|
||||
today: "Hoje",
|
||||
month: "Mês",
|
||||
multiMonthYear: "Ano",
|
||||
},
|
||||
|
||||
// Seleção de período
|
||||
select: (info) => {
|
||||
if (readonly) return;
|
||||
|
||||
selecionando = true; // Marcar que está selecionando
|
||||
|
||||
// Usar setTimeout para evitar conflito com atualizações de estado
|
||||
setTimeout(() => {
|
||||
const inicio = new Date(info.startStr);
|
||||
const fim = new Date(info.endStr);
|
||||
fim.setDate(fim.getDate() - 1); // FullCalendar usa exclusive end
|
||||
|
||||
// Validar que não é no passado
|
||||
const hoje = new Date();
|
||||
hoje.setHours(0, 0, 0, 0);
|
||||
if (inicio < hoje) {
|
||||
alert("A data de início não pode ser no passado");
|
||||
calendar?.unselect();
|
||||
selecionando = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Validar que fim >= início
|
||||
if (fim < inicio) {
|
||||
alert("A data de fim deve ser maior ou igual à data de início");
|
||||
calendar?.unselect();
|
||||
selecionando = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Chamar callback de forma assíncrona para evitar loop
|
||||
if (onPeriodoSelecionado) {
|
||||
onPeriodoSelecionado({
|
||||
dataInicio: info.startStr,
|
||||
dataFim: fim.toISOString().split("T")[0],
|
||||
});
|
||||
}
|
||||
|
||||
calendar?.unselect();
|
||||
|
||||
// Liberar flag após um pequeno delay para garantir que o estado foi atualizado
|
||||
setTimeout(() => {
|
||||
selecionando = false;
|
||||
}, 100);
|
||||
}, 0);
|
||||
},
|
||||
|
||||
// Click em evento para visualizar detalhes (readonly)
|
||||
eventClick: (info) => {
|
||||
if (readonly) {
|
||||
const status = info.event.extendedProps.status;
|
||||
const texto = getStatusTexto(status);
|
||||
alert(`Ausência ${texto}\nPeríodo: ${new Date(info.event.startStr).toLocaleDateString("pt-BR")} até ${new Date(calcularDataFim(info.event.endStr)).toLocaleDateString("pt-BR")}`);
|
||||
}
|
||||
},
|
||||
|
||||
// Tooltip ao passar mouse
|
||||
eventDidMount: (info) => {
|
||||
const status = info.event.extendedProps.status;
|
||||
if (status === "selecionado") {
|
||||
info.el.title = `Período selecionado\n${info.event.title}`;
|
||||
} else {
|
||||
info.el.title = `${info.event.title}`;
|
||||
}
|
||||
info.el.style.cursor = readonly ? "default" : "pointer";
|
||||
},
|
||||
|
||||
// Desabilitar datas passadas
|
||||
selectAllow: (selectInfo) => {
|
||||
const hoje = new Date();
|
||||
hoje.setHours(0, 0, 0, 0);
|
||||
return new Date(selectInfo.start) >= hoje;
|
||||
},
|
||||
|
||||
// Highlight de fim de semana
|
||||
dayCellClassNames: (arg) => {
|
||||
if (arg.date.getDay() === 0 || arg.date.getDay() === 6) {
|
||||
return ["fc-day-weekend-custom"];
|
||||
}
|
||||
return [];
|
||||
},
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
|
||||
return () => {
|
||||
calendar?.destroy();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="calendario-ausencias-wrapper">
|
||||
<!-- Header com instruções -->
|
||||
{#if !readonly}
|
||||
<div class="alert alert-info mb-4 shadow-lg">
|
||||
<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 class="text-sm">
|
||||
<p class="font-bold">Como usar:</p>
|
||||
<ul class="list-disc list-inside mt-1">
|
||||
<li>Clique e arraste no calendário para selecionar o período de ausência</li>
|
||||
<li>Você pode visualizar suas ausências já solicitadas no calendário</li>
|
||||
<li>A data de início não pode ser no passado</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Calendário -->
|
||||
<div
|
||||
bind:this={calendarEl}
|
||||
class="calendario-ausencias shadow-2xl rounded-2xl overflow-hidden border-2 border-orange-500/10"
|
||||
></div>
|
||||
|
||||
<!-- Legenda de status -->
|
||||
{#if ausenciasExistentes.length > 0 || readonly}
|
||||
<div class="mt-6 flex flex-wrap gap-4 justify-center">
|
||||
<div class="badge badge-lg gap-2" style="background-color: #f59e0b; border-color: #d97706; color: white;">
|
||||
<div class="w-3 h-3 rounded-full bg-white"></div>
|
||||
Aguardando Aprovação
|
||||
</div>
|
||||
<div class="badge badge-lg gap-2" style="background-color: #10b981; border-color: #059669; color: white;">
|
||||
<div class="w-3 h-3 rounded-full bg-white"></div>
|
||||
Aprovado
|
||||
</div>
|
||||
<div class="badge badge-lg gap-2" style="background-color: #ef4444; border-color: #dc2626; color: white;">
|
||||
<div class="w-3 h-3 rounded-full bg-white"></div>
|
||||
Reprovado
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Informação do período selecionado -->
|
||||
{#if dataInicio && dataFim && !readonly}
|
||||
<div class="mt-6 card bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 shadow-lg border-2 border-orange-500/30">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title text-orange-700 dark:text-orange-400">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
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>
|
||||
Período Selecionado
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70">Data Início</p>
|
||||
<p class="font-bold text-lg">{new Date(dataInicio).toLocaleDateString("pt-BR")}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70">Data Fim</p>
|
||||
<p class="font-bold text-lg">{new Date(dataFim).toLocaleDateString("pt-BR")}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70">Total de Dias</p>
|
||||
<p class="font-bold text-2xl text-orange-600 dark:text-orange-400">{calcularDias(dataInicio, dataFim)} dias</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Calendário Premium */
|
||||
.calendario-ausencias {
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
/* Toolbar moderna com cores laranja/amarelo */
|
||||
:global(.calendario-ausencias .fc .fc-toolbar) {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
|
||||
padding: 1rem;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
:global(.calendario-ausencias .fc .fc-toolbar-title) {
|
||||
color: white !important;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
:global(.calendario-ausencias .fc .fc-button) {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
||||
color: white !important;
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.calendario-ausencias .fc .fc-button:hover) {
|
||||
background: rgba(255, 255, 255, 0.3) !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
:global(.calendario-ausencias .fc .fc-button-active) {
|
||||
background: rgba(255, 255, 255, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Cabeçalho dos dias */
|
||||
:global(.calendario-ausencias .fc .fc-col-header-cell) {
|
||||
background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 0.75rem 0.5rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
/* Células dos dias */
|
||||
:global(.calendario-ausencias .fc .fc-daygrid-day) {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
:global(.calendario-ausencias .fc .fc-daygrid-day:hover) {
|
||||
background: rgba(245, 158, 11, 0.05);
|
||||
}
|
||||
|
||||
:global(.calendario-ausencias .fc .fc-daygrid-day-number) {
|
||||
padding: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
/* Fim de semana */
|
||||
:global(.calendario-ausencias .fc .fc-day-weekend-custom) {
|
||||
background: rgba(255, 193, 7, 0.05);
|
||||
}
|
||||
|
||||
/* Hoje */
|
||||
:global(.calendario-ausencias .fc .fc-day-today) {
|
||||
background: rgba(245, 158, 11, 0.1) !important;
|
||||
border: 2px solid #f59e0b !important;
|
||||
}
|
||||
|
||||
/* Eventos (ausências) */
|
||||
:global(.calendario-ausencias .fc .fc-event) {
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:global(.calendario-ausencias .fc .fc-event:hover) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Seleção (arrastar) */
|
||||
:global(.calendario-ausencias .fc .fc-highlight) {
|
||||
background: rgba(245, 158, 11, 0.3) !important;
|
||||
border: 2px dashed #f59e0b;
|
||||
}
|
||||
|
||||
/* Datas desabilitadas (passado) */
|
||||
:global(.calendario-ausencias .fc .fc-day-past .fc-daygrid-day-number) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Remover bordas padrão */
|
||||
:global(.calendario-ausencias .fc .fc-scrollgrid) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
:global(.calendario-ausencias .fc .fc-scrollgrid-section > td) {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Grid moderno */
|
||||
:global(.calendario-ausencias .fc .fc-daygrid-day-frame) {
|
||||
border: 1px solid #e9ecef;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
/* Responsivo */
|
||||
@media (max-width: 768px) {
|
||||
:global(.calendario-ausencias .fc .fc-toolbar) {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
:global(.calendario-ausencias .fc .fc-toolbar-title) {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
:global(.calendario-ausencias .fc .fc-button) {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,437 @@
|
||||
<script lang="ts">
|
||||
import { useConvexClient, useQuery } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import CalendarioAusencias from "./CalendarioAusencias.svelte";
|
||||
import { toast } from "svelte-sonner";
|
||||
import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
|
||||
|
||||
interface Props {
|
||||
funcionarioId: Id<"funcionarios">;
|
||||
onSucesso?: () => void;
|
||||
onCancelar?: () => void;
|
||||
}
|
||||
|
||||
let { funcionarioId, onSucesso, onCancelar }: Props = $props();
|
||||
|
||||
// Cliente Convex
|
||||
const client = useConvexClient();
|
||||
|
||||
// Estado do wizard
|
||||
let passoAtual = $state(1);
|
||||
const totalPassos = 2;
|
||||
|
||||
// Dados da solicitação
|
||||
let dataInicio = $state<string>("");
|
||||
let dataFim = $state<string>("");
|
||||
let motivo = $state("");
|
||||
let processando = $state(false);
|
||||
|
||||
// Buscar ausências existentes para exibir no calendário
|
||||
const ausenciasExistentesQuery = useQuery(api.ausencias.listarMinhasSolicitacoes, {
|
||||
funcionarioId,
|
||||
});
|
||||
|
||||
const ausenciasExistentes = $derived(
|
||||
(ausenciasExistentesQuery?.data || []).map((a) => ({
|
||||
dataInicio: a.dataInicio,
|
||||
dataFim: a.dataFim,
|
||||
status: a.status as "aguardando_aprovacao" | "aprovado" | "reprovado",
|
||||
}))
|
||||
);
|
||||
|
||||
// Calcular dias selecionados
|
||||
function calcularDias(inicio: string, fim: string): number {
|
||||
if (!inicio || !fim) return 0;
|
||||
const dInicio = new Date(inicio);
|
||||
const dFim = new Date(fim);
|
||||
const diffTime = Math.abs(dFim.getTime() - dInicio.getTime());
|
||||
return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
|
||||
}
|
||||
|
||||
const totalDias = $derived(calcularDias(dataInicio, dataFim));
|
||||
|
||||
// Funções de navegação
|
||||
function proximoPasso() {
|
||||
if (passoAtual === 1) {
|
||||
if (!dataInicio || !dataFim) {
|
||||
toast.error("Selecione o período de ausência no calendário");
|
||||
return;
|
||||
}
|
||||
|
||||
const hoje = new Date();
|
||||
hoje.setHours(0, 0, 0, 0);
|
||||
const inicio = new Date(dataInicio);
|
||||
|
||||
if (inicio < hoje) {
|
||||
toast.error("A data de início não pode ser no passado");
|
||||
return;
|
||||
}
|
||||
|
||||
if (new Date(dataFim) < new Date(dataInicio)) {
|
||||
toast.error("A data de fim deve ser maior ou igual à data de início");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (passoAtual < totalPassos) {
|
||||
passoAtual++;
|
||||
}
|
||||
}
|
||||
|
||||
function passoAnterior() {
|
||||
if (passoAtual > 1) {
|
||||
passoAtual--;
|
||||
}
|
||||
}
|
||||
|
||||
async function enviarSolicitacao() {
|
||||
if (!dataInicio || !dataFim) {
|
||||
toast.error("Selecione o período de ausência");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!motivo.trim() || motivo.trim().length < 10) {
|
||||
toast.error("O motivo deve ter no mínimo 10 caracteres");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
processando = true;
|
||||
|
||||
await client.mutation(api.ausencias.criarSolicitacao, {
|
||||
funcionarioId,
|
||||
dataInicio,
|
||||
dataFim,
|
||||
motivo: motivo.trim(),
|
||||
});
|
||||
|
||||
toast.success("Solicitação de ausência criada com sucesso!");
|
||||
|
||||
if (onSucesso) {
|
||||
onSucesso();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erro ao criar solicitação:", error);
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : "Erro ao criar solicitação de ausência"
|
||||
);
|
||||
} finally {
|
||||
processando = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handlePeriodoSelecionado(periodo: { dataInicio: string; dataFim: string }) {
|
||||
dataInicio = periodo.dataInicio;
|
||||
dataFim = periodo.dataFim;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="wizard-ausencia">
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<h2 class="text-3xl font-bold text-primary mb-2">Nova Solicitação de Ausência</h2>
|
||||
<p class="text-base-content/70">Solicite uma ausência para assuntos particulares</p>
|
||||
</div>
|
||||
|
||||
<!-- Indicador de progresso -->
|
||||
<div class="steps mb-8">
|
||||
<div class="step {passoAtual >= 1 ? 'step-primary' : ''}">
|
||||
<div class="step-item">
|
||||
<div class="step-marker">
|
||||
{#if passoAtual > 1}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
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>
|
||||
{:else}
|
||||
{passoAtual}
|
||||
{/if}
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">Selecionar Período</div>
|
||||
<div class="step-description">Escolha as datas no calendário</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step {passoAtual >= 2 ? 'step-primary' : ''}">
|
||||
<div class="step-item">
|
||||
<div class="step-marker">
|
||||
{#if passoAtual > 2}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
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>
|
||||
{:else}
|
||||
2
|
||||
{/if}
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">Informar Motivo</div>
|
||||
<div class="step-description">Descreva o motivo da ausência</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Conteúdo dos passos -->
|
||||
<div class="card bg-base-100 shadow-xl">
|
||||
<div class="card-body">
|
||||
{#if passoAtual === 1}
|
||||
<!-- Passo 1: Selecionar Período -->
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-2">Selecione o Período</h3>
|
||||
<p class="text-base-content/70">
|
||||
Clique e arraste no calendário para selecionar o período de ausência
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<CalendarioAusencias
|
||||
dataInicio={dataInicio}
|
||||
dataFim={dataFim}
|
||||
ausenciasExistentes={ausenciasExistentes}
|
||||
onPeriodoSelecionado={handlePeriodoSelecionado}
|
||||
/>
|
||||
|
||||
{#if dataInicio && dataFim}
|
||||
<div class="alert alert-success shadow-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current shrink-0 h-6 w-6"
|
||||
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>
|
||||
<div>
|
||||
<h4 class="font-bold">Período selecionado!</h4>
|
||||
<p>
|
||||
De {new Date(dataInicio).toLocaleDateString("pt-BR")} até{" "}
|
||||
{new Date(dataFim).toLocaleDateString("pt-BR")} ({totalDias} dias)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if passoAtual === 2}
|
||||
<!-- Passo 2: Informar Motivo -->
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-2">Informe o Motivo</h3>
|
||||
<p class="text-base-content/70">
|
||||
Descreva o motivo da sua solicitação de ausência (mínimo 10 caracteres)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Resumo do período -->
|
||||
{#if dataInicio && dataFim}
|
||||
<div class="card bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950 border-2 border-orange-500/30">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title text-orange-700 dark:text-orange-400">
|
||||
<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="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>
|
||||
Resumo do Período
|
||||
</h4>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70">Data Início</p>
|
||||
<p class="font-bold">{new Date(dataInicio).toLocaleDateString("pt-BR")}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70">Data Fim</p>
|
||||
<p class="font-bold">{new Date(dataFim).toLocaleDateString("pt-BR")}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-base-content/70">Total de Dias</p>
|
||||
<p class="font-bold text-xl text-orange-600 dark:text-orange-400">
|
||||
{totalDias} dias
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Campo de motivo -->
|
||||
<div class="form-control">
|
||||
<label class="label" for="motivo">
|
||||
<span class="label-text font-bold">Motivo da Ausência</span>
|
||||
<span class="label-text-alt">
|
||||
{motivo.trim().length}/10 caracteres mínimos
|
||||
</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="motivo"
|
||||
class="textarea textarea-bordered h-32 text-lg"
|
||||
placeholder="Descreva o motivo da sua solicitação de ausência..."
|
||||
bind:value={motivo}
|
||||
maxlength={500}
|
||||
></textarea>
|
||||
<label class="label">
|
||||
<span class="label-text-alt text-base-content/70">
|
||||
Mínimo 10 caracteres. Seja claro e objetivo.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if motivo.trim().length > 0 && motivo.trim().length < 10}
|
||||
<div class="alert alert-warning shadow-lg">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="stroke-current shrink-0 h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<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>
|
||||
<span>O motivo deve ter no mínimo 10 caracteres</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Botões de navegação -->
|
||||
<div class="card-actions justify-between mt-6">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost"
|
||||
onclick={passoAnterior}
|
||||
disabled={passoAtual === 1 || processando}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 mr-2"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
Voltar
|
||||
</button>
|
||||
|
||||
{#if passoAtual < totalPassos}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onclick={proximoPasso}
|
||||
disabled={processando}
|
||||
>
|
||||
Próximo
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 ml-2"
|
||||
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>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-success"
|
||||
onclick={enviarSolicitacao}
|
||||
disabled={processando || motivo.trim().length < 10}
|
||||
>
|
||||
{#if processando}
|
||||
<span class="loading loading-spinner"></span>
|
||||
Enviando...
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 mr-2"
|
||||
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>
|
||||
Enviar Solicitação
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Botão cancelar -->
|
||||
<div class="mt-4 text-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-sm"
|
||||
onclick={() => {
|
||||
if (onCancelar) onCancelar();
|
||||
}}
|
||||
disabled={processando}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wizard-ausencia {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,398 +1,501 @@
|
||||
<script lang="ts">
|
||||
import { useQuery, useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import { notificacoesCount } from "$lib/stores/chatStore";
|
||||
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 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) ?? []
|
||||
);
|
||||
|
||||
// Atualizar contador no store
|
||||
$effect(() => {
|
||||
const totalNotificacoes = count + (notificacoesFerias?.length || 0);
|
||||
notificacoesCount.set(totalNotificacoes);
|
||||
});
|
||||
|
||||
// Buscar notificações de férias
|
||||
async function buscarNotificacoesFerias() {
|
||||
try {
|
||||
const usuarioStore = authStore;
|
||||
|
||||
if (usuarioStore.usuario?._id) {
|
||||
const notifsFerias = await client.query(
|
||||
api.ferias.obterNotificacoesNaoLidas,
|
||||
{
|
||||
usuarioId: usuarioStore.usuario._id as any,
|
||||
}
|
||||
);
|
||||
notificacoesFerias = notifsFerias || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Erro ao buscar notificações de férias:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// Atualizar notificações de férias periodicamente
|
||||
$effect(() => {
|
||||
buscarNotificacoesFerias();
|
||||
const interval = setInterval(buscarNotificacoesFerias, 30000); // A cada 30s
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
function formatarTempo(timestamp: number): string {
|
||||
try {
|
||||
return formatDistanceToNow(new Date(timestamp), {
|
||||
addSuffix: true,
|
||||
locale: ptBR,
|
||||
});
|
||||
} catch {
|
||||
return "agora";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleMarcarTodasLidas() {
|
||||
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,
|
||||
});
|
||||
}
|
||||
dropdownOpen = false;
|
||||
await buscarNotificacoesFerias();
|
||||
}
|
||||
|
||||
async function handleClickNotificacao(notificacaoId: string) {
|
||||
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 buscarNotificacoesFerias();
|
||||
dropdownOpen = false;
|
||||
// Redirecionar para a página de férias
|
||||
window.location.href = "/recursos-humanos/ferias";
|
||||
}
|
||||
|
||||
function toggleDropdown() {
|
||||
dropdownOpen = !dropdownOpen;
|
||||
}
|
||||
|
||||
// Fechar dropdown ao clicar fora
|
||||
onMount(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement;
|
||||
if (!target.closest(".notification-bell")) {
|
||||
dropdownOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
return () => document.removeEventListener("click", handleClickOutside);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="dropdown dropdown-end notification-bell">
|
||||
<!-- Botão de Notificação ULTRA MODERNO (igual ao perfil) -->
|
||||
<button
|
||||
type="button"
|
||||
tabindex="0"
|
||||
class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden group transition-all duration-300 hover:scale-105"
|
||||
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
|
||||
onclick={toggleDropdown}
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
{/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'};"
|
||||
>
|
||||
<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 -->
|
||||
{#if count + (notificacoesFerias?.length || 0) > 0}
|
||||
{@const totalCount = count + (notificacoesFerias?.length || 0)}
|
||||
<span
|
||||
class="absolute -top-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full text-white text-[10px] font-black shadow-xl ring-2 ring-white z-20"
|
||||
style="background: linear-gradient(135deg, #ff416c, #ff4b2b); box-shadow: 0 8px 24px -4px rgba(255, 65, 108, 0.6), 0 4px 12px -2px rgba(255, 75, 43, 0.4); animation: badge-bounce 2s ease-in-out infinite;"
|
||||
>
|
||||
{totalCount > 9 ? "9+" : totalCount}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if dropdownOpen}
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<div
|
||||
tabindex="0"
|
||||
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"
|
||||
>
|
||||
<h3 class="text-lg font-semibold">Notificações</h3>
|
||||
{#if count > 0}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
onclick={handleMarcarTodasLidas}
|
||||
>
|
||||
Marcar todas como lidas
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Lista de notificações -->
|
||||
<div class="py-2">
|
||||
{#if notificacoes.length > 0}
|
||||
{#each notificacoes.slice(0, 10) as notificacao (notificacao._id)}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors"
|
||||
onclick={() => handleClickNotificacao(notificacao._id)}
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<!-- Ícone -->
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
{#if notificacao.tipo === "nova_mensagem"}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-5 h-5 text-primary"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
|
||||
/>
|
||||
</svg>
|
||||
{:else if notificacao.tipo === "mencao"}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-5 h-5 text-warning"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-5 h-5 text-info"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Conteúdo -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-base-content">
|
||||
{notificacao.titulo}
|
||||
</p>
|
||||
<p class="text-xs text-base-content/70 truncate">
|
||||
{notificacao.descricao}
|
||||
</p>
|
||||
<p class="text-xs text-base-content/50 mt-1">
|
||||
{formatarTempo(notificacao.criadaEm)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Indicador de não lida -->
|
||||
{#if !notificacao.lida}
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-2 h-2 rounded-full bg-primary"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Notificações de Férias -->
|
||||
{#if notificacoesFerias.length > 0}
|
||||
{#if notificacoes.length > 0}
|
||||
<div class="divider my-2 text-xs">Férias</div>
|
||||
{/if}
|
||||
{#each notificacoesFerias.slice(0, 5) as notificacao (notificacao._id)}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors"
|
||||
onclick={() => handleClickNotificacaoFerias(notificacao._id)}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Conteúdo -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-base-content">
|
||||
{notificacao.mensagem}
|
||||
</p>
|
||||
<p class="text-xs text-base-content/50 mt-1">
|
||||
{formatarTempo(notificacao._creationTime)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="badge badge-primary badge-xs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Sem notificações -->
|
||||
{#if notificacoes.length === 0 && notificacoesFerias.length === 0}
|
||||
<div class="px-4 py-8 text-center text-base-content/50">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-12 h-12 mx-auto mb-2 opacity-50"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.143 17.082a24.248 24.248 0 0 0 3.844.148m-3.844-.148a23.856 23.856 0 0 1-5.455-1.31 8.964 8.964 0 0 0 2.3-5.542m3.155 6.852a3 3 0 0 0 5.667 1.97m1.965-2.277L21 21m-4.225-4.225a23.81 23.81 0 0 0 3.536-1.003A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6.53 6.53m10.245 10.245L6.53 6.53M3 3l3.53 3.53"
|
||||
/>
|
||||
</svg>
|
||||
<p class="text-sm">Nenhuma notificação</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/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>
|
||||
<script lang="ts">
|
||||
import { useQuery, useConvexClient } from "convex-svelte";
|
||||
import { api } from "@sgse-app/backend/convex/_generated/api";
|
||||
import { notificacoesCount } from "$lib/stores/chatStore";
|
||||
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 countQuery = useQuery(api.chat.contarNotificacoesNaoLidas, {});
|
||||
|
||||
let dropdownOpen = $state(false);
|
||||
let notificacoesFerias = $state<Array<{ _id: string; mensagem: string; tipo: string; _creationTime: number }>>([]);
|
||||
let notificacoesAusencias = $state<Array<{ _id: string; mensagem: string; tipo: string; _creationTime: number }>>([]);
|
||||
|
||||
// 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) ?? []
|
||||
);
|
||||
|
||||
// Atualizar contador no store
|
||||
$effect(() => {
|
||||
const totalNotificacoes = count + (notificacoesFerias?.length || 0) + (notificacoesAusencias?.length || 0);
|
||||
notificacoesCount.set(totalNotificacoes);
|
||||
});
|
||||
|
||||
// Buscar notificações de férias
|
||||
async function buscarNotificacoesFerias() {
|
||||
try {
|
||||
const usuarioStore = authStore;
|
||||
|
||||
if (usuarioStore.usuario?._id) {
|
||||
const notifsFerias = await client.query(
|
||||
api.ferias.obterNotificacoesNaoLidas,
|
||||
{
|
||||
usuarioId: usuarioStore.usuario._id,
|
||||
}
|
||||
);
|
||||
notificacoesFerias = notifsFerias || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Erro ao buscar notificações de férias:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// Buscar notificações de ausências
|
||||
async function buscarNotificacoesAusencias() {
|
||||
try {
|
||||
const usuarioStore = authStore;
|
||||
|
||||
if (usuarioStore.usuario?._id) {
|
||||
try {
|
||||
const notifsAusencias = await client.query(
|
||||
api.ausencias.obterNotificacoesNaoLidas,
|
||||
{
|
||||
usuarioId: usuarioStore.usuario._id,
|
||||
}
|
||||
);
|
||||
notificacoesAusencias = notifsAusencias || [];
|
||||
} catch (queryError: unknown) {
|
||||
// Silenciar erro se a função não estiver disponível ainda (Convex não sincronizado)
|
||||
const errorMessage = queryError instanceof Error ? queryError.message : String(queryError);
|
||||
if (!errorMessage.includes("Could not find public function")) {
|
||||
console.error("Erro ao buscar notificações de ausências:", queryError);
|
||||
}
|
||||
notificacoesAusencias = [];
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// Erro geral - silenciar se for sobre função não encontrada
|
||||
const errorMessage = e instanceof Error ? e.message : String(e);
|
||||
if (!errorMessage.includes("Could not find public function")) {
|
||||
console.error("Erro ao buscar notificações de ausências:", e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Atualizar notificações periodicamente
|
||||
$effect(() => {
|
||||
buscarNotificacoesFerias();
|
||||
buscarNotificacoesAusencias();
|
||||
const interval = setInterval(() => {
|
||||
buscarNotificacoesFerias();
|
||||
buscarNotificacoesAusencias();
|
||||
}, 30000); // A cada 30s
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
function formatarTempo(timestamp: number): string {
|
||||
try {
|
||||
return formatDistanceToNow(new Date(timestamp), {
|
||||
addSuffix: true,
|
||||
locale: ptBR,
|
||||
});
|
||||
} catch {
|
||||
return "agora";
|
||||
}
|
||||
}
|
||||
|
||||
async function handleMarcarTodasLidas() {
|
||||
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,
|
||||
});
|
||||
}
|
||||
// Marcar todas as notificações de ausências como lidas
|
||||
for (const notif of notificacoesAusencias) {
|
||||
await client.mutation(api.ausencias.marcarComoLida, {
|
||||
notificacaoId: notif._id,
|
||||
});
|
||||
}
|
||||
dropdownOpen = false;
|
||||
await buscarNotificacoesFerias();
|
||||
await buscarNotificacoesAusencias();
|
||||
}
|
||||
|
||||
async function handleClickNotificacao(notificacaoId: string) {
|
||||
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,
|
||||
});
|
||||
await buscarNotificacoesFerias();
|
||||
dropdownOpen = false;
|
||||
// Redirecionar para a página de férias
|
||||
window.location.href = "/recursos-humanos/ferias";
|
||||
}
|
||||
|
||||
async function handleClickNotificacaoAusencias(notificacaoId: string) {
|
||||
await client.mutation(api.ausencias.marcarComoLida, {
|
||||
notificacaoId: notificacaoId,
|
||||
});
|
||||
await buscarNotificacoesAusencias();
|
||||
dropdownOpen = false;
|
||||
// Redirecionar para a página de perfil na aba de ausências
|
||||
window.location.href = "/perfil?aba=minhas-ausencias";
|
||||
}
|
||||
|
||||
function toggleDropdown() {
|
||||
dropdownOpen = !dropdownOpen;
|
||||
}
|
||||
|
||||
// Fechar dropdown ao clicar fora
|
||||
onMount(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement;
|
||||
if (!target.closest(".notification-bell")) {
|
||||
dropdownOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("click", handleClickOutside);
|
||||
return () => document.removeEventListener("click", handleClickOutside);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="dropdown dropdown-end notification-bell">
|
||||
<!-- Botão de Notificação ULTRA MODERNO (igual ao perfil) -->
|
||||
<button
|
||||
type="button"
|
||||
tabindex="0"
|
||||
class="relative flex items-center justify-center w-14 h-14 rounded-2xl overflow-hidden group transition-all duration-300 hover:scale-105"
|
||||
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); box-shadow: 0 8px 24px -4px rgba(102, 126, 234, 0.4);"
|
||||
onclick={toggleDropdown}
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
{/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'};"
|
||||
>
|
||||
<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 -->
|
||||
{#if count + (notificacoesFerias?.length || 0) > 0}
|
||||
{@const totalCount = count + (notificacoesFerias?.length || 0)}
|
||||
<span
|
||||
class="absolute -top-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full text-white text-[10px] font-black shadow-xl ring-2 ring-white z-20"
|
||||
style="background: linear-gradient(135deg, #ff416c, #ff4b2b); box-shadow: 0 8px 24px -4px rgba(255, 65, 108, 0.6), 0 4px 12px -2px rgba(255, 75, 43, 0.4); animation: badge-bounce 2s ease-in-out infinite;"
|
||||
>
|
||||
{totalCount > 9 ? "9+" : totalCount}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if dropdownOpen}
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<div
|
||||
tabindex="0"
|
||||
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"
|
||||
>
|
||||
<h3 class="text-lg font-semibold">Notificações</h3>
|
||||
{#if count > 0}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-xs"
|
||||
onclick={handleMarcarTodasLidas}
|
||||
>
|
||||
Marcar todas como lidas
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Lista de notificações -->
|
||||
<div class="py-2">
|
||||
{#if notificacoes.length > 0}
|
||||
{#each notificacoes.slice(0, 10) as notificacao (notificacao._id)}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors"
|
||||
onclick={() => handleClickNotificacao(notificacao._id)}
|
||||
>
|
||||
<div class="flex items-start gap-3">
|
||||
<!-- Ícone -->
|
||||
<div class="flex-shrink-0 mt-1">
|
||||
{#if notificacao.tipo === "nova_mensagem"}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-5 h-5 text-primary"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
|
||||
/>
|
||||
</svg>
|
||||
{:else if notificacao.tipo === "mencao"}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-5 h-5 text-warning"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-5 h-5 text-info"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
|
||||
/>
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Conteúdo -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-base-content">
|
||||
{notificacao.titulo}
|
||||
</p>
|
||||
<p class="text-xs text-base-content/70 truncate">
|
||||
{notificacao.descricao}
|
||||
</p>
|
||||
<p class="text-xs text-base-content/50 mt-1">
|
||||
{formatarTempo(notificacao.criadaEm)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Indicador de não lida -->
|
||||
{#if !notificacao.lida}
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-2 h-2 rounded-full bg-primary"></div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Notificações de Férias -->
|
||||
{#if notificacoesFerias.length > 0}
|
||||
{#if notificacoes.length > 0}
|
||||
<div class="divider my-2 text-xs">Férias</div>
|
||||
{/if}
|
||||
{#each notificacoesFerias.slice(0, 5) as notificacao (notificacao._id)}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors"
|
||||
onclick={() => handleClickNotificacaoFerias(notificacao._id)}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Conteúdo -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-base-content">
|
||||
{notificacao.mensagem}
|
||||
</p>
|
||||
<p class="text-xs text-base-content/50 mt-1">
|
||||
{formatarTempo(notificacao._creationTime)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="badge badge-primary badge-xs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Notificações de Ausências -->
|
||||
{#if notificacoesAusencias.length > 0}
|
||||
{#if notificacoes.length > 0 || notificacoesFerias.length > 0}
|
||||
<div class="divider my-2 text-xs">Ausências</div>
|
||||
{/if}
|
||||
{#each notificacoesAusencias.slice(0, 5) as notificacao (notificacao._id)}
|
||||
<button
|
||||
type="button"
|
||||
class="w-full text-left px-4 py-3 hover:bg-base-200 rounded-lg transition-colors"
|
||||
onclick={() => handleClickNotificacaoAusencias(notificacao._id)}
|
||||
>
|
||||
<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-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>
|
||||
</div>
|
||||
|
||||
<!-- Conteúdo -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="text-sm font-medium text-base-content">
|
||||
{notificacao.mensagem}
|
||||
</p>
|
||||
<p class="text-xs text-base-content/50 mt-1">
|
||||
{formatarTempo(notificacao._creationTime)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Badge -->
|
||||
<div class="flex-shrink-0">
|
||||
<div class="badge badge-warning badge-xs"></div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Sem notificações -->
|
||||
{#if notificacoes.length === 0 && notificacoesFerias.length === 0 && notificacoesAusencias.length === 0}
|
||||
<div class="px-4 py-8 text-center text-base-content/50">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="w-12 h-12 mx-auto mb-2 opacity-50"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9.143 17.082a24.248 24.248 0 0 0 3.844.148m-3.844-.148a23.856 23.856 0 0 1-5.455-1.31 8.964 8.964 0 0 0 2.3-5.542m3.155 6.852a3 3 0 0 0 5.667 1.97m1.965-2.277L21 21m-4.225-4.225a23.81 23.81 0 0 0 3.536-1.003A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6.53 6.53m10.245 10.245L6.53 6.53M3 3l3.53 3.53"
|
||||
/>
|
||||
</svg>
|
||||
<p class="text-sm">Nenhuma notificação</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/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>
|
||||
|
||||
Reference in New Issue
Block a user