add other projects

apps/admin.saladeaula.digital/app/routes/_.$orgid.orders._index/columns.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { type ColumnDef } from '@tanstack/react-table'
+
+// 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>[] = [
+  {
+    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: 'Data de venc.',
+    cell: ({ row }) => {
+      try {
+        const dueDate = new Date(row.original.due_date)
+        return formatted.format(dueDate)
+      } catch {
+        return 'N/A'
+      }
+    }
+  },
+  {
+    header: 'Comprado em',
+    cell: ({ row }) => {
+      const createdAt = new Date(row.original.create_date)
+      return formatted.format(createdAt)
+    }
+  }
+]

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

@@ -0,0 +1,61 @@
+import type { Route } from './+types'
+
+import { Suspense } from 'react'
+import { Await } from 'react-router'
+
+import { DataTable } from '@/components/data-table'
+import { Skeleton } from '@/components/skeleton'
+import { createSearch } from '@/lib/meili'
+import { columns, type Order } from './columns'
+
+export function meta({}: Route.MetaArgs) {
+  return [{ title: 'Histórico de compras' }]
+}
+
+export async function loader({ params, context, request }: Route.LoaderArgs) {
+  const { searchParams } = new URL(request.url)
+  const { orgid } = params
+  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'],
+      filter: `tenant_id = ${orgid}`,
+      page,
+      hitsPerPage,
+      env: context.cloudflare.env
+    })
+  }
+}
+
+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">
+          Histórico de compras
+        </h1>
+        <p className="text-muted-foreground">
+          Acompanhe todos as compras realizadas, visualize pagamentos e mantenha
+          o controle financeiro.
+        </p>
+      </div>
+
+      <Await resolve={data}>
+        {({ hits, page, hitsPerPage, totalHits }) => {
+          return (
+            <DataTable
+              columns={columns}
+              data={hits as Order[]}
+              pageIndex={page - 1}
+              pageSize={hitsPerPage}
+              rowCount={totalHits}
+            />
+          )
+        }}
+      </Await>
+    </Suspense>
+  )
+}