finish add enrollment from seat:wqs

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

@@ -1,48 +1,48 @@
-import { Fragment, useEffect } from 'react'
-import {
-  Trash2Icon,
-  PlusIcon,
-  CircleQuestionMarkIcon,
-  ArrowRightIcon
-} from 'lucide-react'
-import { useForm, useFieldArray, Controller, useWatch } from 'react-hook-form'
-import { useParams } from 'react-router'
 import { ErrorMessage } from '@hookform/error-message'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
-import { DateTime } from 'luxon'
-
-import { Form } from '@repo/ui/components/ui/form'
 import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput
-} from '@repo/ui/components/ui/input-group'
+  ArrowRightIcon,
+  CircleQuestionMarkIcon,
+  PlusIcon,
+  Trash2Icon
+} from 'lucide-react'
+import { DateTime } from 'luxon'
+import { Fragment, use, useEffect } from 'react'
+import { Controller, useFieldArray, useForm, useWatch } from 'react-hook-form'
+import { useParams } from 'react-router'
+import { z } from 'zod'
+
 import { Button } from '@repo/ui/components/ui/button'
-import { Separator } from '@repo/ui/components/ui/separator'
-import { Kbd } from '@repo/ui/components/ui/kbd'
-import { Spinner } from '@repo/ui/components/ui/spinner'
+import { Form } from '@repo/ui/components/ui/form'
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger
 } from '@repo/ui/components/ui/hover-card'
-
-import { TZ } from '@/conf'
 import {
-  MAX_ITEMS,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput
+} from '@repo/ui/components/ui/input-group'
+import { Kbd } from '@repo/ui/components/ui/kbd'
+import { Separator } from '@repo/ui/components/ui/separator'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+
+import { useWizard } from '@/components/wizard'
+import { TZ } from '@/conf'
+import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
+import {
   formSchema,
+  MAX_ITEMS,
   type Course,
   type User
 } from '../_.$orgid.enrollments.add/data'
-import { ScheduledForInput } from '../_.$orgid.enrollments.add/scheduled-for'
 import { Cell } from '../_.$orgid.enrollments.add/route'
-import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
+import { ScheduledForInput } from '../_.$orgid.enrollments.add/scheduled-for'
 import { UserPicker } from '../_.$orgid.enrollments.add/user-picker'
 import { Summary } from './bulk'
-import { currency } from './utils'
-import { useWizard } from '@/components/wizard'
 import { useWizardStore } from './store'
+import { currency } from './utils'
 
 const emptyRow = {
   user: undefined,
@@ -56,8 +56,9 @@ type AssignedProps = {
   courses: Promise<{ hits: Course[] }>
 }
 
-export function Assigned({ courses }: AssignedProps) {
+export function Assigned({ courses: courses_ }: AssignedProps) {
   const wizard = useWizard()
+  const { hits: courses } = use(courses_)
   const { orgid } = useParams()
   const { update, ...state } = useWizardStore()
   const form = useForm({
@@ -76,7 +77,7 @@ export function Assigned({ courses }: AssignedProps) {
     }
   })
 
-  const { formState, control, handleSubmit, setValue } = form
+  const { formState, control, handleSubmit } = form
   const { fields, remove, append } = useFieldArray({
     control,
     name: 'enrollments'