add search filter

apps/admin.saladeaula.digital/app/routes/_.$orgid.billing._index/range-period.tsx

@@ -1,11 +1,12 @@
 import { useSearchParams } from 'react-router'
 import { ChevronRightIcon, ChevronLeftIcon } from 'lucide-react'
 import { subMonths, addMonths } from 'date-fns'
-import { DateTime } from 'luxon'
+import { DateTime as LuxonDateTime } from 'luxon'
 
 import { Button } from '@repo/ui/components/ui/button'
 import { ButtonGroup } from '@repo/ui/components/ui/button-group'
 import { Badge } from '@repo/ui/components/ui/badge'
+import { DateTime } from '@repo/ui/components/datetime'
 
 import { formatDate, billingPeriod } from './util'
 import { tz } from './data'
@@ -16,12 +17,18 @@ type RangePeriodProps = {
   billingDay: number
 }
 
+const dtOptions: Intl.DateTimeFormatOptions = {
+  year: '2-digit',
+  hour: undefined,
+  minute: undefined
+}
+
 export function RangePeriod({
   startDate,
   endDate,
   billingDay
 }: RangePeriodProps) {
-  const today = DateTime.now().setZone(tz).toJSDate()
+  const today = LuxonDateTime.now().setZone(tz).toJSDate()
   const [, setSearchParams] = useSearchParams()
   const prevPeriod = billingPeriod(billingDay, subMonths(startDate, 1))
   const nextPeriod = billingPeriod(billingDay, addMonths(startDate, 1))
@@ -51,10 +58,10 @@ export function RangePeriod({
         >
           <div className="gap-1 flex">
             <Badge variant="outline" className="rounded-sm px-1 font-mono">
-              {datetime.format(startDate)}
+              <DateTime options={dtOptions}>{startDate}</DateTime>
             </Badge>
             <Badge variant="outline" className="rounded-sm px-1 font-mono">
-              {datetime.format(endDate)}
+              <DateTime options={dtOptions}>{endDate}</DateTime>
             </Badge>
           </div>
         </Button>
@@ -78,9 +85,3 @@ export function RangePeriod({
     </>
   )
 }
-
-const datetime = new Intl.DateTimeFormat('pt-BR', {
-  day: '2-digit',
-  month: '2-digit',
-  year: '2-digit'
-})

apps/admin.saladeaula.digital/app/routes/_.$orgid.billing._index/route.tsx

@@ -1,7 +1,7 @@
 import type { Route } from './+types/route'
 
 import Fuse from 'fuse.js'
-import { DateTime } from 'luxon'
+import { DateTime as LuxonDateTime } from 'luxon'
 import { Suspense, useMemo } from 'react'
 import { BanIcon } from 'lucide-react'
 import { Await, useSearchParams } from 'react-router'
@@ -30,6 +30,8 @@ import {
   EmptyTitle
 } from '@repo/ui/components/ui/empty'
 import { Kbd } from '@repo/ui/components/ui/kbd'
+import { Currency } from '@repo/ui/components/currency'
+import { DateTime } from '@repo/ui/components/datetime'
 
 import { billingPeriod, formatDate } from './util'
 import { RangePeriod } from './range-period'
@@ -45,11 +47,15 @@ export async function loader({ context, request, params }: Route.LoaderArgs) {
     url: `/orgs/${params.orgid}/subscription`,
     context,
     request
-  }).then((r) => r.json())
+  })
+
+  const { billing_day = 1 } = (await subscription.json()) as {
+    billing_day: number
+  }
 
   const [startDate, endDate] = billingPeriod(
-    subscription?.billing_day || 1,
-    DateTime.now().setZone(tz).toJSDate()
+    billing_day,
+    LuxonDateTime.now().setZone(tz).toJSDate()
   )
   const start = searchParams.get('start') || formatDate(startDate)
   const end = searchParams.get('end') || formatDate(endDate)
@@ -61,15 +67,15 @@ export async function loader({ context, request, params }: Route.LoaderArgs) {
   }).then((r) => r.json())
 
   return {
-    subscription,
+    billing_day,
     billing,
-    startDate: DateTime.fromISO(start, { zone: tz }).toJSDate(),
-    endDate: DateTime.fromISO(end, { zone: tz }).toJSDate()
+    startDate: LuxonDateTime.fromISO(start, { zone: tz }).toJSDate(),
+    endDate: LuxonDateTime.fromISO(end, { zone: tz }).toJSDate()
   }
 }
 
 export default function Route({
-  loaderData: { subscription, billing, startDate, endDate }
+  loaderData: { billing_day, billing, startDate, endDate }
 }: Route.ComponentProps) {
   const [searchParams, setSearchParams] = useSearchParams()
   const search = searchParams.get('s') as string
@@ -120,7 +126,7 @@ export default function Route({
                     <RangePeriod
                       startDate={startDate}
                       endDate={endDate}
-                      billingDay={subscription?.billing_day || 1}
+                      billingDay={billing_day}
                     />
 
                     <Button
@@ -232,9 +238,11 @@ function List({ items, search }) {
                       <Abbr>{created_by ? created_by.name : 'N/A'}</Abbr>
                     </TableCell>
                     <TableCell>
-                      {datetime.format(new Date(enrolled_at))}
+                      <DateTime>{enrolled_at}</DateTime>
+                    </TableCell>
+                    <TableCell>
+                      <Currency>{unit_price}</Currency>
                     </TableCell>
-                    <TableCell>{currency.format(unit_price)}</TableCell>
                   </TableRow>
                 )
               )}
@@ -268,9 +276,11 @@ function List({ items, search }) {
                       <Abbr>{canceled_by ? canceled_by.name : 'N/A'}</Abbr>
                     </TableCell>
                     <TableCell>
-                      {datetime.format(new Date(created_at))}
+                      <DateTime>{created_at}</DateTime>
+                    </TableCell>
+                    <TableCell>
+                      <Currency>{unit_price}</Currency>
                     </TableCell>
-                    <TableCell>{currency.format(unit_price)}</TableCell>
                   </TableRow>
                 )
               )}
@@ -284,11 +294,11 @@ function List({ items, search }) {
               Total
             </TableCell>
             <TableCell>
-              {currency.format(
-                filtered
+              <Currency>
+                {filtered
                   ?.filter((x) => 'course' in x)
-                  ?.reduce((acc, { unit_price }) => acc + unit_price, 0)
-              )}
+                  ?.reduce((acc, { unit_price }) => acc + unit_price, 0)}
+              </Currency>
             </TableCell>
           </TableRow>
         </TableFooter>
@@ -297,18 +307,5 @@ function List({ items, search }) {
   )
 }
 
-const currency = new Intl.NumberFormat('pt-BR', {
-  style: 'currency',
-  currency: 'BRL'
-})
-
-const datetime = new Intl.DateTimeFormat('pt-BR', {
-  day: '2-digit',
-  month: '2-digit',
-  year: 'numeric',
-  hour: '2-digit',
-  minute: '2-digit'
-})
-
 const sortBy = (field: 'enrolled_at' | 'created_at') => (a: any, b: any) =>
   new Date(a[field]).getTime() - new Date(b[field]).getTime()

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/async-combobox.tsx

@@ -1,171 +0,0 @@
-import { useBoolean, useRequest, useToggle } from 'ahooks'
-import { CheckIcon, UserIcon, XIcon, AlertTriangleIcon } from 'lucide-react'
-import { formatCPF } from '@brazilian-utils/brazilian-utils'
-
-import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
-import { Abbr } from '@repo/ui/components/abbr'
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput
-} from '@repo/ui/components/ui/input-group'
-import { initials, cn } from '@repo/ui/lib/utils'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from '@repo/ui/components/ui/popover'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList
-} from '@repo/ui/components/ui/command'
-import { Spinner } from '@repo/ui/components/ui/spinner'
-import { Button } from '@repo/ui/components/ui/button'
-
-interface AsyncComboboxProps {
-  value: any
-  title: string
-  placeholder?: string
-  onChange: (props: any) => void
-  onSearch: (search: string) => Promise<any[]>
-  error?: any
-}
-export function AsyncCombobox({
-  title,
-  placeholder,
-  value,
-  onSearch,
-  onChange,
-  error
-}: AsyncComboboxProps) {
-  const [open, { set }] = useToggle()
-  const [searched, { setTrue }] = useBoolean()
-  const {
-    data = [],
-    loading,
-    runAsync
-  } = useRequest(onSearch, {
-    manual: true,
-    debounceWait: 300,
-    defaultParams: [''],
-    onSuccess: setTrue
-  })
-
-  return (
-    <Popover open={open} onOpenChange={set}>
-      <PopoverTrigger asChild>
-        <InputGroup>
-          <InputGroupInput
-            readOnly
-            value={value?.name || ''}
-            placeholder={title}
-            className="cursor-pointer"
-            autoComplete="off"
-            aria-invalid={!!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)
-                  set(false)
-                }}
-              >
-                <XIcon />
-              </Button>
-            </InputGroupAddon>
-          )}
-
-          {loading && (
-            <InputGroupAddon align="inline-end">
-              <Spinner />
-            </InputGroupAddon>
-          )}
-        </InputGroup>
-      </PopoverTrigger>
-
-      <PopoverContent className="lg:w-84 p-0" align="start">
-        <Command
-          shouldFilter={false}
-          className={cn(
-            !searched && '**:data-[slot=command-input-wrapper]:border-b-0'
-          )}
-        >
-          <CommandInput
-            placeholder={placeholder}
-            autoComplete="off"
-            onValueChange={runAsync}
-          />
-
-          {searched ? (
-            <CommandList>
-              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
-
-              <CommandGroup>
-                {data.map(({ id, name, email, cpf }) => (
-                  <CommandItem
-                    key={id}
-                    value={id}
-                    className="cursor-pointer"
-                    disabled={!cpf}
-                    onSelect={() => {
-                      onChange?.({ id, name, email, cpf })
-                      set(false)
-                    }}
-                  >
-                    <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>
-                ))}
-              </CommandGroup>
-            </CommandList>
-          ) : null}
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}

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}