style: refresh ticket ui components
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
esdrasrenan
parent
5c16ab75a6
commit
744d5933d4
16 changed files with 718 additions and 650 deletions
|
|
@ -30,10 +30,13 @@ const channelLabel: Record<string, string> = {
|
|||
}
|
||||
|
||||
const cellClass = "py-4 align-top"
|
||||
const queueBadgeClass = "inline-flex items-center rounded-full border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-neutral-700"
|
||||
const channelBadgeClass = "inline-flex items-center gap-2 rounded-full border border-[#00c4d7]/40 bg-[#00e8ff]/15 px-2.5 py-1 text-xs font-semibold text-neutral-900"
|
||||
const tagBadgeClass = "inline-flex items-center rounded-full border border-slate-200 bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-neutral-700"
|
||||
|
||||
function AssigneeCell({ ticket }: { ticket: Ticket }) {
|
||||
if (!ticket.assignee) {
|
||||
return <span className="text-sm text-muted-foreground">Sem responsável</span>
|
||||
return <span className="text-sm text-neutral-600">Sem responsável</span>
|
||||
}
|
||||
|
||||
const initials = ticket.assignee.name
|
||||
|
|
@ -44,15 +47,15 @@ function AssigneeCell({ ticket }: { ticket: Ticket }) {
|
|||
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar className="size-8">
|
||||
<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-medium leading-none text-foreground">
|
||||
<span className="text-sm font-semibold leading-none text-neutral-900">
|
||||
{ticket.assignee.name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
<span className="text-xs text-neutral-600">
|
||||
{ticket.assignee.teams?.[0] ?? "Agente"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -60,17 +63,17 @@ function AssigneeCell({ ticket }: { ticket: Ticket }) {
|
|||
)
|
||||
}
|
||||
|
||||
type TicketsTableProps = {
|
||||
export type TicketsTableProps = {
|
||||
tickets?: Ticket[]
|
||||
}
|
||||
|
||||
export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
|
||||
return (
|
||||
<Card className="border bg-card/90 shadow-sm">
|
||||
<Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||
<CardContent className="px-4 py-4 sm:px-6">
|
||||
<Table className="min-w-full">
|
||||
<TableHeader>
|
||||
<TableRow className="text-xs uppercase tracking-wide text-muted-foreground">
|
||||
<TableRow className="text-[11px] uppercase tracking-wide text-neutral-500">
|
||||
<TableHead className="w-[110px]">Ticket</TableHead>
|
||||
<TableHead>Assunto</TableHead>
|
||||
<TableHead className="hidden lg:table-cell">Fila</TableHead>
|
||||
|
|
@ -83,16 +86,16 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
|
|||
</TableHeader>
|
||||
<TableBody>
|
||||
{tickets.map((ticket) => (
|
||||
<TableRow key={ticket.id} className="group hover:bg-muted/40">
|
||||
<TableRow key={ticket.id} className="group border-b border-slate-100 transition hover:bg-[#00e8ff]/8">
|
||||
<TableCell className={cellClass}>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<Link
|
||||
href={`/tickets/${ticket.id}`}
|
||||
className="font-semibold tracking-tight text-primary hover:underline"
|
||||
className="font-semibold tracking-tight text-neutral-900 hover:text-[#00b8ce]"
|
||||
>
|
||||
#{ticket.reference}
|
||||
</Link>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
<span className="text-xs text-neutral-500">
|
||||
{ticket.queue ?? "Sem fila"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -101,21 +104,17 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
|
|||
<div className="flex flex-col gap-1">
|
||||
<Link
|
||||
href={`/tickets/${ticket.id}`}
|
||||
className="line-clamp-1 font-medium text-foreground hover:underline"
|
||||
className="line-clamp-1 font-semibold text-neutral-900 hover:text-[#00b8ce]"
|
||||
>
|
||||
{ticket.subject}
|
||||
</Link>
|
||||
<span className="line-clamp-1 text-sm text-muted-foreground">
|
||||
<span className="line-clamp-1 text-sm text-neutral-600">
|
||||
{ticket.summary ?? "Sem resumo"}
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
|
||||
<span>{ticket.requester.name}</span>
|
||||
<div className="flex flex-wrap gap-2 text-xs text-neutral-500">
|
||||
<span className="font-medium text-neutral-900">{ticket.requester.name}</span>
|
||||
{ticket.tags?.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="outline"
|
||||
className="rounded-full border-transparent bg-slate-100 px-2 py-1 text-xs text-slate-600"
|
||||
>
|
||||
<Badge key={tag} className={tagBadgeClass}>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
|
|
@ -123,12 +122,11 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
|
|||
</div>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} hidden lg:table-cell`}>
|
||||
<Badge className="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">
|
||||
{ticket.queue ?? "Sem fila"}
|
||||
</Badge>
|
||||
<Badge className={queueBadgeClass}>{ticket.queue ?? "Sem fila"}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className={`${cellClass} hidden md:table-cell`}>
|
||||
<Badge className="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-600">
|
||||
<Badge className={channelBadgeClass}>
|
||||
<span className="inline-block size-2 rounded-full border border-[#009bb1] bg-[#00e8ff]" />
|
||||
{channelLabel[ticket.channel] ?? ticket.channel}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
|
|
@ -139,8 +137,8 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
|
|||
<div className="flex flex-col gap-1">
|
||||
<TicketStatusBadge status={ticket.status} />
|
||||
{ticket.metrics?.timeWaitingMinutes ? (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Espera {ticket.metrics.timeWaitingMinutes} min
|
||||
<span className="text-xs text-neutral-500">
|
||||
Em espera há {ticket.metrics.timeWaitingMinutes} min
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
@ -149,11 +147,8 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
|
|||
<AssigneeCell ticket={ticket} />
|
||||
</TableCell>
|
||||
<TableCell className={cellClass}>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{formatDistanceToNow(ticket.updatedAt, {
|
||||
addSuffix: true,
|
||||
locale: ptBR,
|
||||
})}
|
||||
<span className="text-sm text-neutral-500">
|
||||
{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}
|
||||
</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -164,10 +159,10 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
|
|||
<Empty className="my-6">
|
||||
<EmptyHeader>
|
||||
<EmptyMedia variant="icon">
|
||||
<span className="inline-block size-3 rounded-full bg-muted-foreground/40" />
|
||||
<span className="inline-block size-3 rounded-full border border-slate-300 bg-[#00e8ff]" />
|
||||
</EmptyMedia>
|
||||
<EmptyTitle>Nenhum ticket encontrado</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
<EmptyTitle className="text-neutral-900">Nenhum ticket encontrado</EmptyTitle>
|
||||
<EmptyDescription className="text-neutral-600">
|
||||
Ajuste os filtros ou crie um novo ticket.
|
||||
</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
|
|
@ -179,11 +174,4 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
|
|||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue