f5a54f2814
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
53 lines
2.1 KiB
TypeScript
53 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
import { useQuery } from "convex/react"
|
|
// @ts-expect-error Convex runtime API lacks TypeScript definitions
|
|
import { api } from "@/convex/_generated/api"
|
|
import { DEFAULT_TENANT_ID } from "@/lib/constants"
|
|
import { mapTicketsFromServerList } from "@/lib/mappers/ticket"
|
|
import type { Ticket, TicketQueueSummary } from "@/lib/schemas/ticket"
|
|
import { TicketsFilters, TicketFiltersState, defaultTicketFilters } from "@/components/tickets/tickets-filters"
|
|
import { TicketsTable } from "@/components/tickets/tickets-table"
|
|
|
|
export function TicketsView() {
|
|
const [filters, setFilters] = useState<TicketFiltersState>(defaultTicketFilters)
|
|
|
|
const queues = useQuery(api.queues.summary, { tenantId: DEFAULT_TENANT_ID }) as TicketQueueSummary[] | undefined
|
|
const ticketsRaw = useQuery(api.tickets.list, {
|
|
tenantId: DEFAULT_TENANT_ID,
|
|
status: filters.status ?? undefined,
|
|
priority: filters.priority ?? undefined,
|
|
channel: filters.channel ?? undefined,
|
|
queueId: undefined, // simplified: filter by queue name on client
|
|
search: filters.search || undefined,
|
|
})
|
|
|
|
const tickets = useMemo(() => mapTicketsFromServerList((ticketsRaw ?? []) as unknown[]), [ticketsRaw])
|
|
|
|
const filteredTickets = useMemo(() => {
|
|
if (!filters.queue) return tickets
|
|
return tickets.filter((t: Ticket) => t.queue === filters.queue)
|
|
}, [tickets, filters.queue])
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 px-4 lg:px-6">
|
|
<TicketsFilters onChange={setFilters} queues={(queues ?? []).map((q) => q.name)} />
|
|
{ticketsRaw === undefined ? (
|
|
<div className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
|
<div className="grid gap-3">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div key={i} className="flex items-center justify-between gap-3">
|
|
<div className="h-4 w-48 animate-pulse rounded bg-slate-100" />
|
|
<div className="h-4 w-24 animate-pulse rounded bg-slate-100" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<TicketsTable tickets={filteredTickets} />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|