Ajusta estilo do painel de tickets recentes

src/components/tickets/recent-tickets-panel.tsx

@@ -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="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-        <div className="min-w-0 space-y-2">
+        <div className="min-w-0 space-y-3">
-          <div className="flex items-start justify-between gap-2">
+          <div className="flex items-start justify-between gap-3">
-            <div className="flex flex-wrap items-center gap-2 text-xs font-medium text-neutral-500">
+            <div className="flex flex-wrap items-center gap-2 text-sm font-medium text-neutral-500">
-              <span className="text-base font-semibold text-neutral-800">#{ticket.reference}</span>
+              <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" />
+              <TicketStatusBadge status={ticket.status} className="h-8 px-3.5 text-sm" />
-              <TicketPriorityPill priority={ticket.priority} className="h-7 px-3 text-xs" />
+              <TicketPriorityPill priority={ticket.priority} className="h-8 px-3.5 text-sm" />
             </div>
           </div>
-          <div className="space-y-1">
+          <div className="space-y-1.5">
-            <Link href={`/tickets/${ticket.id}`} className="line-clamp-1 text-lg font-semibold text-neutral-900 transition hover:text-neutral-700">
+            <span className="line-clamp-1 text-[20px] font-semibold text-neutral-900 transition-colors group-hover:text-neutral-700">
               {ticket.subject}
-            </Link>
+            </span>
-            <p className="line-clamp-2 text-sm text-neutral-600">{ticket.summary ?? "Sem descrição informada."}</p>
+            <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
+                <span key={label} className={badgeClass}>
-                  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">
+            <span className={badgeClass}>{channel}</span>
-              {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>
+        <CardTitle className="text-lg 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
-          <Link href="/tickets">Ver todos</Link>
+          href="/tickets"
-        </Button>
+          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 ? (