From 5dd00b63e175bb141f7d72fe62e82aa00ff17b3a Mon Sep 17 00:00:00 2001
From: deyvisonwanderley <deyvison.wanderley@gmail.com>
Date: Sat, 25 Oct 2025 07:53:08 -0300
Subject: [PATCH] refactor: update Sidebar and layout styles for improved
 responsiveness, adjust chart dimensions and remove tooltip functionality in
 employee reports

---
 apps/web/src/lib/components/Sidebar.svelte    | 28 ++++-----
 .../web/src/routes/(dashboard)/+layout.svelte |  4 +-
 .../[funcionarioId]/editar/+page.svelte       |  2 +-
 .../funcionarios/relatorios/+page.svelte      | 63 +++++++++++--------
 4 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/apps/web/src/lib/components/Sidebar.svelte b/apps/web/src/lib/components/Sidebar.svelte
index 9e50b8c..b756b49 100644
--- a/apps/web/src/lib/components/Sidebar.svelte
+++ b/apps/web/src/lib/components/Sidebar.svelte
@@ -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"
diff --git a/apps/web/src/routes/(dashboard)/+layout.svelte b/apps/web/src/routes/(dashboard)/+layout.svelte
index 1218fb8..5666adc 100644
--- a/apps/web/src/routes/(dashboard)/+layout.svelte
+++ b/apps/web/src/routes/(dashboard)/+layout.svelte
@@ -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>
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
index 8209cf0..57ba216 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/[funcionarioId]/editar/+page.svelte
@@ -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>
 
diff --git a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/relatorios/+page.svelte b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/relatorios/+page.svelte
index 44e94ed..7368286 100644
--- a/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/relatorios/+page.svelte
+++ b/apps/web/src/routes/(dashboard)/recursos-humanos/funcionarios/relatorios/+page.svelte
@@ -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>