add enrollments to order

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

@@ -0,0 +1,168 @@
+import {
+  BanIcon,
+  CheckCircle2Icon,
+  CircleDashedIcon,
+  ClockIcon,
+  HelpCircleIcon,
+  type LucideIcon
+} from 'lucide-react'
+
+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 {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@repo/ui/components/ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@repo/ui/components/ui/table'
+import { cn, initials } from '@repo/ui/lib/utils'
+import type { Enrollment, Seat } from './route'
+
+const dtOptions: Intl.DateTimeFormatOptions = {
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit'
+}
+
+export function Enrollments({
+  enrollments,
+  seats
+}: {
+  enrollments: Enrollment[]
+  seats: Seat[]
+}) {
+  return (
+    <Card className="lg:max-w-4xl mx-auto">
+      <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.
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <Table className="pointer-events-none">
+          <TableHeader>
+            <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>
+            {enrollments.map(
+              (
+                {
+                  user,
+                  course,
+                  status,
+                  executed_at,
+                  scheduled_at,
+                  rollback_at
+                },
+                idx
+              ) => {
+                return (
+                  <TableRow key={idx}>
+                    <TableCell>
+                      <div className="flex gap-2.5 items-center">
+                        <Avatar className="size-10 hidden lg:block">
+                          <AvatarFallback className="border">
+                            {initials(user.name)}
+                          </AvatarFallback>
+                        </Avatar>
+
+                        <ul>
+                          <li className="font-bold">
+                            <Abbr>{user.name}</Abbr>
+                          </li>
+                          <li className="text-muted-foreground text-sm">
+                            <Abbr>{user.email}</Abbr>
+                          </li>
+                        </ul>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Abbr>{course.name}</Abbr>
+                    </TableCell>
+                    <TableCell>
+                      <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>
+                      ) : null}
+                    </TableCell>
+                  </TableRow>
+                )
+              }
+            )}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  )
+}
+
+const statuses: Record<string, { icon: LucideIcon; color?: string }> = {
+  PENDING: {
+    icon: CircleDashedIcon,
+    color: 'text-blue-400 [&_svg]:text-blue-500'
+  },
+  SCHEDULED: {
+    icon: ClockIcon,
+    color: 'text-blue-400 [&_svg]:text-blue-500'
+  },
+  EXECUTED: {
+    icon: CheckCircle2Icon,
+    color: 'text-green-400 [&_svg]:text-green-500'
+  },
+  ROLLBACK: {
+    icon: BanIcon,
+    color: 'text-orange-400 [&_svg]:text-orange-500'
+  }
+}
+
+const labels: Record<string, string> = {
+  PENDING: 'Pendente',
+  EXECUTED: 'Executado',
+  SCHEDULED: 'Agendado',
+  ROLLBACK: 'Revogado'
+}
+
+function Status({ status: s }: { status: string }) {
+  const status = labels[s] ?? s
+  const { icon: Icon, color } = statuses?.[s] ?? { icon: HelpCircleIcon }
+
+  return (
+    <Badge variant="outline" className={cn(color, 'px-1.5')}>
+      <Icon className={cn('stroke-2', color)} />
+      {status}
+    </Badge>
+  )
+}