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

refactor: update Sidebar and layout styles for improved responsiveness, adjust chart dimensions and remove tooltip functionality in employee reports

Browse Source
This commit is contained in:
deyvisonwanderley
2025-10-25 07:53:08 -03:00
parent f0d3625045
commit 5dd00b63e1
4 changed files with 54 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,7 +23,7 @@
</script>
<!-- Header Fixo acima de tudo -->
<div class="navbar bg-base-200 shadow-md px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-20">
<div class="navbar bg-primary/20 shadow-md px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-24">
<div class="flex-none lg:hidden">
<label for="my-drawer-3" class="btn btn-square btn-ghost">
<svg
@@ -45,23 +45,23 @@
<img src={logo} alt="Logo do Governo de PE" class="h-14 lg:h-16 w-auto hidden lg:block" />
<div class="flex flex-col">
<h1 class="text-xl lg:text-3xl font-bold text-primary">SGSE</h1>
<p class="text-sm lg:text-base text-base-content/70 hidden sm:block font-medium">
<p class="text-base lg:text-2xl text-base-content/70 hidden sm:block font-semibold">
Sistema de Gerenciamento da Secretaria de Esportes
</p>
</div>
</div>
</div>
<div class="drawer lg:drawer-open" style="margin-top: 80px;">
<div class="drawer lg:drawer-open" style="margin-top: 96px;">
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col lg:ml-72" style="min-height: calc(100vh - 80px);">
<div class="drawer-content flex flex-col lg:ml-72" style="height: calc(100vh - 96px);">
<!-- Page content -->
<div class="flex-1">
<div class="flex-1 overflow-y-auto">
{@render children?.()}
</div>
<!-- Footer -->
<footer class="footer footer-center bg-base-200 text-base-content p-6 border-t border-base-300 mt-auto">
<footer class="footer footer-center bg-primary/20 text-base-content p-4 border-t border-base-300 flex-shrink-0">
<div class="grid grid-flow-col gap-4">
<a href="/" class="link link-hover text-sm">Sobre</a>
<a href="/" class="link link-hover text-sm">Contato</a>
@@ -79,14 +79,14 @@
</div>
</footer>
</div>
<div class="drawer-side z-40 fixed" style="margin-top: 80px;">
<div class="drawer-side z-40 fixed" style="margin-top: 96px;">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
></label>
<div class="menu bg-base-200 w-72 p-4 flex flex-col gap-2 h-[calc(100vh-80px)] overflow-y-auto">
<div class="menu bg-primary/20 w-72 p-4 flex flex-col gap-2 h-[calc(100vh-96px)] overflow-y-auto">
<!-- Sidebar menu items -->
<ul class="flex flex-col gap-2">
<li class="bg-primary rounded-xl">
<a href="/" class="font-medium">
<li class="rounded-xl">
<a href="/" class="font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
@@ -105,19 +105,19 @@
</a>
</li>
{#each setores as s}
<li class="bg-primary rounded-xl">
<li class="rounded-xl">
<a
href={s.link}
class:active={page.url.pathname.startsWith(s.link)}
aria-current={page.url.pathname.startsWith(s.link) ? "page" : undefined}
class="font-medium"
class="font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors"
>
<span>{s.nome}</span>
</a>
</li>
{/each}
<li class="bg-primary rounded-xl mt-auto">
<a href="/" class="font-medium">
<li class="rounded-xl mt-auto">
<a href="/" class="font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"

4
apps/web/src/routes/(dashboard)/+layout.svelte
View File

@@ -2,10 +2,10 @@
const { children } = $props();
</script>
<div class="w-full">
<div class="w-full h-full overflow-y-auto">
<main
id="container-central"
class="w-full max-w-none px-3 lg:px-4 pt-8 lg:pt-10 pb-2"
class="w-full max-w-none px-3 lg:px-4 py-4"
>
{@render children()}
</main>

2
apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
View File

@@ -200,7 +200,7 @@
{/if}
<div>
<h2 class="card-title text-3xl">Editar Cadastro</h2>
<h2 class="card-title text-3xl">Editar Funcionários</h2>
<p class="opacity-70">Atualize os dados do funcionário.</p>
</div>

63
apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/relatorios/+page.svelte
View File

@@ -29,9 +29,9 @@
}
});
const chartWidth = 900;
const chartHeight = 340;
const padding = { top: 10, right: 16, bottom: 80, left: 48 };
let chartWidth = 800;
let chartHeight = 320;
const padding = { top: 20, right: 20, bottom: 80, left: 70 };
function getMax<T>(arr: Array<T>, sel: (t: T) => number): number {
let m = 0;
@@ -52,10 +52,10 @@
return Math.max(8, innerW / n - 20);
}
let hover: { x: number; y: number; text: string } | null = null;
// Sem tooltip flutuante; valores serão exibidos de forma fixa no gráfico
</script>
<div class="space-y-6 pb-32">
<div class="space-y-6 pb-4">
{#if notice}
<div class="alert" class:alert-error={notice.kind === "error"} class:alert-success={notice.kind === "success"}>
<span>{notice.text}</span>
@@ -71,17 +71,26 @@
<span class="loading loading-spinner loading-lg"></span>
</div>
{:else}
<div class="grid gap-8">
<div class="grid gap-6">
<!-- Gráfico 1: Símbolo x Salário (Valor) -->
<div class="card bg-base-100 shadow">
<div class="card bg-base-100 shadow overflow-hidden">
<div class="card-body">
<h3 class="card-title">Símbolo x Salário (Valor total)</h3>
<div class="overflow-x-auto">
<div class="w-full overflow-x-auto">
<svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de barras: salário por símbolo">
{#if rows.length === 0}
<text x="16" y="32" class="opacity-60">Sem dados</text>
{:else}
{@const max = getMax(rows, (r) => r.valor)}
<!-- Eixos -->
<line x1={padding.left} y1={chartHeight - padding.bottom} x2={chartWidth - padding.right} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" />
<line x1={padding.left} y1={padding.top} x2={padding.left} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" />
{#each [0,1,2,3,4,5] as t}
{@const val = Math.round((max/5) * t)}
{@const y = chartHeight - padding.bottom - scaleY(val, max)}
<line x1={padding.left - 4} y1={y} x2={padding.left} y2={y} stroke="currentColor" stroke-opacity="0.3" />
<text x={padding.left - 8} y={y + 4} text-anchor="end" class="text-[10px] opacity-70">{`R$ ${val.toLocaleString('pt-BR')}`}</text>
{/each}
<!-- Eixo X (nomes) -->
{#each rows as r, i}
<text x={barX(i, rows.length) + barW(rows.length) / 2} y={chartHeight - padding.bottom + 28} text-anchor="middle" class="text-xs">
@@ -95,16 +104,13 @@
y={chartHeight - padding.bottom - scaleY(r.valor, max)}
width={barW(rows.length)}
height={scaleY(r.valor, max)}
class="fill-primary/80 hover:fill-primary"
onmousemove={(e) => (hover = { x: e.offsetX, y: e.offsetY - 8, text: `${r.nome}: R$ ${r.valor.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}` })}
onmouseleave={() => (hover = null)}
class="fill-primary/80"
/>
<!-- Valor fixo acima da barra -->
<text x={barX(i, rows.length) + barW(rows.length)/2} y={chartHeight - padding.bottom - scaleY(r.valor, max) - 6} text-anchor="middle" class="text-[10px] font-semibold">
{`R$ ${r.valor.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`}
</text>
{/each}
{#if hover}
<foreignObject x={hover.x} y={hover.y} width="220" height="40">
<div class="badge badge-primary text-xs px-3 py-2 shadow">{hover.text}</div>
</foreignObject>
{/if}
{/if}
</svg>
</div>
@@ -112,15 +118,24 @@
</div>
<!-- Gráfico 2: Quantidade de Funcionários por Símbolo -->
<div class="card bg-base-100 shadow">
<div class="card bg-base-100 shadow overflow-hidden">
<div class="card-body">
<h3 class="card-title">Quantidade de Funcionários por Símbolo</h3>
<div class="overflow-x-auto">
<div class="w-full overflow-x-auto">
<svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de barras: quantidade por símbolo">
{#if rows.length === 0}
<text x="16" y="32" class="opacity-60">Sem dados</text>
{:else}
{@const maxC = getMax(rows, (r) => r.count)}
<!-- Eixos -->
<line x1={padding.left} y1={chartHeight - padding.bottom} x2={chartWidth - padding.right} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" />
<line x1={padding.left} y1={padding.top} x2={padding.left} y2={chartHeight - padding.bottom} stroke="currentColor" stroke-opacity="0.3" />
{#each [0,1,2,3,4,5] as t}
{@const val = Math.round((maxC/5) * t)}
{@const y = chartHeight - padding.bottom - scaleY(val, Math.max(1, maxC))}
<line x1={padding.left - 4} y1={y} x2={padding.left} y2={y} stroke="currentColor" stroke-opacity="0.3" />
<text x={padding.left - 6} y={y + 4} text-anchor="end" class="text-[10px] opacity-70">{val}</text>
{/each}
{#each rows as r, i}
<text x={barX(i, rows.length) + barW(rows.length) / 2} y={chartHeight - padding.bottom + 28} text-anchor="middle" class="text-xs">
{r.nome}
@@ -132,16 +147,12 @@
y={chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC))}
width={barW(rows.length)}
height={scaleY(r.count, Math.max(1, maxC))}
class="fill-secondary/80 hover:fill-secondary"
onmousemove={(e) => (hover = { x: e.offsetX, y: e.offsetY - 8, text: `${r.nome}: ${r.count} funcionário(s)` })}
onmouseleave={() => (hover = null)}
class="fill-secondary/80"
/>
<text x={barX(i, rows.length) + barW(rows.length)/2} y={chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC)) - 6} text-anchor="middle" class="text-[10px] font-semibold">
{r.count}
</text>
{/each}
{#if hover}
<foreignObject x={hover.x} y={hover.y} width="200" height="40">
<div class="badge badge-secondary text-xs px-3 py-2 shadow">{hover.text}</div>
</foreignObject>
{/if}
{/if}
</svg>
</div>