From 78ab6161cf768d75367a696e9822370f86b0edd0 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sun, 30 Nov 2025 15:44:51 -0300
Subject: [PATCH] feat: enhance Central de Chamados page by adding breadcrumb
 navigation and a structured header, improving user experience and
 accessibility

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

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 08c13ad..53b1bd5 100644
--- a/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/ti/central-chamados/+page.svelte
@@ -12,6 +12,7 @@
   import { useConvexWithAuth } from "$lib/hooks/useConvexWithAuth";
   import { authStore } from "$lib/stores/auth.svelte";
   import SlaChart from "$lib/components/chamados/SlaChart.svelte";
+  import { resolve } from "$app/paths";
 
   type Ticket = Doc<"tickets">;
   type Usuario = Doc<"usuarios">;
@@ -631,7 +632,31 @@
   // });
 </script>
 
-<main class="mx-auto w-full max-w-7xl space-y-8 px-4 py-8">
+<main class="container mx-auto px-4 py-6 max-w-7xl">
+  <!-- Breadcrumb -->
+  <div class="text-sm breadcrumbs mb-4">
+    <ul>
+      <li><a href={resolve('/ti')} class="text-primary hover:underline">TI</a></li>
+      <li>Central de Chamados</li>
+    </ul>
+  </div>
+
+  <!-- Header -->
+  <div class="mb-6">
+    <div class="flex items-center gap-4 mb-2">
+      <div class="p-3 bg-info/20 rounded-xl">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-info" 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>
+      </div>
+      <div>
+        <h1 class="text-3xl font-bold text-primary">Central de Chamados</h1>
+        <p class="text-base-content/70">Monitore tickets, configure SLA, atribua responsáveis e acompanhe alertas de prazos</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="space-y-8">
   <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>
@@ -1480,5 +1505,6 @@
     </div>
   {/if}
 
+  </div>
 </main>