From 3e5e1c759e9d2aae90d5ec3d5c50714d526a0643 Mon Sep 17 00:00:00 2001
From: codex-bot <bot@local>
Date: Tue, 21 Oct 2025 15:44:00 -0300
Subject: [PATCH] =?UTF-8?q?Refina=20espa=C3=A7amento=20e=20tooltip=20do=20?=
 =?UTF-8?q?gr=C3=A1fico=20de=20horas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/reports/hours-report.tsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/reports/hours-report.tsx b/src/components/reports/hours-report.tsx
index 7d75ba2..4edc609 100644
--- a/src/components/reports/hours-report.tsx
+++ b/src/components/reports/hours-report.tsx
@@ -29,6 +29,15 @@ type HoursItem = {
   contractedHoursPerMonth?: number | null
 }
 
+const topClientsChartConfig = {
+  internas: {
+    label: "Horas internas",
+  },
+  externas: {
+    label: "Horas externas",
+  },
+}
+
 export function HoursReport() {
   const [timeRange, setTimeRange] = useState("90d")
   const [query, setQuery] = useState("")
@@ -98,26 +107,29 @@ export function HoursReport() {
           {!filteredWithComputed || filteredWithComputed.length === 0 ? (
             <p className="rounded-lg border border-dashed border-slate-200 p-6 text-sm text-neutral-500">Sem dados para o período.</p>
           ) : (
-            <ChartContainer config={{}} className="aspect-auto h-[260px] w-full">
+            <ChartContainer config={topClientsChartConfig} className="aspect-auto h-[260px] w-full">
               <BarChart
                 data={filteredWithComputed
                   .slice()
                   .sort((a, b) => b.total - a.total)
                   .slice(0, 10)
                   .map((r) => ({ name: r.name, internas: r.internal, externas: r.external }))}
-                margin={{ left: 12, right: 12, bottom: 28 }}
+                margin={{ top: 8, left: 20, right: 20, bottom: 56 }}
+                barCategoryGap={32}
               >
                 <CartesianGrid vertical={false} />
-                <XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={14} interval={0} angle={-30} height={68} />
-                <Bar dataKey="internas" stackId="a" fill="var(--chart-1)" radius={[4, 4, 0, 0]} />
-                <Bar dataKey="externas" stackId="a" fill="var(--chart-2)" radius={[4, 4, 0, 0]} />
+                <XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={24} interval={0} angle={-30} height={80} />
+                <Bar dataKey="internas" stackId="a" fill="var(--chart-1)" radius={[4, 4, 0, 0]} barSize={28} />
+                <Bar dataKey="externas" stackId="a" fill="var(--chart-2)" radius={[4, 4, 0, 0]} barSize={28} />
                 <ChartTooltip
                   content={
                     <ChartTooltipContent
                       className="w-[200px]"
                       formatter={(value, name) => (
                         <>
-                          <span className="text-muted-foreground">{name}</span>
+                          <span className="text-muted-foreground">
+                            {name === "internas" ? "Horas internas" : "Horas externas"}
+                          </span>
                           <span className="text-foreground font-mono font-medium tabular-nums">{formatHoursCompact(Number(value))}</span>
                         </>
                       )}