From 3420872a3755dfde99898f3389c66bb132ba3c63 Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Tue, 18 Nov 2025 03:31:54 -0300
Subject: [PATCH] refactor: enhance Sidebar and dashboard components for
 improved UI and functionality

- Updated the Sidebar component to change the support link and improve modal styling for better user experience.
- Refined the dashboard page by optimizing data handling for real-time monitoring, ensuring fallback values for activity and distribution data.
- Improved progress bar calculations to prevent division by zero errors, enhancing stability and user feedback.
- Adjusted layout and styling for consistency and better visual appeal across components.
---
 apps/web/src/lib/components/Sidebar.svelte   | 60 ++++++++++----------
 apps/web/src/routes/(dashboard)/+page.svelte | 35 ++++++------
 2 files changed, 46 insertions(+), 49 deletions(-)

diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index 05cc6b7..b9cc92b 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -325,7 +325,7 @@
 					>Contato</a
 				>
 				<span class="text-base-content/30">•</span>
-				<a href={resolve('/')} class="link link-hover hover:text-primary transition-colors"
+				<a href={resolve('/abrir-chamado')} class="link link-hover hover:text-primary transition-colors"
 					>Suporte</a
 				>
 				<span class="text-base-content/30">•</span>
@@ -500,77 +500,77 @@
 {#if showAboutModal}
 	<dialog class="modal modal-open">
 		<div
-			class="modal-box from-base-100 to-base-200 relative max-w-2xl overflow-hidden bg-linear-to-br"
+			class="modal-box from-base-100 to-base-200 relative max-w-md overflow-hidden bg-gradient-to-br shadow-xl"
 		>
 			<button
 				type="button"
-				class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
+				class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2 z-10 hover:bg-base-300"
 				onclick={closeAboutModal}
 			>
 				✕
 			</button>
 
-			<div class="space-y-6 py-4 text-center">
+			<div class="space-y-5 px-6 py-6 text-center">
 				<!-- Logo e Título -->
-				<div class="flex flex-col items-center gap-4">
+				<div class="flex flex-col items-center gap-3">
 					<div class="avatar">
-						<div class="w-24 rounded-xl bg-white p-3 shadow-lg">
+						<div class="w-20 rounded-xl bg-white p-3 shadow-lg ring-2 ring-primary/20">
 							<img src={logo} alt="Logo SGSE" class="h-full w-full object-contain" />
 						</div>
 					</div>
-					<div>
-						<h3 class="text-primary mb-2 text-3xl font-bold">SGSE</h3>
-						<p class="text-base-content/80 text-lg font-semibold">
+					<div class="space-y-1">
+						<h3 class="text-primary text-2xl font-bold tracking-tight">SGSE</h3>
+						<p class="text-base-content/70 text-sm font-medium">
 							Sistema de Gerenciamento de Secretaria
 						</p>
 					</div>
 				</div>
 
 				<!-- Divider -->
-				<div class="divider"></div>
+				<div class="divider my-1"></div>
 
 				<!-- Informações de Versão -->
-				<div class="bg-primary/10 space-y-3 rounded-xl p-6">
+				<div class="bg-gradient-to-br from-primary/10 to-primary/5 space-y-2 rounded-xl border border-primary/10 p-4 shadow-sm">
 					<div class="flex items-center justify-center gap-2">
-						<Tag class="text-primary h-5 w-5" strokeWidth={2} />
-						<p class="text-base-content/70 text-sm font-medium">Versão</p>
+						<Tag class="text-primary h-4 w-4" strokeWidth={2} />
+						<p class="text-base-content/60 text-xs font-medium uppercase tracking-wide">Versão</p>
 					</div>
-					<p class="text-primary text-2xl font-bold">1.0 26_2025</p>
-					<div class="badge badge-warning badge-lg gap-2">
-						<Plus class="h-4 w-4" strokeWidth={2} />
+					<p class="text-primary text-2xl font-bold tracking-tight">1.0 11_2025</p>
+					<div class="badge badge-warning badge-sm gap-1.5 px-3 py-1.5 text-xs">
+						<Plus class="h-3.5 w-3.5" strokeWidth={2} />
 						Em Desenvolvimento
 					</div>
 				</div>
 
 				<!-- Desenvolvido por -->
-				<div class="space-y-2">
-					<p class="text-base-content/60 text-sm font-medium">Desenvolvido por</p>
-					<p class="text-primary text-lg font-bold">Secretaria de Esportes de Pernambuco</p>
+				<div class="space-y-1.5">
+					<p class="text-base-content/50 text-xs font-medium uppercase tracking-wide">Desenvolvido por</p>
+					<p class="text-primary text-sm font-semibold">Secretaria de Esportes de Pernambuco</p>
 				</div>
 
 				<!-- Divider -->
-				<div class="divider"></div>
+				<div class="divider my-1"></div>
 
 				<!-- Informações Adicionais -->
-				<div class="grid grid-cols-2 gap-4 text-sm">
-					<div class="bg-base-200 rounded-lg p-3">
-						<p class="text-primary font-semibold">Governo</p>
-						<p class="text-base-content/70 text-xs">Estado de Pernambuco</p>
+				<div class="grid grid-cols-2 gap-3">
+					<div class="bg-base-200/60 rounded-lg border border-base-300/50 p-3 shadow-sm transition-all hover:shadow-md">
+						<p class="text-primary mb-1 text-xs font-semibold uppercase tracking-wide">Governo</p>
+						<p class="text-base-content/60 text-xs font-medium">Estado de Pernambuco</p>
 					</div>
-					<div class="bg-base-200 rounded-lg p-3">
-						<p class="text-primary font-semibold">Ano</p>
-						<p class="text-base-content/70 text-xs">2025</p>
+					<div class="bg-base-200/60 rounded-lg border border-base-300/50 p-3 shadow-sm transition-all hover:shadow-md">
+						<p class="text-primary mb-1 text-xs font-semibold uppercase tracking-wide">Ano</p>
+						<p class="text-base-content/60 text-xs font-medium">2025</p>
 					</div>
 				</div>
 
 				<!-- Botão OK -->
-				<div class="pt-4">
+				<div class="pt-3">
 					<button
 						type="button"
-						class="btn btn-primary btn-lg mx-auto w-full max-w-xs shadow-lg transition-all duration-300 hover:shadow-xl"
+						class="btn btn-primary btn-sm mx-auto w-full max-w-xs shadow-md transition-all duration-200 hover:shadow-lg"
 						onclick={closeAboutModal}
 					>
-						<Check class="h-6 w-6" strokeWidth={2} />
+						<Check class="h-4 w-4" strokeWidth={2} />
 						OK
 					</button>
 				</div>
diff --git a/apps/web/src/routes/(dashboard)/+page.svelte b/apps/web/src/routes/(dashboard)/+page.svelte
index ad51b15..ad73bc2 100644
--- a/apps/web/src/routes/(dashboard)/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/+page.svelte
@@ -373,10 +373,16 @@
     </div>
 
     <!-- Monitoramento em Tempo Real -->
-    {#if statusSistemaQuery.data && atividadeBDQuery.data && distribuicaoQuery.data}
+    {#if statusSistemaQuery.data}
       {@const status = statusSistemaQuery.data}
-      {@const atividade = atividadeBDQuery.data}
-      {@const distribuicao = distribuicaoQuery.data}
+      {@const atividade = atividadeBDQuery.data || { historico: Array.from({ length: 30 }, () => ({ entradas: 0, saidas: 0 })) }}
+      {@const distribuicao = distribuicaoQuery.data || { queries: 0, mutations: 0, leituras: 0, escritas: 0 }}
+      {@const maxAtividade = Math.max(
+        1,
+        ...atividade.historico.map((p) =>
+          Math.max(p.entradas, p.saidas),
+        ),
+      )}
 
       <div class="mb-6">
         <div class="flex items-center gap-3 mb-4">
@@ -618,26 +624,17 @@
                 <!-- Barras de atividade -->
                 <div class="flex items-end justify-around h-full gap-1">
                   {#each atividade.historico as ponto, idx}
-                    {@const maxAtividade = Math.max(
-                      ...atividade.historico.map((p) =>
-                        Math.max(p.entradas, p.saidas),
-                      ),
-                    )}
-                    <div class="flex-1 flex items-end gap-0.5 h-full group">
+                    <div class="flex-1 flex items-end gap-0.5 h-full group relative">
                       <!-- Entradas (verde) -->
                       <div
                         class="flex-1 bg-linear-to-t from-success to-success/70 rounded-t transition-all duration-300 hover:scale-110"
-                        style="height: {(ponto.entradas /
-                          Math.max(maxAtividade, 1)) *
-                          100}%; min-height: 2px;"
+                        style="height: {(ponto.entradas / maxAtividade) * 100}%; min-height: 2px;"
                         title="Entradas: {ponto.entradas}"
                       ></div>
                       <!-- Saídas (vermelho) -->
                       <div
                         class="flex-1 bg-linear-to-t from-error to-error/70 rounded-t transition-all duration-300 hover:scale-110"
-                        style="height: {(ponto.saidas /
-                          Math.max(maxAtividade, 1)) *
-                          100}%; min-height: 2px;"
+                        style="height: {(ponto.saidas / maxAtividade) * 100}%; min-height: 2px;"
                         title="Saídas: {ponto.saidas}"
                       ></div>
 
@@ -706,7 +703,7 @@
                   <progress
                     class="progress progress-primary w-full"
                     value={distribuicao.queries}
-                    max={distribuicao.queries + distribuicao.mutations}
+                    max={Math.max(distribuicao.queries + distribuicao.mutations, 1)}
                   ></progress>
                 </div>
                 <div>
@@ -719,7 +716,7 @@
                   <progress
                     class="progress progress-secondary w-full"
                     value={distribuicao.mutations}
-                    max={distribuicao.queries + distribuicao.mutations}
+                    max={Math.max(distribuicao.queries + distribuicao.mutations, 1)}
                   ></progress>
                 </div>
               </div>
@@ -742,7 +739,7 @@
                   <progress
                     class="progress progress-info w-full"
                     value={distribuicao.leituras}
-                    max={distribuicao.leituras + distribuicao.escritas}
+                    max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)}
                   ></progress>
                 </div>
                 <div>
@@ -755,7 +752,7 @@
                   <progress
                     class="progress progress-warning w-full"
                     value={distribuicao.escritas}
-                    max={distribuicao.leituras + distribuicao.escritas}
+                    max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)}
                   ></progress>
                 </div>
               </div>