add seats

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

@@ -3,6 +3,7 @@ import {
   CheckCircle2Icon,
   CircleDashedIcon,
   ClockIcon,
+  EllipsisIcon,
   HelpCircleIcon,
   type LucideIcon
 } from 'lucide-react'
@@ -11,13 +12,20 @@ import { Abbr } from '@repo/ui/components/abbr'
 import { DateTime } from '@repo/ui/components/datetime'
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
 import { Badge } from '@repo/ui/components/ui/badge'
+import { Button } from '@repo/ui/components/ui/button'
 import {
   Card,
+  CardAction,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle
 } from '@repo/ui/components/ui/card'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@repo/ui/components/ui/popover'
 import {
   Table,
   TableBody,
@@ -50,6 +58,10 @@ export function Enrollments({
           Acompanhe o status e os detalhes de todas as matrículas relacionadas a
           esta compra.
         </CardDescription>
+
+        <CardAction>
+          <SeatsMenu seats={seats} />
+        </CardAction>
       </CardHeader>
 
       <CardContent>
@@ -149,7 +161,7 @@ const statuses: Record<string, { icon: LucideIcon; color?: string }> = {
 }
 
 const labels: Record<string, string> = {
-  PENDING: 'Pendente',
+  PENDING: 'Aguardando',
   EXECUTED: 'Executado',
   SCHEDULED: 'Agendado',
   ROLLBACK: 'Revogado'
@@ -166,3 +178,51 @@ function Status({ status: s }: { status: string }) {
     </Badge>
   )
 }
+
+function SeatsMenu({ seats: seats_ }: { seats: Seat[] }) {
+  const seats = Object.values(
+    seats_.reduce((acc: any, { course }) => {
+      acc[course.id] ??= { course, quantity: 0 }
+      acc[course.id].quantity++
+      return acc
+    }, {})
+  ) as { course: Seat['course']; quantity: number }[]
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="icon-sm" className="cursor-pointer">
+          <EllipsisIcon />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-82 ">
+        <div className="grid gap-4">
+          {seats.length > 0 ? (
+            <>
+              <div className="space-y-2">
+                <h4 className="leading-none font-medium">Matrículas abertas</h4>
+                <p className="text-muted-foreground text-sm">
+                  Matrículas que estão abertas e relacionadas a esta compra.
+                </p>
+              </div>
+
+              <ul className="text-sm space-y-1.5">
+                {seats.map(({ course, quantity }) => {
+                  return (
+                    <li>
+                      {quantity}x {course.name}
+                    </li>
+                  )
+                })}
+              </ul>
+            </>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              Nenhuma matrícula aberta foi encontrada para esta compra.
+            </p>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}