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>
                       )
                     }