feat: add tab navigation to Central de Chamados page, allowing users to switch between Dashboard, Painel de Chamados, and Configurações SLA for improved organization and accessibility
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user