add paymentsd list

apps/insights.saladeaula.digital/app/components/app-sidebar.tsx

@@ -5,8 +5,7 @@ import {
   DollarSign,
   GraduationCap,
   LayoutDashboard,
-  UsersIcon,
-  WebhookIcon
+  UsersIcon
 } from 'lucide-react'
 
 import { NavMain } from '@/components/nav-main'
@@ -41,11 +40,6 @@ const navMain = [
     title: 'Empresas',
     url: '/orgs',
     icon: Building2Icon
-  },
-  {
-    title: 'Webhooks',
-    url: '/webhooks',
-    icon: WebhookIcon
   }
 ]
 

apps/insights.saladeaula.digital/app/components/nav-main.tsx

@@ -11,7 +11,7 @@ import {
 import { useIsMobile } from '@repo/ui/hooks/use-mobile'
 
 import { type LucideIcon } from 'lucide-react'
-import { NavLink, useParams } from 'react-router'
+import { NavLink } from 'react-router'
 
 type NavItem = {
   title: string

apps/insights.saladeaula.digital/app/entry.server.tsx

@@ -1,7 +1,7 @@
 import { isbot } from 'isbot'
 import { renderToReadableStream } from 'react-dom/server'
 import type { AppLoadContext, EntryContext } from 'react-router'
-import { ServerRouter } from 'react-router'
+import { ServerRouter, type HandleErrorFunction } from 'react-router'
 
 export default async function handleRequest(
   request: Request,
@@ -43,4 +43,11 @@ export default async function handleRequest(
 }
 
 // https://reactrouter.com/how-to/suspense#timeouts
-export const streamTimeout = 6_000
+export const streamTimeout = 7_000
+
+// https://reactrouter.com/how-to/error-reporting
+export const handleError: HandleErrorFunction = (error, { request }) => {
+  if (!request.signal.aborted) {
+    console.error(error)
+  }
+}

apps/insights.saladeaula.digital/app/routes/_app.payments._index/columns.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { formatCNPJ, formatCPF } from '@brazilian-utils/brazilian-utils'
+import { type ColumnDef } from '@tanstack/react-table'
+
+import { Abbr } from '@repo/ui/components/abbr'
+import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
+import { initials } from '@repo/ui/lib/utils'
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Order = {
+  id: string
+  total: number
+  status: 'pending' | 'processing' | 'success' | 'failed'
+  payment_method: 'PIX' | 'CREDIT_CARD' | 'MANUAL' | 'failed'
+  name: string
+}
+
+const formatted = new Intl.DateTimeFormat('pt-BR', {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit'
+})
+
+export const columns: ColumnDef<Order>[] = [
+  {
+    header: 'Comprador',
+    cell: ({ row }) => {
+      const { name, email } = row.original
+
+      return (
+        <div className="flex gap-2.5 items-center">
+          <Avatar className="size-10 hidden lg:block">
+            <AvatarFallback>{initials(name)}</AvatarFallback>
+          </Avatar>
+
+          <ul>
+            <li className="font-bold">
+              <Abbr>{name}</Abbr>
+            </li>
+            <li className="text-muted-foreground text-sm">
+              <Abbr>{email}</Abbr>
+            </li>
+          </ul>
+        </div>
+      )
+    }
+  },
+  {
+    header: 'CNPJ/CPF',
+    cell: ({ row }) => {
+      const { cpf, cnpj } = row.original
+
+      if (cpf) {
+        return <>{formatCPF(cpf)}</>
+      }
+
+      if (cnpj) {
+        return <>{formatCNPJ(cnpj)}</>
+      }
+
+      return <></>
+    }
+  },
+  {
+    accessorKey: 'payment_method',
+    header: 'Forma de pag.'
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status'
+  },
+  {
+    accessorKey: 'total',
+    header: 'Valor total',
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue('total'))
+      const formatted = new Intl.NumberFormat('pt-BR', {
+        style: 'currency',
+        currency: 'BRL'
+      }).format(amount)
+
+      return <div className="font-medium">{formatted}</div>
+    }
+  },
+  {
+    header: 'Comprado em',
+    cell: ({ row }) => {
+      const createdAt = new Date(row.original.create_date)
+      return formatted.format(createdAt)
+    }
+  },
+  {
+    header: 'Vencimento em',
+    cell: ({ row }) => {
+      try {
+        const dueDate = new Date(row.original.due_date)
+        return formatted.format(dueDate)
+      } catch {
+        return 'N/A'
+      }
+    }
+  },
+  {
+    header: 'Pago em',
+    cell: ({ row }) => {
+      if (row.original.payment_date) {
+        const createdAt = new Date(row.original.payment_date)
+        return formatted.format(createdAt)
+      }
+
+      return <></>
+    }
+  }
+]

apps/insights.saladeaula.digital/app/routes/_app.payments._index/route.tsx

@@ -1,19 +1,55 @@
 import type { Route } from './+types'
 
+import { Suspense } from 'react'
+import { Await } from 'react-router'
+
+import { DataTable } from '@repo/ui/components/data-table'
+import { Skeleton } from '@repo/ui/components/skeleton'
+import { createSearch } from '@repo/util/meili'
+
+import { columns, type Order } from './columns'
+
 export function meta({}: Route.MetaArgs) {
   return [{ title: 'Pagamentos' }]
 }
 
-export function loader({ context }: Route.LoaderArgs) {
-  return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE }
+export async function loader({ context, request }: Route.LoaderArgs) {
+  const { searchParams } = new URL(request.url)
+  const page = Number(searchParams.get('p')) + 1
+  const hitsPerPage = Number(searchParams.get('perPage')) || 25
+
+  return {
+    data: createSearch({
+      index: 'betaeducacao-prod-orders',
+      sort: ['create_date:desc'],
+      page,
+      hitsPerPage,
+      env: context.cloudflare.env
+    })
+  }
 }
 
-export default function Route({}: Route.ComponentProps) {
+export default function Route({ loaderData: { data } }) {
   return (
-    <>
+    <Suspense fallback={<Skeleton />}>
       <div className="space-y-0.5 mb-8">
         <h1 className="text-2xl font-bold tracking-tight">Pagamentos</h1>
       </div>
-    </>
+
+      <Await resolve={data}>
+        {({ hits, page, hitsPerPage, totalHits }) => {
+          return (
+            <DataTable
+              sort={[{ id: 'created_at', desc: true }]}
+              columns={columns}
+              data={hits as Order[]}
+              pageIndex={page - 1}
+              pageSize={hitsPerPage}
+              rowCount={totalHits}
+            />
+          )
+        }}
+      </Await>
+    </Suspense>
   )
 }

apps/insights.saladeaula.digital/app/routes/_app.users._index/columns.tsx

@@ -26,7 +26,7 @@ const formatted = new Intl.DateTimeFormat('pt-BR', {
 
 export const columns: ColumnDef<User>[] = [
   {
-    header: 'Colaborador',
+    header: 'Usuário',
     cell: ({ row }) => {
       const { name, email } = row.original
 

apps/insights.saladeaula.digital/app/routes/_app.webhooks._index/route.tsx

@@ -1,19 +0,0 @@
-import type { Route } from './+types'
-
-export function meta({}: Route.MetaArgs) {
-  return [{ title: 'Webhooks' }]
-}
-
-export function loader({}: Route.LoaderArgs) {
-  return {}
-}
-
-export default function Route({}: Route.ComponentProps) {
-  return (
-    <>
-      <div className="space-y-0.5 mb-8">
-        <h1 className="text-2xl font-bold tracking-tight">Webhooks</h1>
-      </div>
-    </>
-  )
-}