finish add enrollment from seat:wqs

apps/admin.saladeaula.digital/app/middleware/workspace.ts

@@ -46,12 +46,15 @@ export const workspaceMiddleware = async (
   const user = context.get(userContext)!
 
   const cacheKey = buildWorkspaceCacheKey(request, user.sub, orgId)
+
+  try {
     const cached = await getWorkspaceFromCache(cacheKey)
 
     if (cached) {
       context.set(workspaceContext, cached)
       return next()
     }
+  } catch {}
 
   console.log(`[${new Date().toISOString()}] [${requestId}] Cache miss`)
 

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/course-picker.tsx

@@ -7,13 +7,7 @@ import {
   CheckIcon,
   ChevronsUpDownIcon
 } from 'lucide-react'
-import {
+import { forwardRef, useMemo, useState, type InputHTMLAttributes } from 'react'
-  forwardRef,
-  use,
-  useMemo,
-  useState,
-  type InputHTMLAttributes
-} from 'react'
 
 import { Button } from '@repo/ui/components/ui/button'
 import {
@@ -45,7 +39,7 @@ interface CoursePickerProps extends Omit<
   'value' | 'onChange'
 > {
   value?: Course
-  options: Promise<{ hits: any[] }>
+  options: any[]
   onChange?: (value: any) => void
   error?: any
 }
@@ -59,12 +53,11 @@ const normalize = (value: string) =>
 
 export const CoursePicker = forwardRef<HTMLInputElement, CoursePickerProps>(
   ({ value, onChange, options, error, ...props }, ref) => {
-    const { hits } = use(options)
     const [search, setSearch] = useState<string>('')
     const [open, { set }] = useToggle()
     const [sort, { toggle }] = useToggle('a-z', 'z-a')
     const fuse = useMemo(() => {
-      return new Fuse(hits, {
+      return new Fuse(options, {
         keys: ['name'],
         threshold: 0.3,
         includeMatches: true,
@@ -73,11 +66,11 @@ export const CoursePicker = forwardRef<HTMLInputElement, CoursePickerProps>(
           return typeof value === 'string' ? normalize(value) : value
         }
       })
-    }, [hits])
+    }, [options])
 
     const filtered = useMemo(() => {
       if (!search) {
-        return [...hits].sort((a, b) => {
+        return [...options].sort((a, b) => {
           const comparison = a.name.localeCompare(b.name)
           return sort === 'a-z' ? comparison : -comparison
         })
@@ -87,7 +80,7 @@ export const CoursePicker = forwardRef<HTMLInputElement, CoursePickerProps>(
         ...item,
         matches
       }))
-    }, [search, fuse, hits, sort])
+    }, [search, fuse, options, sort])
 
     return (
       <Popover open={open} onOpenChange={set}>
@@ -149,13 +142,15 @@ export const CoursePicker = forwardRef<HTMLInputElement, CoursePickerProps>(
                       name,
                       access_period,
                       metadata__unit_price: unit_price,
-                      quantity = null
+                      quantity = null,
+                      disabled = false
                     }) => {
                       return (
                         <CommandItem
                           key={id}
                           value={id}
                           className="cursor-pointer"
+                          disabled={disabled}
                           onSelect={() => {
                             onChange?.({
                               id,

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/data.ts

@@ -4,6 +4,7 @@ import { z } from 'zod'
 export const MAX_ITEMS = 50
 
 export const enrollment = z.object({
+  id: z.uuidv4().optional(),
   user: z
     .object(
       {
@@ -34,7 +35,8 @@ export const enrollment = z.object({
   scheduled_for: z
     .date()
     .optional()
-    .transform((date) => (date ? format(date, 'yyyy-MM-dd') : undefined))
+    .transform((date) => (date ? format(date, 'yyyy-MM-dd') : undefined)),
+  seat: z.object({ order_id: z.uuidv4() }).optional()
 })
 
 export const formSchema = z.object({

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

@@ -131,8 +131,9 @@ export async function action({ params, request, context }: Route.ActionArgs) {
 }
 
 export default function Route({
-  loaderData: { courses, submission }
+  loaderData: { courses: courses_, submission }
 }: Route.ComponentProps) {
+  const { hits: courses } = use(courses_)
   const { orgid } = useParams()
   const { enrolled } = use(submission)
   const fetcher = useFetcher()

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,
+  ArrowRightIcon,
-  InputGroupAddon,
+  CircleQuestionMarkIcon,
-  InputGroupInput
+  PlusIcon,
-} from '@repo/ui/components/ui/input-group'
+  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 { Form } from '@repo/ui/components/ui/form'
-import { Kbd } from '@repo/ui/components/ui/kbd'
-import { Spinner } from '@repo/ui/components/ui/spinner'
 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'

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

@@ -7,7 +7,7 @@ import {
   Trash2Icon,
   XIcon
 } from 'lucide-react'
-import { Fragment, useEffect } from 'react'
+import { Fragment, use, useEffect } from 'react'
 import { Controller, useFieldArray, useForm, useWatch } from 'react-hook-form'
 import { z } from 'zod'
 
@@ -64,7 +64,8 @@ type BulkProps = {
   courses: Promise<{ hits: Course[] }>
 }
 
-export function Bulk({ courses }: BulkProps) {
+export function Bulk({ courses: courses_ }: BulkProps) {
+  const { hits: courses } = use(courses_)
   const wizard = useWizard()
   const { update, ...state } = useWizardStore()
   const form = useForm({

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

@@ -44,7 +44,6 @@ import { HttpMethod, request as req } from '@repo/util/request'
 import { Step, StepItem, StepSeparator } from '@/components/step'
 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 { Spinner } from '@repo/ui/components/ui/spinner'

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

@@ -9,8 +9,8 @@ import {
   Trash2Icon
 } from 'lucide-react'
 import { Fragment, useMemo } from 'react'
-import { Controller, useFieldArray, useForm } from 'react-hook-form'
+import { Controller, useFieldArray, useForm, useWatch } from 'react-hook-form'
-import { Link, redirect, useParams } from 'react-router'
+import { Link, redirect, useFetcher, useParams } from 'react-router'
 
 import {
   Breadcrumb,
@@ -34,7 +34,9 @@ import {
   HoverCardTrigger
 } from '@repo/ui/components/ui/hover-card'
 import { Kbd } from '@repo/ui/components/ui/kbd'
-import { request as req } from '@repo/util/request'
+import { Separator } from '@repo/ui/components/ui/separator'
+import { Spinner } from '@repo/ui/components/ui/spinner'
+import { HttpMethod, request as req } from '@repo/util/request'
 
 import { workspaceContext } from '@/middleware/workspace'
 import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
@@ -42,6 +44,7 @@ import {
   formSchema,
   MAX_ITEMS,
   type Course,
+  type Schema,
   type User
 } from '../_.$orgid.enrollments.add/data'
 import {
@@ -57,9 +60,8 @@ export function meta({}: Route.MetaArgs) {
 }
 
 type Seat = {
-  id: string
+  order_id: string
-  pk: string
+  enrollment_id: string
-  course: Course
 }
 
 export async function loader({ request, params, context }: Route.LoaderArgs) {
@@ -75,13 +77,31 @@ export async function loader({ request, params, context }: Route.LoaderArgs) {
     context
   })
     .then((r) => r.json() as any)
-    .then(({ items }) => items as Seat[])
+    .then(({ items }) => items as { sk: string; course: Course }[])
 
   return { seats }
 }
 
+export async function action({ params, request, context }: Route.ActionArgs) {
+  const { orgid: org_id } = params
+  const body = (await request.json()) as object
+
+  const r = await req({
+    url: `enrollments`,
+    headers: new Headers({ 'Content-Type': 'application/json' }),
+    method: HttpMethod.POST,
+    body: JSON.stringify({ org_id, ...body }),
+    request,
+    context
+  })
+
+  const data = (await r.json()) as { sk: string }
+  return redirect(`/${org_id}/enrollments/${data.sk}/submitted`)
+}
+
 export default function Route({ loaderData: { seats } }: Route.ComponentProps) {
   const { orgid } = useParams()
+  const fetcher = useFetcher()
   const form = useForm({
     resolver: zodResolver(formSchema),
     defaultValues: { enrollments: [emptyRow] }
@@ -92,34 +112,80 @@ export default function Route({ loaderData: { seats } }: Route.ComponentProps) {
     name: 'enrollments'
   })
 
-  const courses = useMemo(
+  const enrollments = useWatch({
-    () =>
+    control,
-      Promise.resolve({
+    name: 'enrollments'
+  })
+
+  const usedSeatIds = useMemo(() => {
+    return new Set(enrollments?.map((e) => e.id).filter(Boolean))
+  }, [enrollments])
+
+  const seatsByCourse = useMemo(() => {
+    return seats.reduce<Record<string, Seat[]>>((acc, seat) => {
+      const courseId = seat.course.id
+      const [, order_id, , enrollment_id] = seat.sk.split('#')
+
+      if (!acc[courseId]) {
+        acc[courseId] = []
+      }
+
+      acc[courseId].push({ order_id, enrollment_id })
+      return acc
+    }, {})
+  }, [seats])
+
+  const usedSeatsByCourse = useMemo(() => {
+    const acc = new Map<string, number>()
+
+    seats.forEach((seat) => {
+      const [, , , enrollment_id] = seat.sk.split('#')
+
+      if (!usedSeatIds.has(enrollment_id)) {
+        return
+      }
+
+      const courseId = seat.course.id
+      acc.set(courseId, (acc.get(courseId) ?? 0) + 1)
+    })
+
+    return acc
+  }, [seats, usedSeatIds])
+
+  const courses = useMemo(() => {
+    return {
       hits: Array.from(
         seats
-            .reduce((map, { course }) => {
+          .reduce((acc, { course }) => {
-              const existing = map.get(course.id)
+            const existing = acc.get(course.id)
 
             if (existing) {
               existing.quantity += 1
             } else {
-                map.set(course.id, {
+              acc.set(course.id, {
                 ...course,
                 metadata__unit_price: 1,
-                  quantity: 1
+                quantity: 1,
+                disabled: false
               })
             }
 
-              return map
+            return acc
-            }, new Map())
+          }, new Map<string, any>())
           .values()
-        )
+      ).map((course) => {
-      }),
+        const used = usedSeatsByCourse.get(course.id) ?? 0
-    [seats]
+        return { ...course, disabled: used >= course.quantity }
-  )
+      })
-
+    }
-  console.log(seats)
+  }, [seats, usedSeatsByCourse])
 
+  const onSubmit = async (data: Schema) => {
+    await fetcher.submit(JSON.stringify(data), {
+      method: 'post',
+      encType: 'application/json'
+    })
+  }
   const onSearch = async (search: string) => {
     const params = new URLSearchParams({ q: search })
     const r = await fetch(`/${orgid}/users.json?${params.toString()}`)
@@ -127,15 +193,57 @@ export default function Route({ loaderData: { seats } }: Route.ComponentProps) {
     return hits
   }
 
+  const pickSeat = (courseId: string): Seat | null => {
+    const pool = seatsByCourse[courseId]
+
+    if (!pool) {
+      return null
+    }
+
+    return (
+      pool.find((seat) => {
+        return !usedSeatIds.has(seat.enrollment_id)
+      }) ?? null
+    )
+  }
+
   const duplicateRow = (index: number, times: number = 1) => {
     if (fields.length + times > MAX_ITEMS) {
       return null
     }
 
-    const { user, ...rest } = getValues(`enrollments.${index}`)
+    const { course } = getValues(`enrollments.${index}`)
+
+    if (!course?.id) {
       Array.from({ length: times }, (_, i) => {
         // @ts-ignore
-      insert(index + 1 + i, rest)
+        insert(index + 1 + i, { course: null })
+      })
+
+      return
+    }
+
+    const reservedSeatIds = new Set(usedSeatIds)
+
+    Array.from({ length: times }, (_, i) => {
+      const pool = seatsByCourse[course.id]
+
+      const seat =
+        pool?.find((seat) => !reservedSeatIds.has(seat.enrollment_id)) ?? null
+
+      if (seat) {
+        reservedSeatIds.add(seat.enrollment_id)
+
+        // @ts-ignore
+        insert(index + 1 + i, {
+          id: seat.enrollment_id,
+          seat: { order_id: seat.order_id },
+          course
+        })
+      } else {
+        // @ts-ignore
+        insert(index + 1 + i, { course: null })
+      }
     })
   }
 
@@ -154,7 +262,13 @@ export default function Route({ loaderData: { seats } }: Route.ComponentProps) {
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb>
-
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="lg:max-w-4xl mx-auto space-y-2.5"
+        autoComplete="off"
+        data-1p-ignore="true"
+        data-lpignore="true"
+      >
         <Card className="lg:max-w-4xl mx-auto">
           <CardHeader>
             <CardTitle className="text-2xl">Adicionar matrículas</CardTitle>
@@ -242,8 +356,26 @@ export default function Route({ loaderData: { seats } }: Route.ComponentProps) {
                         <div className="grid gap-1">
                           <CoursePicker
                             value={value}
-                          onChange={onChange}
+                            onChange={(course) => {
-                          options={courses}
+                              const seat = pickSeat(course.id)
+
+                              if (!seat) {
+                                return
+                              }
+
+                              setValue(
+                                `enrollments.${index}.id`,
+                                seat.enrollment_id
+                              )
+
+                              setValue(
+                                `enrollments.${index}.seat.order_id`,
+                                seat.order_id
+                              )
+
+                              onChange(course)
+                            }}
+                            options={courses.hits}
                             error={fieldState.error}
                             readOnly
                           />
@@ -314,8 +446,22 @@ export default function Route({ loaderData: { seats } }: Route.ComponentProps) {
                 <PlusIcon /> Adicionar
               </Button>
             </div>
+
+            <Separator />
+
+            <div className="flex justify-end">
+              <Button
+                type="submit"
+                className="cursor-pointer"
+                disabled={formState.isSubmitting}
+              >
+                {formState.isSubmitting && <Spinner />}
+                Matricular
+              </Button>
+            </div>
           </CardContent>
         </Card>
+      </form>
     </div>
   )
 }

packages/ui/src/routes/enrollments/columns.tsx

@@ -3,14 +3,14 @@
 import type { ColumnDef } from '@tanstack/react-table'
 import { HelpCircleIcon } from 'lucide-react'
 
-import { Badge } from '@repo/ui/components/ui/badge'
 import { Abbr } from '@repo/ui/components/abbr'
-import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
-import { Progress } from '@repo/ui/components/ui/progress'
 import {
   DataTableColumnDatetime,
   DataTableColumnHeaderSort
 } from '@repo/ui/components/data-table'
+import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
+import { Badge } from '@repo/ui/components/ui/badge'
+import { Progress } from '@repo/ui/components/ui/progress'
 import { cn, initials } from '@repo/ui/lib/utils'
 
 import { labels, statuses, type Enrollment } from './data'
@@ -88,7 +88,7 @@ export const columns: ColumnDef<Enrollment>[] = [
   },
   {
     accessorKey: 'created_at',
-    meta: { title: 'Cadastrado em' },
+    meta: { title: 'Matriculado em' },
     enableSorting: true,
     enableHiding: true,
     header: DataTableColumnHeaderSort,