From 0fee0cfd3510ef1362d46834f59d97af033d9429 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Tue, 4 Nov 2025 04:02:07 -0300
Subject: [PATCH] feat: integrate interactive absence calendar in
 atestados-licencas page

- Added the CalendarioAfastamentos component to display an interactive calendar for managing absences.
- Removed the previous static calendar placeholder and replaced it with a dynamic query to fetch absence events.
- Enhanced user experience by allowing users to visualize absence events directly in the calendar format.
---
 .../components/CalendarioAfastamentos.svelte  | 517 ++++++++++++
 .../lib/components/ti/AlertConfigModal.svelte | 760 +++++++++---------
 .../atestados-licencas/+page.svelte           |  30 +-
 3 files changed, 905 insertions(+), 402 deletions(-)
 create mode 100644 apps/web/src/lib/components/CalendarioAfastamentos.svelte

diff --git a/apps/web/src/lib/components/CalendarioAfastamentos.svelte b/apps/web/src/lib/components/CalendarioAfastamentos.svelte
new file mode 100644
index 0000000..fc72de1
--- /dev/null
+++ b/apps/web/src/lib/components/CalendarioAfastamentos.svelte
@@ -0,0 +1,517 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { Calendar } from "@fullcalendar/core";
+  import dayGridPlugin from "@fullcalendar/daygrid";
+  import interactionPlugin from "@fullcalendar/interaction";
+  import ptBrLocale from "@fullcalendar/core/locales/pt-br";
+  import type { EventInput } from "@fullcalendar/core/index.js";
+
+  interface Props {
+    eventos: Array<{
+      id: string;
+      title: string;
+      start: string;
+      end: string;
+      color: string;
+      tipo: string;
+      funcionarioNome: string;
+      funcionarioId: string;
+    }>;
+    tipoFiltro?: string;
+  }
+
+  let { eventos, tipoFiltro = "todos" }: Props = $props();
+
+  let calendarEl: HTMLDivElement;
+  let calendar: Calendar | null = null;
+  let filtroAtivo = $state<string>(tipoFiltro);
+  let showModal = $state(false);
+  let eventoSelecionado = $state<{
+    title: string;
+    start: string;
+    end: string;
+    tipo: string;
+    funcionarioNome: string;
+  } | null>(null);
+
+  // Eventos filtrados
+  const eventosFiltrados = $derived.by(() => {
+    if (filtroAtivo === "todos") return eventos;
+    return eventos.filter((e) => e.tipo === filtroAtivo);
+  });
+
+  // Converter eventos para formato FullCalendar
+  const eventosFullCalendar = $derived.by(() => {
+    return eventosFiltrados.map((evento) => ({
+      id: evento.id,
+      title: evento.title,
+      start: evento.start,
+      end: evento.end,
+      backgroundColor: evento.color,
+      borderColor: evento.color,
+      textColor: "#ffffff",
+      extendedProps: {
+        tipo: evento.tipo,
+        funcionarioNome: evento.funcionarioNome,
+        funcionarioId: evento.funcionarioId,
+      },
+    })) as EventInput[];
+  });
+
+  onMount(() => {
+    if (!calendarEl) return;
+
+    calendar = new Calendar(calendarEl, {
+      plugins: [dayGridPlugin, interactionPlugin],
+      initialView: "dayGridMonth",
+      locale: ptBrLocale,
+      firstDay: 0, // Domingo
+      headerToolbar: {
+        left: "prev,next today",
+        center: "title",
+        right: "dayGridMonth",
+      },
+      buttonText: {
+        today: "Hoje",
+        month: "Mês",
+        week: "Semana",
+        day: "Dia",
+      },
+      events: eventosFullCalendar,
+      eventClick: (info) => {
+        eventoSelecionado = {
+          title: info.event.title,
+          start: info.event.startStr || "",
+          end: info.event.endStr || "",
+          tipo: info.event.extendedProps.tipo as string,
+          funcionarioNome: info.event.extendedProps.funcionarioNome as string,
+        };
+        showModal = true;
+      },
+      eventDisplay: "block",
+      dayMaxEvents: 3,
+      moreLinkClick: "popover",
+      height: "auto",
+      contentHeight: "auto",
+      aspectRatio: 1.8,
+      eventMouseEnter: (info) => {
+        info.el.style.cursor = "pointer";
+        info.el.style.opacity = "0.9";
+      },
+      eventMouseLeave: (info) => {
+        info.el.style.opacity = "1";
+      },
+    });
+
+    calendar.render();
+
+    return () => {
+      if (calendar) {
+        calendar.destroy();
+      }
+    };
+  });
+
+  // Atualizar eventos quando mudarem
+  $effect(() => {
+    if (calendar) {
+      calendar.removeAllEvents();
+      calendar.addEventSource(eventosFullCalendar);
+      calendar.refetchEvents();
+    }
+  });
+
+  function formatarData(data: string): string {
+    return new Date(data).toLocaleDateString("pt-BR", {
+      day: "2-digit",
+      month: "long",
+      year: "numeric",
+    });
+  }
+
+  function getTipoNome(tipo: string): string {
+    const nomes: Record<string, string> = {
+      atestado_medico: "Atestado Médico",
+      declaracao_comparecimento: "Declaração de Comparecimento",
+      maternidade: "Licença Maternidade",
+      paternidade: "Licença Paternidade",
+      ferias: "Férias",
+    };
+    return nomes[tipo] || tipo;
+  }
+
+  function getTipoCor(tipo: string): string {
+    const cores: Record<string, string> = {
+      atestado_medico: "text-error",
+      declaracao_comparecimento: "text-warning",
+      maternidade: "text-secondary",
+      paternidade: "text-info",
+      ferias: "text-success",
+    };
+    return cores[tipo] || "text-base-content";
+  }
+</script>
+
+<div class="card bg-base-100 shadow-xl">
+  <div class="card-body">
+    <!-- Header com filtros -->
+    <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
+      <h2 class="card-title text-2xl">Calendário de Afastamentos</h2>
+      
+      <!-- Filtros -->
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="text-sm font-medium text-base-content/70">Filtrar:</span>
+        <div class="join">
+          <button
+            class="join-item btn btn-sm {filtroAtivo === 'todos' ? 'btn-active btn-primary' : 'btn-ghost'}"
+            onclick={() => (filtroAtivo = "todos")}
+          >
+            Todos
+          </button>
+          <button
+            class="join-item btn btn-sm {filtroAtivo === 'atestado_medico' ? 'btn-active btn-error' : 'btn-ghost'}"
+            onclick={() => (filtroAtivo = "atestado_medico")}
+          >
+            Atestados
+          </button>
+          <button
+            class="join-item btn btn-sm {filtroAtivo === 'declaracao_comparecimento' ? 'btn-active btn-warning' : 'btn-ghost'}"
+            onclick={() => (filtroAtivo = "declaracao_comparecimento")}
+          >
+            Declarações
+          </button>
+          <button
+            class="join-item btn btn-sm {filtroAtivo === 'maternidade' ? 'btn-active btn-secondary' : 'btn-ghost'}"
+            onclick={() => (filtroAtivo = "maternidade")}
+          >
+            Maternidade
+          </button>
+          <button
+            class="join-item btn btn-sm {filtroAtivo === 'paternidade' ? 'btn-active btn-info' : 'btn-ghost'}"
+            onclick={() => (filtroAtivo = "paternidade")}
+          >
+            Paternidade
+          </button>
+          <button
+            class="join-item btn btn-sm {filtroAtivo === 'ferias' ? 'btn-active btn-success' : 'btn-ghost'}"
+            onclick={() => (filtroAtivo = "ferias")}
+          >
+            Férias
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Legenda -->
+    <div class="flex flex-wrap gap-4 mb-4 p-4 bg-base-200/50 rounded-lg">
+      <div class="flex items-center gap-2">
+        <div class="w-4 h-4 rounded bg-error"></div>
+        <span class="text-sm">Atestado Médico</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <div class="w-4 h-4 rounded bg-warning"></div>
+        <span class="text-sm">Declaração</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <div class="w-4 h-4 rounded bg-secondary"></div>
+        <span class="text-sm">Licença Maternidade</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <div class="w-4 h-4 rounded bg-info"></div>
+        <span class="text-sm">Licença Paternidade</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <div class="w-4 h-4 rounded bg-success"></div>
+        <span class="text-sm">Férias</span>
+      </div>
+    </div>
+
+    <!-- Calendário -->
+    <div class="w-full overflow-x-auto">
+      <div bind:this={calendarEl} class="calendar-container"></div>
+    </div>
+
+    <!-- Modal de Detalhes -->
+    {#if showModal && eventoSelecionado}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+        onclick={() => (showModal = false)}
+        role="dialog"
+        aria-modal="true"
+      >
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+          class="bg-base-100 rounded-2xl shadow-2xl w-full max-w-md mx-4 transform transition-all"
+          onclick={(e) => e.stopPropagation()}
+        >
+          <!-- Header do Modal -->
+          <div class="p-6 border-b border-base-300 bg-gradient-to-r from-primary/10 to-secondary/10">
+            <div class="flex items-start justify-between">
+              <div class="flex-1">
+                <h3 class="text-xl font-bold text-base-content mb-2">
+                  {eventoSelecionado.funcionarioNome}
+                </h3>
+                <p class="text-sm {getTipoCor(eventoSelecionado.tipo)} font-medium">
+                  {getTipoNome(eventoSelecionado.tipo)}
+                </p>
+              </div>
+              <button
+                class="btn btn-sm btn-circle btn-ghost"
+                onclick={() => (showModal = false)}
+                aria-label="Fechar"
+              >
+                <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>
+              </button>
+            </div>
+          </div>
+
+          <!-- Conteúdo do Modal -->
+          <div class="p-6 space-y-4">
+            <div class="flex items-center gap-3 p-4 bg-base-200/50 rounded-lg">
+              <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>
+              <div>
+                <p class="text-sm text-base-content/60">Data Início</p>
+                <p class="font-semibold">{formatarData(eventoSelecionado.start)}</p>
+              </div>
+            </div>
+
+            <div class="flex items-center gap-3 p-4 bg-base-200/50 rounded-lg">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-secondary"
+                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>
+                <p class="text-sm text-base-content/60">Data Fim</p>
+                <p class="font-semibold">{formatarData(eventoSelecionado.end)}</p>
+              </div>
+            </div>
+
+            <div class="flex items-center gap-3 p-4 bg-base-200/50 rounded-lg">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-accent"
+                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>
+                <p class="text-sm text-base-content/60">Duração</p>
+                <p class="font-semibold">
+                  {(() => {
+                    const inicio = new Date(eventoSelecionado.start);
+                    const fim = new Date(eventoSelecionado.end);
+                    const diffTime = Math.abs(fim.getTime() - inicio.getTime());
+                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
+                    return `${diffDays} ${diffDays === 1 ? "dia" : "dias"}`;
+                  })()}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Footer do Modal -->
+          <div class="p-6 border-t border-base-300 flex justify-end">
+            <button
+              class="btn btn-primary"
+              onclick={() => (showModal = false)}
+            >
+              Fechar
+            </button>
+          </div>
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  :global(.calendar-container) {
+    font-family: inherit;
+  }
+
+  :global(.fc) {
+    font-family: inherit;
+  }
+
+  :global(.fc-header-toolbar) {
+    margin-bottom: 1.5rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  :global(.fc-button) {
+    background-color: hsl(var(--p));
+    border-color: hsl(var(--p));
+    color: hsl(var(--pc));
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    transition: all 0.2s;
+  }
+
+  :global(.fc-button:hover) {
+    background-color: hsl(var(--pf));
+    border-color: hsl(var(--pf));
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  }
+
+  :global(.fc-button:active) {
+    transform: translateY(0);
+  }
+
+  :global(.fc-button-active) {
+    background-color: hsl(var(--a));
+    border-color: hsl(var(--a));
+    color: hsl(var(--ac));
+  }
+
+  :global(.fc-today-button) {
+    background-color: hsl(var(--s));
+    border-color: hsl(var(--s));
+  }
+
+  :global(.fc-daygrid-day-number) {
+    padding: 0.5rem;
+    font-weight: 500;
+  }
+
+  :global(.fc-day-today) {
+    background-color: hsl(var(--p) / 0.1) !important;
+  }
+
+  :global(.fc-day-today .fc-daygrid-day-number) {
+    background-color: hsl(var(--p));
+    color: hsl(var(--pc));
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+  }
+
+  :global(.fc-event) {
+    border-radius: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  }
+
+  :global(.fc-event:hover) {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    opacity: 0.9;
+  }
+
+  :global(.fc-event-title) {
+    font-weight: 600;
+    padding: 0;
+  }
+
+  :global(.fc-daygrid-event) {
+    margin: 0.125rem 0;
+  }
+
+  :global(.fc-daygrid-day-frame) {
+    min-height: 100px;
+  }
+
+  :global(.fc-col-header-cell) {
+    padding: 0.75rem 0;
+    background-color: hsl(var(--b2));
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.875rem;
+    color: hsl(var(--bc));
+  }
+
+  :global(.fc-daygrid-day) {
+    border-color: hsl(var(--b3));
+  }
+
+  :global(.fc-scrollgrid) {
+    border-color: hsl(var(--b3));
+  }
+
+  :global(.fc-daygrid-day-frame) {
+    padding: 0.25rem;
+  }
+
+  :global(.fc-more-link) {
+    font-weight: 600;
+    color: hsl(var(--p));
+    background-color: hsl(var(--p) / 0.1);
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.375rem;
+    margin-top: 0.25rem;
+  }
+
+  :global(.fc-popover) {
+    background-color: hsl(var(--b1));
+    border-color: hsl(var(--b3));
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    border-radius: 0.5rem;
+  }
+
+  :global(.fc-popover-header) {
+    background-color: hsl(var(--b2));
+    border-color: hsl(var(--b3));
+    padding: 0.75rem;
+    font-weight: 600;
+  }
+
+  :global(.fc-popover-body) {
+    padding: 0.5rem;
+  }
+</style>
diff --git a/apps/web/src/lib/components/ti/AlertConfigModal.svelte b/apps/web/src/lib/components/ti/AlertConfigModal.svelte
index 1ae2a77..f4ae50c 100644
--- a/apps/web/src/lib/components/ti/AlertConfigModal.svelte
+++ b/apps/web/src/lib/components/ti/AlertConfigModal.svelte
@@ -1,377 +1,383 @@
-<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";
-
-  let { onClose }: { onClose: () => void } = $props();
-
-  const client = useConvexClient();
-  const alertas = useQuery(api.monitoramento.listarAlertas, {});
-
-  // Estado para novo alerta
-  let editingAlertId = $state<Id<"alertConfigurations"> | null>(null);
-  let metricName = $state("cpuUsage");
-  let threshold = $state(80);
-  let operator = $state<">" | "<" | ">=" | "<=" | "==">(">");
-  let enabled = $state(true);
-  let notifyByEmail = $state(false);
-  let notifyByChat = $state(true);
-  let saving = $state(false);
-  let showForm = $state(false);
-
-  const metricOptions = [
-    { value: "cpuUsage", label: "Uso de CPU (%)" },
-    { value: "memoryUsage", label: "Uso de Memória (%)" },
-    { value: "networkLatency", label: "Latência de Rede (ms)" },
-    { value: "storageUsed", label: "Armazenamento Usado (%)" },
-    { value: "usuariosOnline", label: "Usuários Online" },
-    { value: "mensagensPorMinuto", label: "Mensagens por Minuto" },
-    { value: "tempoRespostaMedio", label: "Tempo de Resposta (ms)" },
-    { value: "errosCount", label: "Contagem de Erros" },
-  ];
-
-  const operatorOptions = [
-    { value: ">", label: "Maior que (>)" },
-    { value: ">=", label: "Maior ou igual (≥)" },
-    { value: "<", label: "Menor que (<)" },
-    { value: "<=", label: "Menor ou igual (≤)" },
-    { value: "==", label: "Igual a (=)" },
-  ];
-
-  function resetForm() {
-    editingAlertId = null;
-    metricName = "cpuUsage";
-    threshold = 80;
-    operator = ">";
-    enabled = true;
-    notifyByEmail = false;
-    notifyByChat = true;
-    showForm = false;
-  }
-
-  function editAlert(alert: any) {
-    editingAlertId = alert._id;
-    metricName = alert.metricName;
-    threshold = alert.threshold;
-    operator = alert.operator;
-    enabled = alert.enabled;
-    notifyByEmail = alert.notifyByEmail;
-    notifyByChat = alert.notifyByChat;
-    showForm = true;
-  }
-
-  async function saveAlert() {
-    saving = true;
-    try {
-      await client.mutation(api.monitoramento.configurarAlerta, {
-        alertId: editingAlertId || undefined,
-        metricName,
-        threshold,
-        operator,
-        enabled,
-        notifyByEmail,
-        notifyByChat,
-      });
-      
-      resetForm();
-    } catch (error) {
-      console.error("Erro ao salvar alerta:", error);
-      alert("Erro ao salvar alerta. Tente novamente.");
-    } finally {
-      saving = false;
-    }
-  }
-
-  async function deleteAlert(alertId: Id<"alertConfigurations">) {
-    if (!confirm("Tem certeza que deseja deletar este alerta?")) return;
-    
-    try {
-      await client.mutation(api.monitoramento.deletarAlerta, { alertId });
-    } catch (error) {
-      console.error("Erro ao deletar alerta:", error);
-      alert("Erro ao deletar alerta. Tente novamente.");
-    }
-  }
-
-  function getMetricLabel(metricName: string): string {
-    return metricOptions.find(m => m.value === metricName)?.label || metricName;
-  }
-
-  function getOperatorLabel(op: string): string {
-    return operatorOptions.find(o => o.value === op)?.label || op;
-  }
-</script>
-
-<dialog class="modal modal-open">
-  <div class="modal-box max-w-4xl bg-gradient-to-br from-base-100 to-base-200">
-    <button
-      type="button"
-      class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
-      onclick={onClose}
-    >
-      ✕
-    </button>
-
-    <h3 class="font-bold text-3xl text-primary mb-2">⚙️ Configuração de Alertas</h3>
-    <p class="text-base-content/60 mb-6">Configure alertas personalizados para monitoramento do sistema</p>
-
-    <!-- Botão Novo Alerta -->
-    {#if !showForm}
-      <button
-        type="button"
-        class="btn btn-primary mb-6"
-        onclick={() => showForm = true}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-        </svg>
-        Novo Alerta
-      </button>
-    {/if}
-
-    <!-- Formulário de Alerta -->
-    {#if showForm}
-      <div class="card bg-base-100 shadow-xl mb-6 border-2 border-primary/20">
-        <div class="card-body">
-          <h4 class="card-title text-xl">
-            {editingAlertId ? "Editar Alerta" : "Novo Alerta"}
-          </h4>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-            <!-- Métrica -->
-            <div class="form-control">
-              <label class="label" for="metric">
-                <span class="label-text font-semibold">Métrica</span>
-              </label>
-              <select 
-                id="metric"
-                class="select select-bordered select-primary"
-                bind:value={metricName}
-              >
-                {#each metricOptions as option}
-                  <option value={option.value}>{option.label}</option>
-                {/each}
-              </select>
-            </div>
-
-            <!-- Operador -->
-            <div class="form-control">
-              <label class="label" for="operator">
-                <span class="label-text font-semibold">Condição</span>
-              </label>
-              <select 
-                id="operator"
-                class="select select-bordered select-primary"
-                bind:value={operator}
-              >
-                {#each operatorOptions as option}
-                  <option value={option.value}>{option.label}</option>
-                {/each}
-              </select>
-            </div>
-
-            <!-- Threshold -->
-            <div class="form-control">
-              <label class="label" for="threshold">
-                <span class="label-text font-semibold">Valor Limite</span>
-              </label>
-              <input 
-                id="threshold"
-                type="number"
-                class="input input-bordered input-primary"
-                bind:value={threshold}
-                min="0"
-                step="1"
-              />
-            </div>
-
-            <!-- Ativo -->
-            <div class="form-control">
-              <label class="label cursor-pointer justify-start gap-4">
-                <span class="label-text font-semibold">Alerta Ativo</span>
-                <input 
-                  type="checkbox"
-                  class="toggle toggle-primary"
-                  bind:checked={enabled}
-                />
-              </label>
-            </div>
-          </div>
-
-          <!-- Notificações -->
-          <div class="divider">Método de Notificação</div>
-          <div class="flex gap-6">
-            <label class="label cursor-pointer gap-3">
-              <input 
-                type="checkbox"
-                class="checkbox checkbox-primary"
-                bind:checked={notifyByChat}
-              />
-              <span class="label-text">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
-                </svg>
-                Notificar por Chat
-              </span>
-            </label>
-            
-            <label class="label cursor-pointer gap-3">
-              <input 
-                type="checkbox"
-                class="checkbox checkbox-secondary"
-                bind:checked={notifyByEmail}
-              />
-              <span class="label-text">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2" 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>
-                Notificar por E-mail
-              </span>
-            </label>
-          </div>
-
-          <!-- Preview -->
-          <div class="alert alert-info mt-4">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-            <div>
-              <h4 class="font-bold">Preview do Alerta:</h4>
-              <p class="text-sm">
-                Alertar quando <strong>{getMetricLabel(metricName)}</strong> for 
-                <strong>{getOperatorLabel(operator)}</strong> a <strong>{threshold}</strong>
-              </p>
-            </div>
-          </div>
-
-          <!-- Botões -->
-          <div class="card-actions justify-end mt-4">
-            <button 
-              type="button"
-              class="btn btn-ghost"
-              onclick={resetForm}
-              disabled={saving}
-            >
-              Cancelar
-            </button>
-            <button 
-              type="button"
-              class="btn btn-primary"
-              onclick={saveAlert}
-              disabled={saving || (!notifyByChat && !notifyByEmail)}
-            >
-              {#if saving}
-                <span class="loading loading-spinner"></span>
-                Salvando...
-              {: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>
-                Salvar Alerta
-              {/if}
-            </button>
-          </div>
-        </div>
-      </div>
-    {/if}
-
-    <!-- Lista de Alertas -->
-    <div class="divider">Alertas Configurados</div>
-    
-    {#if alertas && alertas.length > 0}
-      <div class="overflow-x-auto">
-        <table class="table table-zebra">
-          <thead>
-            <tr>
-              <th>Métrica</th>
-              <th>Condição</th>
-              <th>Status</th>
-              <th>Notificações</th>
-              <th>Ações</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#each alertas as alerta}
-              <tr class={!alerta.enabled ? "opacity-50" : ""}>
-                <td>
-                  <div class="font-semibold">{getMetricLabel(alerta.metricName)}</div>
-                </td>
-                <td>
-                  <div class="badge badge-outline">
-                    {getOperatorLabel(alerta.operator)} {alerta.threshold}
-                  </div>
-                </td>
-                <td>
-                  {#if alerta.enabled}
-                    <div class="badge badge-success gap-2">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                      Ativo
-                    </div>
-                  {:else}
-                    <div class="badge badge-ghost gap-2">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                      </svg>
-                      Inativo
-                    </div>
-                  {/if}
-                </td>
-                <td>
-                  <div class="flex gap-1">
-                    {#if alerta.notifyByChat}
-                      <div class="badge badge-primary badge-sm">Chat</div>
-                    {/if}
-                    {#if alerta.notifyByEmail}
-                      <div class="badge badge-secondary badge-sm">Email</div>
-                    {/if}
-                  </div>
-                </td>
-                <td>
-                  <div class="flex gap-2">
-                    <button
-                      type="button"
-                      class="btn btn-ghost btn-xs"
-                      onclick={() => editAlert(alerta)}
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                      </svg>
-                    </button>
-                    <button
-                      type="button"
-                      class="btn btn-ghost btn-xs text-error"
-                      onclick={() => deleteAlert(alerta._id)}
-                    >
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                      </svg>
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    {:else}
-      <div class="alert">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-        </svg>
-        <span>Nenhum alerta configurado. Clique em "Novo Alerta" para criar um.</span>
-      </div>
-    {/if}
-
-    <div class="modal-action">
-      <button type="button" class="btn btn-lg" onclick={onClose}>Fechar</button>
-    </div>
-  </div>
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-  <form method="dialog" class="modal-backdrop" onclick={onClose}>
-    <button type="button">close</button>
-  </form>
-</dialog>
-
+<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";
+
+  let { onClose }: { onClose: () => void } = $props();
+
+  const client = useConvexClient();
+  const alertasQuery = useQuery(api.monitoramento.listarAlertas, {});
+  const alertas = $derived.by(() => {
+    if (!alertasQuery) return [];
+    // O useQuery pode retornar o array diretamente ou em .data
+    if (Array.isArray(alertasQuery)) return alertasQuery;
+    return alertasQuery.data ?? [];
+  });
+
+  // Estado para novo alerta
+  let editingAlertId = $state<Id<"alertConfigurations"> | null>(null);
+  let metricName = $state("cpuUsage");
+  let threshold = $state(80);
+  let operator = $state<">" | "<" | ">=" | "<=" | "==">(">");
+  let enabled = $state(true);
+  let notifyByEmail = $state(false);
+  let notifyByChat = $state(true);
+  let saving = $state(false);
+  let showForm = $state(false);
+
+  const metricOptions = [
+    { value: "cpuUsage", label: "Uso de CPU (%)" },
+    { value: "memoryUsage", label: "Uso de Memória (%)" },
+    { value: "networkLatency", label: "Latência de Rede (ms)" },
+    { value: "storageUsed", label: "Armazenamento Usado (%)" },
+    { value: "usuariosOnline", label: "Usuários Online" },
+    { value: "mensagensPorMinuto", label: "Mensagens por Minuto" },
+    { value: "tempoRespostaMedio", label: "Tempo de Resposta (ms)" },
+    { value: "errosCount", label: "Contagem de Erros" },
+  ];
+
+  const operatorOptions = [
+    { value: ">", label: "Maior que (>)" },
+    { value: ">=", label: "Maior ou igual (≥)" },
+    { value: "<", label: "Menor que (<)" },
+    { value: "<=", label: "Menor ou igual (≤)" },
+    { value: "==", label: "Igual a (=)" },
+  ];
+
+  function resetForm() {
+    editingAlertId = null;
+    metricName = "cpuUsage";
+    threshold = 80;
+    operator = ">";
+    enabled = true;
+    notifyByEmail = false;
+    notifyByChat = true;
+    showForm = false;
+  }
+
+  function editAlert(alert: any) {
+    editingAlertId = alert._id;
+    metricName = alert.metricName;
+    threshold = alert.threshold;
+    operator = alert.operator;
+    enabled = alert.enabled;
+    notifyByEmail = alert.notifyByEmail;
+    notifyByChat = alert.notifyByChat;
+    showForm = true;
+  }
+
+  async function saveAlert() {
+    saving = true;
+    try {
+      await client.mutation(api.monitoramento.configurarAlerta, {
+        alertId: editingAlertId || undefined,
+        metricName,
+        threshold,
+        operator,
+        enabled,
+        notifyByEmail,
+        notifyByChat,
+      });
+      
+      resetForm();
+    } catch (error) {
+      console.error("Erro ao salvar alerta:", error);
+      alert("Erro ao salvar alerta. Tente novamente.");
+    } finally {
+      saving = false;
+    }
+  }
+
+  async function deleteAlert(alertId: Id<"alertConfigurations">) {
+    if (!confirm("Tem certeza que deseja deletar este alerta?")) return;
+    
+    try {
+      await client.mutation(api.monitoramento.deletarAlerta, { alertId });
+    } catch (error) {
+      console.error("Erro ao deletar alerta:", error);
+      alert("Erro ao deletar alerta. Tente novamente.");
+    }
+  }
+
+  function getMetricLabel(metricName: string): string {
+    return metricOptions.find(m => m.value === metricName)?.label || metricName;
+  }
+
+  function getOperatorLabel(op: string): string {
+    return operatorOptions.find(o => o.value === op)?.label || op;
+  }
+</script>
+
+<dialog class="modal modal-open">
+  <div class="modal-box max-w-4xl bg-gradient-to-br from-base-100 to-base-200">
+    <button
+      type="button"
+      class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+      onclick={onClose}
+    >
+      ✕
+    </button>
+
+    <h3 class="font-bold text-3xl text-primary mb-2">⚙️ Configuração de Alertas</h3>
+    <p class="text-base-content/60 mb-6">Configure alertas personalizados para monitoramento do sistema</p>
+
+    <!-- Botão Novo Alerta -->
+    {#if !showForm}
+      <button
+        type="button"
+        class="btn btn-primary mb-6"
+        onclick={() => showForm = true}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+        Novo Alerta
+      </button>
+    {/if}
+
+    <!-- Formulário de Alerta -->
+    {#if showForm}
+      <div class="card bg-base-100 shadow-xl mb-6 border-2 border-primary/20">
+        <div class="card-body">
+          <h4 class="card-title text-xl">
+            {editingAlertId ? "Editar Alerta" : "Novo Alerta"}
+          </h4>
+
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+            <!-- Métrica -->
+            <div class="form-control">
+              <label class="label" for="metric">
+                <span class="label-text font-semibold">Métrica</span>
+              </label>
+              <select 
+                id="metric"
+                class="select select-bordered select-primary"
+                bind:value={metricName}
+              >
+                {#each metricOptions as option}
+                  <option value={option.value}>{option.label}</option>
+                {/each}
+              </select>
+            </div>
+
+            <!-- Operador -->
+            <div class="form-control">
+              <label class="label" for="operator">
+                <span class="label-text font-semibold">Condição</span>
+              </label>
+              <select 
+                id="operator"
+                class="select select-bordered select-primary"
+                bind:value={operator}
+              >
+                {#each operatorOptions as option}
+                  <option value={option.value}>{option.label}</option>
+                {/each}
+              </select>
+            </div>
+
+            <!-- Threshold -->
+            <div class="form-control">
+              <label class="label" for="threshold">
+                <span class="label-text font-semibold">Valor Limite</span>
+              </label>
+              <input 
+                id="threshold"
+                type="number"
+                class="input input-bordered input-primary"
+                bind:value={threshold}
+                min="0"
+                step="1"
+              />
+            </div>
+
+            <!-- Ativo -->
+            <div class="form-control">
+              <label class="label cursor-pointer justify-start gap-4">
+                <span class="label-text font-semibold">Alerta Ativo</span>
+                <input 
+                  type="checkbox"
+                  class="toggle toggle-primary"
+                  bind:checked={enabled}
+                />
+              </label>
+            </div>
+          </div>
+
+          <!-- Notificações -->
+          <div class="divider">Método de Notificação</div>
+          <div class="flex gap-6">
+            <label class="label cursor-pointer gap-3">
+              <input 
+                type="checkbox"
+                class="checkbox checkbox-primary"
+                bind:checked={notifyByChat}
+              />
+              <span class="label-text">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+                </svg>
+                Notificar por Chat
+              </span>
+            </label>
+            
+            <label class="label cursor-pointer gap-3">
+              <input 
+                type="checkbox"
+                class="checkbox checkbox-secondary"
+                bind:checked={notifyByEmail}
+              />
+              <span class="label-text">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-2" 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>
+                Notificar por E-mail
+              </span>
+            </label>
+          </div>
+
+          <!-- Preview -->
+          <div class="alert alert-info mt-4">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            <div>
+              <h4 class="font-bold">Preview do Alerta:</h4>
+              <p class="text-sm">
+                Alertar quando <strong>{getMetricLabel(metricName)}</strong> for 
+                <strong>{getOperatorLabel(operator)}</strong> a <strong>{threshold}</strong>
+              </p>
+            </div>
+          </div>
+
+          <!-- Botões -->
+          <div class="card-actions justify-end mt-4">
+            <button 
+              type="button"
+              class="btn btn-ghost"
+              onclick={resetForm}
+              disabled={saving}
+            >
+              Cancelar
+            </button>
+            <button 
+              type="button"
+              class="btn btn-primary"
+              onclick={saveAlert}
+              disabled={saving || (!notifyByChat && !notifyByEmail)}
+            >
+              {#if saving}
+                <span class="loading loading-spinner"></span>
+                Salvando...
+              {: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>
+                Salvar Alerta
+              {/if}
+            </button>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    <!-- Lista de Alertas -->
+    <div class="divider">Alertas Configurados</div>
+    
+    {#if alertas.length > 0}
+      <div class="overflow-x-auto">
+        <table class="table table-zebra">
+          <thead>
+            <tr>
+              <th>Métrica</th>
+              <th>Condição</th>
+              <th>Status</th>
+              <th>Notificações</th>
+              <th>Ações</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each alertas as alerta}
+              <tr class={!alerta.enabled ? "opacity-50" : ""}>
+                <td>
+                  <div class="font-semibold">{getMetricLabel(alerta.metricName)}</div>
+                </td>
+                <td>
+                  <div class="badge badge-outline">
+                    {getOperatorLabel(alerta.operator)} {alerta.threshold}
+                  </div>
+                </td>
+                <td>
+                  {#if alerta.enabled}
+                    <div class="badge badge-success gap-2">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                      Ativo
+                    </div>
+                  {:else}
+                    <div class="badge badge-ghost gap-2">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                      </svg>
+                      Inativo
+                    </div>
+                  {/if}
+                </td>
+                <td>
+                  <div class="flex gap-1">
+                    {#if alerta.notifyByChat}
+                      <div class="badge badge-primary badge-sm">Chat</div>
+                    {/if}
+                    {#if alerta.notifyByEmail}
+                      <div class="badge badge-secondary badge-sm">Email</div>
+                    {/if}
+                  </div>
+                </td>
+                <td>
+                  <div class="flex gap-2">
+                    <button
+                      type="button"
+                      class="btn btn-ghost btn-xs"
+                      onclick={() => editAlert(alerta)}
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                      </svg>
+                    </button>
+                    <button
+                      type="button"
+                      class="btn btn-ghost btn-xs text-error"
+                      onclick={() => deleteAlert(alerta._id)}
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {:else}
+      <div class="alert">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info shrink-0 w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+        </svg>
+        <span>Nenhum alerta configurado. Clique em "Novo Alerta" para criar um.</span>
+      </div>
+    {/if}
+
+    <div class="modal-action">
+      <button type="button" class="btn btn-lg" onclick={onClose}>Fechar</button>
+    </div>
+  </div>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <form method="dialog" class="modal-backdrop" onclick={onClose}>
+    <button type="button">close</button>
+  </form>
+</dialog>
+
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
index e23f206..31c1a52 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/atestados-licencas/+page.svelte
@@ -6,6 +6,7 @@
   import FuncionarioSelect from "$lib/components/FuncionarioSelect.svelte";
   import FileUpload from "$lib/components/FileUpload.svelte";
   import ErrorModal from "$lib/components/ErrorModal.svelte";
+  import CalendarioAfastamentos from "$lib/components/CalendarioAfastamentos.svelte";
   import type { Id } from "@sgse-app/backend/convex/_generated/dataModel";
 
   const client = useConvexClient();
@@ -767,31 +768,10 @@
       </div>
     </div>
 
-    <!-- Calendário Simplificado -->
-    <div class="card bg-base-100 shadow-xl mb-6">
-      <div class="card-body">
-        <h2 class="card-title mb-4">Calendário de Afastamentos</h2>
-        <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
-            >O calendário interativo completo será implementado em breve. Por
-            enquanto, visualize os eventos na tabela abaixo.</span
-          >
-        </div>
-      </div>
-    </div>
+    <!-- Calendário Interativo -->
+    {#if eventosQuery?.data}
+      <CalendarioAfastamentos eventos={eventosQuery.data} tipoFiltro={filtroTipo} />
+    {/if}
 
     <!-- Gráficos -->
     {#if graficosQuery?.data}