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

ui(reports): padroniza headers de CSAT e SLA com wrapper flex e adiciona seletor de período (7d/30d/90d); links de CSV passam range e companyId

Browse source
This commit is contained in:
Esdras Renan 2025-10-07 16:33:22 -03:00
parent 13eb53c3cf
commit a23b429e4d
2 changed files with 72 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/reports/csat-report.tsx
View file

@ -12,6 +12,7 @@ import { Badge } from "@/components/ui/badge"
import { useState } from "react" import { useState } from "react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
function formatScore(value: number | null) { function formatScore(value: number | null) {
if (value === null) return "—" if (value === null) return "—"
@ -20,12 +21,13 @@ function formatScore(value: number | null) {
export function CsatReport() { export function CsatReport() {
const [companyId, setCompanyId] = useState<string>("all") const [companyId, setCompanyId] = useState<string>("all")
const [timeRange, setTimeRange] = useState<string>("90d")
const { session, convexUserId } = useAuth() const { session, convexUserId } = useAuth()
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
const data = useQuery( const data = useQuery(
api.reports.csatOverview, api.reports.csatOverview,
convexUserId convexUserId
? ({ tenantId, viewerId: convexUserId as Id<"users">, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) }) ? ({ tenantId, viewerId: convexUserId as Id<"users">, range: timeRange, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) })
: "skip" : "skip"
) )
const companies = useQuery(api.companies.list, convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as Array<{ id: Id<"companies">; name: string }> | undefined const companies = useQuery(api.companies.list, convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as Array<{ id: Id<"companies">; name: string }> | undefined
@ -50,6 +52,7 @@ export function CsatReport() {
</CardTitle> </CardTitle>
<CardDescription className="text-neutral-600">Média das respostas recebidas.</CardDescription> <CardDescription className="text-neutral-600">Média das respostas recebidas.</CardDescription>
<CardAction> <CardAction>
<div className="flex flex-wrap items-center justify-end gap-2 md:gap-3">
<Select value={companyId} onValueChange={setCompanyId}> <Select value={companyId} onValueChange={setCompanyId}>
<SelectTrigger className="w-56"> <SelectTrigger className="w-56">
<SelectValue placeholder="Todas as empresas" /> <SelectValue placeholder="Todas as empresas" />
@ -61,11 +64,25 @@ export function CsatReport() {
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
<ToggleGroup
type="single"
value={timeRange}
onValueChange={setTimeRange}
variant="outline"
className="hidden *:data-[slot=toggle-group-item]:!px-4 md:flex"
>
<ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
<ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
<ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
</ToggleGroup>
<Button asChild size="sm" variant="outline"> <Button asChild size="sm" variant="outline">
<a href={`/api/reports/csat.csv${companyId !== "all" ? `?companyId=${companyId}` : ""}`} download> <a href={`/api/reports/csat.csv?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
Exportar CSV Exportar CSV
</a> </a>
</Button> </Button>
</div>
</CardAction> </CardAction>
</CardHeader> </CardHeader>
<CardContent className="text-3xl font-semibold text-neutral-900"> <CardContent className="text-3xl font-semibold text-neutral-900">

21
src/components/reports/sla-report.tsx
View file

@ -13,6 +13,7 @@ import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useState } from "react" import { useState } from "react"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
function formatMinutes(value: number | null) { function formatMinutes(value: number | null) {
if (value === null) return "—" if (value === null) return "—"
@ -25,12 +26,13 @@ function formatMinutes(value: number | null) {
export function SlaReport() { export function SlaReport() {
const [companyId, setCompanyId] = useState<string>("all") const [companyId, setCompanyId] = useState<string>("all")
const [timeRange, setTimeRange] = useState<string>("90d")
const { session, convexUserId } = useAuth() const { session, convexUserId } = useAuth()
const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
const data = useQuery( const data = useQuery(
api.reports.slaOverview, api.reports.slaOverview,
convexUserId convexUserId
? ({ tenantId, viewerId: convexUserId as Id<"users">, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) }) ? ({ tenantId, viewerId: convexUserId as Id<"users">, range: timeRange, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) })
: "skip" : "skip"
) )
const companies = useQuery(api.companies.list, convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as Array<{ id: Id<"companies">; name: string }> | undefined const companies = useQuery(api.companies.list, convexUserId ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip") as Array<{ id: Id<"companies">; name: string }> | undefined
@ -105,6 +107,7 @@ export function SlaReport() {
</CardDescription> </CardDescription>
</div> </div>
<CardAction> <CardAction>
<div className="flex flex-wrap items-center justify-end gap-2 md:gap-3">
<Select value={companyId} onValueChange={setCompanyId}> <Select value={companyId} onValueChange={setCompanyId}>
<SelectTrigger className="w-56"> <SelectTrigger className="w-56">
<SelectValue placeholder="Todas as empresas" /> <SelectValue placeholder="Todas as empresas" />
@ -116,11 +119,25 @@ export function SlaReport() {
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
<ToggleGroup
type="single"
value={timeRange}
onValueChange={setTimeRange}
variant="outline"
className="hidden *:data-[slot=toggle-group-item]:!px-4 md:flex"
>
<ToggleGroupItem value="90d">90 dias</ToggleGroupItem>
<ToggleGroupItem value="30d">30 dias</ToggleGroupItem>
<ToggleGroupItem value="7d">7 dias</ToggleGroupItem>
</ToggleGroup>
<Button asChild size="sm" variant="outline"> <Button asChild size="sm" variant="outline">
<a href={`/api/reports/sla.csv${companyId !== "all" ? `?companyId=${companyId}` : ""}`} download> <a href={`/api/reports/sla.csv?range=${timeRange}${companyId !== "all" ? `&companyId=${companyId}` : ""}`} download>
Exportar CSV Exportar CSV
</a> </a>
</Button> </Button>
</div>
</CardAction> </CardAction>
</div> </div>
</CardHeader> </CardHeader>