449 lines
18 KiB
TypeScript
449 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useMemo, useState } from "react"
|
|
import Link from "next/link"
|
|
import { usePaginatedQuery, useQuery } from "convex/react"
|
|
import { format, formatDistanceToNowStrict } from "date-fns"
|
|
import { ptBR } from "date-fns/locale"
|
|
import { IconUserOff } from "@tabler/icons-react"
|
|
|
|
import type { Id } from "@/convex/_generated/dataModel"
|
|
import { api } from "@/convex/_generated/api"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { DatePicker } from "@/components/ui/date-picker"
|
|
import { cn } from "@/lib/utils"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import { Spinner } from "@/components/ui/spinner"
|
|
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty"
|
|
import { TicketStatusBadge } from "@/components/tickets/status-badge"
|
|
import type { TicketPriority, TicketStatus } from "@/lib/schemas/ticket"
|
|
import { EmptyIndicator } from "@/components/ui/empty-indicator"
|
|
|
|
type DeviceTicketHistoryItem = {
|
|
id: string
|
|
reference: number
|
|
subject: string
|
|
status: TicketStatus
|
|
priority: TicketPriority | string
|
|
updatedAt: number
|
|
createdAt: number
|
|
queue: string | null
|
|
requester: { name: string | null; email: string | null } | null
|
|
assignee: { name: string | null; email: string | null } | null
|
|
}
|
|
|
|
type DeviceTicketsHistoryArgs = {
|
|
machineId: Id<"machines">
|
|
status?: "open" | "resolved"
|
|
priority?: string
|
|
search?: string
|
|
from?: number
|
|
to?: number
|
|
}
|
|
|
|
type DeviceTicketsHistoryStats = {
|
|
total: number
|
|
openCount: number
|
|
resolvedCount: number
|
|
}
|
|
|
|
type PeriodPreset = "7d" | "30d" | "90d" | "year" | "all" | "custom"
|
|
|
|
function startOfDayMs(date: Date) {
|
|
const copy = new Date(date)
|
|
copy.setHours(0, 0, 0, 0)
|
|
return copy.getTime()
|
|
}
|
|
|
|
function endOfDayMs(date: Date) {
|
|
const copy = new Date(date)
|
|
copy.setHours(23, 59, 59, 999)
|
|
return copy.getTime()
|
|
}
|
|
|
|
function parseDateInput(value: string) {
|
|
if (!value) return null
|
|
const parsed = new Date(`${value}T00:00:00`)
|
|
if (Number.isNaN(parsed.getTime())) {
|
|
return null
|
|
}
|
|
return parsed
|
|
}
|
|
|
|
function computeRange(preset: PeriodPreset, customFrom: string, customTo: string) {
|
|
if (preset === "all") {
|
|
return { from: null, to: null }
|
|
}
|
|
if (preset === "custom") {
|
|
const fromDate = parseDateInput(customFrom)
|
|
const toDate = parseDateInput(customTo)
|
|
return {
|
|
from: fromDate ? startOfDayMs(fromDate) : null,
|
|
to: toDate ? endOfDayMs(toDate) : null,
|
|
}
|
|
}
|
|
|
|
const now = new Date()
|
|
const end = endOfDayMs(now)
|
|
const start = new Date(now)
|
|
|
|
switch (preset) {
|
|
case "7d":
|
|
start.setDate(start.getDate() - 6)
|
|
break
|
|
case "30d":
|
|
start.setDate(start.getDate() - 29)
|
|
break
|
|
case "90d":
|
|
start.setDate(start.getDate() - 89)
|
|
break
|
|
case "year":
|
|
start.setMonth(0, 1)
|
|
start.setHours(0, 0, 0, 0)
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
|
|
return { from: startOfDayMs(start), to: end }
|
|
}
|
|
|
|
function formatRelativeTime(timestamp?: number | null) {
|
|
if (!timestamp || timestamp <= 0) return "—"
|
|
return formatDistanceToNowStrict(timestamp, { addSuffix: true, locale: ptBR })
|
|
}
|
|
|
|
function formatAbsoluteTime(timestamp?: number | null) {
|
|
if (!timestamp || timestamp <= 0) return "—"
|
|
return format(timestamp, "dd/MM/yyyy HH:mm", { locale: ptBR })
|
|
}
|
|
|
|
function getPriorityMeta(priority: TicketPriority | string | null | undefined) {
|
|
const normalized = (priority ?? "MEDIUM").toString().toUpperCase()
|
|
switch (normalized) {
|
|
case "LOW":
|
|
return { label: "Baixa", badgeClass: "bg-emerald-100 text-emerald-700 border border-emerald-200" }
|
|
case "MEDIUM":
|
|
return { label: "Média", badgeClass: "bg-sky-100 text-sky-700 border border-sky-200" }
|
|
case "HIGH":
|
|
return { label: "Alta", badgeClass: "bg-amber-100 text-amber-700 border border-amber-200" }
|
|
case "URGENT":
|
|
return { label: "Urgente", badgeClass: "bg-rose-100 text-rose-700 border border-rose-200" }
|
|
default:
|
|
return { label: normalized, badgeClass: "bg-slate-100 text-slate-700 border border-slate-200" }
|
|
}
|
|
}
|
|
|
|
export function DeviceTicketsHistoryClient({ tenantId: _tenantId, deviceId }: { tenantId: string; deviceId: string }) {
|
|
const [statusFilter, setStatusFilter] = useState<"all" | "open" | "resolved">("all")
|
|
const [priorityFilter, setPriorityFilter] = useState<string>("ALL")
|
|
const [periodPreset, setPeriodPreset] = useState<PeriodPreset>("90d")
|
|
const [customFrom, setCustomFrom] = useState<string>("")
|
|
const [customTo, setCustomTo] = useState<string>("")
|
|
const [searchValue, setSearchValue] = useState<string>("")
|
|
const [debouncedSearch, setDebouncedSearch] = useState<string>("")
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setDebouncedSearch(searchValue.trim())
|
|
}, 300)
|
|
return () => clearTimeout(timer)
|
|
}, [searchValue])
|
|
|
|
useEffect(() => {
|
|
if (periodPreset !== "custom") {
|
|
setCustomFrom("")
|
|
setCustomTo("")
|
|
}
|
|
}, [periodPreset])
|
|
|
|
const range = useMemo(() => computeRange(periodPreset, customFrom, customTo), [periodPreset, customFrom, customTo])
|
|
|
|
const queryArgs = useMemo(() => {
|
|
const args: DeviceTicketsHistoryArgs = {
|
|
machineId: deviceId as Id<"machines">,
|
|
}
|
|
if (statusFilter !== "all") {
|
|
args.status = statusFilter
|
|
}
|
|
if (priorityFilter !== "ALL") {
|
|
args.priority = priorityFilter
|
|
}
|
|
if (debouncedSearch) {
|
|
args.search = debouncedSearch
|
|
}
|
|
if (range.from !== null) {
|
|
args.from = range.from
|
|
}
|
|
if (range.to !== null) {
|
|
args.to = range.to
|
|
}
|
|
return args
|
|
}, [debouncedSearch, deviceId, priorityFilter, range.from, range.to, statusFilter])
|
|
|
|
const { results: tickets, status: paginationStatus, loadMore } = usePaginatedQuery(
|
|
api.devices.listTicketsHistory,
|
|
queryArgs,
|
|
{ initialNumItems: 25 }
|
|
)
|
|
|
|
const stats = useQuery(api.devices.getTicketsHistoryStats, queryArgs) as DeviceTicketsHistoryStats | undefined
|
|
const totalTickets = stats?.total ?? 0
|
|
const openTickets = stats?.openCount ?? 0
|
|
const resolvedTickets = stats?.resolvedCount ?? 0
|
|
|
|
const isLoadingFirstPage = paginationStatus === "LoadingFirstPage"
|
|
const isLoadingMore = paginationStatus === "LoadingMore"
|
|
const canLoadMore = paginationStatus === "CanLoadMore"
|
|
|
|
const resetFilters = () => {
|
|
setStatusFilter("all")
|
|
setPriorityFilter("ALL")
|
|
setPeriodPreset("90d")
|
|
setCustomFrom("")
|
|
setCustomTo("")
|
|
setSearchValue("")
|
|
setDebouncedSearch("")
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<section className="grid gap-3 sm:grid-cols-3">
|
|
<div className="rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm">
|
|
<p className="text-xs font-medium uppercase tracking-wide text-neutral-500">Chamados no período</p>
|
|
<p className="pt-1 text-2xl font-semibold text-neutral-900">
|
|
{stats ? (
|
|
totalTickets
|
|
) : (
|
|
<span className="inline-flex items-center gap-2 text-sm text-neutral-500">
|
|
<Spinner className="size-4 text-neutral-400" /> Atualizando...
|
|
</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-4 shadow-sm">
|
|
<p className="text-xs font-medium uppercase tracking-wide text-emerald-700">Em aberto</p>
|
|
<p className="pt-1 text-2xl font-semibold text-emerald-900">{stats ? openTickets : "—"}</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 shadow-sm">
|
|
<p className="text-xs font-medium uppercase tracking-wide text-neutral-600">Resolvidos</p>
|
|
<p className="pt-1 text-2xl font-semibold text-neutral-900">{stats ? resolvedTickets : "—"}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm lg:p-6">
|
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="flex w-full flex-col gap-3 sm:flex-row">
|
|
<Input
|
|
value={searchValue}
|
|
onChange={(event) => setSearchValue(event.target.value)}
|
|
placeholder="Buscar por assunto, #ID, solicitante ou responsável"
|
|
className="sm:max-w-sm"
|
|
/>
|
|
<Select value={statusFilter} onValueChange={(value) => setStatusFilter(value as typeof statusFilter)}>
|
|
<SelectTrigger className="sm:w-[160px]">
|
|
<SelectValue placeholder="Status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todos os status</SelectItem>
|
|
<SelectItem value="open">Em aberto</SelectItem>
|
|
<SelectItem value="resolved">Resolvidos</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Select value={priorityFilter} onValueChange={(value) => setPriorityFilter(value)}>
|
|
<SelectTrigger className="sm:w-[160px]">
|
|
<SelectValue placeholder="Prioridade" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="ALL">Todas as prioridades</SelectItem>
|
|
<SelectItem value="URGENT">Urgente</SelectItem>
|
|
<SelectItem value="HIGH">Alta</SelectItem>
|
|
<SelectItem value="MEDIUM">Média</SelectItem>
|
|
<SelectItem value="LOW">Baixa</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
|
<Select value={periodPreset} onValueChange={(value) => setPeriodPreset(value as PeriodPreset)}>
|
|
<SelectTrigger className="sm:w-[200px]">
|
|
<SelectValue placeholder="Período" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="7d">Últimos 7 dias</SelectItem>
|
|
<SelectItem value="30d">Últimos 30 dias</SelectItem>
|
|
<SelectItem value="90d">Últimos 90 dias</SelectItem>
|
|
<SelectItem value="year">Este ano</SelectItem>
|
|
<SelectItem value="all">Desde sempre</SelectItem>
|
|
<SelectItem value="custom">Personalizado</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
{periodPreset === "custom" ? (
|
|
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
|
|
<DatePicker
|
|
value={customFrom}
|
|
onChange={(value) => setCustomFrom(value ?? "")}
|
|
className="sm:w-[160px]"
|
|
placeholder="Início"
|
|
/>
|
|
<DatePicker
|
|
value={customTo}
|
|
onChange={(value) => setCustomTo(value ?? "")}
|
|
className="sm:w-[160px]"
|
|
placeholder="Fim"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<Button variant="outline" size="sm" onClick={resetFilters}>
|
|
Limpar filtros
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-slate-200 bg-white p-0 shadow-sm">
|
|
{isLoadingFirstPage ? (
|
|
<div className="flex items-center justify-center gap-2 py-12">
|
|
<Spinner className="size-5 text-neutral-500" />
|
|
<span className="text-sm text-neutral-600">Carregando chamados...</span>
|
|
</div>
|
|
) : tickets.length === 0 ? (
|
|
<Empty className="m-4 border-dashed">
|
|
<EmptyHeader>
|
|
<EmptyTitle>Nenhum chamado encontrado</EmptyTitle>
|
|
<EmptyDescription>
|
|
Ajuste os filtros ou expanda o período para visualizar o histórico de chamados desta dispositivo.
|
|
</EmptyDescription>
|
|
</EmptyHeader>
|
|
<EmptyContent>
|
|
<Button variant="outline" size="sm" onClick={resetFilters}>
|
|
Limpar filtros
|
|
</Button>
|
|
</EmptyContent>
|
|
</Empty>
|
|
) : (
|
|
<>
|
|
<div className="overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="border-b border-slate-200 bg-slate-50/60">
|
|
<TableHead className="min-w-[260px] text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
|
Ticket
|
|
</TableHead>
|
|
<TableHead className="w-[140px] text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
|
Status
|
|
</TableHead>
|
|
<TableHead className="w-[140px] text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
|
Prioridade
|
|
</TableHead>
|
|
<TableHead className="w-[160px] text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
|
Última atualização
|
|
</TableHead>
|
|
<TableHead className="w-[200px] text-xs font-semibold uppercase tracking-wide text-neutral-500">
|
|
Responsável
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{tickets.map((ticket) => {
|
|
const priorityMeta = getPriorityMeta(ticket.priority)
|
|
const requesterLabel = ticket.requester?.name ?? ticket.requester?.email ?? "Solicitante não informado"
|
|
const updatedLabel = formatRelativeTime(ticket.updatedAt)
|
|
const updatedAbsolute = formatAbsoluteTime(ticket.updatedAt)
|
|
return (
|
|
<TableRow key={ticket.id} className="border-b border-slate-100 hover:bg-slate-50/70">
|
|
<TableCell className="align-top">
|
|
<div className="flex flex-col gap-1">
|
|
<Link
|
|
href={`/tickets/${ticket.id}`}
|
|
className="text-sm font-semibold text-neutral-900 underline-offset-4 hover:underline"
|
|
>
|
|
#{ticket.reference} · {ticket.subject}
|
|
</Link>
|
|
<div className="flex flex-wrap items-center gap-2 text-xs text-neutral-500">
|
|
<span>{requesterLabel}</span>
|
|
{ticket.queue ? (
|
|
<span className="inline-flex items-center rounded-full bg-slate-200/70 px-2 py-0.5 text-[11px] font-medium text-neutral-600">
|
|
{ticket.queue}
|
|
</span>
|
|
) : null}
|
|
<span className="text-neutral-400">Aberto em {formatAbsoluteTime(ticket.createdAt)}</span>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="align-top">
|
|
<TicketStatusBadge status={ticket.status} className="h-7 px-3 text-xs font-semibold" />
|
|
</TableCell>
|
|
<TableCell className="align-top">
|
|
<Badge className={cn("rounded-full px-3 py-1 text-xs font-semibold", priorityMeta.badgeClass)}>
|
|
{priorityMeta.label}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="align-top">
|
|
<div className="flex flex-col text-xs text-neutral-600">
|
|
<span className="font-medium text-neutral-800">{updatedLabel}</span>
|
|
<span className="text-[11px] text-neutral-400">{updatedAbsolute}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="align-top">
|
|
<div className="flex flex-col items-start text-sm text-neutral-700">
|
|
{ticket.assignee ? (
|
|
<>
|
|
<span>{ticket.assignee.name ?? ticket.assignee.email ?? "—"}</span>
|
|
{ticket.assignee.email ? (
|
|
<span className="text-xs text-neutral-400">{ticket.assignee.email}</span>
|
|
) : null}
|
|
</>
|
|
) : (
|
|
<EmptyIndicator
|
|
icon={IconUserOff}
|
|
label="Sem responsável"
|
|
className="h-7 w-7 border-neutral-200 bg-transparent text-neutral-400"
|
|
/>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
<div className="border-t border-slate-200 px-4 py-4 text-center">
|
|
{canLoadMore || isLoadingMore ? (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => loadMore(25)}
|
|
disabled={isLoadingMore}
|
|
className="inline-flex items-center gap-2"
|
|
>
|
|
{isLoadingMore ? (
|
|
<>
|
|
<Spinner className="size-4 text-neutral-500" />
|
|
Carregando...
|
|
</>
|
|
) : (
|
|
"Carregar mais"
|
|
)}
|
|
</Button>
|
|
) : (
|
|
<span className="text-xs text-neutral-500">
|
|
Todos os chamados filtrados foram exibidos.
|
|
</span>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|