344 lines
12 KiB
TypeScript
344 lines
12 KiB
TypeScript
import type { Route } from './+types/route'
|
|
|
|
import { formatCNPJ } from '@brazilian-utils/brazilian-utils'
|
|
import {
|
|
BuildingIcon,
|
|
CalendarIcon,
|
|
CheckIcon,
|
|
PlusCircleIcon
|
|
} from 'lucide-react'
|
|
import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
|
|
import { pick } from 'ramda'
|
|
import { Suspense, useState } from 'react'
|
|
import { Await, Outlet, useSearchParams } from 'react-router'
|
|
|
|
import { cloudflareContext } from '@repo/auth/context'
|
|
import { Abbr } from '@repo/ui/components/abbr'
|
|
import { DataTable, DataTableViewOptions } from '@repo/ui/components/data-table'
|
|
import { ExportMenu } from '@repo/ui/components/export-menu'
|
|
import { FacetedFilter } from '@repo/ui/components/faceted-filter'
|
|
import { RangeCalendarFilter } from '@repo/ui/components/range-calendar-filter'
|
|
import { SearchFilter } from '@repo/ui/components/search-filter'
|
|
import { SearchForm } from '@repo/ui/components/search-form'
|
|
import { Skeleton } from '@repo/ui/components/skeleton'
|
|
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
|
|
import { Badge } from '@repo/ui/components/ui/badge'
|
|
import { Button } from '@repo/ui/components/ui/button'
|
|
import { CommandItem } from '@repo/ui/components/ui/command'
|
|
import { Kbd } from '@repo/ui/components/ui/kbd'
|
|
import { Separator } from '@repo/ui/components/ui/separator'
|
|
import { Spinner } from '@repo/ui/components/ui/spinner'
|
|
import { cn, initials } from '@repo/ui/lib/utils'
|
|
import { headers, sortings, statuses } from '@repo/ui/routes/enrollments/data'
|
|
import { createSearch } from '@repo/util/meili'
|
|
|
|
import { columns, type Enrollment } from './columns'
|
|
|
|
export function meta({}: Route.MetaArgs) {
|
|
return [{ title: 'Matrículas' }]
|
|
}
|
|
|
|
export async function loader({ context, request }: Route.LoaderArgs) {
|
|
const cloudflare = context.get(cloudflareContext)
|
|
const { searchParams } = new URL(request.url)
|
|
const query = searchParams.get('q') || ''
|
|
const org = searchParams.get('org') || ''
|
|
const from = searchParams.get('from')
|
|
const to = searchParams.get('to')
|
|
const sort = searchParams.get('sort') || 'created_at:desc'
|
|
const status = searchParams.get('status')
|
|
const page = Number(searchParams.get('p')) + 1
|
|
const hitsPerPage = Number(searchParams.get('perPage')) || 25
|
|
|
|
let builder = new MeiliSearchFilterBuilder().where('is_test', 'exists', false)
|
|
|
|
if (status) {
|
|
builder = builder.where('status', 'in', status.split(','))
|
|
}
|
|
|
|
if (org) {
|
|
const { id } = JSON.parse(org)
|
|
builder = builder.where('org_id', '=', id)
|
|
}
|
|
|
|
if (from && to) {
|
|
const [field, from_] = from.split(':')
|
|
builder = builder.where(field, 'between', [from_, to])
|
|
}
|
|
|
|
const enrollments = createSearch({
|
|
index: 'betaeducacao-prod-enrollments',
|
|
filter: builder.build(),
|
|
sort: [sort],
|
|
query,
|
|
page,
|
|
hitsPerPage,
|
|
env: cloudflare.env
|
|
})
|
|
|
|
return {
|
|
enrollments
|
|
}
|
|
}
|
|
|
|
const formatted = new Intl.DateTimeFormat('en-CA', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit'
|
|
})
|
|
|
|
export default function Route({
|
|
loaderData: { enrollments }
|
|
}: Route.ComponentProps) {
|
|
const [searchParams, setSearchParams] = useSearchParams()
|
|
const [selectedRows, setSelectedRows] = useState<Enrollment[]>([])
|
|
const status = searchParams.get('status')
|
|
const dateRange = useRangeParams()
|
|
const org = searchParams.has('org')
|
|
? JSON.parse(searchParams.get('org') || '')
|
|
: null
|
|
|
|
const onSearch = async (search: string) => {
|
|
const params = new URLSearchParams({ q: search })
|
|
const r = await fetch(`/orgs.json?${params.toString()}`)
|
|
const { hits } = (await r.json()) as { hits: any[] }
|
|
return hits
|
|
}
|
|
|
|
return (
|
|
<Suspense fallback={<Skeleton />}>
|
|
<div className="space-y-0.5 mb-8">
|
|
<h1 className="text-2xl font-bold tracking-tight">Matrículas</h1>
|
|
</div>
|
|
|
|
<Await resolve={enrollments}>
|
|
{({ hits, page = 1, hitsPerPage, totalHits }) => (
|
|
<DataTable
|
|
sort={[{ id: 'created_at', desc: true }]}
|
|
columnPinning={{ left: ['select'], right: ['action'] }}
|
|
columns={columns}
|
|
data={hits as Enrollment[]}
|
|
pageIndex={page - 1}
|
|
pageSize={hitsPerPage}
|
|
setSelectedRows={setSelectedRows}
|
|
rowCount={totalHits}
|
|
columnVisibilityInit={{
|
|
created_at: true,
|
|
completed_at: false,
|
|
started_at: false,
|
|
failed_at: false,
|
|
canceled_at: false
|
|
}}
|
|
>
|
|
<div className="flex gap-2.5 mb-2.5">
|
|
{selectedRows.length ? (
|
|
<>
|
|
<div className="flex gap-2.5 items-center">
|
|
<ExportMenu
|
|
name="enrollments"
|
|
headers={headers}
|
|
selectedRows={selectedRows}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="w-full 2xl:w-1/3">
|
|
<SearchForm
|
|
defaultValue={searchParams.get('q') || ''}
|
|
placeholder={
|
|
<>
|
|
Digite <Kbd className="border font-mono">/</Kbd> para
|
|
pesquisar
|
|
</>
|
|
}
|
|
onChange={(value) =>
|
|
setSearchParams((searchParams) => {
|
|
searchParams.set('q', String(value))
|
|
searchParams.delete('p')
|
|
return searchParams
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-2.5 max-lg:flex-col w-full">
|
|
<div className="flex gap-2.5 max-lg:flex-col">
|
|
<FacetedFilter
|
|
title="Status"
|
|
icon={PlusCircleIcon}
|
|
className="lg:flex-1"
|
|
value={status ? status.split(',') : []}
|
|
onChange={(statuses) => {
|
|
setSearchParams((searchParams) => {
|
|
searchParams.delete('status')
|
|
searchParams.delete('p')
|
|
|
|
if (statuses.length) {
|
|
searchParams.set('status', statuses.join(','))
|
|
}
|
|
|
|
return searchParams
|
|
})
|
|
}}
|
|
options={Object.entries(statuses).map(
|
|
([key, value]) => ({
|
|
value: key,
|
|
...value
|
|
})
|
|
)}
|
|
/>
|
|
|
|
<RangeCalendarFilter
|
|
title="Período"
|
|
icon={CalendarIcon}
|
|
value={dateRange}
|
|
className="lg:flex-1"
|
|
options={Object.entries(sortings).map(
|
|
([value, label]) => ({
|
|
value,
|
|
label
|
|
})
|
|
)}
|
|
onChange={(props) => {
|
|
setSearchParams((searchParams) => {
|
|
if (!props) {
|
|
searchParams.delete('from')
|
|
searchParams.delete('to')
|
|
return searchParams
|
|
}
|
|
|
|
const { rangeField, dateRange } = props
|
|
|
|
searchParams.set(
|
|
'from',
|
|
`${rangeField}:${formatted.format(dateRange?.from)}`
|
|
)
|
|
searchParams.set(
|
|
'to',
|
|
formatted.format(dateRange?.to)
|
|
)
|
|
|
|
return searchParams
|
|
})
|
|
}}
|
|
/>
|
|
|
|
<SearchFilter
|
|
align="end"
|
|
requestOptions={{
|
|
manual: !org,
|
|
defaultParams: [org?.q || '']
|
|
}}
|
|
defaultValue={org?.q || ''}
|
|
onSearch={onSearch}
|
|
onChange={(value) => {
|
|
setSearchParams((searchParams) => {
|
|
if (value) {
|
|
searchParams.set(
|
|
'org',
|
|
JSON.stringify(pick(['id', 'name', 'q'], value))
|
|
)
|
|
} else {
|
|
searchParams.delete('org')
|
|
}
|
|
|
|
return searchParams
|
|
})
|
|
}}
|
|
render={({ id, name, cnpj, onSelect }) => (
|
|
<CommandItem
|
|
key={id}
|
|
value={id}
|
|
className="cursor-pointer"
|
|
onSelect={onSelect}
|
|
>
|
|
<div className="flex gap-2.5 items-start">
|
|
<Avatar className="size-10 hidden lg:block">
|
|
<AvatarFallback className="border">
|
|
{initials(name)}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<ul>
|
|
<li className="font-bold">
|
|
<Abbr>{name}</Abbr>
|
|
</li>
|
|
<li className="text-muted-foreground text-sm">
|
|
<Abbr>{formatCNPJ(cnpj)}</Abbr>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<CheckIcon
|
|
className={cn(
|
|
'ml-auto',
|
|
org?.id === id ? 'opacity-100' : 'opacity-0'
|
|
)}
|
|
/>
|
|
</CommandItem>
|
|
)}
|
|
>
|
|
{({ loading }) => (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className="cursor-pointer border-dashed h-full"
|
|
>
|
|
{loading ? <Spinner /> : <BuildingIcon />}
|
|
<span>Empresa</span>
|
|
{org?.id ? (
|
|
<>
|
|
<Separator
|
|
orientation="vertical"
|
|
className="mx-0.5 h-4"
|
|
/>
|
|
|
|
<Badge
|
|
variant="outline"
|
|
className="rounded-sm px-1 font-normal"
|
|
>
|
|
<Abbr maxLen={14}>{org.name}</Abbr>
|
|
</Badge>
|
|
</>
|
|
) : null}
|
|
</Button>
|
|
)}
|
|
</SearchFilter>
|
|
</div>
|
|
|
|
<div className="lg:ml-auto flex gap-2.5">
|
|
<DataTableViewOptions />
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</DataTable>
|
|
)}
|
|
</Await>
|
|
|
|
<Outlet />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
function useRangeParams() {
|
|
const [searchParams] = useSearchParams()
|
|
const [from, to] = [searchParams.get('from'), searchParams.get('to')]
|
|
|
|
if (!from || !to) {
|
|
return {}
|
|
}
|
|
|
|
const [rangeField, from_] = from.split(':')
|
|
|
|
return {
|
|
rangeField,
|
|
dateRange: {
|
|
from: new Date(from_),
|
|
to: new Date(to)
|
|
}
|
|
}
|
|
}
|