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
>
<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>

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

@@ -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>