Adjust reports filters layout and date range picker

src/components/date-range-button.tsx

@@ -76,14 +76,36 @@ export function DateRangeButton({ from, to, onChange, className, clearLabel = "L
       return
     }
 
-    setDraftRange(next)
-
-    if (next?.from && next?.to) {
-      const nextFrom = dateToStr(next.from)
-      const nextTo = dateToStr(next.to) ?? nextFrom
-      onChange({ from: nextFrom, to: nextTo })
-      setOpen(false)
+    if (!draftRange?.from || draftRange?.to) {
+      setDraftRange(next?.from ? { from: next.from, to: undefined } : undefined)
+      return
     }
+
+    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}
-          selected={range}
+          defaultMonth={draftRange?.from ?? range?.from}
+          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}