add alertt

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.buy/route.tsx

@@ -1,7 +1,12 @@
 import type { Route } from './+types/route'
 
 import { useMount } from 'ahooks'
-import { BookSearchIcon, CircleCheckBigIcon, WalletIcon } from 'lucide-react'
+import {
+  BookSearchIcon,
+  CircleCheckBigIcon,
+  MegaphoneIcon,
+  WalletIcon
+} from 'lucide-react'
 import { use, useEffect, useState } from 'react'
 import { Link, redirect, useFetcher } from 'react-router'
 
@@ -22,6 +27,14 @@ import {
   CardHeader,
   CardTitle
 } from '@repo/ui/components/ui/card'
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle
+} from '@repo/ui/components/ui/item'
 import { Label } from '@repo/ui/components/ui/label'
 import { Switch } from '@repo/ui/components/ui/switch'
 import { createSearch } from '@repo/util/meili'
@@ -32,6 +45,7 @@ import { Wizard, WizardStep } from '@/components/wizard'
 import { useWorksapce } from '@/components/workspace-switcher'
 import { INTERNAL_EMAIL_DOMAIN } from '@/conf'
 import { workspaceContext } from '@/middleware/workspace'
+import { Button } from '@repo/ui/components/ui/button'
 import type { Course } from '../_.$orgid.enrollments.add/data'
 import { Assigned } from './assigned'
 import { Bulk } from './bulk'
@@ -96,16 +110,13 @@ export async function action({ request, context }: Route.ActionArgs) {
 export default function Route({
   loaderData: { courses, seats: seats_ }
 }: Route.ComponentProps) {
+  const seats = use(seats_)
   const fetcher = useFetcher()
   const [mounted, setMounted] = useState(false)
   const { address } = useWorksapce()
   const { index, kind, setIndex, setKind, reset, update, ...state } =
     useWizardStore()
 
-  // @TODO
-  const seats = use(seats_)
-  console.log(seats)
-
   const onSubmit = async () => {
     const items = state.items.map(({ course, quantity }) => ({
       ...course,
@@ -148,7 +159,29 @@ export default function Route({
         </BreadcrumbList>
       </Breadcrumb>
 
-      <div className="lg:max-w-4xl mx-auto">
+      <div className="lg:max-w-4xl space-y-4 mx-auto">
+        {seats?.items?.length > 0 && (
+          <Item
+            variant="outline"
+            className="border-dashed bg-green-600/10 border-green-800"
+          >
+            <ItemMedia variant="icon">
+              <MegaphoneIcon />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Matrículas em aberto</ItemTitle>
+              <ItemDescription>
+                Existem matrículas em aberto de cursos já adquiridos e
+                disponíveis para uso.
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Button size="sm" asChild>
+                <Link to="../enrollments/seats">Matricular agora</Link>
+              </Button>
+            </ItemActions>
+          </Item>
+        )}
         <Card>
           <CardHeader>
             <CardTitle className="text-2xl">Comprar matrículas</CardTitle>