89 lines
2.7 KiB
TypeScript
89 lines
2.7 KiB
TypeScript
import type { Route } from './+types'
|
|
|
|
import { Suspense } from 'react'
|
|
import { Await, useSearchParams } from 'react-router'
|
|
|
|
import { DataTable } from '@repo/ui/components/data-table'
|
|
import { SearchForm } from '@repo/ui/components/search-form'
|
|
import { Skeleton } from '@repo/ui/components/skeleton'
|
|
import { Kbd } from '@repo/ui/components/ui/kbd'
|
|
import { createSearch } from '@repo/util/meili'
|
|
|
|
import { columns, type c } from './columns'
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [{ title: 'Colaboradores' }]
|
|
}
|
|
|
|
export async function loader({ context, request }: Route.LoaderArgs) {
|
|
const { searchParams } = new URL(request.url)
|
|
const query = searchParams.get('q') || ''
|
|
const page = Number(searchParams.get('p')) + 1
|
|
const hitsPerPage = Number(searchParams.get('perPage')) || 25
|
|
|
|
const users = createSearch({
|
|
index: 'betaeducacao-prod-users_d2o3r5gmm4it7j',
|
|
sort: ['createDate:desc', 'create_date:desc'],
|
|
filter: 'cnpj EXISTS',
|
|
query,
|
|
page,
|
|
hitsPerPage,
|
|
env: context.cloudflare.env
|
|
})
|
|
|
|
return { data: users }
|
|
}
|
|
|
|
export default function Route({ loaderData: { data } }) {
|
|
const [searchParams, setSearchParams] = useSearchParams()
|
|
|
|
return (
|
|
<Suspense fallback={<Skeleton />}>
|
|
<div className="space-y-0.5 mb-8">
|
|
<h1 className="text-2xl font-bold tracking-tight">
|
|
Gerenciar empresas
|
|
</h1>
|
|
<p className="text-muted-foreground">
|
|
Adicione colaboradores e organize sua equipe de forma prática.
|
|
</p>
|
|
</div>
|
|
|
|
<Await resolve={data}>
|
|
{({ hits, page, hitsPerPage, totalHits }) => {
|
|
return (
|
|
<DataTable
|
|
sort={[{ id: 'created_at', desc: true }]}
|
|
columns={columns}
|
|
data={hits as Org[]}
|
|
pageIndex={page - 1}
|
|
pageSize={hitsPerPage}
|
|
rowCount={totalHits}
|
|
>
|
|
<div className="flex flex-col lg:flex-row justify-between gap-2.5 mb-2.5">
|
|
<div className="2xl:w-1/4">
|
|
<SearchForm
|
|
placeholder={
|
|
<>
|
|
Digite <Kbd className="border font-mono">/</Kbd> para
|
|
pesquisar
|
|
</>
|
|
}
|
|
defaultValue={searchParams.get('q') || ''}
|
|
onChange={(value) =>
|
|
setSearchParams((searchParams) => {
|
|
searchParams.set('q', String(value))
|
|
searchParams.delete('p')
|
|
return searchParams
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</DataTable>
|
|
)
|
|
}}
|
|
</Await>
|
|
</Suspense>
|
|
)
|
|
}
|