chore(ui): finalize hour/date formatting rollout; adjust contracted hours display; clean up unused formatter

This commit is contained in:
codex-bot 2025-10-21 15:06:38 -03:00
parent f255a4c780
commit 0a3e1a0130
2 changed files with 12 additions and 13 deletions

View file

@ -64,14 +64,7 @@ export function HoursReport() {
) )
}, [filtered]) }, [filtered])
const numberFormatter = useMemo( // No number formatter needed; we use formatHoursCompact for hours
() =>
new Intl.NumberFormat("pt-BR", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
}),
[]
)
const filteredWithComputed = useMemo( const filteredWithComputed = useMemo(
() => () =>
@ -228,7 +221,7 @@ export function HoursReport() {
<div className="flex items-center justify-between text-xs text-neutral-500"> <div className="flex items-center justify-between text-xs text-neutral-500">
<span>Contratadas/mês</span> <span>Contratadas/mês</span>
<span className="font-medium text-neutral-800"> <span className="font-medium text-neutral-800">
{row.contracted ? `${numberFormatter.format(row.contracted)} h` : "—"} {row.contracted ? formatHoursCompact(row.contracted) : "—"}
</span> </span>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">

View file

@ -19,6 +19,12 @@ import { Area, AreaChart, Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { formatDateDM, formatDateDMY, formatHoursCompact } from "@/lib/utils" import { formatDateDM, formatDateDMY, formatHoursCompact } from "@/lib/utils"
const agentProductivityChartConfig = {
resolved: {
label: "Chamados resolvidos",
},
}
function formatMinutes(value: number | null) { function formatMinutes(value: number | null) {
if (value === null) return "—" if (value === null) return "—"
if (value < 60) return `${value.toFixed(0)} min` if (value < 60) return `${value.toFixed(0)} min`
@ -300,15 +306,15 @@ export function SlaReport() {
<div className="grid gap-6 md:grid-cols-2"> <div className="grid gap-6 md:grid-cols-2">
<div className="space-y-3"> <div className="space-y-3">
<p className="text-xs text-neutral-500">Resolvidos por agente</p> <p className="text-xs text-neutral-500">Resolvidos por agente</p>
<ChartContainer config={{}} className="aspect-auto h-[260px] w-full"> <ChartContainer config={agentProductivityChartConfig} className="aspect-auto h-[260px] w-full">
<BarChart <BarChart
data={agents.items.slice(0, 10).map((a) => ({ name: a.name || a.email || 'Agente', resolved: a.resolved }))} data={agents.items.slice(0, 10).map((a) => ({ name: a.name || a.email || 'Agente', resolved: a.resolved }))}
margin={{ left: 12, right: 12, bottom: 28 }} margin={{ top: 8, left: 20, right: 20, bottom: 56 }}
> >
<CartesianGrid vertical={false} /> <CartesianGrid vertical={false} />
<XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={14} interval={0} angle={-30} height={68} /> <XAxis dataKey="name" tickLine={false} axisLine={false} tickMargin={24} interval={0} angle={-30} height={80} />
<Bar dataKey="resolved" fill="var(--chart-1)" radius={[4, 4, 0, 0]} /> <Bar dataKey="resolved" fill="var(--chart-1)" radius={[4, 4, 0, 0]} />
<ChartTooltip content={<ChartTooltipContent className="w-[180px]" nameKey="Resolvidos" />} /> <ChartTooltip content={<ChartTooltipContent className="w-[180px]" nameKey="resolved" />} />
</BarChart> </BarChart>
</ChartContainer> </ChartContainer>
</div> </div>