Files

77 lines
2.3 KiB
TypeScript

import type { Route } from './+types/route'
import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
import { Suspense } from 'react'
import { Await } from 'react-router'
import { cloudflareContext } from '@repo/auth/context'
import { DataTable } from '@repo/ui/components/data-table'
import { Skeleton } from '@repo/ui/components/skeleton'
import { createSearch } from '@repo/util/meili'
import { workspaceContext } from '@/middleware/workspace'
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 cloudflare = context.get(cloudflareContext)
const { test_mode } = context.get(workspaceContext)
const { searchParams } = new URL(request.url)
const query = searchParams.get('q') || ''
const sort = searchParams.get('sort') || 'create_date:desc'
const page = Number(searchParams.get('p')) + 1
const hitsPerPage = Number(searchParams.get('perPage')) || 25
let builder = new MeiliSearchFilterBuilder()
.where('tenant_id', '=', params.orgid)
.where('is_test', 'exists', test_mode)
const orders = createSearch({
index: 'betaeducacao-prod-orders',
filter: builder.build(),
sort: [sort],
query,
page,
hitsPerPage,
env: cloudflare.env
})
return {
data: orders
}
}
export default function Route({ loaderData: { data } }: Route.ComponentProps) {
return (
<Suspense fallback={<Skeleton />}>
<div className="space-y-0.5 mb-8">
<h1 className="text-2xl font-bold tracking-tight">
Histórico de pagamentos
</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 = 1, hitsPerPage, totalHits }) => {
return (
<DataTable
sort={[{ id: 'create_date', desc: true }]}
columns={columns}
data={hits as Order[]}
pageIndex={page - 1}
pageSize={hitsPerPage}
rowCount={totalHits}
/>
)
}}
</Await>
</Suspense>
)
}