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

Fine-tune recent ticket badges

Browse source
This commit is contained in:
Esdras Renan 2025-10-13 17:10:27 -03:00
parent 5785322c07
commit 490ff1a219
2 changed files with 17 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/tickets/priority-pill.tsx
View file

@ -3,12 +3,12 @@ import { Badge } from "@/components/ui/badge"
import { cn } from "@/lib/utils"
import { PriorityIcon, priorityStyles } from "@/components/tickets/priority-select"
const baseClass = "inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm font-semibold"
const baseClass = "inline-flex h-7 items-center gap-2 rounded-full px-3 text-xs font-semibold"
export function TicketPriorityPill({ priority }: { priority: TicketPriority }) {
export function TicketPriorityPill({ priority, className }: { priority: TicketPriority; className?: string }) {
const styles = priorityStyles[priority]
return (
<Badge className={cn(baseClass, styles?.badgeClass)}>
<Badge className={cn(baseClass, styles?.badgeClass, className)}>
<PriorityIcon value={priority} />
{styles?.label ?? priority}
</Badge>

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

@ -43,12 +43,13 @@ function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean })
<div className="min-w-0 space-y-2">
<div className="flex items-start justify-between gap-2">
<div className="flex flex-wrap items-center gap-2 text-xs font-medium text-neutral-500">
<span className="font-semibold text-neutral-800">#{ticket.reference}</span>
<span className="rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
{queueLabel}
</span>
<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>
<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">
@ -61,23 +62,18 @@ function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean })
<span className="text-neutral-400">•</span>
<span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
</div>
<div className="flex flex-wrap items-center gap-2 text-xs text-neutral-600">
<span className="rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">{channel}</span>
<span className="rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
{ticket.assignee?.name ?? "Sem responsável"}
<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>
{ticket.category ? (
<span className="rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
{ticket.category.name}
{ticket.subcategory ? ` · ${ticket.subcategory.name}` : ""}
</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">
{ticket.subcategory.name}
</span>
) : null}
</div>
</div>
<div className="flex shrink-0 flex-col justify-between gap-3 text-right md:w-[200px]">
<TicketPriorityPill priority={ticket.priority} />
</div>
</div>
</div>
)
}