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

Ajusta estilo do painel de tickets recentes

Browse source
This commit is contained in:
Esdras Renan 2025-10-13 17:27:48 -03:00
parent 4c987d4447
commit 12c7fa23ae
1 changed files with 29 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,6 @@ import type { Id } from "@/convex/_generated/dataModel"
import { DEFAULT_TENANT_ID } from "@/lib/constants"
import { mapTicketsFromServerList } from "@/lib/mappers/ticket"
import type { Ticket } from "@/lib/schemas/ticket"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Skeleton } from "@/components/ui/skeleton"
import { TicketPriorityPill } from "@/components/tickets/priority-pill"
@ -32,56 +31,54 @@ function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean })
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
const badgeClass =
"rounded-lg border border-slate-300 px-3.5 py-1.5 text-sm font-medium text-slate-600 transition-colors"
return (
<div
<Link
href={`/tickets/${ticket.id}`}
className={cn(
"rounded-xl border border-slate-200 bg-white/70 px-5 py-4 transition-all duration-300 hover:border-slate-300 hover:bg-white",
"group block rounded-2xl border border-slate-200 bg-white/70 px-6 py-5 transition-all duration-300 hover:border-slate-300 hover:bg-white",
entering ? "recent-ticket-enter" : ""
)}
>
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<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="text-base font-semibold text-neutral-800">#{ticket.reference}</span>
<div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
<div className="min-w-0 space-y-3">
<div className="flex items-start justify-between gap-3">
<div className="flex flex-wrap items-center gap-2 text-sm font-medium text-neutral-500">
<span className="text-xl font-bold text-neutral-900">#{ticket.reference}</span>
<span className="truncate text-neutral-500">{queueLabel}</span>
</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" />
<TicketStatusBadge status={ticket.status} className="h-8 px-3.5 text-sm" />
<TicketPriorityPill priority={ticket.priority} className="h-8 px-3.5 text-sm" />
</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">
<div className="space-y-1.5">
<span className="line-clamp-1 text-[20px] font-semibold text-neutral-900 transition-colors group-hover:text-neutral-700">
{ticket.subject}
</Link>
<p className="line-clamp-2 text-sm text-neutral-600">{ticket.summary ?? "Sem descrição informada."}</p>
</span>
<p className="line-clamp-2 text-base text-neutral-600">{ticket.summary ?? "Sem descrição informada."}</p>
</div>
<div className="flex flex-wrap items-center gap-2 text-xs text-neutral-600">
<div className="flex flex-wrap items-center gap-2 text-sm text-neutral-600">
<span className="font-semibold text-neutral-700">{requesterName}</span>
<span className="text-neutral-400">•</span>
<span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
</div>
{categoryBadges.length > 0 ? (
<div className="flex flex-wrap items-center gap-2 text-xs text-neutral-600">
<div className="flex flex-wrap items-center gap-2 text-sm 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"
>
<span key={label} className={badgeClass}>
{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">
{channel}
</span>
<span className={badgeClass}>{channel}</span>
)}
</div>
</div>
</div>
</Link>
)
}
@ -134,7 +131,7 @@ export function RecentTicketsPanel() {
return (
<Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
<CardHeader className="pb-2">
<CardTitle className="text-base font-semibold text-neutral-900">Últimos chamados</CardTitle>
<CardTitle className="text-lg font-semibold text-neutral-900">Últimos chamados</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
{Array.from({ length: 4 }).map((_, index) => (
@ -151,10 +148,13 @@ export function RecentTicketsPanel() {
return (
<Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
<CardHeader className="flex flex-row items-center justify-between pb-4">
<CardTitle className="text-base font-semibold text-neutral-900">Últimos chamados</CardTitle>
<Button asChild size="sm" variant="ghost" className="text-sm font-semibold text-[#006879] hover:bg-[#00e8ff]/10">
<Link href="/tickets">Ver todos</Link>
</Button>
<CardTitle className="text-lg font-semibold text-neutral-900">Últimos chamados</CardTitle>
<Link
href="/tickets"
className="text-sm font-semibold text-[#006879] underline-offset-4 transition-colors hover:text-[#004d5a] hover:underline"
>
Ver todos
</Link>
</CardHeader>
<CardContent className="space-y-3">
{tickets.length === 0 ? (