Merge branch 'feat-central-chamados' into feat-cibersecurity

apps/web/src/lib/components/chamados/SlaChart.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { Chart, registerables } from 'chart.js';
+
+  Chart.register(...registerables);
+
+  type Props = {
+    dadosSla: {
+      statusSla: {
+        dentroPrazo: number;
+        proximoVencimento: number;
+        vencido: number;
+        semPrazo: number;
+      };
+      porPrioridade: {
+        baixa: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
+        media: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
+        alta: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
+        critica: { dentroPrazo: number; proximoVencimento: number; vencido: number; total: number };
+      };
+      taxaCumprimento: number;
+      totalComPrazo: number;
+      atualizadoEm: number;
+    };
+    height?: number;
+  };
+
+  let { dadosSla, height = 400 }: Props = $props();
+  
+  let canvas: HTMLCanvasElement;
+  let chart: Chart | null = null;
+
+  function prepararDados() {
+    const prioridades = ['Baixa', 'Média', 'Alta', 'Crítica'];
+    const cores = {
+      dentroPrazo: 'rgba(34, 197, 94, 0.8)', // verde
+      proximoVencimento: 'rgba(251, 191, 36, 0.8)', // amarelo
+      vencido: 'rgba(239, 68, 68, 0.8)', // vermelho
+    };
+
+    return {
+      labels: prioridades,
+      datasets: [
+        {
+          label: 'Dentro do Prazo',
+          data: [
+            dadosSla.porPrioridade.baixa.dentroPrazo,
+            dadosSla.porPrioridade.media.dentroPrazo,
+            dadosSla.porPrioridade.alta.dentroPrazo,
+            dadosSla.porPrioridade.critica.dentroPrazo,
+          ],
+          backgroundColor: cores.dentroPrazo,
+          borderColor: 'rgba(34, 197, 94, 1)',
+          borderWidth: 2,
+        },
+        {
+          label: 'Próximo ao Vencimento',
+          data: [
+            dadosSla.porPrioridade.baixa.proximoVencimento,
+            dadosSla.porPrioridade.media.proximoVencimento,
+            dadosSla.porPrioridade.alta.proximoVencimento,
+            dadosSla.porPrioridade.critica.proximoVencimento,
+          ],
+          backgroundColor: cores.proximoVencimento,
+          borderColor: 'rgba(251, 191, 36, 1)',
+          borderWidth: 2,
+        },
+        {
+          label: 'Vencido',
+          data: [
+            dadosSla.porPrioridade.baixa.vencido,
+            dadosSla.porPrioridade.media.vencido,
+            dadosSla.porPrioridade.alta.vencido,
+            dadosSla.porPrioridade.critica.vencido,
+          ],
+          backgroundColor: cores.vencido,
+          borderColor: 'rgba(239, 68, 68, 1)',
+          borderWidth: 2,
+        },
+      ],
+    };
+  }
+
+  onMount(() => {
+    if (canvas) {
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        const chartData = prepararDados();
+        chart = new Chart(ctx, {
+          type: 'bar',
+          data: chartData,
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                display: true,
+                position: 'top',
+                labels: {
+                  color: '#a6adbb',
+                  font: {
+                    size: 12,
+                    family: "'Inter', sans-serif",
+                  },
+                  usePointStyle: true,
+                  padding: 15,
+                }
+              },
+              tooltip: {
+                backgroundColor: 'rgba(0, 0, 0, 0.9)',
+                titleColor: '#fff',
+                bodyColor: '#fff',
+                borderColor: '#570df8',
+                borderWidth: 1,
+                padding: 12,
+                callbacks: {
+                  label: function(context) {
+                    const label = context.dataset.label || '';
+                    const value = context.parsed.y;
+                    const prioridade = context.label;
+                    return `${label}: ${value} chamado(s)`;
+                  }
+                }
+              }
+            },
+            scales: {
+              x: {
+                stacked: true,
+                grid: {
+                  color: 'rgba(255, 255, 255, 0.05)',
+                },
+                ticks: {
+                  color: '#a6adbb',
+                  font: {
+                    size: 11,
+                    weight: '500',
+                  }
+                }
+              },
+              y: {
+                stacked: true,
+                beginAtZero: true,
+                grid: {
+                  color: 'rgba(255, 255, 255, 0.05)',
+                },
+                ticks: {
+                  color: '#a6adbb',
+                  font: {
+                    size: 11,
+                  },
+                  stepSize: 1,
+                }
+              }
+            },
+            animation: {
+              duration: 800,
+              easing: 'easeInOutQuart'
+            }
+          }
+        });
+      }
+    }
+  });
+
+  $effect(() => {
+    if (chart && dadosSla) {
+      const chartData = prepararDados();
+      chart.data = chartData;
+      chart.update('active');
+    }
+  });
+
+  onDestroy(() => {
+    if (chart) {
+      chart.destroy();
+    }
+  });
+</script>
+
+<div style="height: {height}px; position: relative;">
+  <canvas bind:this={canvas}></canvas>
+</div>
+

apps/web/src/lib/components/chamados/TicketForm.svelte

@@ -1,28 +1,23 @@
 <script lang="ts">
-  import type { Doc, Id } from "@sgse-app/backend/convex/_generated/dataModel";
+  import type { Doc } from "@sgse-app/backend/convex/_generated/dataModel";
   import { createEventDispatcher } from "svelte";
 
-  type SlaConfig = Doc<"slaConfigs">;
-
   interface FormValues {
     titulo: string;
     descricao: string;
     tipo: Doc<"tickets">["tipo"];
     prioridade: Doc<"tickets">["prioridade"];
     categoria: string;
-    slaConfigId?: Id<"slaConfigs">;
     canalOrigem?: string;
     anexos: File[];
   }
 
 interface Props {
-  slaConfigs?: Array<SlaConfig>;
   loading?: boolean;
 }
 
 const dispatch = createEventDispatcher<{ submit: { values: FormValues } }>();
 const props = $props<Props>();
-const slaConfigs = $derived<Array<SlaConfig>>(props.slaConfigs ?? []);
 const loading = $derived(props.loading ?? false);
 
   let titulo = $state("");
@@ -30,7 +25,6 @@ const loading = $derived(props.loading ?? false);
   let tipo = $state<Doc<"tickets">["tipo"]>("chamado");
   let prioridade = $state<Doc<"tickets">["prioridade"]>("media");
   let categoria = $state("");
-let slaConfigId = $state<Id<"slaConfigs"> | "">("");
   let canalOrigem = $state("Portal SGSE");
   let anexos = $state<Array<File>>([]);
   let errors = $state<Record<string, string>>({});
@@ -67,10 +61,6 @@ let slaConfigId = $state<Id<"slaConfigs"> | "">("");
     event.preventDefault();
     if (!validate()) return;
 
-    const slaSelecionada =
-      (slaConfigId && slaConfigId !== "" ? (slaConfigId as Id<"slaConfigs">) : slaConfigs[0]?._id) ??
-      undefined;
-
     dispatch("submit", {
       values: {
         titulo: titulo.trim(),
@@ -78,7 +68,6 @@ let slaConfigId = $state<Id<"slaConfigs"> | "">("");
         tipo,
         prioridade,
         categoria: categoria.trim(),
-        slaConfigId: slaSelecionada,
         canalOrigem,
         anexos,
       },
@@ -150,22 +139,6 @@ let slaConfigId = $state<Id<"slaConfigs"> | "">("");
         <span class="text-error mt-1 text-sm">{errors.categoria}</span>
       {/if}
     </div>
-
-    <div class="form-control">
-      <label class="label">
-        <span class="label-text font-semibold">Configuração de SLA</span>
-      </label>
-      <select class="select select-bordered w-full" bind:value={slaConfigId}>
-        {#each slaConfigs as sla (sla._id)}
-          <option value={sla._id}>
-            {sla.nome} • Resp. {sla.tempoRespostaHoras}h • Conc.
-            {sla.tempoConclusaoHoras}h
-          </option>
-        {:else}
-          <option value="">Padrão (24h)</option>
-        {/each}
-      </select>
-    </div>
   </section>
 
   <section class="form-control">

apps/web/src/lib/hooks/useConvexWithAuth.ts

@@ -30,15 +30,25 @@ export function useConvexWithAuth() {
   const clientWithAuth = client as ConvexClientWithAuth;
   
   // Configurar token se disponível
-  if (clientWithAuth && typeof clientWithAuth.setAuth === "function" && token) {
+  if (clientWithAuth && token) {
     try {
-      clientWithAuth.setAuth(token);
-      if (import.meta.env.DEV) {
-        console.log("✅ [useConvexWithAuth] Token configurado:", token.substring(0, 20) + "...");
+      // Tentar setAuth se disponível
+      if (typeof clientWithAuth.setAuth === "function") {
+        clientWithAuth.setAuth(token);
+        if (import.meta.env.DEV) {
+          console.log("✅ [useConvexWithAuth] Token configurado via setAuth:", token.substring(0, 20) + "...");
+        }
+      } else {
+        // Se setAuth não estiver disponível, o token deve ser passado via createSvelteAuthClient
+        if (import.meta.env.DEV) {
+          console.log("ℹ️ [useConvexWithAuth] Token disponível, autenticação gerenciada por createSvelteAuthClient");
+        }
       }
     } catch (e) {
       console.warn("⚠️ [useConvexWithAuth] Erro ao configurar token:", e);
     }
+  } else if (!token && import.meta.env.DEV) {
+    console.warn("⚠️ [useConvexWithAuth] Token não disponível");
   }
   
   return client;

apps/web/src/routes/(dashboard)/abrir-chamado/+page.svelte

@@ -7,14 +7,12 @@
   import TicketTimeline from "$lib/components/chamados/TicketTimeline.svelte";
   import { chamadosStore } from "$lib/stores/chamados";
   import { resolve } from "$app/paths";
+  import { useConvexWithAuth } from "$lib/hooks/useConvexWithAuth";
 
   type Ticket = Doc<"tickets">;
-  type SlaConfig = Doc<"slaConfigs">;
 
   const client = useConvexClient();
 
-  let slaConfigs = $state<Array<SlaConfig>>([]);
-  let carregandoSla = $state(true);
   let submitLoading = $state(false);
   let resetSignal = $state(0);
   let feedback = $state<{ tipo: "success" | "error"; mensagem: string; numero?: string } | null>(
@@ -41,23 +39,11 @@
     },
   ]);
 
-  onMount(() => {
-    carregarSlaConfigs();
+  $effect(() => {
+    // Garante que o cliente Convex use o token do usuário logado
+    useConvexWithAuth();
   });
 
-  async function carregarSlaConfigs() {
-    try {
-      carregandoSla = true;
-      const lista = await client.query(api.chamados.listarSlaConfigs, {});
-      slaConfigs = lista ?? [];
-    } catch (error) {
-      console.error("Erro ao carregar SLA:", error);
-      slaConfigs = [];
-    } finally {
-      carregandoSla = false;
-    }
-  }
-
   async function uploadArquivo(file: File) {
     const uploadUrl = await client.mutation(api.chamados.generateUploadUrl, {});
 
@@ -98,7 +84,6 @@
         tipo: values.tipo,
         categoria: values.categoria,
         prioridade: values.prioridade,
-        slaConfigId: values.slaConfigId,
         canalOrigem: values.canalOrigem,
         anexos,
       });
@@ -186,53 +171,15 @@
         </p>
         <div class="mt-6">
           {#if resetSignal % 2 === 0}
-            <TicketForm {slaConfigs} loading={submitLoading} on:submit={handleSubmit} />
+            <TicketForm loading={submitLoading} on:submit={handleSubmit} />
           {:else}
-            <TicketForm {slaConfigs} loading={submitLoading} on:submit={handleSubmit} />
+            <TicketForm loading={submitLoading} on:submit={handleSubmit} />
           {/if}
         </div>
       </div>
     </div>
 
     <aside class="space-y-6">
-      <div class="rounded-3xl border border-base-200 bg-base-100/90 p-6 shadow-lg">
-        <h3 class="font-semibold text-base-content">Configurações de SLA</h3>
-        {#if carregandoSla}
-          <div class="flex items-center justify-center py-6">
-            <span class="loading loading-spinner loading-md"></span>
-          </div>
-        {:else if slaConfigs.length === 0}
-          <p class="text-sm text-base-content/60">
-            Nenhuma configuração customizada cadastrada. Os prazos padrão serão aplicados (Resposta:
-            4h, Conclusão: 24h).
-          </p>
-        {:else}
-          <div class="mt-4 space-y-4">
-            {#each slaConfigs as sla (sla._id)}
-              <div class="rounded-2xl border border-primary/20 bg-primary/5 p-4">
-                <p class="text-sm font-semibold text-primary">{sla.nome}</p>
-                <p class="text-xs text-base-content/60">{sla.descricao}</p>
-                <div class="mt-3 grid grid-cols-2 gap-2 text-xs">
-                  <div class="rounded-xl bg-base-100/90 p-2 text-center">
-                    <p class="font-semibold">{sla.tempoRespostaHoras}h</p>
-                    <p class="text-base-content/60">Resposta</p>
-                  </div>
-                  <div class="rounded-xl bg-base-100/90 p-2 text-center">
-                    <p class="font-semibold">{sla.tempoConclusaoHoras}h</p>
-                    <p class="text-base-content/60">Conclusão</p>
-                  </div>
-                </div>
-                {#if sla.alertaAntecedenciaHoras}
-                  <p class="text-[11px] text-base-content/50 mt-2">
-                    Alerta {sla.alertaAntecedenciaHoras}h antes do prazo.
-                  </p>
-                {/if}
-              </div>
-            {/each}
-          </div>
-        {/if}
-      </div>
-
       <div class="rounded-3xl border border-base-200 bg-base-100/90 p-6 shadow-lg">
         <h3 class="font-semibold text-base-content">Como funciona a timeline</h3>
         <p class="text-sm text-base-content/60 mb-4">

apps/web/src/routes/(dashboard)/perfil/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { useConvexClient, useQuery } from 'convex-svelte';
 import { api } from '@sgse-app/backend/convex/_generated/api';
+import { resolve } from '$app/paths';
 	import AprovarFerias from '$lib/components/AprovarFerias.svelte';
 	import WizardSolicitacaoFerias from '$lib/components/ferias/WizardSolicitacaoFerias.svelte';
 	import WizardSolicitacaoAusencia from '$lib/components/ausencias/WizardSolicitacaoAusencia.svelte';
@@ -603,6 +604,29 @@ const meusTimesGestor = $derived(timesSubordinados);
 				Minhas Ausências
 			</button>
 
+			<a
+				role="tab"
+				href={resolve('/perfil/chamados')}
+				class="tab tab-lg font-semibold transition-all duration-300 hover:bg-base-100"
+				aria-label="Meus Chamados"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="mr-2 h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="2"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M3 7h18M3 12h12M3 17h18"
+					/>
+				</svg>
+				Meus Chamados
+			</a>
+
 			{#if ehGestor}
 				<button
 					type="button"

apps/web/src/routes/(dashboard)/perfil/chamados/+page.svelte

@@ -14,6 +14,7 @@ import { chamadosStore } from "$lib/stores/chamados";
     prazoRestante,
   } from "$lib/utils/chamados";
   import { resolve } from "$app/paths";
+  import { useConvexWithAuth } from "$lib/hooks/useConvexWithAuth";
 
   type Ticket = Doc<"tickets">;
 
@@ -45,6 +46,10 @@ const ticketsFiltrados = $derived(
   onMount(() => {
     carregarChamados();
   });
+  $effect(() => {
+    // Configura o token de autenticação no cliente Convex
+    useConvexWithAuth();
+  });
 
   async function carregarChamados() {
     try {