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

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

33
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 }) {
const channel = channelLabel[ticket.channel] ?? ticket.channel
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
return (
<div
@ -46,10 +47,10 @@ function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean })
<span className="text-base font-semibold text-neutral-800">#{ticket.reference}</span>
<span className="truncate text-neutral-500">{queueLabel}</span>
</div>
<div className="flex flex-col items-end gap-2 text-right">
<TicketStatusBadge status={ticket.status} />
<TicketPriorityPill priority={ticket.priority} className="h-7 px-3" />
</div>
<div className="flex items-center gap-2 text-right">
<TicketStatusBadge status={ticket.status} className="h-7 px-3 text-xs" />
<TicketPriorityPill priority={ticket.priority} className="h-7 px-3 text-xs" />
</div>
</div>
<div className="space-y-1">
<Link href={`/tickets/${ticket.id}`} className="line-clamp-1 text-lg font-semibold text-neutral-900 transition hover:text-neutral-700">
@ -62,16 +63,22 @@ function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean })
<span className="text-neutral-400">•</span>
<span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
</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">
{ticket.category ? ticket.category.name : channel}
</span>
</div>
<div className="flex shrink-0 flex-col justify-between gap-2 text-right md:w-[200px]">
{ticket.subcategory ? (
{categoryBadges.length > 0 ? (
<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>
))}
</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">
{ticket.subcategory.name}
{channel}
</span>
) : null}
)}
</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]" },
}
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 styles = statusStyles[parsed]
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}
</Badge>
)