feat(reports): add date range filters and extend machine reports

src/components/tickets/tickets-filters.tsx

@@ -1,17 +1,7 @@
 "use client"
 
 import { useEffect, useMemo, useState } from "react"
-import {
-  IconCalendar,
-  IconFilter,
-  IconRefresh,
-  IconSearch,
-  IconList,
-  IconBuilding,
-  IconTags,
-  IconUser,
-} from "@tabler/icons-react"
-import type { DateRange } from "react-day-picker"
+import { IconFilter, IconRefresh, IconSearch, IconList, IconBuilding, IconTags, IconUser } from "@tabler/icons-react"
 
 import { ticketPrioritySchema, type TicketStatus } from "@/lib/schemas/ticket"
 import { PriorityIcon } from "@/components/tickets/priority-select"
@@ -24,7 +14,6 @@ export { defaultTicketFilters }
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { Calendar } from "@/components/ui/calendar"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import {
   Select,
@@ -35,6 +24,7 @@ import {
 } from "@/components/ui/select"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
+import { DateRangeButton } from "@/components/date-range-button"
 
 type QueueOption = string
 
@@ -72,93 +62,6 @@ const priorityOptions = ticketPrioritySchema.options.map((priority) => ({
   }[priority],
 }))
 
-function strToDate(value?: string | null): Date | undefined {
-  if (!value) return undefined
-  const [y, m, d] = value.split("-").map(Number)
-  if (!y || !m || !d) return undefined
-  return new Date(y, m - 1, d)
-}
-
-function dateToStr(value?: Date): string | null {
-  if (!value) return null
-  const y = value.getFullYear()
-  const m = String(value.getMonth() + 1).padStart(2, "0")
-  const d = String(value.getDate()).padStart(2, "0")
-  return `${y}-${m}-${d}`
-}
-
-function formatPtBR(value?: Date): string {
-  return value ? value.toLocaleDateString("pt-BR") : ""
-}
-
-type DateRangeButtonProps = {
-  from: string | null
-  to: string | null
-  onChange: (next: { from: string | null; to: string | null }) => void
-  className?: string
-}
-
-function DateRangeButton({ from, to, onChange, className }: DateRangeButtonProps) {
-  const range: DateRange | undefined = useMemo(
-    () => ({
-      from: strToDate(from),
-      to: strToDate(to),
-    }),
-    [from, to]
-  )
-
-  const label =
-    range?.from && range?.to
-      ? `${formatPtBR(range.from)} - ${formatPtBR(range.to)}`
-      : "Período"
-
-  const handleSelect = (next?: DateRange) => {
-    if (!next?.from && !next?.to) {
-      onChange({ from: null, to: null })
-      return
-    }
-
-    if (next?.from && !next?.to) {
-      const single = dateToStr(next.from)
-      if (from && to && from === to && single === from) {
-        onChange({ from: null, to: null })
-        return
-      }
-      onChange({ from: single, to: single })
-      return
-    }
-
-    const nextFrom = dateToStr(next?.from) ?? null
-    const nextTo = dateToStr(next?.to) ?? nextFrom
-    onChange({ from: nextFrom, to: nextTo })
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className={`flex h-10 w-full items-center justify-start gap-2 rounded-2xl border-slate-300 bg-white/95 text-sm font-semibold text-neutral-700 ${className ?? ""}`}
-        >
-          <IconCalendar className="size-4 text-neutral-500" />
-          <span className="truncate">{label}</span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-auto overflow-hidden p-0" align="end">
-        <Calendar
-          className="w-full"
-          mode="range"
-          defaultMonth={range?.from}
-          selected={range}
-          onSelect={handleSelect}
-          fixedWeeks
-          showOutsideDays
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
-
 export function TicketsFilters({
   onChange,
   queues = [],