Adjust ticket filters visibility and add date range
This commit is contained in:
Esdras Renan
parent
5f7ef3fd03
commit
cc68c85246
3 changed files with 110 additions and 91 deletions
|
|
@ -21,6 +21,7 @@ function getParamValue(value: string | string[] | undefined): string | undefined
|
|||
|
||||
function deriveInitialFilters(params: Record<string, string | string[] | undefined>): Partial<TicketFiltersState> {
|
||||
const initial: Partial<TicketFiltersState> = {}
|
||||
const isValidDateParam = (value?: string) => Boolean(value && /^\d{4}-\d{2}-\d{2}$/.test(value))
|
||||
const view = getParamValue(params.view)
|
||||
if (view === "completed" || view === "active") {
|
||||
initial.view = view
|
||||
|
|
@ -41,10 +42,10 @@ function deriveInitialFilters(params: Record<string, string | string[] | undefin
|
|||
if (assigneeId) initial.assigneeId = assigneeId
|
||||
const categoryId = getParamValue(params.category)
|
||||
if (categoryId) initial.categoryId = categoryId
|
||||
const dateFrom = getParamValue(params.from)
|
||||
if (dateFrom) initial.dateFrom = dateFrom
|
||||
const dateTo = getParamValue(params.to)
|
||||
if (dateTo) initial.dateTo = dateTo
|
||||
const from = getParamValue(params.from ?? params.dateFrom)
|
||||
if (isValidDateParam(from)) initial.dateFrom = from
|
||||
const to = getParamValue(params.to ?? params.dateTo)
|
||||
if (isValidDateParam(to)) initial.dateTo = to
|
||||
const sort = getParamValue(params.sort)
|
||||
if (sort === "recent" || sort === "oldest") {
|
||||
initial.sort = sort as TicketFiltersState["sort"]
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ 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 {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
|
|
@ -28,6 +29,21 @@ import {
|
|||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select"
|
||||
import { DatePicker } from "@/components/ui/date-picker"
|
||||
|
||||
type QueueOption = string
|
||||
|
||||
interface TicketsFiltersProps {
|
||||
onChange?: (filters: TicketFiltersState) => void
|
||||
queues?: QueueOption[]
|
||||
companies?: string[]
|
||||
assignees?: Array<{ id: string; name: string }>
|
||||
categories?: Array<{ id: string; name: string }>
|
||||
initialState?: Partial<TicketFiltersState>
|
||||
viewerRole?: string | null
|
||||
}
|
||||
|
||||
const ALL_VALUE = "ALL"
|
||||
|
||||
const statusOptions: Array<{ value: TicketStatus; label: string }> = [
|
||||
{ value: "PENDING", label: "Pendente" },
|
||||
|
|
@ -63,19 +79,6 @@ const channelOptions = ticketChannelSchema.options.map((channel) => ({
|
|||
}[channel],
|
||||
}))
|
||||
|
||||
type QueueOption = string
|
||||
|
||||
interface TicketsFiltersProps {
|
||||
onChange?: (filters: TicketFiltersState) => void
|
||||
queues?: QueueOption[]
|
||||
companies?: string[]
|
||||
assignees?: Array<{ id: string; name: string }>
|
||||
categories?: Array<{ id: string; name: string }>
|
||||
initialState?: Partial<TicketFiltersState>
|
||||
}
|
||||
|
||||
const ALL_VALUE = "ALL"
|
||||
|
||||
export function TicketsFilters({
|
||||
onChange,
|
||||
queues = [],
|
||||
|
|
@ -83,6 +86,7 @@ export function TicketsFilters({
|
|||
assignees = [],
|
||||
categories = [],
|
||||
initialState,
|
||||
viewerRole,
|
||||
}: TicketsFiltersProps) {
|
||||
const mergedDefaults = useMemo(
|
||||
() => ({
|
||||
|
|
@ -101,19 +105,21 @@ export function TicketsFilters({
|
|||
setFilters((prev) => ({ ...prev, ...partial }))
|
||||
}
|
||||
|
||||
// Propaga as mudancas de filtros para o componente pai sem disparar durante a renderizacao
|
||||
useEffect(() => {
|
||||
onChange?.(filters)
|
||||
}, [filters, onChange])
|
||||
|
||||
const normalizedRole = viewerRole?.toLowerCase() ?? null
|
||||
const canUseAdvancedFilters = normalizedRole === "admin" || normalizedRole === "agent"
|
||||
|
||||
const activeFilters = useMemo(() => {
|
||||
const chips: string[] = []
|
||||
if (filters.status) chips.push(`Status: ${statusLabelMap[filters.status] ?? filters.status}`)
|
||||
if (filters.priority) chips.push(`Prioridade: ${filters.priority}`)
|
||||
if (filters.queue) chips.push(`Fila: ${filters.queue}`)
|
||||
if (filters.queue && canUseAdvancedFilters) chips.push(`Fila: ${filters.queue}`)
|
||||
if (filters.channel) chips.push(`Canal: ${filters.channel}`)
|
||||
if (filters.company) chips.push(`Empresa: ${filters.company}`)
|
||||
if (filters.assigneeId) {
|
||||
if (filters.company && canUseAdvancedFilters) chips.push(`Empresa: ${filters.company}`)
|
||||
if (filters.assigneeId && canUseAdvancedFilters) {
|
||||
const found = assignees.find((a) => a.id === filters.assigneeId)
|
||||
chips.push(`Responsável: ${found?.name ?? filters.assigneeId}`)
|
||||
}
|
||||
|
|
@ -126,50 +132,54 @@ export function TicketsFilters({
|
|||
if (filters.dateFrom || filters.dateTo) chips.push(formatDateRangeChip(filters.dateFrom, filters.dateTo))
|
||||
if (filters.sort === "oldest") chips.push("Ordenados por mais antigos")
|
||||
return chips
|
||||
}, [filters, assignees, categories])
|
||||
}, [filters, assignees, categories, canUseAdvancedFilters])
|
||||
|
||||
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">
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
<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>
|
||||
{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 })}
|
||||
|
|
@ -187,23 +197,25 @@ export function TicketsFilters({
|
|||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<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>
|
||||
<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"] })}
|
||||
|
|
@ -305,23 +317,6 @@ export function TicketsFilters({
|
|||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold uppercase text-neutral-500">
|
||||
Período
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
type="date"
|
||||
value={filters.dateFrom ?? ""}
|
||||
onChange={(event) => setPartial({ dateFrom: event.target.value || null })}
|
||||
/>
|
||||
<Input
|
||||
type="date"
|
||||
value={filters.dateTo ?? ""}
|
||||
onChange={(event) => setPartial({ dateTo: event.target.value || null })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Button
|
||||
|
|
@ -335,6 +330,29 @@ export function TicketsFilters({
|
|||
</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 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>
|
||||
</div>
|
||||
</div>
|
||||
{activeFilters.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{activeFilters.map((chip) => (
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export function TicketsView({ initialFilters }: TicketsViewProps = {}) {
|
|||
setFilters(mergedInitialFilters)
|
||||
}, [mergedInitialFilters])
|
||||
|
||||
const { session, convexUserId, isStaff } = useAuth()
|
||||
const { session, convexUserId, isStaff, role } = useAuth()
|
||||
const userId = session?.user?.id ?? null
|
||||
const tenantId = session?.user?.tenantId ?? DEFAULT_TENANT_ID
|
||||
const viewModeStorageKey = useMemo(() => {
|
||||
|
|
@ -111,7 +111,6 @@ export function TicketsView({ initialFilters }: TicketsViewProps = {}) {
|
|||
}
|
||||
}, [])
|
||||
|
||||
// load saved filters as defaults per user
|
||||
useEffect(() => {
|
||||
if (!convexUserId) return
|
||||
try {
|
||||
|
|
@ -230,6 +229,7 @@ export function TicketsView({ initialFilters }: TicketsViewProps = {}) {
|
|||
assignees={(agents ?? []).map((a) => ({ id: a._id, name: a.name }))}
|
||||
categories={ticketCategories.map((category) => ({ id: category.id, name: category.name }))}
|
||||
initialState={mergedInitialFilters}
|
||||
viewerRole={role}
|
||||
/>
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<ToggleGroup
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue