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

style: align badges in dashboard tickets panel

Browse source 
Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
This commit is contained in:
esdrasrenan 2025-10-05 02:19:21 -03:00
parent 0abb425d51
commit d73b1e4468
1 changed files with 15 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

24
web/src/components/tickets/recent-tickets-panel.tsx
View file

@ -31,7 +31,7 @@ const channelLabel: Record<string, string> = {
function TicketRow({ ticket }: { ticket: Ticket }) {
return (
<div className="rounded-xl border border-slate-200 bg-white/60 p-4 transition hover:border-slate-300 hover:bg-white">
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
<div className="min-w-0 space-y-2">
<div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
<span className="text-neutral-900">#{ticket.reference}</span>
@ -51,19 +51,25 @@ function TicketRow({ ticket }: { ticket: Ticket }) {
<span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
</div>
</div>
<div className="flex shrink-0 flex-col items-stretch gap-2 text-right">
<TicketStatusBadge status={ticket.status} />
<TicketPriorityPill priority={ticket.priority} />
<div className="flex flex-wrap justify-end gap-2 text-xs">
<Badge className={metaBadgeClass}>{channelLabel[ticket.channel] ?? ticket.channel}</Badge>
<Badge className={metaBadgeClass}>{ticket.assignee?.name ?? "Sem responsável"}</Badge>
<div className="flex shrink-0 flex-col gap-3 text-right md:w-[240px]">
<div className="flex flex-wrap justify-end gap-2">
<TicketStatusBadge status={ticket.status} />
<TicketPriorityPill priority={ticket.priority} />
</div>
<div className="grid gap-2 text-xs text-neutral-600">
<div className="flex flex-wrap justify-end gap-x-2 gap-y-1">
<Badge className={metaBadgeClass}>{channelLabel[ticket.channel] ?? ticket.channel}</Badge>
<Badge className={metaBadgeClass}>{ticket.assignee?.name ?? "Sem responsável"}</Badge>
</div>
{ticket.category ? (
<Badge className="inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-3 py-1 text-[11px] font-semibold text-[#02414d]">
<Badge className="ml-auto inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-3 py-1 text-[11px] font-semibold text-[#02414d]">
{ticket.category.name}
{ticket.subcategory ? ` • ${ticket.subcategory.name}` : ""}
</Badge>
) : (
<Badge className={metaBadgeClass}>Sem categoria</Badge>
<Badge className="ml-auto inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-[11px] font-semibold text-neutral-700">
Sem categoria
</Badge>
)}
</div>
</div>