From a08545fd40d43979c55eaefbb3277840516e1833 Mon Sep 17 00:00:00 2001
From: Esdras Renan <monkeyesdras@gmail.com>
Date: Thu, 13 Nov 2025 19:50:06 -0300
Subject: [PATCH] Refine tickets filter layout

---
 src/components/tickets/tickets-filters.tsx | 245 ++++++++++++---------
 1 file changed, 138 insertions(+), 107 deletions(-)

diff --git a/src/components/tickets/tickets-filters.tsx b/src/components/tickets/tickets-filters.tsx
index 37da284..616749f 100644
--- a/src/components/tickets/tickets-filters.tsx
+++ b/src/components/tickets/tickets-filters.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useMemo, useState } from "react"
-import { IconCalendar, IconFilter, IconRefresh } from "@tabler/icons-react"
+import { IconCalendar, IconFilter, IconRefresh, IconSearch } from "@tabler/icons-react"
 import type { DateRange } from "react-day-picker"
 
 import {
@@ -31,6 +31,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 
 type QueueOption = string
 
@@ -146,10 +147,10 @@ function DateRangeButton({ from, to, onChange, className }: DateRangeButtonProps
       <PopoverTrigger asChild>
         <Button
           variant="outline"
-          className={`w-full justify-start rounded-xl border-slate-300 bg-white/90 ${className ?? ""}`}
+          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="mr-2 size-4" />
-          <span className="line-clamp-1">{label}</span>
+          <IconCalendar className="size-4 text-neutral-500" />
+          <span className="truncate">{label}</span>
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-auto overflow-hidden p-0" align="end">
@@ -222,32 +223,47 @@ export function TicketsFilters({
     return chips
   }, [filters, assignees, categories, canUseAdvancedFilters])
 
+  const advancedFiltersCount = Number(Boolean(filters.status)) + Number(Boolean(filters.priority)) + Number(Boolean(filters.channel))
+
   return (
     <div className="flex flex-col gap-4">
-      <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"
-              />
+      <section className="rounded-3xl border border-slate-200 bg-white/90 p-4 shadow-sm">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:gap-4">
+            <div className="flex flex-1 flex-col gap-2">
+              <div className="relative">
+                <IconSearch className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-neutral-400" />
+                <Input
+                  placeholder="Buscar por assunto ou #ID"
+                  value={filters.search}
+                  onChange={(event) => setPartial({ search: event.target.value })}
+                  className="w-full rounded-2xl border-slate-300 bg-white/95 pl-9"
+                />
+              </div>
             </div>
-            <div className="col-span-full flex items-center justify-end gap-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <DateRangeButton
+                from={filters.dateFrom}
+                to={filters.dateTo}
+                onChange={({ from, to }) => setPartial({ dateFrom: from, dateTo: to })}
+                className="w-full min-w-[200px] rounded-2xl border-slate-300 bg-white/95 text-left text-sm font-semibold text-neutral-700 lg:w-auto"
+              />
               <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"
+                    className="h-10 gap-2 rounded-full border-dashed border-slate-300 bg-white/80 px-4 text-sm font-medium text-neutral-700 shadow-none hover:bg-slate-50"
                   >
                     <IconFilter className="size-4" />
+                    <span>Filtros rápidos</span>
+                    {advancedFiltersCount > 0 ? (
+                      <Badge className="rounded-full bg-neutral-900 px-2 py-0 text-[0.65rem] font-semibold text-white">
+                        {advancedFiltersCount}
+                      </Badge>
+                    ) : null}
                   </Button>
                 </PopoverTrigger>
-                <PopoverContent className="w-64 space-y-4" align="end">
+                <PopoverContent className="w-72 space-y-4" align="end">
                   <div className="space-y-2">
                     <p className="text-xs font-semibold uppercase text-neutral-500">Status</p>
                     <Select
@@ -311,118 +327,133 @@ export function TicketsFilters({
               </Popover>
               <Button
                 variant="ghost"
-                size="icon"
-                className="size-9 rounded-full text-neutral-700 hover:bg-slate-100"
+                className="h-10 gap-2 rounded-full text-sm font-medium text-neutral-700 hover:bg-slate-100"
                 onClick={() => setPartial(defaultTicketFilters)}
-                aria-label="Resetar filtros"
               >
                 <IconRefresh className="size-4" />
+                Limpar
               </Button>
             </div>
           </div>
-          <div className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-3">
+          <div className="flex flex-wrap 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>
+              <div className="min-w-[220px] flex-1">
+                <Select
+                  value={filters.queue ?? ALL_VALUE}
+                  onValueChange={(value) => setPartial({ queue: value === ALL_VALUE ? null : value })}
+                >
+                  <SelectTrigger className="w-full rounded-2xl border-slate-300 bg-slate-50/80 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>
+              </div>
             )}
             {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>
+              <div className="min-w-[220px] flex-1">
+                <Select
+                  value={filters.company ?? ALL_VALUE}
+                  onValueChange={(value) => setPartial({ company: value === ALL_VALUE ? null : value })}
+                >
+                  <SelectTrigger className="w-full rounded-2xl border-slate-300 bg-slate-50/80 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>
+              </div>
             )}
-            <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 && (
+            <div className="min-w-[220px] flex-1">
               <Select
-                value={filters.assigneeId ?? ALL_VALUE}
-                onValueChange={(value) => setPartial({ assigneeId: value === ALL_VALUE ? null : value })}
+                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="Responsável" />
+                <SelectTrigger className="w-full rounded-2xl border-slate-300 bg-slate-50/80 focus:ring-neutral-300">
+                  <SelectValue placeholder="Categoria" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value={ALL_VALUE}>Todos os responsáveis</SelectItem>
-                  {assignees.map((user) => (
-                    <SelectItem key={user.id} value={user.id}>
-                      {user.name}
+                  <SelectItem value={ALL_VALUE}>Todas as categorias</SelectItem>
+                  {categories.map((category) => (
+                    <SelectItem key={category.id} value={category.id}>
+                      {category.name}
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
+            </div>
+            {canUseAdvancedFilters && (
+              <div className="min-w-[220px] flex-1">
+                <Select
+                  value={filters.assigneeId ?? ALL_VALUE}
+                  onValueChange={(value) => setPartial({ assigneeId: value === ALL_VALUE ? null : value })}
+                >
+                  <SelectTrigger className="w-full rounded-2xl border-slate-300 bg-slate-50/80 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>
-          <div className="grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] gap-3">
-            <Select
+          <div className="flex flex-wrap gap-3">
+            <ToggleGroup
+              type="single"
               value={filters.view}
-              onValueChange={(value) => setPartial({ view: value as TicketFiltersState["view"] })}
+              onValueChange={(value) => value && setPartial({ view: value as TicketFiltersState["view"] })}
+              className="flex h-10 min-w-[220px] flex-1 items-center rounded-full border border-slate-200 bg-slate-50/70 p-1"
             >
-              <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
+              <ToggleGroupItem
+                value="active"
+                className="inline-flex h-full flex-1 items-center justify-center rounded-full px-4 text-sm font-semibold text-neutral-600 transition data-[state=on]:bg-neutral-900 data-[state=on]:text-white"
+              >
+                Em andamento
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="completed"
+                className="inline-flex h-full flex-1 items-center justify-center rounded-full px-4 text-sm font-semibold text-neutral-600 transition data-[state=on]:bg-neutral-900 data-[state=on]:text-white"
+              >
+                Concluídos
+              </ToggleGroupItem>
+            </ToggleGroup>
+            <ToggleGroup
+              type="single"
               value={filters.sort}
-              onValueChange={(value) => setPartial({ sort: value as TicketFiltersState["sort"] })}
+              onValueChange={(value) => value && setPartial({ sort: value as TicketFiltersState["sort"] })}
+              className="flex h-10 min-w-[220px] flex-1 items-center rounded-full border border-slate-200 bg-slate-50/70 p-1"
             >
-              <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"
-            />
+              <ToggleGroupItem
+                value="recent"
+                className="inline-flex h-full flex-1 items-center justify-center rounded-full px-4 text-sm font-semibold text-neutral-600 transition data-[state=on]:bg-neutral-900 data-[state=on]:text-white"
+              >
+                Mais recentes
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="oldest"
+                className="inline-flex h-full flex-1 items-center justify-center rounded-full px-4 text-sm font-semibold text-neutral-600 transition data-[state=on]:bg-neutral-900 data-[state=on]:text-white"
+              >
+                Mais antigos
+              </ToggleGroupItem>
+            </ToggleGroup>
           </div>
         </div>
       </section>