From 08f3394de36ea7d2535a115c9e9d68bfad4c4346 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 30 Nov 2025 15:48:17 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20add=20tab=20navigation=20to=20Central?=
 =?UTF-8?q?=20de=20Chamados=20page,=20allowing=20users=20to=20switch=20bet?=
 =?UTF-8?q?ween=20Dashboard,=20Painel=20de=20Chamados,=20and=20Configura?=
 =?UTF-8?q?=C3=A7=C3=B5es=20SLA=20for=20improved=20organization=20and=20ac?=
 =?UTF-8?q?cessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ti/central-chamados/+page.svelte          | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte b/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
index 53b1bd5..d5811ac 100644
--- a/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
@@ -67,6 +67,7 @@
   let filtroSetor = $state<string>("todos");
   let ticketSelecionado = $state<Id<"tickets"> | null>(null);
   let detalheSelecionado = $state<Ticket | null>(null);
+  let abaAtiva = $state<"dashboard" | "chamados" | "sla">("dashboard");
   let assignResponsavel = $state<Id<"usuarios"> | "">("");
   let assignMotivo = $state("");
   let assignFeedback = $state<string | null>(null);
@@ -656,7 +657,40 @@
     </div>
   </div>
 
+  <!-- Tabs -->
+  <div class="tabs tabs-boxed mb-6 bg-base-100 shadow-lg p-1">
+    <button
+      class="tab flex items-center gap-2 {abaAtiva === 'dashboard' ? 'tab-active' : ''}"
+      onclick={() => abaAtiva = 'dashboard'}
+    >
+      <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+      </svg>
+      <span class="font-medium">Dashboard</span>
+    </button>
+    <button
+      class="tab flex items-center gap-2 {abaAtiva === 'chamados' ? 'tab-active' : ''}"
+      onclick={() => abaAtiva = 'chamados'}
+    >
+      <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="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>
+      <span class="font-medium">Painel de Chamados</span>
+    </button>
+    <button
+      class="tab flex items-center gap-2 {abaAtiva === 'sla' ? 'tab-active' : ''}"
+      onclick={() => abaAtiva = 'sla'}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <span class="font-medium">Configurações SLA</span>
+    </button>
+  </div>
+
   <div class="space-y-8">
+  <!-- Aba: Dashboard -->
+  {#if abaAtiva === 'dashboard'}
   <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
     <div class="rounded-2xl border border-primary/20 bg-primary/5 p-4">
       <p class="text-sm text-base-content/60">Total de chamados</p>
@@ -749,7 +783,10 @@
       {/if}
     {/if}
   </section>
+  {/if}
 
+  <!-- Aba: Painel de Chamados -->
+  {#if abaAtiva === 'chamados'}
   <section class="rounded-3xl border border-base-200 bg-base-100/90 p-6 shadow-xl">
     <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
       <div>
@@ -1186,7 +1223,10 @@
     </div>
     </section>
   {/if}
+  {/if}
 
+  <!-- Aba: Configurações SLA -->
+  {#if abaAtiva === 'sla'}
   <!-- Seção: SLAs Existentes - Visualização Detalhada -->
   <section class="rounded-3xl border border-base-200 bg-base-100/80 p-6 shadow-xl">
     <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
@@ -1486,6 +1526,7 @@
       </div>
     </div>
   </section>
+  {/if}
 
   <!-- Modal de confirmação de exclusão -->
   {#if slaParaExcluir}