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

feat: improve hours report filter layout

Browse source
This commit is contained in:
Esdras Renan 2025-11-18 22:20:35 -03:00
parent b83c37d51f
commit 698e082719
1 changed files with 90 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -28,7 +28,9 @@ import {
import type { ChartConfig } from "@/components/ui/chart"
import { formatHoursCompact } from "@/lib/utils"
import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
import { ReportsFilterToolbar } from "@/components/reports/report-filter-toolbar"
import { Button } from "@/components/ui/button"
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { DateRangeButton } from "@/components/date-range-button"
import { ReportScheduleDrawer } from "@/components/reports/report-schedule-drawer"
type HoursItem = {
@ -227,31 +229,81 @@ export function HoursReport() {
companyOptions={companyOptions}
/>
) : null}
<ReportsFilterToolbar
companyId={companyId}
onCompanyChange={(value) => setCompanyId(value)}
companyOptions={companyOptions}
timeRange={timeRange}
onTimeRangeChange={(value) => {
setTimeRange(value)
setDateFrom(null)
setDateTo(null)
}}
showBillingFilter
billingFilter={billingFilter}
onBillingFilterChange={(value) => setBillingFilter(value)}
exportHref={exportHref}
onOpenScheduler={isAdmin ? () => setSchedulerOpen(true) : undefined}
dateFrom={dateFrom}
dateTo={dateTo}
onDateRangeChange={({ from, to }) => {
setDateFrom(from)
setDateTo(to)
}}
allowExtendedRanges={groupBy === "machine"}
extraFilters={
<div className="flex flex-wrap items-center gap-2">
<span className="text-xs font-medium text-neutral-500">Agrupar por</span>
<div className="flex flex-col gap-4 rounded-3xl border border-border/60 bg-white/95 p-4 shadow-sm">
<div className="flex flex-wrap gap-3 lg:items-center">
<div className="flex flex-1 flex-wrap gap-3 lg:flex-nowrap">
<SearchableCombobox
value={companyId}
onValueChange={(value) => setCompanyId(value ?? "all")}
options={companyOptions}
placeholder="Todas as empresas"
triggerClassName="h-10 w-full rounded-2xl border border-border/60 bg-white px-3 text-left text-sm font-semibold text-neutral-800 lg:w-64"
/>
<DateRangeButton
from={dateFrom}
to={dateTo}
onChange={({ from, to }) => {
setDateFrom(from)
setDateTo(to)
}}
className="w-full min-w-[200px] lg:w-auto"
/>
</div>
<div className="flex flex-1 justify-center">
<ToggleGroup
type="single"
value={billingFilter}
onValueChange={(value) => value && setBillingFilter(value as typeof billingFilter)}
className="inline-flex rounded-full border border-border/60 bg-white/80 p-1 overflow-hidden"
>
<ToggleGroupItem value="all" className="rounded-full px-6 py-2 text-xs font-semibold whitespace-nowrap">
Todos
</ToggleGroupItem>
<ToggleGroupItem value="avulso" className="rounded-full px-6 py-2 text-xs font-semibold whitespace-nowrap">
Somente avulsos
</ToggleGroupItem>
<ToggleGroupItem value="contratado" className="rounded-full px-6 py-2 text-xs font-semibold whitespace-nowrap">
Somente contratados
</ToggleGroupItem>
</ToggleGroup>
</div>
</div>
<div className="flex flex-wrap items-center gap-3">
<ToggleGroup
type="single"
value={timeRange}
onValueChange={(value) => {
if (!value) return
setTimeRange(value as typeof timeRange)
setDateFrom(null)
setDateTo(null)
}}
variant="outline"
size="lg"
className="flex flex-wrap rounded-2xl border border-border/60 lg:flex-nowrap lg:min-w-[320px]"
>
<ToggleGroupItem value="90d" className="min-w-[80px] justify-center px-4">
90 dias
</ToggleGroupItem>
<ToggleGroupItem value="30d" className="min-w-[80px] justify-center px-4">
30 dias
</ToggleGroupItem>
<ToggleGroupItem value="7d" className="min-w-[80px] justify-center px-4">
7 dias
</ToggleGroupItem>
{groupBy === "machine" ? (
<>
<ToggleGroupItem value="365d" className="hidden min-w-[96px] justify-center px-4 lg:inline-flex">
12 meses
</ToggleGroupItem>
<ToggleGroupItem value="all" className="hidden min-w-[120px] justify-center px-5 lg:inline-flex">
Todo histórico
</ToggleGroupItem>
</>
) : null}
</ToggleGroup>
<div className="flex flex-1 min-w-[220px] flex-wrap items-center justify-center gap-2 text-xs font-medium text-neutral-500">
<span>Agrupar por</span>
<div className="inline-flex rounded-full border border-slate-200 bg-slate-50 p-1 text-xs">
<button
type="button"
@ -277,8 +329,18 @@ export function HoursReport() {
</button>
</div>
</div>
}
/>
<div className="ml-auto flex flex-wrap items-center justify-end gap-2 lg:flex-nowrap">
{isAdmin ? (
<Button variant="outline" size="sm" onClick={() => setSchedulerOpen(true)}>
Agendar exportação
</Button>
) : null}
<Button asChild size="sm" variant="outline">
<a href={exportHref}>Exportar XLSX</a>
</Button>
</div>
</div>
</div>
<Card className="border-slate-200">
<CardHeader>
<CardTitle>