add error

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

@@ -1,6 +1,7 @@
 import type { Route } from './+types/route'
 
-import { useRequest, useToggle } from 'ahooks'
+import { useToggle } from 'ahooks'
+import { ErrorMessage } from '@hookform/error-message'
 import {
   CalendarIcon,
   CopyIcon,
@@ -187,25 +188,55 @@ export default function Route({
                     <Controller
                       control={control}
                       name={`enrollments.${index}.user`}
-                      render={({ field: { value, onChange } }) => (
-                        <AsyncCombobox
-                          value={value}
-                          title="Colaborador"
-                          onChange={onChange}
-                          onSearch={onSearch}
-                        />
+                      render={({
+                        field: { name, value, onChange },
+                        fieldState
+                      }) => (
+                        <div className="grid gap-1">
+                          <AsyncCombobox
+                            value={value}
+                            title="Colaborador"
+                            onChange={onChange}
+                            onSearch={onSearch}
+                            error={fieldState.error}
+                          />
+                          <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: { value, onChange } }) => (
-                        <FacetedFilter
-                          value={value}
-                          onChange={onChange}
-                          options={courses}
-                        />
+                      render={({
+                        field: { name, value, onChange },
+                        fieldState
+                      }) => (
+                        <div className="grid gap-1">
+                          <FacetedFilter
+                            value={value}
+                            onChange={onChange}
+                            options={courses}
+                            error={fieldState.error}
+                          />
+                          <ErrorMessage
+                            errors={formState.errors}
+                            name={name}
+                            render={({ message }) => (
+                              <p className="text-destructive text-sm">
+                                {message}
+                              </p>
+                            )}
+                          />
+                        </div>
                       )}
                     />
 
@@ -296,9 +327,15 @@ interface FacetedFilterProps {
   value?: Course
   options: Promise<{ hits: any[] }>
   onChange?: (value: any) => void
+  error?: any
 }
 
-function FacetedFilter({ value, onChange, options }: FacetedFilterProps) {
+function FacetedFilter({
+  value,
+  onChange,
+  options,
+  error
+}: FacetedFilterProps) {
   const [search, setSearch] = useState<string>('')
   const [open, { set }] = useToggle()
   const { hits } = use(options)
@@ -326,6 +363,7 @@ function FacetedFilter({ value, onChange, options }: FacetedFilterProps) {
             readOnly
             placeholder="Curso"
             value={value?.name || ''}
+            aria-invalid={!!error}
           />
           <InputGroupAddon>
             <BookIcon />