update ui to seats

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">