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">

20
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,19 +55,19 @@ 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.map((label) => ( {categoryBadges.length > 0 ? (
categoryBadges.map((label) => (
<span key={label} className={badgeClass}> <span key={label} className={badgeClass}>
{label} {label}
</span> </span>
))} ))
</div>
) : ( ) : (
<span className={badgeClass}>{channel}</span> <span className={badgeClass}>Sem categoria</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">

149
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,45 +120,41 @@ 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
</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 Empresa
</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="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 Prioridade
</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 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 Status
</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 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 Tempo
</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="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 Responsável
</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]"> <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 Atualizado
</TableHead> </TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{safeTickets.map((ticket) => { {safeTickets.map((ticket) => {
const ChannelIcon = channelIcon[ticket.channel] ?? MessageCircle
const rowClass = cn( const rowClass = cn(
`${tableRowClass} cursor-pointer`, `${tableRowClass} cursor-pointer`,
enteringIds?.has(ticket.id) ? "recent-ticket-enter" : undefined, enteringIds?.has(ticket.id) ? "recent-ticket-enter" : undefined,
@ -195,8 +174,8 @@ export function TicketsTable({ tickets, enteringIds }: TicketsTableProps) {
} }
}} }}
> >
<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>
@ -206,19 +185,26 @@ export function TicketsTable({ tickets, enteringIds }: TicketsTableProps) {
</div> </div>
</TableCell> </TableCell>
<TableCell className={cellClass}> <TableCell className={cellClass}>
<div className="flex flex-col gap-1.5 min-w-0"> <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"> <span className="text-[15px] font-semibold text-neutral-900 line-clamp-2 md:line-clamp-1 break-words">
{ticket.subject} {ticket.subject}
</span> </span>
<span className="text-sm text-neutral-600 line-clamp-1 break-words max-w-[52ch]"> <span className="text-sm text-neutral-600 line-clamp-1 break-words">
{ticket.summary ?? "Sem resumo"} {ticket.summary ?? "Sem resumo"}
</span> </span>
<div className="flex flex-col gap-1 text-xs text-neutral-500"> <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 ? ( {ticket.category ? (
<Badge className={categoryChipClass}> <Badge className={categoryChipClass}>
{ticket.category.name} {ticket.category.name}
{ticket.subcategory ? <span className="text-neutral-600"> • {ticket.subcategory.name}</span> : null} {ticket.subcategory ? (
<span
className="hidden min-[2000px]:inline text-neutral-600"
title={ticket.subcategory.name}
>
{" "}
• {ticket.subcategory.name}
</span>
) : null}
</Badge> </Badge>
) : ( ) : (
<span className="text-neutral-400">Sem categoria</span> <span className="text-neutral-400">Sem categoria</span>
@ -226,43 +212,46 @@ export function TicketsTable({ tickets, enteringIds }: TicketsTableProps) {
</div> </div>
</div> </div>
</TableCell> </TableCell>
<TableCell className={`${cellClass} hidden lg:table-cell pl-6`}> <TableCell className={`${cellClass} hidden lg:table-cell overflow-hidden`}>
<span className="text-sm font-semibold text-neutral-800"> <div className="flex flex-col gap-1 truncate">
{ticket.queue ?? "Sem fila"} <span className="font-semibold text-neutral-800" title={ticket.requester.name}>
{ticket.requester.name}
</span> </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 <span
className={channelIconBadgeClass} className="truncate text-sm text-neutral-600"
aria-hidden="true" title={((ticket.company ?? null) as { name?: string } | null)?.name ?? "—"}
title={channelLabel[ticket.channel]}
> >
<ChannelIcon className="size-4" /> {((ticket.company ?? null) as { name?: string } | null)?.name ?? "—"}
</span> </span>
</div> </div>
</TableCell> </TableCell>
<TableCell className={`${cellClass} hidden lg:table-cell pl-6`}> <TableCell className={`${cellClass} hidden md:table-cell`}>
<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 <div
className="flex justify-center" className="flex justify-start mr-3"
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
onKeyDown={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}
> >
<PrioritySelect ticketId={ticket.id} value={ticket.priority} /> <PrioritySelect
className="w-[7.5rem] xl:w-[6.75rem]"
ticketId={ticket.id}
value={ticket.priority}
/>
</div> </div>
</TableCell> </TableCell>
<TableCell className={`${cellClass} pl-6 sm:pl-10 xl:pl-14`}> <TableCell className={`${borderedCellClass} hidden lg:table-cell overflow-hidden text-center`}>
<div className="flex flex-col gap-1"> <span className="mx-auto truncate text-sm font-semibold text-neutral-800">
<span className={cn( {ticket.queue ?? "Sem fila"}
"text-sm font-semibold break-words leading-tight max-w-[140px] sm:max-w-[180px] lg:max-w-[210px]", </span>
</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) getTicketStatusTextClass(ticket.status)
)}> )}
>
{getTicketStatusLabel(ticket.status)} {getTicketStatusLabel(ticket.status)}
</span> </span>
{ticket.metrics?.timeWaitingMinutes ? ( {ticket.metrics?.timeWaitingMinutes ? (
@ -272,21 +261,21 @@ export function TicketsTable({ tickets, enteringIds }: TicketsTableProps) {
) : null} ) : null}
</div> </div>
</TableCell> </TableCell>
<TableCell className={`${cellClass} hidden lg:table-cell`}> <TableCell className={`${borderedCellClass} hidden lg:table-cell`}>
<div className="flex flex-col gap-1 text-sm text-neutral-600"> <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> <span className="font-semibold text-neutral-800">{formatDuration(getWorkedMs(ticket))}</span>
{ticket.workSummary?.activeSession ? ( {ticket.workSummary?.activeSession ? (
<span className="text-xs text-neutral-500">Em andamento</span> <span className="text-xs text-neutral-500">Em andamento</span>
) : null} ) : null}
</div> </div>
</TableCell> </TableCell>
<TableCell className={`${cellClass} hidden xl:table-cell`}> <TableCell className={`${borderedCellClass} hidden xl:table-cell overflow-hidden`}>
<AssigneeCell ticket={ticket} /> <AssigneeCell ticket={ticket} />
</TableCell> </TableCell>
<TableCell className={cellClass}> <TableCell className={borderedCellClass}>
<div className="flex flex-col leading-tight"> <div className="flex flex-col items-center leading-tight text-center">
<span className="text-sm text-neutral-700"> <span className="text-sm text-neutral-700 whitespace-normal">
{`há cerca de ${formatDistanceToNowStrict(ticket.updatedAt, { locale: ptBR })}`} {`há ${formatDistanceToNowStrict(ticket.updatedAt, { locale: ptBR })}`}
</span> </span>
<span className="text-xs text-neutral-500"> <span className="text-xs text-neutral-500">
{format(ticket.updatedAt, "dd/MM/yyyy HH:mm")} {format(ticket.updatedAt, "dd/MM/yyyy HH:mm")}

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

@ -27,7 +27,7 @@ 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"
@ -319,7 +319,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
<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
)} )}

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",
}, },
} }