esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Polish filters combobox alignment

Browse source
This commit is contained in:
Esdras Renan 2025-11-13 21:08:34 -03:00
parent feca5dd4a7
commit 59a94744b3
2 changed files with 45 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/tickets/tickets-filters.tsx
View file

@ -319,14 +319,14 @@ export function TicketsFilters({
</div>
<div className="flex flex-wrap gap-3">
{canUseAdvancedFilters && (
<div className="relative min-w-[220px] flex-1">
<IconList className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-neutral-400" />
<div className={fieldWrap}>
<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 pl-9 focus:ring-neutral-300">
<SelectValue placeholder="Fila" />
<SelectTrigger className={fieldTrigger}>
<IconList className="size-4 text-neutral-400" />
<SelectValue placeholder="Fila" className="flex-1 text-left" />
</SelectTrigger>
<SelectContent>
<SelectItem value={ALL_VALUE}>Todas as filas</SelectItem>
@ -340,8 +340,7 @@ export function TicketsFilters({
</div>
)}
{canUseAdvancedFilters && (
<div className="relative min-w-[220px] flex-1">
<IconBuilding className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-neutral-400" />
<div className={fieldWrap}>
<SearchableCombobox
value={filters.company}
onValueChange={(value) => setPartial({ company: value })}
@ -349,18 +348,19 @@ export function TicketsFilters({
placeholder="Empresa"
allowClear
clearLabel="Todas as empresas"
className="min-h-[40px] w-full rounded-2xl border border-slate-300 bg-slate-50/80 pl-9 text-left text-sm font-semibold text-neutral-700"
triggerClassName={fieldTrigger}
prefix={<IconBuilding className="size-4 text-neutral-400" />}
/>
</div>
)}
<div className="relative min-w-[220px] flex-1">
<IconTags className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-neutral-400" />
<div className={fieldWrap}>
<Select
value={filters.categoryId ?? ALL_VALUE}
onValueChange={(value) => setPartial({ categoryId: value === ALL_VALUE ? null : value })}
>
<SelectTrigger className="w-full rounded-2xl border-slate-300 bg-slate-50/80 pl-9 focus:ring-neutral-300">
<SelectValue placeholder="Categoria" />
<SelectTrigger className={fieldTrigger}>
<IconTags className="size-4 text-neutral-400" />
<SelectValue placeholder="Categoria" className="flex-1 text-left" />
</SelectTrigger>
<SelectContent>
<SelectItem value={ALL_VALUE}>Todas as categorias</SelectItem>
@ -373,14 +373,14 @@ export function TicketsFilters({
</Select>
</div>
{canUseAdvancedFilters && (
<div className="relative min-w-[220px] flex-1">
<IconUser className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-neutral-400" />
<div className={fieldWrap}>
<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 pl-9 focus:ring-neutral-300">
<SelectValue placeholder="Responsável" />
<SelectTrigger className={fieldTrigger}>
<IconUser className="size-4 text-neutral-400" />
<SelectValue placeholder="Responsável" className="flex-1 text-left" />
</SelectTrigger>
<SelectContent>
<SelectItem value={ALL_VALUE}>Todos os responsáveis</SelectItem>
@ -472,3 +472,6 @@ function formatDateValue(value: string | null) {
"flex h-10 min-w-[220px] flex-1 items-stretch rounded-full border border-slate-200 bg-slate-50/70 p-1 gap-1"
const segmentedItem =
"inline-flex h-full flex-1 items-center justify-center rounded-full first:rounded-full last:rounded-full px-4 text-sm font-semibold text-neutral-600 transition-colors hover:bg-slate-100 data-[state=on]:bg-neutral-900 data-[state=on]:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300"
const fieldWrap = "min-w-[220px] flex-1"
const fieldTrigger =
"h-10 w-full rounded-2xl border border-slate-300 bg-slate-50/80 px-3 text-left text-sm font-semibold text-neutral-700 focus:ring-neutral-300 flex items-center gap-2"