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

Feat chat #3

Merged
deyvisonwanderley merged 11 commits from feat-chat into master 2025-10-28 15:05:03 +00:00
Conversation 1 Commits 11 Files Changed 156 +1530 -77
13 changed files with 1530 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5dd00b63e1 - Show all commits

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

@@ -23,7 +23,7 @@
</script> </script>
<!-- Header Fixo acima de tudo --> <!-- 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"> <div class="flex-none lg:hidden">
<label for="my-drawer-3" class="btn btn-square btn-ghost"> <label for="my-drawer-3" class="btn btn-square btn-ghost">
<svg <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" /> <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"> <div class="flex flex-col">
<h1 class="text-xl lg:text-3xl font-bold text-primary">SGSE</h1> <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 Sistema de Gerenciamento da Secretaria de Esportes
</p> </p>
</div> </div>
</div> </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" /> <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 --> <!-- Page content -->
<div class="flex-1"> <div class="flex-1 overflow-y-auto">
{@render children?.()} {@render children?.()}
</div> </div>
<!-- Footer --> <!-- 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"> <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">Sobre</a>
<a href="/" class="link link-hover text-sm">Contato</a> <a href="/" class="link link-hover text-sm">Contato</a>
@@ -79,14 +79,14 @@
</div> </div>
</footer> </footer>
</div> </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 for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
></label> ></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 --> <!-- Sidebar menu items -->
<ul class="flex flex-col gap-2"> <ul class="flex flex-col gap-2">
<li class="bg-primary rounded-xl"> <li class="rounded-xl">
<a href="/" class="font-medium"> <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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5" class="h-5 w-5"
@@ -105,19 +105,19 @@
</a> </a>
</li> </li>
{#each setores as s} {#each setores as s}
<li class="bg-primary rounded-xl"> <li class="rounded-xl">
<a <a
href={s.link} href={s.link}
class:active={page.url.pathname.startsWith(s.link)} class:active={page.url.pathname.startsWith(s.link)}
aria-current={page.url.pathname.startsWith(s.link) ? "page" : undefined} 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> <span>{s.nome}</span>
</a> </a>
</li> </li>
{/each} {/each}
<li class="bg-primary rounded-xl mt-auto"> <li class="rounded-xl mt-auto">
<a href="/" class="font-medium"> <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 <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5" class="h-5 w-5"

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

@@ -2,10 +2,10 @@
const { children } = $props(); const { children } = $props();
</script> </script>
<div class="w-full"> <div class="w-full h-full overflow-y-auto">
<main <main
id="container-central" 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()} {@render children()}
</main> </main>

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

@@ -200,7 +200,7 @@
{/if} {/if}
<div> <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> <p class="opacity-70">Atualize os dados do funcionário.</p>
</div> </div>

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

@@ -29,9 +29,9 @@
} }
}); });
const chartWidth = 900; let chartWidth = 800;
const chartHeight = 340; let chartHeight = 320;
const padding = { top: 10, right: 16, bottom: 80, left: 48 }; const padding = { top: 20, right: 20, bottom: 80, left: 70 };
function getMax<T>(arr: Array<T>, sel: (t: T) => number): number { function getMax<T>(arr: Array<T>, sel: (t: T) => number): number {
let m = 0; let m = 0;
@@ -52,10 +52,10 @@
return Math.max(8, innerW / n - 20); 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> </script>
<div class="space-y-6 pb-32"> <div class="space-y-6 pb-4">
{#if notice} {#if notice}
<div class="alert" class:alert-error={notice.kind === "error"} class:alert-success={notice.kind === "success"}> <div class="alert" class:alert-error={notice.kind === "error"} class:alert-success={notice.kind === "success"}>
<span>{notice.text}</span> <span>{notice.text}</span>
@@ -71,17 +71,26 @@
<span class="loading loading-spinner loading-lg"></span> <span class="loading loading-spinner loading-lg"></span>
</div> </div>
{:else} {:else}
<div class="grid gap-8"> <div class="grid gap-6">
<!-- Gráfico 1: Símbolo x Salário (Valor) --> <!-- 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"> <div class="card-body">
<h3 class="card-title">Símbolo x Salário (Valor total)</h3> <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"> <svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de barras: salário por símbolo">
{#if rows.length === 0} {#if rows.length === 0}
<text x="16" y="32" class="opacity-60">Sem dados</text> <text x="16" y="32" class="opacity-60">Sem dados</text>
{:else} {:else}
{@const max = getMax(rows, (r) => r.valor)} {@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) --> <!-- Eixo X (nomes) -->
{#each rows as r, i} {#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"> <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)} y={chartHeight - padding.bottom - scaleY(r.valor, max)}
width={barW(rows.length)} width={barW(rows.length)}
height={scaleY(r.valor, max)} height={scaleY(r.valor, max)}
class="fill-primary/80 hover:fill-primary" class="fill-primary/80"
onmousemove={(e) => (hover = { x: e.offsetX, y: e.offsetY - 8, text: `${r.nome}: R$ ${r.valor.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}` })}
onmouseleave={() => (hover = null)}
/> />
<!-- 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} {/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} {/if}
</svg> </svg>
</div> </div>
@@ -112,15 +118,24 @@
</div> </div>
<!-- Gráfico 2: Quantidade de Funcionários por Símbolo --> <!-- 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"> <div class="card-body">
<h3 class="card-title">Quantidade de Funcionários por Símbolo</h3> <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"> <svg width={chartWidth} height={chartHeight} role="img" aria-label="Gráfico de barras: quantidade por símbolo">
{#if rows.length === 0} {#if rows.length === 0}
<text x="16" y="32" class="opacity-60">Sem dados</text> <text x="16" y="32" class="opacity-60">Sem dados</text>
{:else} {:else}
{@const maxC = getMax(rows, (r) => r.count)} {@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} {#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"> <text x={barX(i, rows.length) + barW(rows.length) / 2} y={chartHeight - padding.bottom + 28} text-anchor="middle" class="text-xs">
{r.nome} {r.nome}
@@ -132,16 +147,12 @@
y={chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC))} y={chartHeight - padding.bottom - scaleY(r.count, Math.max(1, maxC))}
width={barW(rows.length)} width={barW(rows.length)}
height={scaleY(r.count, Math.max(1, maxC))} height={scaleY(r.count, Math.max(1, maxC))}
class="fill-secondary/80 hover:fill-secondary" class="fill-secondary/80"
onmousemove={(e) => (hover = { x: e.offsetX, y: e.offsetY - 8, text: `${r.nome}: ${r.count} funcionário(s)` })}
onmouseleave={() => (hover = null)}
/> />
<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} {/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} {/if}
</svg> </svg>
</div> </div>