add quantity to combobox

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

@@ -36,6 +36,8 @@ import {
 } from '@repo/ui/components/ui/popover'
 import { cn } from '@repo/ui/lib/utils'
 
+import { Abbr } from '@repo/ui/components/abbr'
+import { Kbd } from '@repo/ui/components/ui/kbd'
 import { type Course } from './data'
 
 interface CoursePickerProps extends Omit<
@@ -146,7 +148,8 @@ export const CoursePicker = forwardRef<HTMLInputElement, CoursePickerProps>(
                       id,
                       name,
                       access_period,
-                      metadata__unit_price: unit_price
+                      metadata__unit_price: unit_price,
+                      quantity = null
                     }) => {
                       return (
                         <CommandItem
@@ -163,13 +166,15 @@ export const CoursePicker = forwardRef<HTMLInputElement, CoursePickerProps>(
                             set(false)
                           }}
                         >
-                          {name}
                           <CheckIcon
                             className={cn(
-                              'ml-auto',
                               value?.id === id ? 'opacity-100' : 'opacity-0'
                             )}
                           />
+                          <Abbr>{name}</Abbr>
+                          {quantity && (
+                            <Kbd className="ml-auto border">{quantity}x</Kbd>
+                          )}
                         </CommandItem>
                       )
                     }

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

@@ -90,15 +90,23 @@ export default function Route({ loaderData: { seats } }: Route.ComponentProps) {
     () =>
       Promise.resolve({
         hits: Array.from(
-          new Map(
-            seats.map(({ course }) => [
-              course.id,
-              {
+          seats
+            .reduce((map, { course }) => {
+              const existing = map.get(course.id)
+
+              if (existing) {
+                existing.quantity += 1
+              } else {
+                map.set(course.id, {
                   ...course,
-                metadata__unit_price: 1
+                  metadata__unit_price: 1,
+                  quantity: 1
+                })
               }
-            ]) ?? []
-          ).values()
+
+              return map
+            }, new Map())
+            .values()
         )
       }),
     [seats]

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

@@ -262,7 +262,7 @@ function SeatsMenu({ seats: seats_ }: { seats: Seat[] }) {
                     <Fragment key={idx}>
                       <Abbr>{course.name}</Abbr>
                       <div className="flex justify-end">
-                        <Kbd>{quantity}x</Kbd>
+                        <Kbd className="border">{quantity}x</Kbd>
                       </div>
                     </Fragment>
                   )