From 8dfb54c64ccfa40f5ab6463d8fd4b688c552d63a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Rafael=20Siqueira?=
 <osergiosiqueira@gmail.com>
Date: Mon, 26 Jan 2026 16:15:54 -0300
Subject: [PATCH] update ui to seats

---
 .../enrollments.tsx                           | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/admin.saladeaula.digital/app/routes/_.$orgid.payments.$id._index/enrollments.tsx b/apps/admin.saladeaula.digital/app/routes/_.$orgid.payments.$id._index/enrollments.tsx
index 66e61c3..7809201 100644
--- a/apps/admin.saladeaula.digital/app/routes/_.$orgid.payments.$id._index/enrollments.tsx
+++ b/apps/admin.saladeaula.digital/app/routes/_.$orgid.payments.$id._index/enrollments.tsx
@@ -7,6 +7,7 @@ import {
   HelpCircleIcon,
   type LucideIcon
 } from 'lucide-react'
+import { Fragment } from 'react'
 
 import { Abbr } from '@repo/ui/components/abbr'
 import { DateTime } from '@repo/ui/components/datetime'
@@ -26,6 +27,7 @@ import {
   HoverCardContent,
   HoverCardTrigger
 } from '@repo/ui/components/ui/hover-card'
+import { Kbd } from '@repo/ui/components/ui/kbd'
 import {
   Popover,
   PopoverContent,
@@ -160,7 +162,7 @@ const reasons: Record<string, string> = {
   DEDUPLICATION: 'Matrícula ou agendamento já existentes.',
   CANCELLATION: 'Cancelamento da matrícula.',
   UNSCHEDULED: 'Cancelamento do agendamento da matrícula.',
-  DEADLINE: 'Data do agendamento é anterior ao dia atual.'
+  DEADLINE: 'Data do agendamento é anterior ao dia do pagamento.'
 } as const
 
 const reason = (reason_: string): string | null => {
@@ -221,7 +223,7 @@ function SeatsMenu({ seats: seats_ }: { seats: Seat[] }) {
           <EllipsisIcon />
         </Button>
       </PopoverTrigger>
-      <PopoverContent align="end" className="w-82 ">
+      <PopoverContent align="end" className="w-82">
         <div className="grid gap-4">
           {seats.length > 0 ? (
             <>
@@ -232,15 +234,18 @@ function SeatsMenu({ seats: seats_ }: { seats: Seat[] }) {
                 </p>
               </div>
 
-              <ul className="text-sm space-y-1.5">
+              <div className="text-sm grid grid-cols-[1fr_15%] gap-1">
                 {seats.map(({ course, quantity }, idx) => {
                   return (
-                    <li key={idx}>
-                      {quantity}x {course.name}
-                    </li>
+                    <Fragment key={idx}>
+                      <Abbr>{course.name}</Abbr>
+                      <div className="flex justify-end">
+                        <Kbd>{quantity}x</Kbd>
+                      </div>
+                    </Fragment>
                   )
                 })}
-              </ul>
+              </div>
             </>
           ) : (
             <p className="text-sm text-muted-foreground">