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

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>