Adjust reports filters layout and date range picker

reports-machines-filters-issue.svg

@@ -0,0 +1,18 @@
+<svg width="640" height="360" viewBox="0 0 640 360" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="640" height="360" rx="24" fill="#111827" />
+  <rect x="24" y="24" width="592" height="312" rx="18" fill="#1f2933" />
+  <rect x="48" y="48" width="544" height="80" rx="16" fill="#111827" />
+  <rect x="60" y="64" width="200" height="28" rx="8" fill="#4b5563" />
+  <rect x="272" y="64" width="112" height="28" rx="8" fill="#4b5563" />
+  <rect x="416" y="64" width="84" height="28" rx="8" fill="#4b5563" />
+  <rect x="516" y="64" width="72" height="28" rx="8" fill="#4b5563" />
+  <rect x="48" y="108" width="544" height="60" rx="16" fill="#111827" />
+  <rect x="56" y="118" width="200" height="28" rx="8" fill="#1f2933" />
+  <rect x="272" y="118" width="112" height="28" rx="8" fill="#1f2933" />
+  <rect x="416" y="118" width="84" height="28" rx="8" fill="#1f2933" />
+  <rect x="516" y="118" width="72" height="28" rx="8" fill="#1f2933" />
+  <rect x="24" y="180" width="592" height="120" rx="12" fill="#111827" stroke="#f87171" stroke-width="2" stroke-dasharray="6 4" />
+  <text x="200" y="220" fill="#f87171" font-family="Inter, sans-serif" font-size="18" font-weight="600">Filtros com scroll horizontal</text>
+  <text x="200" y="244" fill="#e5e7eb" font-family="Inter, sans-serif" font-size="14">Máquinas x categorias - barra com largura fixa</text>
+  <text x="200" y="268" fill="#9ca3af" font-family="Inter, sans-serif" font-size="12">Precisamos remover o overflow e ajustar a largura para corresponder ao layout de categorias.</text>
+</svg>

src/components/date-range-button.tsx

@@ -76,14 +76,36 @@ export function DateRangeButton({ from, to, onChange, className, clearLabel = "L
       return
     }
 
-    setDraftRange(next)
+    if (!draftRange?.from || draftRange?.to) {
-
+      setDraftRange(next?.from ? { from: next.from, to: undefined } : undefined)
-    if (next?.from && next?.to) {
+      return
-      const nextFrom = dateToStr(next.from)
-      const nextTo = dateToStr(next.to) ?? nextFrom
-      onChange({ from: nextFrom, to: nextTo })
-      setOpen(false)
     }
+
+    if (!draftRange.from) {
+      setDraftRange(undefined)
+      return
+    }
+
+    const start = draftRange.from
+    const rawSecond =
+      next?.to && next.to.getTime() !== start.getTime()
+        ? next.to
+        : next?.from ?? next?.to ?? start
+
+    if (!rawSecond) {
+      setDraftRange({ from: start, to: undefined })
+      return
+    }
+
+    const fromDate = rawSecond < start ? rawSecond : start
+    const toDate = rawSecond < start ? start : rawSecond
+    const finalRange: DateRange = { from: fromDate, to: toDate }
+    setDraftRange(finalRange)
+
+    const nextFrom = dateToStr(finalRange.from)
+    const nextTo = dateToStr(finalRange.to) ?? nextFrom
+    onChange({ from: nextFrom, to: nextTo })
+    setOpen(false)
   }
 
   return (
@@ -111,8 +133,8 @@ export function DateRangeButton({ from, to, onChange, className, clearLabel = "L
         <Calendar
           className="w-full"
           mode="range"
-          defaultMonth={range?.from}
+          defaultMonth={draftRange?.from ?? range?.from}
-          selected={range}
+          selected={draftRange ?? range}
           onSelect={handleSelect}
           fixedWeeks
           showOutsideDays

src/components/reports/machine-category-report.tsx

@@ -470,6 +470,7 @@ export function MachineCategoryReport() {
   return (
     <div className="space-y-6">
       <ReportsFilterToolbar
+        className="w-full"
         companyId={companyId}
         onCompanyChange={(value) => setCompanyId(value)}
         companyOptions={companyOptions}

src/components/reports/report-filter-toolbar.tsx

@@ -30,6 +30,7 @@ type ReportsFilterToolbarProps = {
   dateFrom?: string | null
   dateTo?: string | null
   onDateRangeChange?: (next: { from: string | null; to: string | null }) => void
+  className?: string
 }
 
 const BILLING_TOGGLE_ITEM =
@@ -54,9 +55,10 @@ export function ReportsFilterToolbar({
   dateFrom,
   dateTo,
   onDateRangeChange,
+  className,
 }: ReportsFilterToolbarProps) {
   return (
-    <div className="flex flex-col gap-3 rounded-3xl border border-border/60 bg-white/90 p-4 shadow-sm">
+    <div className={cn("flex flex-col gap-3 rounded-3xl border border-border/60 bg-white/90 p-4 shadow-sm", className)}>
       <div className="flex flex-wrap items-center gap-3">
         <SearchableCombobox
           value={companyId}