add search filter

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

@@ -13,7 +13,9 @@ import {
   CheckIcon,
   BookIcon,
   ArrowDownAZIcon,
-  ArrowDownZAIcon
+  ArrowDownZAIcon,
+  AlertTriangleIcon,
+  UserIcon
 } from 'lucide-react'
 import { Link, useParams, useFetcher } from 'react-router'
 import { Controller, useFieldArray, useForm } from 'react-hook-form'
@@ -22,7 +24,10 @@ import { format } from 'date-fns'
 import { ptBR } from 'react-day-picker/locale'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Fuse from 'fuse.js'
+import { formatCPF } from '@brazilian-utils/brazilian-utils'
 
+import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
+import { Abbr } from '@repo/ui/components/abbr'
 import {
   Command,
   CommandEmpty,
@@ -63,13 +68,13 @@ import {
 import { Label } from '@repo/ui/components/ui/label'
 import { Calendar } from '@repo/ui/components/ui/calendar'
 import { createSearch } from '@repo/util/meili'
-import { cn } from '@repo/ui/lib/utils'
+import { initials, cn } from '@repo/ui/lib/utils'
 import { HttpMethod, request as req } from '@repo/util/request'
 import { useIsMobile } from '@repo/ui/hooks/use-mobile'
 import { cloudflareContext } from '@repo/auth/context'
+import { SearchFilter } from '@repo/ui/components/search-filter'
 
 import { formSchema, type Schema, MAX_ITEMS } from './data'
-import { AsyncCombobox } from './async-combobox'
 import { redirect } from 'react-router'
 
 export function meta({}: Route.MetaArgs) {
@@ -213,13 +218,109 @@ export default function Route({
                         fieldState
                       }) => (
                         <div className="grid gap-1">
-                          <AsyncCombobox
-                            value={value}
-                            title="Colaborador"
+                          <SearchFilter
+                            align="start"
                             onChange={onChange}
                             onSearch={onSearch}
-                            error={fieldState.error}
-                          />
+                            render={({
+                              id,
+                              name,
+                              email,
+                              cpf,
+                              onSelect,
+                              onClose
+                            }) => (
+                              <CommandItem
+                                key={id}
+                                value={id}
+                                className="cursor-pointer"
+                                disabled={!cpf}
+                                onSelect={() => {
+                                  onSelect()
+                                  onClose()
+                                }}
+                              >
+                                <div className="flex gap-2.5 items-start">
+                                  <Avatar className="size-10 hidden lg:block">
+                                    <AvatarFallback className="border">
+                                      {initials(name)}
+                                    </AvatarFallback>
+                                  </Avatar>
+
+                                  <ul>
+                                    <li className="font-bold">
+                                      <Abbr>{name}</Abbr>
+                                    </li>
+                                    <li className="text-muted-foreground text-sm">
+                                      <Abbr>{email}</Abbr>
+                                    </li>
+
+                                    {cpf ? (
+                                      <li className="text-muted-foreground text-sm">
+                                        {formatCPF(cpf)}
+                                      </li>
+                                    ) : (
+                                      <li className="flex gap-1 items-center text-red-400">
+                                        <AlertTriangleIcon className="text-red-400" />
+                                        Inelegível
+                                      </li>
+                                    )}
+                                  </ul>
+                                </div>
+
+                                <CheckIcon
+                                  className={cn(
+                                    'ml-auto',
+                                    value?.id === id
+                                      ? 'opacity-100'
+                                      : 'opacity-0'
+                                  )}
+                                />
+                              </CommandItem>
+                            )}
+                          >
+                            {({ loading }) => (
+                              <InputGroup>
+                                <InputGroupInput
+                                  readOnly
+                                  value={value?.name || ''}
+                                  placeholder="Colaborador"
+                                  className="cursor-pointer"
+                                  autoComplete="off"
+                                  aria-invalid={!!fieldState.error}
+                                />
+                                <InputGroupAddon>
+                                  <UserIcon />
+                                </InputGroupAddon>
+
+                                {value && (
+                                  <InputGroupAddon
+                                    align="inline-end"
+                                    className="mr-0"
+                                  >
+                                    <Button
+                                      variant="link"
+                                      size="icon-sm"
+                                      className="cursor-pointer text-muted-foreground"
+                                      onClick={(e) => {
+                                        e.preventDefault()
+                                        onChange?.(undefined)
+                                      }}
+                                    >
+                                      <XIcon />
+                                    </Button>
+                                  </InputGroupAddon>
+                                )}
+
+                                {loading && (
+                                  <InputGroupAddon align="inline-end">
+                                    <Spinner />
+                                  </InputGroupAddon>
+                                )}
+                              </InputGroup>
+                            )}
+                          </SearchFilter>
+
                           <ErrorMessage
                             errors={formState.errors}
                             name={name}