Refina filtros de tickets e seletor de período
This commit is contained in:
Esdras Renan
parent
b00e52475f
commit
a419965aca
2 changed files with 310 additions and 218 deletions
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue