From 1ceef73847a01e253e857c0fa72734607912f8fd Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 6 Dec 2025 09:55:46 -0300
Subject: [PATCH] fix: add optional chaining and default values to prevent
 errors in dashboard page data rendering

---
 apps/web/src/routes/(dashboard)/+page.svelte | 53 ++++++++++----------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/routes/(dashboard)/+page.svelte b/apps/web/src/routes/(dashboard)/+page.svelte
index e94ed26..9ed3f9b 100644
--- a/apps/web/src/routes/(dashboard)/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/+page.svelte
@@ -299,21 +299,20 @@
 			</div>
 
 			<!-- Monitoramento em Tempo Real -->
-			{#if statusSistemaQuery.data}
+			{#if statusSistemaQuery?.data}
 				{@const status = statusSistemaQuery.data}
-				{@const atividade = atividadeBDQuery.data || {
+				{@const atividade = atividadeBDQuery?.data || {
 					historico: Array.from({ length: 30 }, () => ({ entradas: 0, saidas: 0 }))
 				}}
-				{@const distribuicao = distribuicaoQuery.data || {
+				{@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))
-				)}
+				{@const maxAtividade = atividade.historico && atividade.historico.length > 0
+					? Math.max(1, ...atividade.historico.map((p) => Math.max(p.entradas || 0, p.saidas || 0)))
+					: 1}
 
 				<div class="mb-6">
 					<div class="mb-4 flex items-center gap-3">
@@ -494,27 +493,29 @@
 
 									<!-- Barras de atividade -->
 									<div class="flex h-full items-end justify-around gap-1">
-										{#each atividade.historico as ponto, idx (idx)}
+										{#each atividade.historico || [] as ponto, idx (idx)}
+											{@const entradas = ponto?.entradas || 0}
+											{@const saidas = ponto?.saidas || 0}
 											<div class="group relative flex h-full flex-1 items-end gap-0.5">
 												<!-- Entradas (verde) -->
 												<div
 													class="from-success to-success/70 flex-1 rounded-t bg-linear-to-t transition-all duration-300 hover:scale-110"
-													style="height: {(ponto.entradas / maxAtividade) * 100}%; min-height: 2px;"
-													title="Entradas: {ponto.entradas}"
+													style="height: {(entradas / maxAtividade) * 100}%; min-height: 2px;"
+													title="Entradas: {entradas}"
 												></div>
 												<!-- Saídas (vermelho) -->
 												<div
 													class="from-error to-error/70 flex-1 rounded-t bg-linear-to-t transition-all duration-300 hover:scale-110"
-													style="height: {(ponto.saidas / maxAtividade) * 100}%; min-height: 2px;"
-													title="Saídas: {ponto.saidas}"
+													style="height: {(saidas / maxAtividade) * 100}%; min-height: 2px;"
+													title="Saídas: {saidas}"
 												></div>
 
 												<!-- Tooltip no hover -->
 												<div
 													class="bg-base-300 text-base-content absolute bottom-full left-1/2 z-10 mb-2 -translate-x-1/2 rounded px-2 py-1 text-xs whitespace-nowrap opacity-0 shadow-lg transition-opacity group-hover:opacity-100"
 												>
-													<div>↑ {ponto.entradas} entradas</div>
-													<div>↓ {ponto.saidas} saídas</div>
+													<div>↑ {entradas} entradas</div>
+													<div>↓ {saidas} saídas</div>
 												</div>
 											</div>
 										{/each}
@@ -559,23 +560,23 @@
 									<div>
 										<div class="mb-1 flex justify-between text-sm">
 											<span>Queries (Leituras)</span>
-											<span class="text-primary font-bold">{distribuicao.queries}</span>
+											<span class="text-primary font-bold">{distribuicao?.queries ?? 0}</span>
 										</div>
 										<progress
 											class="progress progress-primary w-full"
-											value={distribuicao.queries}
-											max={Math.max(distribuicao.queries + distribuicao.mutations, 1)}
+											value={distribuicao?.queries ?? 0}
+											max={Math.max((distribuicao?.queries ?? 0) + (distribuicao?.mutations ?? 0), 1)}
 										></progress>
 									</div>
 									<div>
 										<div class="mb-1 flex justify-between text-sm">
 											<span>Mutations (Escritas)</span>
-											<span class="text-secondary font-bold">{distribuicao.mutations}</span>
+											<span class="text-secondary font-bold">{distribuicao?.mutations ?? 0}</span>
 										</div>
 										<progress
 											class="progress progress-secondary w-full"
-											value={distribuicao.mutations}
-											max={Math.max(distribuicao.queries + distribuicao.mutations, 1)}
+											value={distribuicao?.mutations ?? 0}
+											max={Math.max((distribuicao?.queries ?? 0) + (distribuicao?.mutations ?? 0), 1)}
 										></progress>
 									</div>
 								</div>
@@ -589,23 +590,23 @@
 									<div>
 										<div class="mb-1 flex justify-between text-sm">
 											<span>Leituras</span>
-											<span class="text-info font-bold">{distribuicao.leituras}</span>
+											<span class="text-info font-bold">{distribuicao?.leituras ?? 0}</span>
 										</div>
 										<progress
 											class="progress progress-info w-full"
-											value={distribuicao.leituras}
-											max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)}
+											value={distribuicao?.leituras ?? 0}
+											max={Math.max((distribuicao?.leituras ?? 0) + (distribuicao?.escritas ?? 0), 1)}
 										></progress>
 									</div>
 									<div>
 										<div class="mb-1 flex justify-between text-sm">
 											<span>Escritas</span>
-											<span class="text-warning font-bold">{distribuicao.escritas}</span>
+											<span class="text-warning font-bold">{distribuicao?.escritas ?? 0}</span>
 										</div>
 										<progress
 											class="progress progress-warning w-full"
-											value={distribuicao.escritas}
-											max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)}
+											value={distribuicao?.escritas ?? 0}
+											max={Math.max((distribuicao?.leituras ?? 0) + (distribuicao?.escritas ?? 0), 1)}
 										></progress>
 									</div>
 								</div>