fix status

apps/admin.saladeaula.digital/app/routes/_.$orgid.billing._index/data.ts

@@ -0,0 +1,21 @@
+import { CheckCircle2Icon, ClockIcon, type LucideIcon } from 'lucide-react'
+
+export const statuses: Record<
+  string,
+  { icon: LucideIcon; color?: string; label: string }
+> = {
+  PENDING: {
+    icon: ClockIcon,
+    label: 'Em aberto'
+  },
+  CLOSED: {
+    icon: CheckCircle2Icon,
+    label: 'Fechado',
+    color: 'text-green-400 [&_svg]:text-green-500'
+  }
+}
+
+export const labels: Record<string, string> = {
+  PENDING: 'Em aberto',
+  CLOSED: 'Fechado'
+}

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

@@ -19,9 +19,11 @@ import {
   TableRow
 } from '@repo/ui/components/ui/table'
 import { Abbr } from '@repo/ui/components/abbr'
+import { Button } from '@repo/ui/components/ui/button'
 
 import { RangePeriod } from './range-period'
-import { Button } from '@repo/ui/components/ui/button'
+import { statuses } from './data'
+import { cn } from '@repo/ui/lib/utils'
 
 export function meta({}) {
   return [{ title: 'Resumo de cobranças' }]
@@ -36,7 +38,7 @@ export async function loader({ context, request, params }: Route.LoaderArgs) {
   }).then((r) => r.json())
 
   const [startDate, endDate] = billingPeriod(
-    subscription?.billing_day,
+    subscription?.billing_day || 1,
     new Date()
   )
   const start = searchParams.get('start') || formatDate(startDate)
@@ -75,25 +77,30 @@ export default function Route({
         </div>
 
         <Await resolve={billing}>
-          {({ items, ...billing }) => {
+          {({ items = [], ...billing }) => {
+            const {
+              icon: Icon,
+              label: status,
+              color
+            } = statuses?.[billing?.status || 'CLOSED']
             return (
               <Card>
                 <CardContent className="space-y-2.5">
                   <div className="flex max-lg:flex-col gap-2.5">
                     <Button
-                      className="pointer-events-none"
+                      className={cn('pointer-events-none', color)}
                       variant="outline"
                       asChild
                     >
                       <span>
-                        <ClockIcon className="size-3.5" /> {billing?.status}
+                        <Icon className="size-3.5" /> {status}
                       </span>
                     </Button>
 
                     <RangePeriod
                       startDate={startDate}
                       endDate={endDate}
-                      billingDay={subscription.billing_day}
+                      billingDay={subscription.billing_day || 1}
                     />
                   </div>
 
@@ -142,6 +149,14 @@ export default function Route({
                             </TableRow>
                           )
                         )}
+
+                      {items.length === 0 && (
+                        <TableRow>
+                          <TableCell colSpan={5} className="h-24 text-center">
+                            Nenhum resultado.
+                          </TableCell>
+                        </TableRow>
+                      )}
                     </TableBody>
                     <TableFooter>
                       <TableRow>
@@ -152,7 +167,7 @@ export default function Route({
                           {currency.format(
                             items
                               ?.filter((item) => 'course' in item)
-                              .reduce(
+                              ?.reduce(
                                 (acc, { unit_price }) => acc + unit_price,
                                 0
                               )