add reason hover card

apps/admin.saladeaula.digital/app/routes/_.$orgid.payments.$id._index/enrollments.tsx

@@ -21,6 +21,11 @@ import {
   CardHeader,
   CardTitle
 } from '@repo/ui/components/ui/card'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+} from '@repo/ui/components/ui/hover-card'
 import {
   Popover,
   PopoverContent,
@@ -54,8 +59,8 @@ export function Enrollments({
       <CardHeader>
         <CardTitle className="text-xl">Matrículas relacionadas</CardTitle>
         <CardDescription>
-          Acompanhe o status e os detalhes de todas as matrículas relacionadas a
-          esta compra.
+          Acompanhe os detalhes de todas as matrículas relacionadas a esta
+          compra.
         </CardDescription>
 
         <CardAction>
@@ -64,18 +69,17 @@ export function Enrollments({
       </CardHeader>
 
       <CardContent>
-        <Table className="pointer-events-none">
-          <TableHeader>
+        <Table>
+          <TableHeader className="pointer-events-none">
             <TableRow>
               <TableHead>Colaborador</TableHead>
               <TableHead>Curso</TableHead>
               <TableHead>Status</TableHead>
               <TableHead>Executada em</TableHead>
-              {/*<TableHead>Agendada em</TableHead>*/}
               <TableHead>Revogada em</TableHead>
             </TableRow>
           </TableHeader>
-          <TableBody>
+          <TableBody className="[&_tr]:hover:bg-transparent">
             {enrollments.map(
               (
                 {
@@ -83,11 +87,13 @@ export function Enrollments({
                   course,
                   status,
                   executed_at,
-                  // scheduled_at,
-                  rollback_at
+                  rollback_at,
+                  reason: reason_
                 },
                 idx
               ) => {
+                const friendlyReason = reason_ ? reason(reason_) : null
+
                 return (
                   <TableRow key={idx}>
                     <TableCell>
@@ -112,18 +118,28 @@ export function Enrollments({
                       <Abbr>{course.name}</Abbr>
                     </TableCell>
                     <TableCell>
-                      <Status status={status} />
+                      {friendlyReason ? (
+                        <HoverCard openDelay={10} closeDelay={100}>
+                          <HoverCardTrigger>
+                            <Status status={status} />
+                          </HoverCardTrigger>
+                          <HoverCardContent align="end" className="text-sm">
+                            <p className="flex gap-1">
+                              <HelpCircleIcon className="size-4.5 mt-px" />{' '}
+                              {friendlyReason}
+                            </p>
+                          </HoverCardContent>
+                        </HoverCard>
+                      ) : (
+                        <Status status={status} />
+                      )}
                     </TableCell>
                     <TableCell>
                       {executed_at ? (
                         <DateTime options={dtOptions}>{executed_at}</DateTime>
                       ) : null}
                     </TableCell>
-                    {/*<TableCell>
-                      {scheduled_at ? (
-                        <DateTime options={dtOptions}>{scheduled_at}</DateTime>
-                      ) : null}
-                    </TableCell>*/}
+
                     <TableCell>
                       {rollback_at ? (
                         <DateTime options={dtOptions}>{rollback_at}</DateTime>
@@ -140,6 +156,17 @@ export function Enrollments({
   )
 }
 
+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.'
+} as const
+
+const reason = (reason_: string): string | null => {
+  return reason_ in reasons ? reasons[reason_] : null
+}
+
 const statuses: Record<string, { icon: LucideIcon; color?: string }> = {
   PENDING: {
     icon: CircleDashedIcon,
@@ -206,9 +233,9 @@ function SeatsMenu({ seats: seats_ }: { seats: Seat[] }) {
               </div>
 
               <ul className="text-sm space-y-1.5">
-                {seats.map(({ course, quantity }) => {
+                {seats.map(({ course, quantity }, idx) => {
                   return (
-                    <li>
+                    <li key={idx}>
                       {quantity}x {course.name}
                     </li>
                   )