add search filter

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()