esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): improve chart spacing and labels; format hours <1h as minutes; unify date format to dd/MM (ticks) and dd/MM/yyyy (tooltips); fix tooltips labels ('Total', 'Resolvidos')

Browse source
This commit is contained in:
codex-bot 2025-10-21 14:52:57 -03:00
parent 4b4c0d8e69
commit f255a4c780
6 changed files with 133 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/reports/hours-report.tsx
View file

@ -17,6 +17,7 @@ import { usePersistentCompanyFilter } from "@/lib/use-company-filter"
import { Progress } from "@/components/ui/progress"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { formatHoursCompact } from "@/lib/utils"
type HoursItem = {
companyId: string
@ -111,12 +112,25 @@ export function HoursReport() {
.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 }}
>
<CartesianGrid vertical={false} />
<XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={8} interval={0} angle={-30} height={60} />
<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]} />
<ChartTooltip content={<ChartTooltipContent className="w-[200px]" />} />
<ChartTooltip
content={
<ChartTooltipContent
className="w-[200px]"
formatter={(value, name) => (
<>
<span className="text-muted-foreground">{name}</span>
<span className="text-foreground font-mono font-medium tabular-nums">{formatHoursCompact(Number(value))}</span>
</>
)}
/>
}
/>
</BarChart>
</ChartContainer>
)}
@ -165,13 +179,13 @@ export function HoursReport() {
<CardContent>
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
{[
{ key: "internal", label: "Horas internas", value: numberFormatter.format(totals.internal) },
{ key: "external", label: "Horas externas", value: numberFormatter.format(totals.external) },
{ key: "total", label: "Total acumulado", value: numberFormatter.format(totals.total) },
{ key: "internal", label: "Horas internas", value: formatHoursCompact(totals.internal) },
{ key: "external", label: "Horas externas", value: formatHoursCompact(totals.external) },
{ key: "total", label: "Total acumulado", value: formatHoursCompact(totals.total) },
].map((item) => (
<div key={item.key} className="rounded-xl border border-slate-200 bg-slate-50/80 p-4 shadow-sm">
<p className="text-xs uppercase tracking-wide text-neutral-500">{item.label}</p>
<p className="mt-2 text-2xl font-semibold text-neutral-900">{item.value} h</p>
<p className="mt-2 text-2xl font-semibold text-neutral-900">{item.value}</p>
</div>
))}
</div>
@ -199,17 +213,17 @@ export function HoursReport() {
<div className="mt-4 grid gap-3 rounded-xl border border-slate-100 bg-slate-50/70 p-4 text-sm text-neutral-700">
<div className="flex items-center justify-between">
<span className="text-xs uppercase text-neutral-500">Horas internas</span>
<span className="font-semibold text-neutral-900">{numberFormatter.format(row.internal)} h</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs uppercase text-neutral-500">Horas externas</span>
<span className="font-semibold text-neutral-900">{numberFormatter.format(row.external)} h</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs uppercase text-neutral-500">Total</span>
<span className="font-semibold text-neutral-900">{numberFormatter.format(row.total)} h</span>
</div>
<span className="font-semibold text-neutral-900">{formatHoursCompact(row.internal)}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs uppercase text-neutral-500">Horas externas</span>
<span className="font-semibold text-neutral-900">{formatHoursCompact(row.external)}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-xs uppercase text-neutral-500">Total</span>
<span className="font-semibold text-neutral-900">{formatHoursCompact(row.total)}</span>
</div>
</div>
<div className="mt-4 space-y-2">
<div className="flex items-center justify-between text-xs text-neutral-500">
<span>Contratadas/mês</span>