Ajusta layout da tabela de tickets
This commit is contained in:
Esdras Renan
parent
f3a7045691
commit
292de05039
6 changed files with 240 additions and 232 deletions
|
|
@ -36,7 +36,15 @@ export function PriorityIcon({ value }: { value: TicketPriority }) {
|
|||
return <ChevronsUp className={iconClass} />
|
||||
}
|
||||
|
||||
export function PrioritySelect({ ticketId, value }: { ticketId: string; value: TicketPriority }) {
|
||||
export function PrioritySelect({
|
||||
ticketId,
|
||||
value,
|
||||
className,
|
||||
}: {
|
||||
ticketId: string
|
||||
value: TicketPriority
|
||||
className?: string
|
||||
}) {
|
||||
const updatePriority = useMutation(api.tickets.updatePriority)
|
||||
const [priority, setPriority] = useState<TicketPriority>(value)
|
||||
const { convexUserId } = useAuth()
|
||||
|
|
@ -59,7 +67,7 @@ export function PrioritySelect({ ticketId, value }: { ticketId: string; value: T
|
|||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className={headerTriggerClass} aria-label="Atualizar prioridade">
|
||||
<SelectTrigger className={cn(headerTriggerClass, className)} aria-label="Atualizar prioridade">
|
||||
<SelectValue asChild>
|
||||
<Badge className={cn(priorityBadgeClass, priorityStyles[priority]?.badgeClass)}>
|
||||
<PriorityIcon value={priority} />
|
||||
|
|
@ -68,7 +76,11 @@ export function PrioritySelect({ ticketId, value }: { ticketId: string; value: T
|
|||
</Badge>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent className="rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm">
|
||||
<SelectContent
|
||||
position="item-aligned"
|
||||
onCloseAutoFocus={(e) => e.preventDefault()}
|
||||
className="rounded-lg border border-slate-200 bg-white text-neutral-800 shadow-sm"
|
||||
>
|
||||
{(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
|
||||
<SelectItem key={option} value={option} className={priorityItemClass}>
|
||||
<span className="inline-flex items-center gap-2">
|
||||
|
|
|
|||
|
|
@ -17,20 +17,10 @@ import { TicketStatusBadge } from "@/components/tickets/status-badge"
|
|||
import { useAuth } from "@/lib/auth-client"
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const channelLabel: Record<string, string> = {
|
||||
EMAIL: "E-mail",
|
||||
WHATSAPP: "WhatsApp",
|
||||
CHAT: "Chat",
|
||||
PHONE: "Telefone",
|
||||
API: "API",
|
||||
MANUAL: "Manual",
|
||||
}
|
||||
|
||||
function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean }) {
|
||||
const queueLabel = ticket.queue ?? "Sem fila"
|
||||
const requesterName = ticket.requester.name ?? ticket.requester.email ?? "Solicitante"
|
||||
const categoryBadges = [ticket.category?.name, ticket.subcategory?.name].filter((value): value is string => Boolean(value))
|
||||
const channel = channelLabel[ticket.channel] ?? ticket.channel
|
||||
const badgeClass =
|
||||
"rounded-lg border border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 transition-colors"
|
||||
|
||||
|
|
@ -65,17 +55,17 @@ function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean })
|
|||
<span className="text-neutral-400">•</span>
|
||||
<span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
|
||||
</div>
|
||||
{categoryBadges.length > 0 ? (
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-neutral-600">
|
||||
{categoryBadges.map((label) => (
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-neutral-600">
|
||||
{categoryBadges.length > 0 ? (
|
||||
categoryBadges.map((label) => (
|
||||
<span key={label} className={badgeClass}>
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className={badgeClass}>{channel}</span>
|
||||
)}
|
||||
))
|
||||
) : (
|
||||
<span className={badgeClass}>Sem categoria</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -36,29 +36,46 @@ export function TicketQueueSummaryCards({ queues }: TicketQueueSummaryProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
<div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(22rem,1fr))]">
|
||||
{data.map((queue) => {
|
||||
const total = queue.pending + queue.waiting
|
||||
const breachPercent = total === 0 ? 0 : Math.round((queue.breached / total) * 100)
|
||||
return (
|
||||
<Card key={queue.id} className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<CardHeader className="pb-2">
|
||||
<Card
|
||||
key={queue.id}
|
||||
className="min-w-0 rounded-2xl border border-slate-200 bg-white p-3.5 shadow-sm sm:p-4"
|
||||
>
|
||||
<CardHeader className="min-w-0 pb-1.5 sm:pb-2">
|
||||
<CardDescription className="text-xs uppercase tracking-wide text-neutral-500">Fila</CardDescription>
|
||||
<CardTitle className="text-lg font-semibold text-neutral-900">{queue.name}</CardTitle>
|
||||
<CardTitle className="min-w-0 line-clamp-2 text-lg font-semibold leading-tight text-neutral-900 sm:text-xl">
|
||||
{queue.name}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
<div className="flex h-full flex-col justify-between gap-2 rounded-xl border border-slate-200 bg-gradient-to-br from-white via-white to-slate-100 px-4 py-3 shadow-sm">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">Pendentes</p>
|
||||
<p className="text-3xl font-bold tracking-tight text-neutral-900 tabular-nums">{queue.pending}</p>
|
||||
<CardContent className="space-y-3 sm:space-y-4">
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(9.5rem,1fr))] gap-2.5">
|
||||
<div className="flex min-w-0 flex-col items-start justify-between gap-2 rounded-xl border border-slate-200 bg-gradient-to-br from-white via-white to-slate-100 px-3 py-2.5 text-left shadow-sm lg:px-4 lg:py-3">
|
||||
<p className="min-w-0 pr-0.5 text-[0.68rem] font-semibold uppercase leading-tight tracking-[0.02em] text-neutral-500 sm:text-[0.72rem] lg:text-xs">
|
||||
Pendentes
|
||||
</p>
|
||||
<p className="text-2xl font-bold tracking-tight text-neutral-900 tabular-nums sm:text-3xl">
|
||||
{queue.pending}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-full flex-col justify-between gap-2 rounded-xl border border-sky-200 bg-gradient-to-br from-white via-white to-sky-50 px-4 py-3 shadow-sm">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-sky-700">Aguardando resposta</p>
|
||||
<p className="text-3xl font-bold tracking-tight text-sky-700 tabular-nums">{queue.waiting}</p>
|
||||
<div className="flex min-w-0 flex-col items-start justify-between gap-2 rounded-xl border border-sky-200 bg-gradient-to-br from-white via-white to-sky-50 px-3 py-2.5 text-left shadow-sm lg:px-4 lg:py-3">
|
||||
<p className="min-w-0 pr-0.5 text-[0.68rem] font-semibold uppercase leading-tight tracking-[0.02em] text-sky-700 sm:text-[0.72rem] lg:text-xs">
|
||||
Aguardando resposta
|
||||
</p>
|
||||
<p className="text-2xl font-bold tracking-tight text-sky-700 tabular-nums sm:text-3xl">
|
||||
{queue.waiting}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex h-full flex-col justify-between gap-2 rounded-xl border border-amber-200 bg-gradient-to-br from-white via-white to-amber-50 px-4 py-3 shadow-sm">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-amber-700">Violados</p>
|
||||
<p className="text-3xl font-bold tracking-tight text-amber-700 tabular-nums">{queue.breached}</p>
|
||||
<div className="flex min-w-0 flex-col items-start justify-between gap-2 rounded-xl border border-amber-200 bg-gradient-to-br from-white via-white to-amber-50 px-3 py-2.5 text-left shadow-sm lg:px-4 lg:py-3">
|
||||
<p className="min-w-0 pr-0.5 text-[0.68rem] font-semibold uppercase leading-tight tracking-[0.02em] text-amber-700 sm:text-[0.72rem] lg:text-xs">
|
||||
Violados
|
||||
</p>
|
||||
<p className="text-2xl font-bold tracking-tight text-amber-700 tabular-nums sm:text-3xl">
|
||||
{queue.breached}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-1">
|
||||
|
|
|
|||
|
|
@ -4,9 +4,8 @@ import { useEffect, useRef, useState } from "react"
|
|||
import { useRouter } from "next/navigation"
|
||||
import { format, formatDistanceToNowStrict } from "date-fns"
|
||||
import { ptBR } from "date-fns/locale"
|
||||
import { type LucideIcon, Code, FileText, Mail, MessageCircle, MessageSquare, Phone } from "lucide-react"
|
||||
|
||||
import type { Ticket, TicketChannel } from "@/lib/schemas/ticket"
|
||||
import type { Ticket } from "@/lib/schemas/ticket"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
|
|
@ -25,26 +24,10 @@ import { cn } from "@/lib/utils"
|
|||
import { deriveServerOffset, toServerTimestamp } from "@/components/tickets/ticket-timer.utils"
|
||||
import { getTicketStatusLabel, getTicketStatusTextClass } from "@/lib/ticket-status-style"
|
||||
|
||||
const channelLabel: Record<TicketChannel, string> = {
|
||||
EMAIL: "E-mail",
|
||||
WHATSAPP: "WhatsApp",
|
||||
CHAT: "Chat",
|
||||
PHONE: "Telefone",
|
||||
API: "API",
|
||||
MANUAL: "Manual",
|
||||
}
|
||||
|
||||
const channelIcon: Record<TicketChannel, LucideIcon> = {
|
||||
EMAIL: Mail,
|
||||
WHATSAPP: MessageCircle,
|
||||
CHAT: MessageSquare,
|
||||
PHONE: Phone,
|
||||
API: Code,
|
||||
MANUAL: FileText,
|
||||
}
|
||||
|
||||
const cellClass = "px-4 py-4 align-middle text-sm text-neutral-700 whitespace-normal first:pl-5 last:pr-6"
|
||||
const channelIconBadgeClass = "inline-flex size-8 items-center justify-center rounded-full border border-slate-200 bg-slate-50 text-neutral-700"
|
||||
const cellClass =
|
||||
"px-3 py-4 sm:px-4 xl:px-3 xl:py-3 align-middle text-sm text-neutral-700 whitespace-normal " +
|
||||
"first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4"
|
||||
const borderedCellClass = `${cellClass} xl:border-l xl:border-slate-200`
|
||||
const categoryChipClass = "inline-flex items-center gap-1 rounded-full bg-slate-200/60 px-2.5 py-1 text-[11px] font-medium text-neutral-700"
|
||||
const tableRowClass =
|
||||
"group border-b border-slate-100 text-sm transition-colors hover:bg-slate-100/70 last:border-none"
|
||||
|
|
@ -76,16 +59,16 @@ function AssigneeCell({ ticket }: { ticket: Ticket }) {
|
|||
.join("")
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex min-w-0 flex-col items-center gap-2 text-center">
|
||||
<Avatar className="size-8 border border-slate-200">
|
||||
<AvatarImage src={ticket.assignee.avatarUrl} alt={ticket.assignee.name} />
|
||||
<AvatarFallback>{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-sm font-semibold leading-none text-neutral-900">
|
||||
<div className="flex min-w-0 flex-col items-center">
|
||||
<span className="truncate text-sm font-semibold leading-none text-neutral-900 max-w-[14ch]">
|
||||
{ticket.assignee.name}
|
||||
</span>
|
||||
<span className="text-xs text-neutral-600">
|
||||
<span className="truncate text-xs text-neutral-600 max-w-[16ch]">
|
||||
{ticket.assignee.teams?.[0] ?? "Agente"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -137,166 +120,172 @@ export function TicketsTable({ tickets, enteringIds }: TicketsTableProps) {
|
|||
return (
|
||||
<Card className="gap-0 rounded-3xl border border-slate-200 bg-white py-0 shadow-sm">
|
||||
<CardContent className="p-0">
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Table className="w-full min-w-[920px] overflow-hidden rounded-3xl">
|
||||
<div className="w-full overflow-x-auto xl:overflow-x-hidden">
|
||||
<Table className="w-full overflow-hidden rounded-3xl xl:table-fixed">
|
||||
<TableHeader className="bg-slate-100/80">
|
||||
<TableRow className="bg-transparent text-[11px] uppercase tracking-wide text-neutral-600">
|
||||
<TableHead className="w-[110px] px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-6 last:pr-6 sm:w-[120px]">
|
||||
Ticket
|
||||
</TableHead>
|
||||
<TableHead className="w-[38%] px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-6 last:pr-6 sm:w-[40%]">
|
||||
Assunto
|
||||
</TableHead>
|
||||
<TableHead className="hidden w-[120px] pl-6 pr-3 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-6 last:pr-6 lg:table-cell">
|
||||
Fila
|
||||
</TableHead>
|
||||
<TableHead className="hidden w-[70px] pl-6 pr-3 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-6 last:pr-6 md:table-cell sm:w-[80px]">
|
||||
Canal
|
||||
</TableHead>
|
||||
<TableHead className="hidden w-[150px] pl-6 pr-3 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-6 last:pr-6 lg:table-cell xl:w-[180px]">
|
||||
Empresa
|
||||
</TableHead>
|
||||
<TableHead className="hidden w-[90px] px-4 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-6 last:pr-6 md:table-cell lg:w-[100px]">
|
||||
Prioridade
|
||||
</TableHead>
|
||||
<TableHead className="w-[160px] pl-6 pr-3 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-6 last:pr-6 sm:w-[200px] lg:pl-10 xl:w-[230px] xl:pl-14">
|
||||
Status
|
||||
</TableHead>
|
||||
<TableHead className="hidden w-[110px] px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-6 last:pr-6 lg:table-cell">
|
||||
Tempo
|
||||
</TableHead>
|
||||
<TableHead className="hidden w-[180px] px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-6 last:pr-6 xl:table-cell xl:w-[200px]">
|
||||
Responsável
|
||||
</TableHead>
|
||||
<TableHead className="w-[130px] px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-6 last:pr-6 sm:w-[140px]">
|
||||
Atualizado
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{safeTickets.map((ticket) => {
|
||||
const ChannelIcon = channelIcon[ticket.channel] ?? MessageCircle
|
||||
const rowClass = cn(
|
||||
`${tableRowClass} cursor-pointer`,
|
||||
enteringIds?.has(ticket.id) ? "recent-ticket-enter" : undefined,
|
||||
)
|
||||
<TableHead className="px-3 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4 xl:w-[7%]">
|
||||
Ticket
|
||||
</TableHead>
|
||||
<TableHead className="px-3 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4 xl:w-[22%]">
|
||||
Assunto
|
||||
</TableHead>
|
||||
<TableHead className="hidden lg:table-cell pl-3 pr-3 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4 xl:w-[11%]">
|
||||
Empresa
|
||||
</TableHead>
|
||||
<TableHead className="hidden md:table-cell px-3 py-3 text-left text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4 xl:w-[8%]">
|
||||
Prioridade
|
||||
</TableHead>
|
||||
<TableHead className="hidden lg:table-cell pl-3 pr-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4 xl:w-[9%] xl:border-l xl:border-slate-200">
|
||||
Fila
|
||||
</TableHead>
|
||||
<TableHead className="pl-3 pr-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4 xl:w-[10%] xl:border-l xl:border-slate-200">
|
||||
Status
|
||||
</TableHead>
|
||||
<TableHead className="hidden lg:table-cell px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4 xl:w-[6%] xl:border-l xl:border-slate-200">
|
||||
Tempo
|
||||
</TableHead>
|
||||
<TableHead className="hidden xl:table-cell px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4 xl:w-[15%] xl:border-l xl:border-slate-200">
|
||||
Responsável
|
||||
</TableHead>
|
||||
<TableHead className="px-3 py-3 text-center text-[11px] font-semibold uppercase tracking-wide text-neutral-600 first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4 xl:w-[12%] xl:border-l xl:border-slate-200">
|
||||
Atualizado
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{safeTickets.map((ticket) => {
|
||||
const rowClass = cn(
|
||||
`${tableRowClass} cursor-pointer`,
|
||||
enteringIds?.has(ticket.id) ? "recent-ticket-enter" : undefined,
|
||||
)
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
key={ticket.id}
|
||||
className={rowClass}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => router.push(`/tickets/${ticket.id}`)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter" || event.key === " ") {
|
||||
event.preventDefault()
|
||||
router.push(`/tickets/${ticket.id}`)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TableCell className={cellClass}>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="font-semibold tracking-tight text-neutral-900">
|
||||
#{ticket.reference}
|
||||
</span>
|
||||
<span className="text-xs text-neutral-500">
|
||||
return (
|
||||
<TableRow
|
||||
key={ticket.id}
|
||||
className={rowClass}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
onClick={() => router.push(`/tickets/${ticket.id}`)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter" || event.key === " ") {
|
||||
event.preventDefault()
|
||||
router.push(`/tickets/${ticket.id}`)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TableCell className={`${cellClass} overflow-hidden`}>
|
||||
<div className="flex min-w-0 flex-col gap-1">
|
||||
<span className="font-semibold tracking-tight text-neutral-900">
|
||||
#{ticket.reference}
|
||||
</span>
|
||||
<span className="text-xs text-neutral-500">
|
||||
{ticket.queue ?? "Sem fila"}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={cellClass}>
|
||||
<div className="flex min-w-0 flex-col gap-1.5">
|
||||
<span className="text-[15px] font-semibold text-neutral-900 line-clamp-2 md:line-clamp-1 break-words">
|
||||
{ticket.subject}
|
||||
</span>
|
||||
<span className="text-sm text-neutral-600 line-clamp-1 break-words">
|
||||
{ticket.summary ?? "Sem resumo"}
|
||||
</span>
|
||||
<div className="flex flex-col gap-1 text-xs text-neutral-500">
|
||||
{ticket.category ? (
|
||||
<Badge className={categoryChipClass}>
|
||||
{ticket.category.name}
|
||||
{ticket.subcategory ? (
|
||||
<span
|
||||
className="hidden min-[2000px]:inline text-neutral-600"
|
||||
title={ticket.subcategory.name}
|
||||
>
|
||||
{" "}
|
||||
• {ticket.subcategory.name}
|
||||
</span>
|
||||
) : null}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-neutral-400">Sem categoria</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} hidden lg:table-cell overflow-hidden`}>
|
||||
<div className="flex flex-col gap-1 truncate">
|
||||
<span className="font-semibold text-neutral-800" title={ticket.requester.name}>
|
||||
{ticket.requester.name}
|
||||
</span>
|
||||
<span
|
||||
className="truncate text-sm text-neutral-600"
|
||||
title={((ticket.company ?? null) as { name?: string } | null)?.name ?? "—"}
|
||||
>
|
||||
{((ticket.company ?? null) as { name?: string } | null)?.name ?? "—"}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} hidden md:table-cell`}>
|
||||
<div
|
||||
className="flex justify-start mr-3"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => event.stopPropagation()}
|
||||
>
|
||||
<PrioritySelect
|
||||
className="w-[7.5rem] xl:w-[6.75rem]"
|
||||
ticketId={ticket.id}
|
||||
value={ticket.priority}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${borderedCellClass} hidden lg:table-cell overflow-hidden text-center`}>
|
||||
<span className="mx-auto truncate text-sm font-semibold text-neutral-800">
|
||||
{ticket.queue ?? "Sem fila"}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={cellClass}>
|
||||
<div className="flex flex-col gap-1.5 min-w-0">
|
||||
<span className="text-[15px] font-semibold text-neutral-900 line-clamp-2 md:line-clamp-1 break-words">
|
||||
{ticket.subject}
|
||||
</span>
|
||||
<span className="text-sm text-neutral-600 line-clamp-1 break-words max-w-[52ch]">
|
||||
{ticket.summary ?? "Sem resumo"}
|
||||
</span>
|
||||
<div className="flex flex-col gap-1 text-xs text-neutral-500">
|
||||
<span className="font-semibold text-neutral-700">{ticket.requester.name}</span>
|
||||
{ticket.category ? (
|
||||
<Badge className={categoryChipClass}>
|
||||
{ticket.category.name}
|
||||
{ticket.subcategory ? <span className="text-neutral-600"> • {ticket.subcategory.name}</span> : null}
|
||||
</Badge>
|
||||
) : (
|
||||
<span className="text-neutral-400">Sem categoria</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} hidden lg:table-cell pl-6`}>
|
||||
<span className="text-sm font-semibold text-neutral-800">
|
||||
{ticket.queue ?? "Sem fila"}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} hidden md:table-cell pl-6`}>
|
||||
<div className="flex items-center">
|
||||
<span className="sr-only">Canal {channelLabel[ticket.channel]}</span>
|
||||
<span
|
||||
className={channelIconBadgeClass}
|
||||
aria-hidden="true"
|
||||
title={channelLabel[ticket.channel]}
|
||||
>
|
||||
<ChannelIcon className="size-4" />
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} hidden lg:table-cell pl-6`}>
|
||||
<span className="max-w-[160px] truncate text-sm text-neutral-800" title={((ticket.company ?? null) as { name?: string } | null)?.name ?? "—"}>
|
||||
{((ticket.company ?? null) as { name?: string } | null)?.name ?? "—"}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} hidden md:table-cell px-4`}>
|
||||
<div
|
||||
className="flex justify-center"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => event.stopPropagation()}
|
||||
>
|
||||
<PrioritySelect ticketId={ticket.id} value={ticket.priority} />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} pl-6 sm:pl-10 xl:pl-14`}>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className={cn(
|
||||
"text-sm font-semibold break-words leading-tight max-w-[140px] sm:max-w-[180px] lg:max-w-[210px]",
|
||||
getTicketStatusTextClass(ticket.status)
|
||||
)}>
|
||||
{getTicketStatusLabel(ticket.status)}
|
||||
</span>
|
||||
{ticket.metrics?.timeWaitingMinutes ? (
|
||||
<span className="text-xs text-neutral-500">
|
||||
Em espera há {ticket.metrics.timeWaitingMinutes} min
|
||||
</TableCell>
|
||||
<TableCell className={`${borderedCellClass} overflow-hidden`}>
|
||||
<div className="flex min-w-0 flex-col items-center gap-1 text-center">
|
||||
<span
|
||||
className={cn(
|
||||
"text-sm font-semibold leading-tight truncate text-center",
|
||||
"max-w-[14ch] sm:max-w-[18ch] xl:max-w-[20ch]",
|
||||
getTicketStatusTextClass(ticket.status)
|
||||
)}
|
||||
>
|
||||
{getTicketStatusLabel(ticket.status)}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} hidden lg:table-cell`}>
|
||||
<div className="flex flex-col gap-1 text-sm text-neutral-600">
|
||||
<span className="font-semibold text-neutral-800">{formatDuration(getWorkedMs(ticket))}</span>
|
||||
{ticket.workSummary?.activeSession ? (
|
||||
<span className="text-xs text-neutral-500">Em andamento</span>
|
||||
) : null}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} hidden xl:table-cell`}>
|
||||
<AssigneeCell ticket={ticket} />
|
||||
</TableCell>
|
||||
<TableCell className={cellClass}>
|
||||
<div className="flex flex-col leading-tight">
|
||||
<span className="text-sm text-neutral-700">
|
||||
{`há cerca de ${formatDistanceToNowStrict(ticket.updatedAt, { locale: ptBR })}`}
|
||||
</span>
|
||||
<span className="text-xs text-neutral-500">
|
||||
{format(ticket.updatedAt, "dd/MM/yyyy HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{ticket.metrics?.timeWaitingMinutes ? (
|
||||
<span className="text-xs text-neutral-500">
|
||||
Em espera há {ticket.metrics.timeWaitingMinutes} min
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${borderedCellClass} hidden lg:table-cell`}>
|
||||
<div className="flex flex-col items-center gap-1 text-sm text-neutral-600 text-center">
|
||||
<span className="font-semibold text-neutral-800">{formatDuration(getWorkedMs(ticket))}</span>
|
||||
{ticket.workSummary?.activeSession ? (
|
||||
<span className="text-xs text-neutral-500">Em andamento</span>
|
||||
) : null}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${borderedCellClass} hidden xl:table-cell overflow-hidden`}>
|
||||
<AssigneeCell ticket={ticket} />
|
||||
</TableCell>
|
||||
<TableCell className={borderedCellClass}>
|
||||
<div className="flex flex-col items-center leading-tight text-center">
|
||||
<span className="text-sm text-neutral-700 whitespace-normal">
|
||||
{`há ${formatDistanceToNowStrict(ticket.updatedAt, { locale: ptBR })}`}
|
||||
</span>
|
||||
<span className="text-xs text-neutral-500">
|
||||
{format(ticket.updatedAt, "dd/MM/yyyy HH:mm")}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
{safeTickets.length === 0 && (
|
||||
|
|
|
|||
|
|
@ -27,9 +27,9 @@ import {
|
|||
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||
const SIDEBAR_WIDTH = "16rem"
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||
const SIDEBAR_WIDTH_ICON = "3rem"
|
||||
const SIDEBAR_WIDTH = "clamp(12rem, 15vw + 1.5rem, 16.5rem)"
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||
const SIDEBAR_WIDTH_ICON = "3rem"
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||
|
||||
type SidebarContextProps = {
|
||||
|
|
@ -314,17 +314,17 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
|||
)
|
||||
}
|
||||
|
||||
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||
return (
|
||||
<main
|
||||
data-slot="sidebar-inset"
|
||||
className={cn(
|
||||
"bg-background relative flex w-full flex-1 flex-col",
|
||||
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||
return (
|
||||
<main
|
||||
data-slot="sidebar-inset"
|
||||
className={cn(
|
||||
"bg-background relative flex w-full min-w-0 flex-1 flex-col",
|
||||
"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue