From 698e082719453d079ef584d5215512fbb3ea7c4f Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Tue, 18 Nov 2025 22:20:35 -0300
Subject: [PATCH] feat: improve hours report filter layout

---
 src/components/reports/hours-report.tsx | 118 ++++++++++++++++++------
 1 file changed, 90 insertions(+), 28 deletions(-)

diff --git a/src/components/reports/hours-report.tsx b/src/components/reports/hours-report.tsx
index 5157486..ec89bde 100644
--- a/src/components/reports/hours-report.tsx
+++ b/src/components/reports/hours-report.tsx
@@ -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>