Refina filtros de tickets e seletor de período

src/components/tickets/tickets-filters.tsx

@@ -1,7 +1,8 @@
 "use client"
 
 import { useEffect, useMemo, useState } from "react"
-import { IconFilter, IconRefresh } from "@tabler/icons-react"
+import { IconCalendar, IconFilter, IconRefresh } from "@tabler/icons-react"
+import type { DateRange } from "react-day-picker"
 
 import {
   ticketChannelSchema,
@@ -13,10 +14,11 @@ import { defaultTicketFilters } from "@/lib/ticket-filters"
 
 export type { TicketFiltersState }
 export { defaultTicketFilters }
+
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+import { Calendar } from "@/components/ui/calendar"
 import {
   Popover,
   PopoverContent,
@@ -29,7 +31,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { DatePicker } from "@/components/ui/date-picker"
 
 type QueueOption = string
 
@@ -79,6 +80,93 @@ const channelOptions = ticketChannelSchema.options.map((channel) => ({
   }[channel],
 }))
 
+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={`w-full justify-start rounded-xl border-slate-300 bg-white/90 ${className ?? ""}`}
+        >
+          <IconCalendar className="mr-2 size-4" />
+          <span className="line-clamp-1">{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 = [],
@@ -136,227 +224,215 @@ export function TicketsFilters({
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <div className="flex flex-1 flex-col gap-2 md:flex-row md:flex-wrap">
-          <Input
-            placeholder="Buscar por assunto ou #ID"
-            value={filters.search}
-            onChange={(event) => setPartial({ search: event.target.value })}
-            className="md:max-w-sm"
-          />
-          {canUseAdvancedFilters ? (
-            <Select
-              value={filters.queue ?? ALL_VALUE}
-              onValueChange={(value) => setPartial({ queue: value === ALL_VALUE ? null : value })}
-            >
-              <SelectTrigger className="md:w-[180px]">
-                <SelectValue placeholder="Fila" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value={ALL_VALUE}>Todas as filas</SelectItem>
-                {queues.map((queue) => (
-                  <SelectItem key={queue!} value={queue!}>
-                    {queue}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          ) : null}
-          {canUseAdvancedFilters ? (
-            <Select
-              value={filters.company ?? ALL_VALUE}
-              onValueChange={(value) => setPartial({ company: value === ALL_VALUE ? null : value })}
-            >
-              <SelectTrigger className="md:w-[220px]">
-                <SelectValue placeholder="Empresa" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value={ALL_VALUE}>Todas as empresas</SelectItem>
-                {companies.map((company) => (
-                  <SelectItem key={company!} value={company!}>
-                    {company}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          ) : null}
-          <Select
-            value={filters.categoryId ?? ALL_VALUE}
-            onValueChange={(value) => setPartial({ categoryId: value === ALL_VALUE ? null : value })}
-          >
-            <SelectTrigger className="md:w-[220px]">
-              <SelectValue placeholder="Categoria" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={ALL_VALUE}>Todas as categorias</SelectItem>
-              {categories.map((category) => (
-                <SelectItem key={category.id} value={category.id}>
-                  {category.name}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex flex-wrap items-center gap-2">
-          {canUseAdvancedFilters ? (
-            <Select
-              value={filters.assigneeId ?? ALL_VALUE}
-              onValueChange={(value) => setPartial({ assigneeId: value === ALL_VALUE ? null : value })}
-            >
-              <SelectTrigger className="md:w-[220px]">
-                <SelectValue placeholder="Responsável" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value={ALL_VALUE}>Todos os responsáveis</SelectItem>
-                {assignees.map((user) => (
-                  <SelectItem key={user.id} value={user.id}>
-                    {user.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          ) : null}
-          <Select
-            value={filters.view}
-            onValueChange={(value) => setPartial({ view: value as TicketFiltersState["view"] })}
-          >
-            <SelectTrigger className="w-[150px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="active">Em andamento</SelectItem>
-              <SelectItem value="completed">Concluídos</SelectItem>
-            </SelectContent>
-          </Select>
-          <Select
-            value={filters.sort}
-            onValueChange={(value) => setPartial({ sort: value as TicketFiltersState["sort"] })}
-          >
-            <SelectTrigger className="w-[180px]">
-              <SelectValue placeholder="Ordenar" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="recent">Mais recentes</SelectItem>
-              <SelectItem value="oldest">Mais antigos</SelectItem>
-            </SelectContent>
-          </Select>
-          <Popover>
-            <PopoverTrigger asChild>
+      <section className="rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm">
+        <div className="grid gap-4">
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] items-center gap-3">
+            <div className="col-span-2">
+              <Input
+                placeholder="Buscar por assunto ou #ID"
+                value={filters.search}
+                onChange={(event) => setPartial({ search: event.target.value })}
+                className="w-full rounded-xl border-slate-300 bg-white/90"
+              />
+            </div>
+            <div className="col-span-full flex items-center justify-end gap-2">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="size-9 rounded-full border-slate-300 bg-white text-neutral-800 shadow-sm hover:bg-slate-50"
+                    aria-label="Filtros avançados"
+                  >
+                    <IconFilter className="size-4" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-64 space-y-4" align="end">
+                  <div className="space-y-2">
+                    <p className="text-xs font-semibold uppercase text-neutral-500">Status</p>
+                    <Select
+                      value={filters.status ?? ALL_VALUE}
+                      onValueChange={(value) =>
+                        setPartial({ status: value === ALL_VALUE ? null : (value as TicketStatus) })
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Todos" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value={ALL_VALUE}>Todos</SelectItem>
+                        {statusOptions.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <p className="text-xs font-semibold uppercase text-neutral-500">Prioridade</p>
+                    <Select
+                      value={filters.priority ?? ALL_VALUE}
+                      onValueChange={(value) => setPartial({ priority: value === ALL_VALUE ? null : value })}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Todas" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value={ALL_VALUE}>Todas</SelectItem>
+                        {priorityOptions.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <p className="text-xs font-semibold uppercase text-neutral-500">Canal</p>
+                    <Select
+                      value={filters.channel ?? ALL_VALUE}
+                      onValueChange={(value) => setPartial({ channel: value === ALL_VALUE ? null : value })}
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue placeholder="Todos" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value={ALL_VALUE}>Todos</SelectItem>
+                        {channelOptions.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </PopoverContent>
+              </Popover>
               <Button
-                variant="outline"
-                size="sm"
-                className="gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-sm hover:bg-slate-50"
+                variant="ghost"
+                size="icon"
+                className="size-9 rounded-full text-neutral-700 hover:bg-slate-100"
+                onClick={() => setPartial(defaultTicketFilters)}
+                aria-label="Resetar filtros"
               >
-                <IconFilter className="size-4 text-neutral-800" />
-                Filtros
+                <IconRefresh className="size-4" />
               </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-64 space-y-4">
-              <div className="space-y-2">
-                <p className="text-xs font-semibold uppercase text-neutral-500">
-                  Status
-                </p>
-                <Select
-                  value={filters.status ?? ALL_VALUE}
-                  onValueChange={(value) =>
-                    setPartial({ status: value === ALL_VALUE ? null : (value as TicketStatus) })
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Todos" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value={ALL_VALUE}>Todos</SelectItem>
-                    {statusOptions.map((option) => (
-                      <SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-2">
-                <p className="text-xs font-semibold uppercase text-neutral-500">
-                  Prioridade
-                </p>
-                <Select
-                  value={filters.priority ?? ALL_VALUE}
-                  onValueChange={(value) => setPartial({ priority: value === ALL_VALUE ? null : value })}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Todas" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value={ALL_VALUE}>Todas</SelectItem>
-                    {priorityOptions.map((option) => (
-                      <SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="space-y-2">
-                <p className="text-xs font-semibold uppercase text-neutral-500">
-                  Canal
-                </p>
-                <Select
-                  value={filters.channel ?? ALL_VALUE}
-                  onValueChange={(value) => setPartial({ channel: value === ALL_VALUE ? null : value })}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Todos" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value={ALL_VALUE}>Todos</SelectItem>
-                    {channelOptions.map((option) => (
-                      <SelectItem key={option.value} value={option.value}>
-                        {option.label}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-            </PopoverContent>
-          </Popover>
-          <Button
-            variant="ghost"
-            size="sm"
-            className="gap-2 rounded-lg px-3 py-2 text-sm font-medium text-neutral-700 hover:bg-slate-100"
-            onClick={() => setPartial(defaultTicketFilters)}
-          >
-            <IconRefresh className="size-4" />
-            Resetar
-          </Button>
-        </div>
-      </div>
-      <div className="rounded-2xl border border-slate-200 bg-white/70 p-4 shadow-sm">
-        <div className="flex items-center justify-between">
-          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Período</p>
-        </div>
-        <div className="mt-3 flex flex-wrap gap-3">
-          <div className="flex min-w-[200px] flex-1 flex-col gap-1">
-            <Label className="text-xs font-semibold uppercase tracking-wide text-neutral-500">A partir de</Label>
-            <DatePicker
-              value={filters.dateFrom}
-              onChange={(value) => setPartial({ dateFrom: value })}
-              placeholder="Selecionar data"
-            />
+            </div>
           </div>
-          <div className="flex min-w-[200px] flex-1 flex-col gap-1">
-            <Label className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Até</Label>
-            <DatePicker
-              value={filters.dateTo}
-              onChange={(value) => setPartial({ dateTo: value })}
-              placeholder="Selecionar data"
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-3">
+            {canUseAdvancedFilters && (
+              <Select
+                value={filters.queue ?? ALL_VALUE}
+                onValueChange={(value) => setPartial({ queue: value === ALL_VALUE ? null : value })}
+              >
+                <SelectTrigger className="w-full rounded-xl border-slate-300 bg-slate-50/70 focus:ring-neutral-300">
+                  <SelectValue placeholder="Fila" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>Todas as filas</SelectItem>
+                  {queues.map((queue) => (
+                    <SelectItem key={queue!} value={queue!}>
+                      {queue}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            {canUseAdvancedFilters && (
+              <Select
+                value={filters.company ?? ALL_VALUE}
+                onValueChange={(value) => setPartial({ company: value === ALL_VALUE ? null : value })}
+              >
+                <SelectTrigger className="w-full rounded-xl border-slate-300 bg-slate-50/70 focus:ring-neutral-300">
+                  <SelectValue placeholder="Empresa" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>Todas as empresas</SelectItem>
+                  {companies.map((company) => (
+                    <SelectItem key={company!} value={company!}>
+                      {company}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            <Select
+              value={filters.categoryId ?? ALL_VALUE}
+              onValueChange={(value) => setPartial({ categoryId: value === ALL_VALUE ? null : value })}
+            >
+              <SelectTrigger className="w-full rounded-xl border-slate-300 bg-slate-50/70 focus:ring-neutral-300">
+                <SelectValue placeholder="Categoria" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value={ALL_VALUE}>Todas as categorias</SelectItem>
+                {categories.map((category) => (
+                  <SelectItem key={category.id} value={category.id}>
+                    {category.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {canUseAdvancedFilters && (
+              <Select
+                value={filters.assigneeId ?? ALL_VALUE}
+                onValueChange={(value) => setPartial({ assigneeId: value === ALL_VALUE ? null : value })}
+              >
+                <SelectTrigger className="w-full rounded-xl border-slate-300 bg-slate-50/70 focus:ring-neutral-300">
+                  <SelectValue placeholder="Responsável" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={ALL_VALUE}>Todos os responsáveis</SelectItem>
+                  {assignees.map((user) => (
+                    <SelectItem key={user.id} value={user.id}>
+                      {user.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+          <div className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-3">
+            <Select
+              value={filters.view}
+              onValueChange={(value) => setPartial({ view: value as TicketFiltersState["view"] })}
+            >
+              <SelectTrigger className="w-full rounded-xl border-slate-300 bg-slate-50/70 focus:ring-neutral-300">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="active">Em andamento</SelectItem>
+                <SelectItem value="completed">Concluídos</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select
+              value={filters.sort}
+              onValueChange={(value) => setPartial({ sort: value as TicketFiltersState["sort"] })}
+            >
+              <SelectTrigger className="w-full rounded-xl border-slate-300 bg-slate-50/70 focus:ring-neutral-300">
+                <SelectValue placeholder="Ordenar" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="recent">Mais recentes</SelectItem>
+                <SelectItem value="oldest">Mais antigos</SelectItem>
+              </SelectContent>
+            </Select>
+            <DateRangeButton
+              from={filters.dateFrom}
+              to={filters.dateTo}
+              onChange={({ from, to }) => setPartial({ dateFrom: from, dateTo: to })}
+              className="w-full"
             />
           </div>
         </div>
-      </div>
+      </section>
       {activeFilters.length > 0 && (
         <div className="flex flex-wrap gap-2">
           {activeFilters.map((chip) => (
-            <Badge key={chip} className="rounded-full border border-slate-300 bg-slate-100 px-3 py-1 text-xs font-medium text-neutral-700">
+            <Badge
+              key={chip}
+              className="rounded-full border border-slate-300 bg-slate-100 px-3 py-1 text-xs font-medium text-neutral-700"
+            >
               {chip}
             </Badge>
           ))}

src/components/ui/calendar.tsx

@@ -103,18 +103,32 @@ function CalendarDropdown(props: CalendarDropdownProps) {
 export function Calendar({
   className,
   classNames,
+  styles,
+  modifiersClassNames,
   showOutsideDays = true,
   captionLayout = "dropdown",
   startMonth,
   endMonth,
   ...props
 }: CalendarProps) {
+  const mergedStyles = React.useMemo(
+    () => ({
+      day_selected: { backgroundColor: "transparent" },
+      day_range_start: { backgroundColor: "transparent" },
+      day_range_end: { backgroundColor: "transparent" },
+      day_range_middle: { backgroundColor: "transparent" },
+      ...(styles ?? {}),
+    }),
+    [styles]
+  )
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
       captionLayout={captionLayout}
       startMonth={startMonth}
       endMonth={endMonth}
+      styles={mergedStyles}
       className={cn(
         "mx-auto flex w-[320px] flex-col gap-3 rounded-2xl bg-transparent p-4 text-neutral-900 shadow-none",
         className
@@ -136,26 +150,28 @@ export function Calendar({
         ),
         chevron: "size-4",
         month_grid: "col-span-3 w-full border-collapse",
-        weekdays:
-          "grid grid-cols-7 text-[0.7rem] font-medium capitalize text-muted-foreground",
+        weekdays: "grid grid-cols-7 text-[0.7rem] font-medium capitalize text-muted-foreground",
         weekday: "flex h-8 items-center justify-center",
         week: "grid grid-cols-7 gap-1",
         day: "relative flex h-9 items-center justify-center text-sm focus-within:relative focus-within:z-20",
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "size-9 rounded-full font-medium text-neutral-700 transition hover:bg-slate-100 hover:text-neutral-900 data-[selected]:rounded-full data-[selected]:bg-neutral-900 data-[selected]:text-neutral-50 data-[selected]:ring-0 data-[range-start]:rounded-s-full data-[range-end]:rounded-e-full"
+          "size-9 rounded-full font-medium text-neutral-700 transition hover:bg-slate-100 hover:text-neutral-900 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 aria-selected:bg-neutral-900 aria-selected:text-neutral-50"
         ),
         // Hoje: estilos principais irão no botão via modifiersClassNames
         today: "text-neutral-900",
         outside: "text-muted-foreground opacity-40",
         disabled: "text-muted-foreground opacity-30 line-through",
-        range_middle: "bg-neutral-900/10 text-neutral-900",
         hidden: "invisible",
         ...classNames,
       }}
       modifiersClassNames={{
+        range_middle: "bg-transparent text-neutral-900 [&_button]:rounded-full [&_button]:bg-neutral-900/10 [&_button]:text-neutral-900",
+        range_start: "bg-transparent [&_button]:rounded-full [&_button]:bg-neutral-900 [&_button]:text-neutral-50 [&_button]:focus-visible:ring-0",
+        range_end: "bg-transparent [&_button]:rounded-full [&_button]:bg-neutral-900 [&_button]:text-neutral-50 [&_button]:focus-visible:ring-0",
         today:
           "[&_button]:bg-[#00e8ff]/20 [&_button]:text-neutral-900 [&_button]:ring-1 [&_button]:ring-[#00d6eb] [&_button]:ring-offset-1 [&_button]:ring-offset-white",
+        ...modifiersClassNames,
       }}
       // Setas ao lado do caption
       navLayout="around"