diff --git a/src/components/tickets/tickets-filters.tsx b/src/components/tickets/tickets-filters.tsx index 616749f..32a6efd 100644 --- a/src/components/tickets/tickets-filters.tsx +++ b/src/components/tickets/tickets-filters.tsx @@ -1,14 +1,20 @@ "use client" import { useEffect, useMemo, useState } from "react" -import { IconCalendar, IconFilter, IconRefresh, IconSearch } from "@tabler/icons-react" +import { + IconCalendar, + IconFilter, + IconRefresh, + IconSearch, + IconList, + IconBuilding, + IconTags, + IconUser, +} from "@tabler/icons-react" import type { DateRange } from "react-day-picker" -import { - ticketChannelSchema, - ticketPrioritySchema, - type TicketStatus, -} from "@/lib/schemas/ticket" +import { ticketPrioritySchema, type TicketStatus } from "@/lib/schemas/ticket" +import { PriorityIcon } from "@/components/tickets/priority-select" import type { TicketFiltersState } from "@/lib/ticket-filters" import { defaultTicketFilters } from "@/lib/ticket-filters" @@ -19,11 +25,7 @@ import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Calendar } from "@/components/ui/calendar" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover" +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Select, SelectContent, @@ -32,6 +34,7 @@ import { SelectValue, } from "@/components/ui/select" import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" +import { SearchableCombobox, type SearchableComboboxOption } from "@/components/ui/searchable-combobox" type QueueOption = string @@ -69,18 +72,6 @@ const priorityOptions = ticketPrioritySchema.options.map((priority) => ({ }[priority], })) -const channelOptions = ticketChannelSchema.options.map((channel) => ({ - value: channel, - label: { - EMAIL: "E-mail", - WHATSAPP: "WhatsApp", - CHAT: "Chat", - PHONE: "Telefone", - API: "API", - MANUAL: "Manual", - }[channel], -})) - function strToDate(value?: string | null): Date | undefined { if (!value) return undefined const [y, m, d] = value.split("-").map(Number) @@ -201,6 +192,13 @@ export function TicketsFilters({ const normalizedRole = viewerRole?.toLowerCase() ?? null const canUseAdvancedFilters = normalizedRole === "admin" || normalizedRole === "agent" + const companyOptionsMemo = useMemo(() => { + return Array.from(new Set(companies.filter((company): company is string => Boolean(company)))).map((company) => ({ + value: company, + label: company, + })) + }, [companies]) + const activeFilters = useMemo(() => { const chips: string[] = [] if (filters.status) chips.push(`Status: ${statusLabelMap[filters.status] ?? filters.status}`) @@ -223,7 +221,7 @@ export function TicketsFilters({ return chips }, [filters, assignees, categories, canUseAdvancedFilters]) - const advancedFiltersCount = Number(Boolean(filters.status)) + Number(Boolean(filters.priority)) + Number(Boolean(filters.channel)) + const advancedFiltersCount = Number(Boolean(filters.status)) + Number(Boolean(filters.priority)) return (
@@ -251,8 +249,8 @@ export function TicketsFilters({
-
-

Canal

- setPartial({ queue: value === ALL_VALUE ? null : value })} > - + @@ -357,31 +340,26 @@ export function TicketsFilters({
)} {canUseAdvancedFilters && ( -
- +
+ + setPartial({ company: value })} + options={companyOptionsMemo} + 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" + />
)} -
+
+
{canUseAdvancedFilters && ( -
+
+