WIP

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

@@ -146,8 +146,7 @@ export const CoursePicker = forwardRef<HTMLInputElement, CoursePickerProps>(
                       id,
                       name,
                       access_period,
-                      metadata__unit_price: unit_price,
+                      metadata__unit_price: unit_price
-                      matches
                     }) => {
                       return (
                         <CommandItem

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

@@ -73,7 +73,7 @@ import {
 import { ScheduledForInput } from './scheduled-for'
 import { UserPicker } from './user-picker'
 
-const emptyRow = {
+export const emptyRow = {
   user: undefined,
   course: undefined,
   scheduled_for: undefined
@@ -393,7 +393,7 @@ export default function Route({
   )
 }
 
-function DuplicateRowMultipleTimes({
+export function DuplicateRowMultipleTimes({
   index,
   duplicateRow
 }: {

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

@@ -1,5 +1,15 @@
 import type { Route } from './+types/route'
 
+import { ErrorMessage } from '@hookform/error-message'
+import { zodResolver } from '@hookform/resolvers/zod'
+import {
+  CircleQuestionMarkIcon,
+  CopyIcon,
+  PlusIcon,
+  Trash2Icon
+} from 'lucide-react'
+import { Fragment } from 'react'
+import { Controller, useFieldArray, useForm } from 'react-hook-form'
 import { Link } from 'react-router'
 
 import {
@@ -17,8 +27,30 @@ import {
   CardHeader,
   CardTitle
 } from '@repo/ui/components/ui/card'
+import {
+  HoverCard,
+  HoverCardContent,
+  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 { Button } from '@repo/ui/components/ui/button'
+import { useParams } from 'react-router'
+import { CoursePicker } from '../_.$orgid.enrollments.add/course-picker'
+import {
+  formSchema,
+  MAX_ITEMS,
+  type User
+} from '../_.$orgid.enrollments.add/data'
+import {
+  Cell,
+  DuplicateRowMultipleTimes,
+  emptyRow
+} from '../_.$orgid.enrollments.add/route'
+import { ScheduledForInput } from '../_.$orgid.enrollments.add/scheduled-for'
+import { UserPicker } from '../_.$orgid.enrollments.add/user-picker'
+
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Adicionar matrícula' }]
 }
@@ -28,13 +60,51 @@ export async function loader({ request, params, context }: Route.LoaderArgs) {
     url: `/orgs/${params.orgid}/seats`,
     request,
     context
-  }).then((r) => r.json() as any)
+  })
+    .then((r) => r.json() as any)
+    .then(({ items }) => items)
 
-  return { seats }
+  const courses = new Promise((resolve, reject) => {
+    resolve({
+      hits: seats.map(({ course }) => ({ metadata__unit_price: 1, ...course }))
+    })
+  })
+  return { seats, courses }
 }
 
-export default function Route({ loaderData: { seats } }: Route.ComponentProps) {
+export default function Route({
-  console.log(seats)
+  loaderData: { courses }
+}: Route.ComponentProps) {
+  const { orgid } = useParams()
+  const form = useForm({
+    resolver: zodResolver(formSchema),
+    defaultValues: { enrollments: [emptyRow] }
+  })
+  const { formState, control, handleSubmit, getValues, setValue } = form
+  const { fields, insert, remove, append } = useFieldArray({
+    control,
+    name: 'enrollments'
+  })
+
+  const onSearch = async (search: string) => {
+    const params = new URLSearchParams({ q: search })
+    const r = await fetch(`/${orgid}/users.json?${params.toString()}`)
+    const { hits } = (await r.json()) as { hits: User[] }
+    return hits
+  }
+
+  const duplicateRow = (index: number, times: number = 1) => {
+    if (fields.length + times > MAX_ITEMS) {
+      return null
+    }
+
+    const { user, ...rest } = getValues(`enrollments.${index}`)
+    Array.from({ length: times }, (_, i) => {
+      // @ts-ignore
+      insert(index + 1 + i, rest)
+    })
+  }
+
   return (
     <div className="space-y-2.5">
       <Breadcrumb>
@@ -59,7 +129,158 @@ export default function Route({ loaderData: { seats } }: Route.ComponentProps) {
             abertas.
           </CardDescription>
         </CardHeader>
-        <CardContent>...</CardContent>
+
+        <CardContent className="space-y-4">
+          <div className="grid lg:grid-cols-[repeat(3,1fr)_auto] w-full gap-3">
+            {/* Header */}
+            <>
+              <Cell>Colaborador</Cell>
+              <Cell>Curso</Cell>
+              <Cell className="flex items-center gap-1.5">
+                Matricular em
+                <HoverCard openDelay={0}>
+                  <HoverCardTrigger asChild>
+                    <button type="button">
+                      <CircleQuestionMarkIcon className="size-4 text-muted-foreground" />
+                    </button>
+                  </HoverCardTrigger>
+                  <HoverCardContent
+                    align="end"
+                    className="text-sm space-y-1.5 lg:w-76"
+                  >
+                    <p>
+                      Escolha a data em que o colaborador será matriculado no
+                      curso.
+                    </p>
+
+                    <p>
+                      Você poderá acompanhar as matrículas em{' '}
+                      <Kbd>Agendamentos</Kbd>
+                    </p>
+                  </HoverCardContent>
+                </HoverCard>
+              </Cell>
+              <Cell>{/**/}</Cell>
+            </>
+
+            {/* Rows */}
+            <>
+              {fields.map((field, index) => (
+                <Fragment key={field.id}>
+                  {/* Separator only for mobile */}
+                  {index >= 1 && <div className="h-2.5 lg:hidden"></div>}
+
+                  <Controller
+                    control={control}
+                    name={`enrollments.${index}.user`}
+                    render={({
+                      field: { name, value, onChange },
+                      fieldState
+                    }) => (
+                      <div className="grid gap-1">
+                        <UserPicker
+                          value={value}
+                          onChange={onChange}
+                          onSearch={onSearch}
+                          fieldState={fieldState}
+                        />
+
+                        <ErrorMessage
+                          errors={formState.errors}
+                          name={name}
+                          render={({ message }) => (
+                            <p className="text-destructive text-sm">
+                              {message}
+                            </p>
+                          )}
+                        />
+                      </div>
+                    )}
+                  />
+
+                  <Controller
+                    control={control}
+                    name={`enrollments.${index}.course`}
+                    render={({
+                      field: { name, value, onChange },
+                      fieldState
+                    }) => (
+                      <div className="grid gap-1">
+                        <CoursePicker
+                          value={value}
+                          onChange={onChange}
+                          options={courses}
+                          error={fieldState.error}
+                          readOnly
+                        />
+                        <ErrorMessage
+                          errors={formState.errors}
+                          name={name}
+                          render={({ message }) => (
+                            <p className="text-destructive text-sm">
+                              {message}
+                            </p>
+                          )}
+                        />
+                      </div>
+                    )}
+                  />
+
+                  <Controller
+                    control={control}
+                    name={`enrollments.${index}.scheduled_for`}
+                    render={({ field: { value, onChange } }) => (
+                      <ScheduledForInput value={value} onChange={onChange} />
+                    )}
+                  />
+
+                  {/* Action */}
+                  <div className="flex gap-1.5">
+                    <Button
+                      type="button"
+                      tabIndex={-1}
+                      variant="outline"
+                      className="cursor-pointer"
+                      onClick={() => duplicateRow(index)}
+                      title="Duplicar linha"
+                    >
+                      <CopyIcon />
+                    </Button>
+
+                    <DuplicateRowMultipleTimes
+                      index={index}
+                      duplicateRow={duplicateRow}
+                    />
+
+                    <Button
+                      tabIndex={-1}
+                      variant="destructive"
+                      className="cursor-pointer"
+                      disabled={fields.length == 1}
+                      onClick={() => remove(index)}
+                    >
+                      <Trash2Icon />
+                    </Button>
+                  </div>
+                </Fragment>
+              ))}
+            </>
+          </div>
+
+          <div className="max-lg:mt-2.5">
+            <Button
+              type="button"
+              // @ts-ignore
+              onClick={() => append(emptyRow)}
+              className="cursor-pointer"
+              disabled={fields.length == MAX_ITEMS}
+              variant="outline"
+              size="sm"
+            >
+              <PlusIcon /> Adicionar
+            </Button>
+          </div>
+        </CardContent>
       </Card>
     </div>
   )