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

convex/reports.ts

@@ -109,6 +109,53 @@ function withUpperBound<T>(range: T, field: string, value: number): T {
   return range;
 }
 
+function parseIsoDateToMs(value?: string | null): number | null {
+  if (!value) return null;
+  const [yearStr, monthStr, dayStr] = value.split("-");
+  const year = Number(yearStr);
+  const month = Number(monthStr);
+  const day = Number(dayStr);
+  if (!year || !month || !day) return null;
+  const date = new Date(Date.UTC(year, month - 1, day, 0, 0, 0, 0));
+  return date.getTime();
+}
+
+function resolveRangeWindow(
+  range: string | undefined,
+  dateFrom: string | undefined,
+  dateTo: string | undefined,
+  defaultDays: number,
+): { startMs: number; endMs: number; days: number } {
+  const fromMs = parseIsoDateToMs(dateFrom);
+  const toMs = parseIsoDateToMs(dateTo);
+
+  if (fromMs !== null || toMs !== null) {
+    const startMs = fromMs ?? toMs ?? Date.now();
+    const endMsBase = toMs ?? fromMs ?? startMs;
+    const endMs = endMsBase + ONE_DAY_MS;
+    const days = Math.max(1, Math.round((endMs - startMs) / ONE_DAY_MS));
+    return { startMs, endMs, days };
+  }
+
+  const normalizedRange = range ?? "90d";
+  let days = defaultDays;
+  if (normalizedRange === "7d") days = 7;
+  else if (normalizedRange === "30d") days = 30;
+  else if (normalizedRange === "365d" || normalizedRange === "12m") days = 365;
+  else if (normalizedRange === "all") {
+    const now = new Date();
+    now.setUTCHours(0, 0, 0, 0);
+    const endMs = now.getTime() + ONE_DAY_MS;
+    return { startMs: 0, endMs, days: 0 };
+  }
+
+  const end = new Date();
+  end.setUTCHours(0, 0, 0, 0);
+  const endMs = end.getTime() + ONE_DAY_MS;
+  const startMs = endMs - days * ONE_DAY_MS;
+  return { startMs, endMs, days };
+}
+
 function resolveScopedCompanyId(
   viewer: Awaited<ReturnType<typeof requireStaff>>,
   companyId?: Id<"companies">,
@@ -469,15 +516,24 @@ function formatDateKey(timestamp: number) {
 
 export async function slaOverviewHandler(
   ctx: QueryCtx,
-  { tenantId, viewerId, range, companyId }: { tenantId: string; viewerId: Id<"users">; range?: string; companyId?: Id<"companies"> }
+  {
+    tenantId,
+    viewerId,
+    range,
+    companyId,
+    dateFrom,
+    dateTo,
+  }: {
+    tenantId: string
+    viewerId: Id<"users">
+    range?: string
+    companyId?: Id<"companies">
+    dateFrom?: string
+    dateTo?: string
+  }
 ) {
   const viewer = await requireStaff(ctx, viewerId, tenantId);
-  // Optional range filter (createdAt) for reporting purposes, similar ao backlog/csat
+  const { startMs, endMs, days } = resolveRangeWindow(range, dateFrom, dateTo, 90);
-  const days = range === "7d" ? 7 : range === "30d" ? 30 : 90;
-  const end = new Date();
-  end.setUTCHours(0, 0, 0, 0);
-  const endMs = end.getTime() + ONE_DAY_MS;
-  const startMs = endMs - days * ONE_DAY_MS;
   const inRange = await fetchScopedTicketsByCreatedRange(ctx, tenantId, viewer, startMs, endMs, companyId);
   const queues = await fetchQueues(ctx, tenantId);
   const categoriesMap = await fetchCategoryMap(ctx, tenantId);
@@ -616,14 +672,17 @@ export const triggerScheduledExports = action({
 
 export async function csatOverviewHandler(
   ctx: QueryCtx,
-  { tenantId, viewerId, range, companyId }: { tenantId: string; viewerId: Id<"users">; range?: string; companyId?: Id<"companies"> }
+  {
+    tenantId,
+    viewerId,
+    range,
+    companyId,
+    dateFrom,
+    dateTo,
+  }: { tenantId: string; viewerId: Id<"users">; range?: string; companyId?: Id<"companies">; dateFrom?: string; dateTo?: string }
 ) {
   const viewer = await requireStaff(ctx, viewerId, tenantId);
-  const days = range === "7d" ? 7 : range === "30d" ? 30 : 90;
+  const { startMs, endMs } = resolveRangeWindow(range, dateFrom, dateTo, 90);
-  const end = new Date();
-  end.setUTCHours(0, 0, 0, 0);
-  const endMs = end.getTime() + ONE_DAY_MS;
-  const startMs = endMs - days * ONE_DAY_MS;
   const tickets = await fetchScopedTicketsByCreatedRange(ctx, tenantId, viewer, startMs, endMs, companyId);
   const surveys = (await collectCsatSurveys(ctx, tickets)).filter((s) => s.receivedAt >= startMs && s.receivedAt < endMs);
 
@@ -700,27 +759,37 @@ export async function csatOverviewHandler(
         assigneeId: item.assigneeId,
         assigneeName: item.assigneeName,
       })),
-    rangeDays: days,
+    rangeDays: Math.max(1, Math.round((endMs - startMs) / ONE_DAY_MS)),
     positiveRate,
     byAgent,
   };
 }
 
 export const csatOverview = query({
-  args: { tenantId: v.string(), viewerId: v.id("users"), range: v.optional(v.string()), companyId: v.optional(v.id("companies")) },
+  args: {
+    tenantId: v.string(),
+    viewerId: v.id("users"),
+    range: v.optional(v.string()),
+    companyId: v.optional(v.id("companies")),
+    dateFrom: v.optional(v.string()),
+    dateTo: v.optional(v.string()),
+  },
   handler: csatOverviewHandler,
 });
 
 export async function openedResolvedByDayHandler(
   ctx: QueryCtx,
-  { tenantId, viewerId, range, companyId }: { tenantId: string; viewerId: Id<"users">; range?: string; companyId?: Id<"companies"> }
+  {
+    tenantId,
+    viewerId,
+    range,
+    companyId,
+    dateFrom,
+    dateTo,
+  }: { tenantId: string; viewerId: Id<"users">; range?: string; companyId?: Id<"companies">; dateFrom?: string; dateTo?: string }
 ) {
   const viewer = await requireStaff(ctx, viewerId, tenantId);
-  const days = range === "7d" ? 7 : range === "30d" ? 30 : 90;
+  const { startMs, endMs, days } = resolveRangeWindow(range, dateFrom, dateTo, 90);
-  const end = new Date();
-  end.setUTCHours(0, 0, 0, 0);
-  const endMs = end.getTime() + ONE_DAY_MS;
-  const startMs = endMs - days * ONE_DAY_MS;
 
   const openedTickets = await fetchScopedTicketsByCreatedRange(ctx, tenantId, viewer, startMs, endMs, companyId);
   const resolvedTickets = await fetchScopedTicketsByResolvedRange(ctx, tenantId, viewer, startMs, endMs, companyId);
@@ -761,21 +830,30 @@ export async function openedResolvedByDayHandler(
 }
 
 export const openedResolvedByDay = query({
-  args: { tenantId: v.string(), viewerId: v.id("users"), range: v.optional(v.string()), companyId: v.optional(v.id("companies")) },
+  args: {
+    tenantId: v.string(),
+    viewerId: v.id("users"),
+    range: v.optional(v.string()),
+    companyId: v.optional(v.id("companies")),
+    dateFrom: v.optional(v.string()),
+    dateTo: v.optional(v.string()),
+  },
   handler: openedResolvedByDayHandler,
 })
 
 export async function backlogOverviewHandler(
   ctx: QueryCtx,
-  { tenantId, viewerId, range, companyId }: { tenantId: string; viewerId: Id<"users">; range?: string; companyId?: Id<"companies"> }
+  {
+    tenantId,
+    viewerId,
+    range,
+    companyId,
+    dateFrom,
+    dateTo,
+  }: { tenantId: string; viewerId: Id<"users">; range?: string; companyId?: Id<"companies">; dateFrom?: string; dateTo?: string }
 ) {
   const viewer = await requireStaff(ctx, viewerId, tenantId);
-  // Optional range filter (createdAt) for reporting purposes
+  const { startMs, endMs, days } = resolveRangeWindow(range, dateFrom, dateTo, 90);
-  const days = range === "7d" ? 7 : range === "30d" ? 30 : 90;
-  const end = new Date();
-  end.setUTCHours(0, 0, 0, 0);
-  const endMs = end.getTime() + ONE_DAY_MS;
-  const startMs = endMs - days * ONE_DAY_MS;
   const inRange = await fetchScopedTicketsByCreatedRange(ctx, tenantId, viewer, startMs, endMs, companyId);
 
   const statusCounts = inRange.reduce<Record<TicketStatusNormalized, number>>((acc, ticket) => {
@@ -821,7 +899,14 @@ export async function backlogOverviewHandler(
 }
 
 export const backlogOverview = query({
-  args: { tenantId: v.string(), viewerId: v.id("users"), range: v.optional(v.string()), companyId: v.optional(v.id("companies")) },
+  args: {
+    tenantId: v.string(),
+    viewerId: v.id("users"),
+    range: v.optional(v.string()),
+    companyId: v.optional(v.id("companies")),
+    dateFrom: v.optional(v.string()),
+    dateTo: v.optional(v.string()),
+  },
   handler: backlogOverviewHandler,
 });
 
@@ -1023,14 +1108,12 @@ export async function ticketCategoryInsightsHandler(
     viewerId,
     range,
     companyId,
-  }: { tenantId: string; viewerId: Id<"users">; range?: string; companyId?: Id<"companies"> }
+    dateFrom,
+    dateTo,
+  }: { tenantId: string; viewerId: Id<"users">; range?: string; companyId?: Id<"companies">; dateFrom?: string; dateTo?: string }
 ) {
   const viewer = await requireStaff(ctx, viewerId, tenantId)
-  const days = range === "7d" ? 7 : range === "30d" ? 30 : 90
+  const { startMs, endMs, days } = resolveRangeWindow(range, dateFrom, dateTo, 90)
-  const end = new Date()
-  end.setUTCHours(0, 0, 0, 0)
-  const endMs = end.getTime() + ONE_DAY_MS
-  const startMs = endMs - days * ONE_DAY_MS
 
   const inRange = await fetchScopedTicketsByCreatedRange(ctx, tenantId, viewer, startMs, endMs, companyId)
   const categories = await ctx.db
@@ -1141,6 +1224,8 @@ export const categoryInsights = query({
     viewerId: v.id("users"),
     range: v.optional(v.string()),
     companyId: v.optional(v.id("companies")),
+    dateFrom: v.optional(v.string()),
+    dateTo: v.optional(v.string()),
   },
   handler: ticketCategoryInsightsHandler,
 })
@@ -1347,14 +1432,17 @@ export async function ticketsByMachineAndCategoryHandler(
   }
 ) {
   const viewer = await requireStaff(ctx, viewerId, tenantId)
-  const days = range === "7d" ? 7 : range === "30d" ? 30 : 90
+  const { startMs, endMs, days } = resolveRangeWindow(range, undefined, undefined, 90)
 
-  const end = new Date()
+  const tickets =
-  end.setUTCHours(0, 0, 0, 0)
+    days === 0
-  const endMs = end.getTime() + ONE_DAY_MS
+      ? await fetchScopedTickets(ctx, tenantId, viewer).then((all) =>
-  const startMs = endMs - days * ONE_DAY_MS
+          all.filter((ticket) => {
-
+            if (companyId && ticket.companyId && ticket.companyId !== companyId) return false
-  const tickets = await fetchScopedTicketsByCreatedRange(ctx, tenantId, viewer, startMs, endMs, companyId)
+            return true
+          }),
+        )
+      : await fetchScopedTicketsByCreatedRange(ctx, tenantId, viewer, startMs, endMs, companyId)
   const categoriesMap = await fetchCategoryMap(ctx, tenantId)
 
   const companyIds = new Set<Id<"companies">>()
@@ -1458,7 +1546,7 @@ export async function ticketsByMachineAndCategoryHandler(
   })
 
   return {
-    rangeDays: days,
+    rangeDays: days === 0 ? -1 : days,
     items,
   }
 }
@@ -1471,6 +1559,8 @@ export const ticketsByMachineAndCategory = query({
     companyId: v.optional(v.id("companies")),
     machineId: v.optional(v.id("machines")),
     userId: v.optional(v.id("users")),
+    dateFrom: v.optional(v.string()),
+    dateTo: v.optional(v.string()),
   },
   handler: ticketsByMachineAndCategoryHandler,
 })
@@ -1506,11 +1596,7 @@ export async function hoursByMachineHandler(
   const viewer = await requireStaff(ctx, viewerId, tenantId)
   const tickets = await fetchScopedTickets(ctx, tenantId, viewer)
 
-  const days = range === "7d" ? 7 : range === "30d" ? 30 : 90
+  const { startMs, endMs, days } = resolveRangeWindow(range, undefined, undefined, 90)
-  const end = new Date()
-  end.setUTCHours(0, 0, 0, 0)
-  const endMs = end.getTime() + ONE_DAY_MS
-  const startMs = endMs - days * ONE_DAY_MS
 
   const machinesById = new Map<string, Doc<"machines"> | null>()
   const companiesById = new Map<string, Doc<"companies"> | null>()
@@ -1518,7 +1604,7 @@ export async function hoursByMachineHandler(
   const map = new Map<string, MachineHoursEntry>()
 
   for (const t of tickets) {
-    if (t.updatedAt < startMs || t.updatedAt >= endMs) continue
+    if (days !== 0 && (t.updatedAt < startMs || t.updatedAt >= endMs)) continue
     if (companyId && t.companyId && t.companyId !== companyId) continue
     if (machineId && t.machineId !== machineId) continue
     if (userId && t.requesterId !== userId) continue
@@ -1588,7 +1674,7 @@ export async function hoursByMachineHandler(
   })
 
   return {
-    rangeDays: days,
+    rangeDays: days === 0 ? -1 : days,
     items,
   }
 }
@@ -1601,22 +1687,20 @@ export const hoursByMachine = query({
     companyId: v.optional(v.id("companies")),
     machineId: v.optional(v.id("machines")),
     userId: v.optional(v.id("users")),
+    dateFrom: v.optional(v.string()),
+    dateTo: v.optional(v.string()),
   },
   handler: hoursByMachineHandler,
 })
 
 export async function hoursByClientHandler(
   ctx: QueryCtx,
-  { tenantId, viewerId, range }: { tenantId: string; viewerId: Id<"users">; range?: string }
+  { tenantId, viewerId, range, dateFrom, dateTo }: { tenantId: string; viewerId: Id<"users">; range?: string; dateFrom?: string; dateTo?: string }
 ) {
   const viewer = await requireStaff(ctx, viewerId, tenantId)
   const tickets = await fetchScopedTickets(ctx, tenantId, viewer)
 
-  const days = range === "7d" ? 7 : range === "30d" ? 30 : 90
+  const { startMs, endMs, days } = resolveRangeWindow(range, dateFrom, dateTo, 90)
-  const end = new Date()
-  end.setUTCHours(0, 0, 0, 0)
-  const endMs = end.getTime() + ONE_DAY_MS
-  const startMs = endMs - days * ONE_DAY_MS
 
   type Acc = {
     companyId: Id<"companies">
@@ -1671,22 +1755,24 @@ export async function hoursByClientHandler(
 }
 
 export const hoursByClient = query({
-  args: { tenantId: v.string(), viewerId: v.id("users"), range: v.optional(v.string()) },
+  args: {
+    tenantId: v.string(),
+    viewerId: v.id("users"),
+    range: v.optional(v.string()),
+    dateFrom: v.optional(v.string()),
+    dateTo: v.optional(v.string()),
+  },
   handler: hoursByClientHandler,
 })
 
 // Internal variant used by scheduled jobs: skips viewer scoping and aggregates for the whole tenant
 export async function hoursByClientInternalHandler(
   ctx: QueryCtx,
-  { tenantId, range }: { tenantId: string; range?: string }
+  { tenantId, range, dateFrom, dateTo }: { tenantId: string; range?: string; dateFrom?: string; dateTo?: string }
 ) {
   const tickets = await fetchTickets(ctx, tenantId)
 
-  const days = range === "7d" ? 7 : range === "30d" ? 30 : 90
+  const { startMs, endMs, days } = resolveRangeWindow(range, dateFrom, dateTo, 90)
-  const end = new Date()
-  end.setUTCHours(0, 0, 0, 0)
-  const endMs = end.getTime() + ONE_DAY_MS
-  const startMs = endMs - days * ONE_DAY_MS
 
   type Acc = {
     companyId: Id<"companies">
@@ -1741,7 +1827,12 @@ export async function hoursByClientInternalHandler(
 }
 
 export const hoursByClientInternal = query({
-  args: { tenantId: v.string(), range: v.optional(v.string()) },
+  args: {
+    tenantId: v.string(),
+    range: v.optional(v.string()),
+    dateFrom: v.optional(v.string()),
+    dateTo: v.optional(v.string()),
+  },
   handler: hoursByClientInternalHandler,
 })
 

src/components/admin/reports/report-templates-manager.tsx

@@ -303,7 +303,7 @@ export function ReportTemplatesManager({ tenantId: tenantIdProp }: ReportTemplat
               onValueChange={(value) => setFilterCompanyId(value ?? "all")}
               options={companyOptions}
               placeholder="Todas as empresas"
-              className="h-9 w-full min-w-56 rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800 md:w-64"
+              triggerClassName="h-9 w-full min-w-56 rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800 md:w-64"
             />
             <Button
               size="sm"
@@ -396,7 +396,7 @@ export function ReportTemplatesManager({ tenantId: tenantIdProp }: ReportTemplat
                   onValueChange={(value) => setTargetCompanyId(value ?? "all")}
                   options={companyOptions}
                   placeholder="Todas as empresas"
-                  className="h-9 w-full rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800"
+                  triggerClassName="h-9 w-full rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800"
                 />
                 <p className="mt-2 text-xs text-neutral-500">
                   Defina se este template será global ou específico para uma empresa.

src/components/date-range-button.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import { useMemo } from "react"
+import type { DateRange } from "react-day-picker"
+
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { IconCalendar } from "@tabler/icons-react"
+
+export type DateRangeValue = {
+  from: string | null
+  to: string | null
+}
+
+type DateRangeButtonProps = {
+  from: string | null
+  to: string | null
+  onChange: (next: DateRangeValue) => void
+  className?: string
+}
+
+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") : ""
+}
+
+export 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>
+  )
+}
+

src/components/reports/backlog-report.tsx

@@ -44,15 +44,26 @@ const queueBacklogChartConfig = {
 }
 
 export function BacklogReport() {
-  const [timeRange, setTimeRange] = useState("90d")
+  const [timeRange, setTimeRange] = useState<"90d" | "30d" | "7d">("90d")
   const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
   const [schedulerOpen, setSchedulerOpen] = useState(false)
+  const [dateFrom, setDateFrom] = useState<string | null>(null)
+  const [dateTo, setDateTo] = useState<string | null>(null)
   const { session, convexUserId, isStaff, isAdmin } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
   const enabled = Boolean(isStaff && convexUserId)
   const data = useQuery(
     api.reports.backlogOverview,
-    enabled ? { tenantId, viewerId: convexUserId as Id<"users">, range: timeRange, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) } : "skip"
+    enabled
+      ? {
+          tenantId,
+          viewerId: convexUserId as Id<"users">,
+          range: timeRange,
+          companyId: companyId === "all" ? undefined : (companyId as Id<"companies">),
+          dateFrom,
+          dateTo,
+        }
+      : "skip"
   )
   const companies = useQuery(
     api.companies.list,
@@ -106,8 +117,18 @@ export function BacklogReport() {
         companyId={companyId}
         onCompanyChange={(value) => setCompanyId(value)}
         companyOptions={companyOptions}
-        timeRange={timeRange as "90d" | "30d" | "7d"}
+        timeRange={timeRange}
-        onTimeRangeChange={(value) => setTimeRange(value)}
+        onTimeRangeChange={(value) => {
+          setTimeRange(value as "90d" | "30d" | "7d")
+          setDateFrom(null)
+          setDateTo(null)
+        }}
+        dateFrom={dateFrom}
+        dateTo={dateTo}
+        onDateRangeChange={({ from, to }) => {
+          setDateFrom(from)
+          setDateTo(to)
+        }}
         exportHref={`/api/reports/backlog.xlsx?range=${timeRange}${
           companyId !== "all" ? `&companyId=${companyId}` : ""
         }`}

src/components/reports/category-report.tsx

@@ -53,9 +53,11 @@ const chartConfig = {
 export function CategoryReport() {
   const { session, convexUserId, isStaff, isAdmin } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
-  const [timeRange, setTimeRange] = useState("90d")
+  const [timeRange, setTimeRange] = useState<"90d" | "30d" | "7d">("90d")
   const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
   const [schedulerOpen, setSchedulerOpen] = useState(false)
+  const [dateFrom, setDateFrom] = useState<string | null>(null)
+  const [dateTo, setDateTo] = useState<string | null>(null)
   const enabled = Boolean(isStaff && convexUserId)
 
   const companyFilter = companyId !== "all" ? (companyId as Id<"companies">) : undefined
@@ -68,6 +70,8 @@ export function CategoryReport() {
           viewerId: convexUserId as Id<"users">,
           range: timeRange,
           companyId: companyFilter,
+          dateFrom,
+          dateTo,
         }
       : "skip",
   ) as CategoryInsightsResponse | undefined
@@ -181,8 +185,18 @@ export function CategoryReport() {
         companyId={companyId}
         onCompanyChange={(value) => setCompanyId(value)}
         companyOptions={companyOptions}
-        timeRange={timeRange as "90d" | "30d" | "7d"}
+        timeRange={timeRange}
-        onTimeRangeChange={(value) => setTimeRange(value)}
+        onTimeRangeChange={(value) => {
+          setTimeRange(value as "90d" | "30d" | "7d")
+          setDateFrom(null)
+          setDateTo(null)
+        }}
+        dateFrom={dateFrom}
+        dateTo={dateTo}
+        onDateRangeChange={({ from, to }) => {
+          setDateFrom(from)
+          setDateTo(to)
+        }}
         onOpenScheduler={isAdmin ? () => setSchedulerOpen(true) : undefined}
       />
 

src/components/reports/csat-report.tsx

@@ -26,13 +26,22 @@ export function CsatReport() {
   const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
   const [timeRange, setTimeRange] = useState<string>("90d")
   const [schedulerOpen, setSchedulerOpen] = useState(false)
+  const [dateFrom, setDateFrom] = useState<string | null>(null)
+  const [dateTo, setDateTo] = useState<string | null>(null)
   const { session, convexUserId, isStaff, isAdmin } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
   const enabled = Boolean(isStaff && convexUserId)
   const data = useQuery(
     api.reports.csatOverview,
     enabled
-      ? ({ tenantId, viewerId: convexUserId as Id<"users">, range: timeRange, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) })
+      ? ({
+          tenantId,
+          viewerId: convexUserId as Id<"users">,
+          range: timeRange,
+          companyId: companyId === "all" ? undefined : (companyId as Id<"companies">),
+          dateFrom,
+          dateTo,
+        })
       : "skip"
   )
   const companies = useQuery(
@@ -94,7 +103,17 @@ export function CsatReport() {
         onCompanyChange={(value) => handleCompanyChange(value)}
         companyOptions={comboboxOptions}
         timeRange={timeRange as "90d" | "30d" | "7d"}
-        onTimeRangeChange={(value) => setTimeRange(value)}
+        onTimeRangeChange={(value) => {
+          setTimeRange(value)
+          setDateFrom(null)
+          setDateTo(null)
+        }}
+        dateFrom={dateFrom}
+        dateTo={dateTo}
+        onDateRangeChange={({ from, to }) => {
+          setDateFrom(from)
+          setDateTo(to)
+        }}
         exportHref={`/api/reports/csat.xlsx?range=${timeRange}${
           companyId !== "all" ? `&companyId=${companyId}` : ""
         }`}

src/components/reports/hours-report.tsx

@@ -41,6 +41,21 @@ type HoursItem = {
   contractedHoursPerMonth?: number | null
 }
 
+type MachineHoursItem = {
+  machineId: string
+  machineHostname: string | null
+  companyId: string | null
+  companyName: string | null
+  internalMs: number
+  externalMs: number
+  totalMs: number
+}
+
+type HoursByMachineResponse = {
+  rangeDays: number
+  items: MachineHoursItem[]
+}
+
 const topClientsChartConfig = {
   internas: {
     label: "Horas internas",
@@ -53,19 +68,44 @@ const topClientsChartConfig = {
 } satisfies ChartConfig
 
 export function HoursReport() {
-  const [timeRange, setTimeRange] = useState("90d")
+  const [timeRange, setTimeRange] = useState<"90d" | "30d" | "7d" | "365d" | "all">("90d")
   const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
   const [billingFilter, setBillingFilter] = useState<"all" | "avulso" | "contratado">("all")
   const [schedulerOpen, setSchedulerOpen] = useState(false)
+  const [groupBy, setGroupBy] = useState<"company" | "machine">("company")
+  const [dateFrom, setDateFrom] = useState<string | null>(null)
+  const [dateTo, setDateTo] = useState<string | null>(null)
   const { session, convexUserId, isStaff, isAdmin } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
 
   const enabled = Boolean(isStaff && convexUserId)
   const data = useQuery(
     api.reports.hoursByClient,
-    enabled ? { tenantId, viewerId: convexUserId as Id<"users">, range: timeRange } : "skip"
+    enabled && groupBy === "company"
+      ? {
+          tenantId,
+          viewerId: convexUserId as Id<"users">,
+          range: timeRange === "365d" || timeRange === "all" ? "90d" : timeRange,
+          dateFrom,
+          dateTo,
+        }
+      : "skip"
   ) as { rangeDays: number; items: HoursItem[] } | undefined
 
+  const machinesData = useQuery(
+    api.reports.hoursByMachine,
+    enabled && groupBy === "machine"
+      ? {
+          tenantId,
+          viewerId: convexUserId as Id<"users">,
+          range: timeRange,
+          companyId: companyId === "all" ? undefined : (companyId as Id<"companies">),
+          dateFrom,
+          dateTo,
+        }
+      : "skip"
+  ) as HoursByMachineResponse | undefined
+
   const companies = useQuery(
     api.companies.list,
     enabled ? { tenantId, viewerId: convexUserId as Id<"users"> } : "skip"
@@ -84,7 +124,7 @@ export function HoursReport() {
       })),
     ]
   }, [companies])
-  const filtered = useMemo(() => {
+  const filteredCompanies = useMemo(() => {
     let items = data?.items ?? []
     if (companyId !== "all") {
       items = items.filter((it) => String(it.companyId) === companyId)
@@ -97,8 +137,24 @@ export function HoursReport() {
     return items
   }, [data?.items, companyId, billingFilter])
 
+  const filteredMachines = useMemo(() => {
+    let items = machinesData?.items ?? []
+    if (companyId !== "all") {
+      items = items.filter((it) => String(it.companyId) === companyId)
+    }
+    if (billingFilter === "avulso") {
+      // Para futuro: quando tivermos flag de avulso por máquina; por enquanto, não filtra
+      return items
+    }
+    if (billingFilter === "contratado") {
+      return items
+    }
+    return items
+  }, [machinesData?.items, companyId, billingFilter])
+
   const totals = useMemo(() => {
-    return filtered.reduce(
+    const source = groupBy === "machine" ? filteredMachines : filteredCompanies
+    return source.reduce(
       (acc, item) => {
         acc.internal += item.internalMs / 3600000
         acc.external += item.externalMs / 3600000
@@ -107,13 +163,13 @@ export function HoursReport() {
       },
       { internal: 0, external: 0, total: 0 }
     )
-  }, [filtered])
+  }, [filteredCompanies, filteredMachines, groupBy])
 
   // No number formatter needed; we use formatHoursCompact for hours
 
-  const filteredWithComputed = useMemo(
+  const filteredCompaniesWithComputed = useMemo(
     () =>
-      filtered.map((row) => {
+      filteredCompanies.map((row) => {
         const internal = row.internalMs / 3600000
         const external = row.externalMs / 3600000
         const total = row.totalMs / 3600000
@@ -129,11 +185,11 @@ export function HoursReport() {
           usagePercent,
         }
       }),
-    [filtered]
+    [filteredCompanies]
   )
   const topClientsData = useMemo(
     () =>
-      filteredWithComputed
+      filteredCompaniesWithComputed
         .slice()
         .sort((a, b) => b.total - a.total)
         .slice(0, 10)
@@ -142,7 +198,7 @@ export function HoursReport() {
           internas: row.internal,
           externas: row.external,
         })),
-    [filteredWithComputed]
+    [filteredCompaniesWithComputed]
   )
 
   return (
@@ -161,24 +217,73 @@ export function HoursReport() {
         companyId={companyId}
         onCompanyChange={(value) => setCompanyId(value)}
         companyOptions={companyOptions}
-        timeRange={timeRange as "90d" | "30d" | "7d"}
+        timeRange={timeRange}
-        onTimeRangeChange={(value) => setTimeRange(value)}
+        onTimeRangeChange={(value) => {
+          setTimeRange(value)
+          setDateFrom(null)
+          setDateTo(null)
+        }}
         showBillingFilter
         billingFilter={billingFilter}
         onBillingFilterChange={(value) => setBillingFilter(value)}
-        exportHref={`/api/reports/hours-by-client.xlsx?range=${timeRange}${
+        exportHref={`/api/reports/hours-by-client.xlsx?range=${
-          companyId !== "all" ? `&companyId=${companyId}` : ""
+          timeRange === "365d" || timeRange === "all" ? "90d" : timeRange
-        }`}
+        }${companyId !== "all" ? `&companyId=${companyId}` : ""}`}
         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="inline-flex rounded-full border border-slate-200 bg-slate-50 p-1 text-xs">
+              <button
+                type="button"
+                className={`px-3 py-1 rounded-full transition ${
+                  groupBy === "company"
+                    ? "bg-white text-neutral-900 shadow-sm"
+                    : "text-neutral-500 hover:text-neutral-800"
+                }`}
+                onClick={() => setGroupBy("company")}
+              >
+                Empresa
+              </button>
+              <button
+                type="button"
+                className={`px-3 py-1 rounded-full transition ${
+                  groupBy === "machine"
+                    ? "bg-white text-neutral-900 shadow-sm"
+                    : "text-neutral-500 hover:text-neutral-800"
+                }`}
+                onClick={() => setGroupBy("machine")}
+              >
+                Máquina
+              </button>
+            </div>
+          </div>
+        }
       />
       <Card className="border-slate-200">
         <CardHeader>
-          <CardTitle>Top clientes por horas</CardTitle>
+          <CardTitle>
-          <CardDescription>Comparativo empilhado de horas internas x externas (top 10).</CardDescription>
+            {groupBy === "company" ? "Top clientes por horas" : "Top máquinas por horas"}
+          </CardTitle>
+          <CardDescription>
+            {groupBy === "company"
+              ? "Comparativo empilhado de horas internas x externas (top 10 empresas)."
+              : "Comparativo empilhado de horas internas x externas (top 10 máquinas)."}
+          </CardDescription>
         </CardHeader>
         <CardContent>
-          {!filteredWithComputed || filteredWithComputed.length === 0 ? (
+          {groupBy === "company" ? (
-            <p className="rounded-lg border border-dashed border-slate-200 p-6 text-sm text-neutral-500">Sem dados para o período.</p>
+            !filteredCompaniesWithComputed || filteredCompaniesWithComputed.length === 0 ? (
+              <p className="rounded-lg border border-dashed border-slate-200 p-6 text-sm text-neutral-500">
+                Sem dados para o período.
+              </p>
             ) : (
               <ChartContainer config={topClientsChartConfig} className="aspect-auto h-[320px] w-full">
                 <BarChart
@@ -199,13 +304,73 @@ export function HoursReport() {
                     content={
                       <ChartTooltipContent
                         className="w-[220px]"
-                      labelFormatter={(value) => <span className="font-semibold text-foreground">{String(value)}</span>}
+                        labelFormatter={(value) => (
+                          <span className="font-semibold text-foreground">{String(value)}</span>
+                        )}
                         formatter={(value, name) => (
                           <>
                             <span className="text-muted-foreground">
                               {name === "internas" ? "Horas internas" : "Horas externas"}
                             </span>
-                          <span className="text-foreground font-mono font-medium tabular-nums">{formatHoursCompact(Number(value))}</span>
+                            <span className="text-foreground font-mono font-medium tabular-nums">
+                              {formatHoursCompact(Number(value))}
+                            </span>
+                          </>
+                        )}
+                      />
+                    }
+                  />
+                  <ChartLegend content={<ChartLegendContent />} />
+                  <Bar dataKey="internas" stackId="hours" fill="var(--color-internas)" radius={[8, 0, 0, 8]} barSize={18} />
+                  <Bar dataKey="externas" stackId="hours" fill="var(--color-externas)" radius={[0, 8, 8, 0]} barSize={18} />
+                </BarChart>
+              </ChartContainer>
+            )
+          ) : (
+            <>
+              {!filteredMachines || filteredMachines.length === 0 ? (
+                <p className="rounded-lg border border-dashed border-slate-200 p-6 text-sm text-neutral-500">
+                  Nenhuma máquina encontrada para o filtro selecionado.
+                </p>
+              ) : (
+                <ChartContainer config={topClientsChartConfig} className="aspect-auto h-[320px] w-full">
+                  <BarChart
+                    data={filteredMachines
+                      .slice()
+                      .sort((a, b) => b.totalMs - a.totalMs)
+                      .slice(0, 10)
+                      .map((row) => ({
+                        name: row.machineHostname ?? row.machineId,
+                        internas: row.internalMs / 3600000,
+                        externas: row.externalMs / 3600000,
+                      }))}
+                    layout="vertical"
+                    margin={{ top: 16, right: 24, bottom: 16, left: 0 }}
+                    barCategoryGap={12}
+                  >
+                    <CartesianGrid horizontal vertical={false} />
+                    <XAxis
+                      type="number"
+                      tickLine={false}
+                      axisLine={false}
+                      tickFormatter={(value) => formatHoursCompact(Number(value))}
+                    />
+                    <YAxis dataKey="name" type="category" tickLine={false} axisLine={false} width={200} />
+                    <ChartTooltip
+                      content={
+                        <ChartTooltipContent
+                          className="w-[220px]"
+                          labelFormatter={(value) => (
+                            <span className="font-semibold text-foreground">{String(value)}</span>
+                          )}
+                          formatter={(value, name) => (
+                            <>
+                              <span className="text-muted-foreground">
+                                {name === "internas" ? "Horas internas" : "Horas externas"}
+                              </span>
+                              <span className="text-foreground font-mono font-medium tabular-nums">
+                                {formatHoursCompact(Number(value))}
+                              </span>
                             </>
                           )}
                         />
@@ -217,12 +382,19 @@ export function HoursReport() {
                   </BarChart>
                 </ChartContainer>
               )}
+            </>
+          )}
         </CardContent>
       </Card>
+
       <Card className="border-slate-200">
         <CardHeader>
           <CardTitle>Horas</CardTitle>
-          <CardDescription>Visualize o esforço interno e externo por empresa e acompanhe o consumo contratado.</CardDescription>
+          <CardDescription>
+            {groupBy === "company"
+              ? "Visualize o esforço interno e externo por empresa e acompanhe o consumo contratado."
+              : "Visualize o esforço interno e externo por máquina dentro dos filtros selecionados."}
+          </CardDescription>
         </CardHeader>
         <CardContent>
           <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
@@ -238,13 +410,14 @@ export function HoursReport() {
             ))}
           </div>
 
-          {filteredWithComputed.length === 0 ? (
+          {groupBy === "company" ? (
+            !filteredCompaniesWithComputed.length ? (
               <div className="mt-6 rounded-2xl border border-dashed border-slate-200 bg-slate-50/80 p-8 text-center text-sm text-muted-foreground">
                 Nenhuma empresa encontrada para o filtro selecionado.
               </div>
             ) : (
               <div className="mt-6 grid gap-4 lg:grid-cols-2">
-              {filteredWithComputed.map((row) => (
+                {filteredCompaniesWithComputed.map((row) => (
                   <div
                     key={row.companyId}
                     className="flex flex-col justify-between rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-slate-300"
@@ -254,22 +427,31 @@ export function HoursReport() {
                         <h3 className="text-base font-semibold text-neutral-900">{row.name}</h3>
                         <p className="text-xs text-neutral-500">ID {row.companyId}</p>
                       </div>
-                    <Badge variant={row.isAvulso ? "secondary" : "outline"} className="rounded-full px-3 py-1 text-xs font-medium">
+                      <Badge
+                        variant={row.isAvulso ? "secondary" : "outline"}
+                        className="rounded-full px-3 py-1 text-xs font-medium"
+                      >
                         {row.isAvulso ? "Cliente avulso" : "Recorrente"}
                       </Badge>
                     </div>
                     <div className="mt-4 grid gap-3 rounded-xl border border-slate-100 bg-slate-50/70 p-4 text-sm text-neutral-700">
                       <div className="flex items-center justify-between">
                         <span className="text-xs uppercase text-neutral-500">Horas internas</span>
-                      <span className="font-semibold text-neutral-900">{formatHoursCompact(row.internal)}</span>
+                        <span className="font-semibold text-neutral-900">
+                          {formatHoursCompact(row.internal)}
+                        </span>
                       </div>
                       <div className="flex items-center justify-between">
                         <span className="text-xs uppercase text-neutral-500">Horas externas</span>
-                    <span className="font-semibold text-neutral-900">{formatHoursCompact(row.external)}</span>
+                        <span className="font-semibold text-neutral-900">
+                          {formatHoursCompact(row.external)}
+                        </span>
                       </div>
                       <div className="flex items-center justify-between">
                         <span className="text-xs uppercase text-neutral-500">Total</span>
-                    <span className="font-semibold text-neutral-900">{formatHoursCompact(row.total)}</span>
+                        <span className="font-semibold text-neutral-900">
+                          {formatHoursCompact(row.total)}
+                        </span>
                       </div>
                     </div>
                     <div className="mt-4 space-y-2">
@@ -298,6 +480,56 @@ export function HoursReport() {
                   </div>
                 ))}
               </div>
+            )
+          ) : !filteredMachines.length ? (
+            <div className="mt-6 rounded-2xl border border-dashed border-slate-200 bg-slate-50/80 p-8 text-center text-sm text-muted-foreground">
+              Nenhuma máquina encontrada para o filtro selecionado.
+            </div>
+          ) : (
+            <div className="mt-6 grid gap-4 lg:grid-cols-2">
+              {filteredMachines.map((row) => {
+                const internal = row.internalMs / 3_600_000
+                const external = row.externalMs / 3_600_000
+                const total = row.totalMs / 3_600_000
+                return (
+                  <div
+                    key={row.machineId}
+                    className="flex flex-col justify-between rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-slate-300"
+                  >
+                    <div className="flex flex-wrap items-center justify-between gap-3">
+                      <div>
+                        <h3 className="text-base font-semibold text-neutral-900">
+                          {row.machineHostname ?? row.machineId}
+                        </h3>
+                        <p className="text-xs text-neutral-500">
+                          {row.companyName ?? "Sem empresa"}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="mt-4 grid gap-3 rounded-xl border border-slate-100 bg-slate-50/70 p-4 text-sm text-neutral-700">
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs uppercase text-neutral-500">Horas internas</span>
+                        <span className="font-semibold text-neutral-900">
+                          {formatHoursCompact(internal)}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs uppercase text-neutral-500">Horas externas</span>
+                        <span className="font-semibold text-neutral-900">
+                          {formatHoursCompact(external)}
+                        </span>
+                      </div>
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs uppercase text-neutral-500">Total</span>
+                        <span className="font-semibold text-neutral-900">
+                          {formatHoursCompact(total)}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
           )}
         </CardContent>
       </Card>

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

@@ -48,8 +48,10 @@ type MachineHoursResponse = {
 }
 
 export function MachineCategoryReport() {
-  const [timeRange, setTimeRange] = useState("30d")
+  const [timeRange, setTimeRange] = useState<"90d" | "30d" | "7d" | "365d" | "all">("30d")
   const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
+  const [dateFrom, setDateFrom] = useState<string | null>(null)
+  const [dateTo, setDateTo] = useState<string | null>(null)
   const { session, convexUserId, isStaff } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
 
@@ -64,6 +66,8 @@ export function MachineCategoryReport() {
           viewerId: convexUserId as Id<"users">,
           range: timeRange,
           companyId: companyId === "all" ? undefined : (companyId as Id<"companies">),
+          dateFrom,
+          dateTo,
         } as const)
       : "skip"
   ) as MachineCategoryReportData | undefined
@@ -159,6 +163,8 @@ export function MachineCategoryReport() {
           companyId: companyId === "all" ? undefined : (companyId as Id<"companies">),
           machineId: selectedMachineId !== "all" ? (selectedMachineId as Id<"machines">) : undefined,
           userId: selectedUserId !== "all" ? (selectedUserId as Id<"users">) : undefined,
+          dateFrom,
+          dateTo,
         } as const)
       : "skip"
   ) as MachineHoursResponse | undefined
@@ -236,8 +242,19 @@ export function MachineCategoryReport() {
         companyId={companyId}
         onCompanyChange={(value) => setCompanyId(value)}
         companyOptions={companyOptions}
-        timeRange={timeRange as "90d" | "30d" | "7d"}
+        timeRange={timeRange}
-        onTimeRangeChange={(value) => setTimeRange(value)}
+        onTimeRangeChange={(value) => {
+          setTimeRange(value)
+          setDateFrom(null)
+          setDateTo(null)
+        }}
+        dateFrom={dateFrom}
+        dateTo={dateTo}
+        onDateRangeChange={({ from, to }) => {
+          setDateFrom(from)
+          setDateTo(to)
+        }}
+        allowExtendedRanges
       />
 
       <Card className="border-slate-200">
@@ -260,7 +277,7 @@ export function MachineCategoryReport() {
                 onValueChange={(value) => setSelectedMachineId(value ?? "all")}
                 options={machineOptions}
                 placeholder="Todas as máquinas"
-                className="h-10 w-full rounded-2xl border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800"
+                triggerClassName="h-10 w-full rounded-2xl border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800"
               />
             </div>
             <div className="space-y-1">
@@ -272,7 +289,7 @@ export function MachineCategoryReport() {
                 onValueChange={(value) => setSelectedUserId(value ?? "all")}
                 options={userOptions}
                 placeholder="Todos os usuários"
-                className="h-10 w-full rounded-2xl border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800"
+                triggerClassName="h-10 w-full rounded-2xl border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800"
               />
             </div>
             <div className="space-y-1">

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

@@ -6,9 +6,10 @@ import { Button } from "@/components/ui/button"
 import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 import { cn } from "@/lib/utils"
+import { DateRangeButton } from "@/components/date-range-button"
 
 type BillingFilter = "all" | "avulso" | "contratado"
-type TimeRange = "90d" | "30d" | "7d"
+type TimeRange = "90d" | "30d" | "7d" | "365d" | "all"
 
 type ReportsFilterToolbarProps = {
   companyId: string
@@ -25,6 +26,10 @@ type ReportsFilterToolbarProps = {
   onExportClick?: () => void
   isExporting?: boolean
   onOpenScheduler?: () => void
+  allowExtendedRanges?: boolean
+  dateFrom?: string | null
+  dateTo?: string | null
+  onDateRangeChange?: (next: { from: string | null; to: string | null }) => void
 }
 
 const BILLING_TOGGLE_ITEM =
@@ -45,6 +50,10 @@ export function ReportsFilterToolbar({
   onExportClick,
   isExporting = false,
   onOpenScheduler,
+  allowExtendedRanges = false,
+  dateFrom,
+  dateTo,
+  onDateRangeChange,
 }: ReportsFilterToolbarProps) {
   return (
     <div className="flex flex-col gap-3 rounded-3xl border border-border/60 bg-white/90 p-4 shadow-sm">
@@ -54,8 +63,16 @@ export function ReportsFilterToolbar({
           onValueChange={(next) => onCompanyChange(next ?? "all")}
           options={companyOptions}
           placeholder="Todas as empresas"
-          className="h-10 w-full min-w-56 rounded-2xl border border-border/60 bg-background/95 px-3 text-left text-sm font-semibold text-neutral-800 md:w-64"
+          triggerClassName="h-10 w-full min-w-56 rounded-2xl border border-border/60 bg-background/95 px-3 text-left text-sm font-semibold text-neutral-800 md:w-64"
         />
+        {onDateRangeChange ? (
+          <DateRangeButton
+            from={dateFrom ?? null}
+            to={dateTo ?? null}
+            onChange={onDateRangeChange}
+            className="w-full min-w-[200px] md:w-auto"
+          />
+        ) : null}
         {showBillingFilter ? (
           <ToggleGroup
             type="single"
@@ -97,6 +114,16 @@ export function ReportsFilterToolbar({
           <ToggleGroupItem value="7d" className="min-w-[80px] justify-center px-4">
             7 dias
           </ToggleGroupItem>
+          {allowExtendedRanges ? (
+            <>
+              <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-[96px] justify-center px-4 lg:inline-flex">
+                Todo histórico
+              </ToggleGroupItem>
+            </>
+          ) : null}
         </ToggleGroup>
         <div className="ml-auto flex items-center gap-2">
           {onOpenScheduler ? (

src/components/reports/sla-report.tsx

@@ -63,13 +63,22 @@ export function SlaReport() {
   const [companyId, setCompanyId] = usePersistentCompanyFilter("all")
   const [timeRange, setTimeRange] = useState<"90d" | "30d" | "7d">("90d")
   const [schedulerOpen, setSchedulerOpen] = useState(false)
+  const [dateFrom, setDateFrom] = useState<string | null>(null)
+  const [dateTo, setDateTo] = useState<string | null>(null)
   const { session, convexUserId, isStaff, isAdmin } = useAuth()
   const tenantId = session?.user.tenantId ?? DEFAULT_TENANT_ID
   const enabled = Boolean(isStaff && convexUserId)
   const data = useQuery(
     api.reports.slaOverview,
     enabled
-      ? ({ tenantId, viewerId: convexUserId as Id<"users">, range: timeRange, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) })
+      ? ({
+          tenantId,
+          viewerId: convexUserId as Id<"users">,
+          range: timeRange,
+          companyId: companyId === "all" ? undefined : (companyId as Id<"companies">),
+          dateFrom,
+          dateTo,
+        })
       : "skip"
   )
   const agents = useQuery(
@@ -82,7 +91,14 @@ export function SlaReport() {
   const openedResolved = useQuery(
     api.reports.openedResolvedByDay,
     enabled
-      ? ({ tenantId, viewerId: convexUserId as Id<"users">, range: timeRange, companyId: companyId === "all" ? undefined : (companyId as Id<"companies">) })
+      ? ({
+          tenantId,
+          viewerId: convexUserId as Id<"users">,
+          range: timeRange,
+          companyId: companyId === "all" ? undefined : (companyId as Id<"companies">),
+          dateFrom,
+          dateTo,
+        })
       : "skip"
   ) as { rangeDays: number; series: Array<{ date: string; opened: number; resolved: number }> } | undefined
 
@@ -139,7 +155,17 @@ export function SlaReport() {
         onCompanyChange={(value) => setCompanyId(value)}
         companyOptions={companyOptions}
         timeRange={timeRange}
-        onTimeRangeChange={(value) => setTimeRange(value)}
+        onTimeRangeChange={(value) => {
+          setTimeRange(value as "90d" | "30d" | "7d")
+          setDateFrom(null)
+          setDateTo(null)
+        }}
+        dateFrom={dateFrom}
+        dateTo={dateTo}
+        onDateRangeChange={({ from, to }) => {
+          setDateFrom(from)
+          setDateTo(to)
+        }}
         exportHref={`/api/reports/sla.xlsx?range=${timeRange}${
           companyId !== "all" ? `&companyId=${companyId}` : ""
         }`}

src/components/tickets/tickets-filters.tsx

@@ -1,17 +1,7 @@
 "use client"
 
 import { useEffect, useMemo, useState } from "react"
-import {
+import { IconFilter, IconRefresh, IconSearch, IconList, IconBuilding, IconTags, IconUser } from "@tabler/icons-react"
-  IconCalendar,
-  IconFilter,
-  IconRefresh,
-  IconSearch,
-  IconList,
-  IconBuilding,
-  IconTags,
-  IconUser,
-} from "@tabler/icons-react"
-import type { DateRange } from "react-day-picker"
 
 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 = [],