SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: enhance Sidebar and dashboard components for improved UI and functionality

Browse Source 
- 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.
This commit is contained in:
deyvisonwanderley
2025-11-18 03:31:54 -03:00
parent 71550874ce
commit 3420872a37
2 changed files with 46 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
apps/web/src/lib/components/Sidebar.svelte
View File

@@ -325,7 +325,7 @@
>Contato</a >Contato</a
> >
<span class="text-base-content/30">•</span> <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 >Suporte</a
> >
<span class="text-base-content/30">•</span> <span class="text-base-content/30">•</span>
@@ -500,77 +500,77 @@
{#if showAboutModal} {#if showAboutModal}
<dialog class="modal modal-open"> <dialog class="modal modal-open">
<div <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 <button
type="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} onclick={closeAboutModal}
> >
✕ ✕
</button> </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 --> <!-- 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="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" /> <img src={logo} alt="Logo SGSE" class="h-full w-full object-contain" />
</div> </div>
</div> </div>
<div> <div class="space-y-1">
<h3 class="text-primary mb-2 text-3xl font-bold">SGSE</h3> <h3 class="text-primary text-2xl font-bold tracking-tight">SGSE</h3>
<p class="text-base-content/80 text-lg font-semibold"> <p class="text-base-content/70 text-sm font-medium">
Sistema de Gerenciamento de Secretaria Sistema de Gerenciamento de Secretaria
</p> </p>
</div> </div>
</div> </div>
<!-- Divider --> <!-- Divider -->
<div class="divider"></div> <div class="divider my-1"></div>
<!-- Informações de Versão --> <!-- 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"> <div class="flex items-center justify-center gap-2">
<Tag class="text-primary h-5 w-5" strokeWidth={2} /> <Tag class="text-primary h-4 w-4" strokeWidth={2} />
<p class="text-base-content/70 text-sm font-medium">Versão</p> <p class="text-base-content/60 text-xs font-medium uppercase tracking-wide">Versão</p>
</div> </div>
<p class="text-primary text-2xl font-bold">1.0 26_2025</p> <p class="text-primary text-2xl font-bold tracking-tight">1.0 11_2025</p>
<div class="badge badge-warning badge-lg gap-2"> <div class="badge badge-warning badge-sm gap-1.5 px-3 py-1.5 text-xs">
<Plus class="h-4 w-4" strokeWidth={2} /> <Plus class="h-3.5 w-3.5" strokeWidth={2} />
Em Desenvolvimento Em Desenvolvimento
</div> </div>
</div> </div>
<!-- Desenvolvido por --> <!-- Desenvolvido por -->
<div class="space-y-2"> <div class="space-y-1.5">
<p class="text-base-content/60 text-sm font-medium">Desenvolvido por</p> <p class="text-base-content/50 text-xs font-medium uppercase tracking-wide">Desenvolvido por</p>
<p class="text-primary text-lg font-bold">Secretaria de Esportes de Pernambuco</p> <p class="text-primary text-sm font-semibold">Secretaria de Esportes de Pernambuco</p>
</div> </div>
<!-- Divider --> <!-- Divider -->
<div class="divider"></div> <div class="divider my-1"></div>
<!-- Informações Adicionais --> <!-- Informações Adicionais -->
<div class="grid grid-cols-2 gap-4 text-sm"> <div class="grid grid-cols-2 gap-3">
<div class="bg-base-200 rounded-lg p-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 font-semibold">Governo</p> <p class="text-primary mb-1 text-xs font-semibold uppercase tracking-wide">Governo</p>
<p class="text-base-content/70 text-xs">Estado de Pernambuco</p> <p class="text-base-content/60 text-xs font-medium">Estado de Pernambuco</p>
</div> </div>
<div class="bg-base-200 rounded-lg p-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 font-semibold">Ano</p> <p class="text-primary mb-1 text-xs font-semibold uppercase tracking-wide">Ano</p>
<p class="text-base-content/70 text-xs">2025</p> <p class="text-base-content/60 text-xs font-medium">2025</p>
</div> </div>
</div> </div>
<!-- Botão OK --> <!-- Botão OK -->
<div class="pt-4"> <div class="pt-3">
<button <button
type="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} onclick={closeAboutModal}
> >
<Check class="h-6 w-6" strokeWidth={2} /> <Check class="h-4 w-4" strokeWidth={2} />
OK OK
</button> </button>
</div> </div>

35
apps/web/src/routes/(dashboard)/+page.svelte
View File

@@ -373,10 +373,16 @@
</div> </div>
<!-- Monitoramento em Tempo Real --> <!-- Monitoramento em Tempo Real -->
{#if statusSistemaQuery.data && atividadeBDQuery.data && distribuicaoQuery.data} {#if statusSistemaQuery.data}
{@const status = 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),
),
)}
<div class="mb-6"> <div class="mb-6">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
@@ -618,26 +624,17 @@
<!-- Barras de atividade --> <!-- Barras de atividade -->
<div class="flex items-end justify-around h-full gap-1"> <div class="flex items-end justify-around h-full gap-1">
{#each atividade.historico as ponto, idx} {#each atividade.historico as ponto, idx}
{@const maxAtividade = Math.max( <div class="flex-1 flex items-end gap-0.5 h-full group relative">
...atividade.historico.map((p) =>
Math.max(p.entradas, p.saidas),
),
)}
<div class="flex-1 flex items-end gap-0.5 h-full group">
<!-- Entradas (verde) --> <!-- Entradas (verde) -->
<div <div
class="flex-1 bg-linear-to-t from-success to-success/70 rounded-t transition-all duration-300 hover:scale-110" 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 / style="height: {(ponto.entradas / maxAtividade) * 100}%; min-height: 2px;"
Math.max(maxAtividade, 1)) *
100}%; min-height: 2px;"
title="Entradas: {ponto.entradas}" title="Entradas: {ponto.entradas}"
></div> ></div>
<!-- Saídas (vermelho) --> <!-- Saídas (vermelho) -->
<div <div
class="flex-1 bg-linear-to-t from-error to-error/70 rounded-t transition-all duration-300 hover:scale-110" 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 / style="height: {(ponto.saidas / maxAtividade) * 100}%; min-height: 2px;"
Math.max(maxAtividade, 1)) *
100}%; min-height: 2px;"
title="Saídas: {ponto.saidas}" title="Saídas: {ponto.saidas}"
></div> ></div>
@@ -706,7 +703,7 @@
<progress <progress
class="progress progress-primary w-full" class="progress progress-primary w-full"
value={distribuicao.queries} value={distribuicao.queries}
max={distribuicao.queries + distribuicao.mutations} max={Math.max(distribuicao.queries + distribuicao.mutations, 1)}
></progress> ></progress>
</div> </div>
<div> <div>
@@ -719,7 +716,7 @@
<progress <progress
class="progress progress-secondary w-full" class="progress progress-secondary w-full"
value={distribuicao.mutations} value={distribuicao.mutations}
max={distribuicao.queries + distribuicao.mutations} max={Math.max(distribuicao.queries + distribuicao.mutations, 1)}
></progress> ></progress>
</div> </div>
</div> </div>
@@ -742,7 +739,7 @@
<progress <progress
class="progress progress-info w-full" class="progress progress-info w-full"
value={distribuicao.leituras} value={distribuicao.leituras}
max={distribuicao.leituras + distribuicao.escritas} max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)}
></progress> ></progress>
</div> </div>
<div> <div>
@@ -755,7 +752,7 @@
<progress <progress
class="progress progress-warning w-full" class="progress progress-warning w-full"
value={distribuicao.escritas} value={distribuicao.escritas}
max={distribuicao.leituras + distribuicao.escritas} max={Math.max(distribuicao.leituras + distribuicao.escritas, 1)}
></progress> ></progress>
</div> </div>
</div> </div>