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