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

Align status and priority badges in recent tickets

Browse source
This commit is contained in:
Esdras Renan 2025-10-13 17:14:13 -03:00
parent 490ff1a219
commit 4c987d4447
2 changed files with 23 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -28,9 +28,10 @@ const channelLabel: Record<string, string> = {
} }
function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean }) { function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean }) {
const channel = channelLabel[ticket.channel] ?? ticket.channel
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 channel = channelLabel[ticket.channel] ?? ticket.channel
return ( return (
<div <div
@ -46,9 +47,9 @@ function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean })
<span className="text-base font-semibold text-neutral-800">#{ticket.reference}</span> <span className="text-base font-semibold text-neutral-800">#{ticket.reference}</span>
<span className="truncate text-neutral-500">{queueLabel}</span> <span className="truncate text-neutral-500">{queueLabel}</span>
</div> </div>
<div className="flex flex-col items-end gap-2 text-right"> <div className="flex items-center gap-2 text-right">
<TicketStatusBadge status={ticket.status} /> <TicketStatusBadge status={ticket.status} className="h-7 px-3 text-xs" />
<TicketPriorityPill priority={ticket.priority} className="h-7 px-3" /> <TicketPriorityPill priority={ticket.priority} className="h-7 px-3 text-xs" />
</div> </div>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
@ -62,16 +63,22 @@ 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>
<span className="rounded-md border border-dashed border-slate-300 bg-slate-50 px-2 py-0.5 text-[11px] font-medium text-slate-600"> {categoryBadges.length > 0 ? (
{ticket.category ? ticket.category.name : channel} <div className="flex flex-wrap items-center gap-2 text-xs text-neutral-600">
{categoryBadges.map((label) => (
<span
key={label}
className="rounded-md border border-dashed border-slate-300 bg-slate-50 px-2 py-0.5 text-[11px] font-medium text-slate-600"
>
{label}
</span> </span>
))}
</div> </div>
<div className="flex shrink-0 flex-col justify-between gap-2 text-right md:w-[200px]"> ) : (
{ticket.subcategory ? (
<span className="rounded-md border border-dashed border-slate-300 bg-slate-50 px-2 py-0.5 text-[11px] font-medium text-slate-600"> <span className="rounded-md border border-dashed border-slate-300 bg-slate-50 px-2 py-0.5 text-[11px] font-medium text-slate-600">
{ticket.subcategory.name} {channel}
</span> </span>
) : null} )}
</div> </div>
</div> </div>
</div> </div>

6
src/components/tickets/status-badge.tsx
View file

@ -11,13 +11,13 @@ const statusStyles: Record<TicketStatus, { label: string; className: string }> =
RESOLVED: { label: "Resolvido", className: "border border-slate-200 bg-[#dcf4eb] text-[#1f6a45]" }, RESOLVED: { label: "Resolvido", className: "border border-slate-200 bg-[#dcf4eb] text-[#1f6a45]" },
} }
type TicketStatusBadgeProps = { status: TicketStatus } type TicketStatusBadgeProps = { status: TicketStatus; className?: string }
export function TicketStatusBadge({ status }: TicketStatusBadgeProps) { export function TicketStatusBadge({ status, className }: TicketStatusBadgeProps) {
const parsed = ticketStatusSchema.parse(status) const parsed = ticketStatusSchema.parse(status)
const styles = statusStyles[parsed] const styles = statusStyles[parsed]
return ( return (
<Badge className={cn('inline-flex items-center rounded-full px-3 py-0.5 text-xs font-semibold', styles?.className)}> <Badge className={cn("inline-flex items-center rounded-full px-3 py-0.5 text-xs font-semibold", styles?.className, className)}>
{styles?.label ?? parsed} {styles?.label ?? parsed}
</Badge> </Badge>
) )