esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ajusta layout da tabela de tickets

Browse source
This commit is contained in:
Esdras Renan 2025-10-27 11:45:15 -03:00
parent f3a7045691
commit 292de05039
6 changed files with 240 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/tickets/priority-select.tsx
View file

@ -36,7 +36,15 @@ export function PriorityIcon({ value }: { value: TicketPriority }) {
return <ChevronsUp className={iconClass} /> 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 updatePriority = useMutation(api.tickets.updatePriority)
const [priority, setPriority] = useState<TicketPriority>(value) const [priority, setPriority] = useState<TicketPriority>(value)
const { convexUserId } = useAuth() 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> <SelectValue asChild>
<Badge className={cn(priorityBadgeClass, priorityStyles[priority]?.badgeClass)}> <Badge className={cn(priorityBadgeClass, priorityStyles[priority]?.badgeClass)}>
<PriorityIcon value={priority} /> <PriorityIcon value={priority} />
@ -68,7 +76,11 @@ export function PrioritySelect({ ticketId, value }: { ticketId: string; value: T
</Badge> </Badge>
</SelectValue> </SelectValue>
</SelectTrigger> </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) => ( {(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
<SelectItem key={option} value={option} className={priorityItemClass}> <SelectItem key={option} value={option} className={priorityItemClass}>
<span className="inline-flex items-center gap-2"> <span className="inline-flex items-center gap-2">

26
src/components/tickets/recent-tickets-panel.tsx
View file

@ -17,20 +17,10 @@ import { TicketStatusBadge } from "@/components/tickets/status-badge"
import { useAuth } from "@/lib/auth-client" import { useAuth } from "@/lib/auth-client"
import { cn } from "@/lib/utils" 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 }) { function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean }) {
const queueLabel = ticket.queue ?? "Sem fila" const queueLabel = ticket.queue ?? "Sem fila"
const requesterName = ticket.requester.name ?? ticket.requester.email ?? "Solicitante" 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 categoryBadges = [ticket.category?.name, ticket.subcategory?.name].filter((value): value is string => Boolean(value))
const channel = channelLabel[ticket.channel] ?? ticket.channel
const badgeClass = const badgeClass =
"rounded-lg border border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 transition-colors" "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 className="text-neutral-400">•</span>
<span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span> <span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
</div> </div>
{categoryBadges.length > 0 ? ( <div className="flex flex-wrap items-center gap-2 text-sm text-neutral-600">
<div className="flex flex-wrap items-center gap-2 text-sm text-neutral-600"> {categoryBadges.length > 0 ? (
{categoryBadges.map((label) => ( categoryBadges.map((label) => (
<span key={label} className={badgeClass}> <span key={label} className={badgeClass}>
{label} {label}
</span> </span>
))} ))
</div> ) : (
) : ( <span className={badgeClass}>Sem categoria</span>
<span className={badgeClass}>{channel}</span> )}
)} </div>
</div> </div>
</div> </div>
</Link> </Link>

47
src/components/tickets/ticket-queue-summary.tsx
View file

@ -36,29 +36,46 @@ export function TicketQueueSummaryCards({ queues }: TicketQueueSummaryProps) {
} }
return ( 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) => { {data.map((queue) => {
const total = queue.pending + queue.waiting const total = queue.pending + queue.waiting
const breachPercent = total === 0 ? 0 : Math.round((queue.breached / total) * 100) const breachPercent = total === 0 ? 0 : Math.round((queue.breached / total) * 100)
return ( return (
<Card key={queue.id} className="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"> <Card
<CardHeader className="pb-2"> 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> <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> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-3 sm:space-y-4">
<div className="grid gap-3 sm:grid-cols-3"> <div className="grid grid-cols-[repeat(auto-fit,minmax(9.5rem,1fr))] gap-2.5">
<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"> <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="text-xs font-semibold uppercase tracking-wide text-neutral-500">Pendentes</p> <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">
<p className="text-3xl font-bold tracking-tight text-neutral-900 tabular-nums">{queue.pending}</p> Pendentes
</p>
<p className="text-2xl font-bold tracking-tight text-neutral-900 tabular-nums sm:text-3xl">
{queue.pending}
</p>
</div> </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"> <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="text-xs font-semibold uppercase tracking-wide text-sky-700">Aguardando resposta</p> <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">
<p className="text-3xl font-bold tracking-tight text-sky-700 tabular-nums">{queue.waiting}</p> Aguardando resposta
</p>
<p className="text-2xl font-bold tracking-tight text-sky-700 tabular-nums sm:text-3xl">
{queue.waiting}
</p>
</div> </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"> <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="text-xs font-semibold uppercase tracking-wide text-amber-700">Violados</p> <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">
<p className="text-3xl font-bold tracking-tight text-amber-700 tabular-nums">{queue.breached}</p> Violados
</p>
<p className="text-2xl font-bold tracking-tight text-amber-700 tabular-nums sm:text-3xl">
{queue.breached}
</p>
</div> </div>
</div> </div>
<div className="pt-1"> <div className="pt-1">

345
src/components/tickets/tickets-table.tsx
View file

@ -4,9 +4,8 @@ import { useEffect, useRef, useState } from "react"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { format, formatDistanceToNowStrict } from "date-fns" import { format, formatDistanceToNowStrict } from "date-fns"
import { ptBR } from "date-fns/locale" 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 { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card" 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 { deriveServerOffset, toServerTimestamp } from "@/components/tickets/ticket-timer.utils"
import { getTicketStatusLabel, getTicketStatusTextClass } from "@/lib/ticket-status-style" import { getTicketStatusLabel, getTicketStatusTextClass } from "@/lib/ticket-status-style"
const channelLabel: Record<TicketChannel, string> = { const cellClass =
EMAIL: "E-mail", "px-3 py-4 sm:px-4 xl:px-3 xl:py-3 align-middle text-sm text-neutral-700 whitespace-normal " +
WHATSAPP: "WhatsApp", "first:pl-3 last:pr-3 sm:first:pl-4 sm:last:pr-4 xl:first:pl-4 xl:last:pr-4"
CHAT: "Chat", const borderedCellClass = `${cellClass} xl:border-l xl:border-slate-200`
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 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 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 = const tableRowClass =
"group border-b border-slate-100 text-sm transition-colors hover:bg-slate-100/70 last:border-none" "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("") .join("")
return ( 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"> <Avatar className="size-8 border border-slate-200">
<AvatarImage src={ticket.assignee.avatarUrl} alt={ticket.assignee.name} /> <AvatarImage src={ticket.assignee.avatarUrl} alt={ticket.assignee.name} />
<AvatarFallback>{initials}</AvatarFallback> <AvatarFallback>{initials}</AvatarFallback>
</Avatar> </Avatar>
<div className="flex flex-col"> <div className="flex min-w-0 flex-col items-center">
<span className="text-sm font-semibold leading-none text-neutral-900"> <span className="truncate text-sm font-semibold leading-none text-neutral-900 max-w-[14ch]">
{ticket.assignee.name} {ticket.assignee.name}
</span> </span>
<span className="text-xs text-neutral-600"> <span className="truncate text-xs text-neutral-600 max-w-[16ch]">
{ticket.assignee.teams?.[0] ?? "Agente"} {ticket.assignee.teams?.[0] ?? "Agente"}
</span> </span>
</div> </div>
@ -137,166 +120,172 @@ export function TicketsTable({ tickets, enteringIds }: TicketsTableProps) {
return ( return (
<Card className="gap-0 rounded-3xl border border-slate-200 bg-white py-0 shadow-sm"> <Card className="gap-0 rounded-3xl border border-slate-200 bg-white py-0 shadow-sm">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="w-full overflow-x-auto"> <div className="w-full overflow-x-auto xl:overflow-x-hidden">
<Table className="w-full min-w-[920px] overflow-hidden rounded-3xl"> <Table className="w-full overflow-hidden rounded-3xl xl:table-fixed">
<TableHeader className="bg-slate-100/80"> <TableHeader className="bg-slate-100/80">
<TableRow className="bg-transparent text-[11px] uppercase tracking-wide text-neutral-600"> <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]"> <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 Ticket
</TableHead> </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%]"> <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 Assunto
</TableHead> </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"> <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%]">
Fila Empresa
</TableHead> </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]"> <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%]">
Canal Prioridade
</TableHead> </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]"> <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">
Empresa Fila
</TableHead> </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]"> <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">
Prioridade Status
</TableHead> </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"> <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">
Status Tempo
</TableHead> </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"> <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">
Tempo Responsável
</TableHead> </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]"> <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">
Responsável Atualizado
</TableHead> </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]"> </TableRow>
Atualizado </TableHeader>
</TableHead> <TableBody>
</TableRow> {safeTickets.map((ticket) => {
</TableHeader> const rowClass = cn(
<TableBody> `${tableRowClass} cursor-pointer`,
{safeTickets.map((ticket) => { enteringIds?.has(ticket.id) ? "recent-ticket-enter" : undefined,
const ChannelIcon = channelIcon[ticket.channel] ?? MessageCircle )
const rowClass = cn(
`${tableRowClass} cursor-pointer`,
enteringIds?.has(ticket.id) ? "recent-ticket-enter" : undefined,
)
return ( return (
<TableRow <TableRow
key={ticket.id} key={ticket.id}
className={rowClass} className={rowClass}
role="link" role="link"
tabIndex={0} tabIndex={0}
onClick={() => router.push(`/tickets/${ticket.id}`)} onClick={() => router.push(`/tickets/${ticket.id}`)}
onKeyDown={(event) => { onKeyDown={(event) => {
if (event.key === "Enter" || event.key === " ") { if (event.key === "Enter" || event.key === " ") {
event.preventDefault() event.preventDefault()
router.push(`/tickets/${ticket.id}`) router.push(`/tickets/${ticket.id}`)
} }
}} }}
> >
<TableCell className={cellClass}> <TableCell className={`${cellClass} overflow-hidden`}>
<div className="flex flex-col gap-1"> <div className="flex min-w-0 flex-col gap-1">
<span className="font-semibold tracking-tight text-neutral-900"> <span className="font-semibold tracking-tight text-neutral-900">
#{ticket.reference} #{ticket.reference}
</span> </span>
<span className="text-xs text-neutral-500"> <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"} {ticket.queue ?? "Sem fila"}
</span> </span>
</div> </TableCell>
</TableCell> <TableCell className={`${borderedCellClass} overflow-hidden`}>
<TableCell className={cellClass}> <div className="flex min-w-0 flex-col items-center gap-1 text-center">
<div className="flex flex-col gap-1.5 min-w-0"> <span
<span className="text-[15px] font-semibold text-neutral-900 line-clamp-2 md:line-clamp-1 break-words"> className={cn(
{ticket.subject} "text-sm font-semibold leading-tight truncate text-center",
</span> "max-w-[14ch] sm:max-w-[18ch] xl:max-w-[20ch]",
<span className="text-sm text-neutral-600 line-clamp-1 break-words max-w-[52ch]"> getTicketStatusTextClass(ticket.status)
{ticket.summary ?? "Sem resumo"} )}
</span> >
<div className="flex flex-col gap-1 text-xs text-neutral-500"> {getTicketStatusLabel(ticket.status)}
<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
</span> </span>
) : null} {ticket.metrics?.timeWaitingMinutes ? (
</div> <span className="text-xs text-neutral-500">
</TableCell> Em espera há {ticket.metrics.timeWaitingMinutes} min
<TableCell className={`${cellClass} hidden lg:table-cell`}> </span>
<div className="flex flex-col gap-1 text-sm text-neutral-600"> ) : null}
<span className="font-semibold text-neutral-800">{formatDuration(getWorkedMs(ticket))}</span> </div>
{ticket.workSummary?.activeSession ? ( </TableCell>
<span className="text-xs text-neutral-500">Em andamento</span> <TableCell className={`${borderedCellClass} hidden lg:table-cell`}>
) : null} <div className="flex flex-col items-center gap-1 text-sm text-neutral-600 text-center">
</div> <span className="font-semibold text-neutral-800">{formatDuration(getWorkedMs(ticket))}</span>
</TableCell> {ticket.workSummary?.activeSession ? (
<TableCell className={`${cellClass} hidden xl:table-cell`}> <span className="text-xs text-neutral-500">Em andamento</span>
<AssigneeCell ticket={ticket} /> ) : null}
</TableCell> </div>
<TableCell className={cellClass}> </TableCell>
<div className="flex flex-col leading-tight"> <TableCell className={`${borderedCellClass} hidden xl:table-cell overflow-hidden`}>
<span className="text-sm text-neutral-700"> <AssigneeCell ticket={ticket} />
{`há cerca de ${formatDistanceToNowStrict(ticket.updatedAt, { locale: ptBR })}`} </TableCell>
</span> <TableCell className={borderedCellClass}>
<span className="text-xs text-neutral-500"> <div className="flex flex-col items-center leading-tight text-center">
{format(ticket.updatedAt, "dd/MM/yyyy HH:mm")} <span className="text-sm text-neutral-700 whitespace-normal">
</span> {`há ${formatDistanceToNowStrict(ticket.updatedAt, { locale: ptBR })}`}
</div> </span>
</TableCell> <span className="text-xs text-neutral-500">
</TableRow> {format(ticket.updatedAt, "dd/MM/yyyy HH:mm")}
</span>
</div>
</TableCell>
</TableRow>
) )
})} })}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
{safeTickets.length === 0 && ( {safeTickets.length === 0 && (

28
src/components/ui/sidebar.tsx
View file

@ -27,9 +27,9 @@ import {
const SIDEBAR_COOKIE_NAME = "sidebar_state" const SIDEBAR_COOKIE_NAME = "sidebar_state"
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem" const SIDEBAR_WIDTH = "clamp(12rem, 15vw + 1.5rem, 16.5rem)"
const SIDEBAR_WIDTH_MOBILE = "18rem" const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3rem" const SIDEBAR_WIDTH_ICON = "3rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b" const SIDEBAR_KEYBOARD_SHORTCUT = "b"
type SidebarContextProps = { type SidebarContextProps = {
@ -314,17 +314,17 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
) )
} }
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) { function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
return ( return (
<main <main
data-slot="sidebar-inset" data-slot="sidebar-inset"
className={cn( className={cn(
"bg-background relative flex w-full flex-1 flex-col", "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", "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 className
)} )}
{...props} {...props}
/> />
) )
} }

8
src/lib/ticket-status-style.ts
View file

@ -19,7 +19,7 @@ const META: Record<TicketStatus, TicketStatusStyle> = {
summaryTone: "muted", summaryTone: "muted",
chipClass: "bg-slate-100 text-neutral-700 ring-1 ring-slate-200", chipClass: "bg-slate-100 text-neutral-700 ring-1 ring-slate-200",
badgeClass: "border border-slate-200 bg-slate-100 text-neutral-700", badgeClass: "border border-slate-200 bg-slate-100 text-neutral-700",
tableTextClass: "text-neutral-600", tableTextClass: "text-slate-700",
dotClass: "bg-slate-400", dotClass: "bg-slate-400",
}, },
AWAITING_ATTENDANCE: { AWAITING_ATTENDANCE: {
@ -27,7 +27,7 @@ const META: Record<TicketStatus, TicketStatusStyle> = {
summaryTone: "info", summaryTone: "info",
chipClass: "bg-sky-100 text-sky-700 ring-1 ring-sky-200", chipClass: "bg-sky-100 text-sky-700 ring-1 ring-sky-200",
badgeClass: "border border-sky-200 bg-sky-100 text-sky-700", badgeClass: "border border-sky-200 bg-sky-100 text-sky-700",
tableTextClass: "text-sky-700", tableTextClass: "text-[#0a4760]",
dotClass: "bg-sky-500", dotClass: "bg-sky-500",
}, },
PAUSED: { PAUSED: {
@ -35,7 +35,7 @@ const META: Record<TicketStatus, TicketStatusStyle> = {
summaryTone: "warning", summaryTone: "warning",
chipClass: "bg-amber-100 text-amber-800 ring-1 ring-amber-200", chipClass: "bg-amber-100 text-amber-800 ring-1 ring-amber-200",
badgeClass: "border border-amber-200 bg-amber-50 text-amber-700", badgeClass: "border border-amber-200 bg-amber-50 text-amber-700",
tableTextClass: "text-amber-700", tableTextClass: "text-[#7a5901]",
dotClass: "bg-amber-400", dotClass: "bg-amber-400",
}, },
RESOLVED: { RESOLVED: {
@ -43,7 +43,7 @@ const META: Record<TicketStatus, TicketStatusStyle> = {
summaryTone: "success", summaryTone: "success",
chipClass: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200", chipClass: "bg-emerald-100 text-emerald-700 ring-1 ring-emerald-200",
badgeClass: "border border-emerald-200 bg-emerald-50 text-emerald-700", badgeClass: "border border-emerald-200 bg-emerald-50 text-emerald-700",
tableTextClass: "text-emerald-700", tableTextClass: "text-[#1f6a45]",
dotClass: "bg-emerald-500", dotClass: "bg-emerald-500",
}, },
} }