sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add search filter

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-12-18 17:12:23 -03:00
parent d95981a6eb
commit 453327982d
15 changed files with 688 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/admin.saladeaula.digital/app/routes/_.$orgid.billing._index/range-period.tsx
View File

@@ -1,11 +1,12 @@
import { useSearchParams } from 'react-router'
import { ChevronRightIcon, ChevronLeftIcon } from 'lucide-react'
import { subMonths, addMonths } from 'date-fns'
import { DateTime } from 'luxon'
import { DateTime as LuxonDateTime } from 'luxon'
import { Button } from '@repo/ui/components/ui/button'
import { ButtonGroup } from '@repo/ui/components/ui/button-group'
import { Badge } from '@repo/ui/components/ui/badge'
import { DateTime } from '@repo/ui/components/datetime'
import { formatDate, billingPeriod } from './util'
import { tz } from './data'
@@ -16,12 +17,18 @@ type RangePeriodProps = {
billingDay: number
}
const dtOptions: Intl.DateTimeFormatOptions = {
year: '2-digit',
hour: undefined,
minute: undefined
}
export function RangePeriod({
startDate,
endDate,
billingDay
}: RangePeriodProps) {
const today = DateTime.now().setZone(tz).toJSDate()
const today = LuxonDateTime.now().setZone(tz).toJSDate()
const [, setSearchParams] = useSearchParams()
const prevPeriod = billingPeriod(billingDay, subMonths(startDate, 1))
const nextPeriod = billingPeriod(billingDay, addMonths(startDate, 1))
@@ -51,10 +58,10 @@ export function RangePeriod({
>
<div className="gap-1 flex">
<Badge variant="outline" className="rounded-sm px-1 font-mono">
{datetime.format(startDate)}
<DateTime options={dtOptions}>{startDate}</DateTime>
</Badge>
<Badge variant="outline" className="rounded-sm px-1 font-mono">
{datetime.format(endDate)}
<DateTime options={dtOptions}>{endDate}</DateTime>
</Badge>
</div>
</Button>
@@ -78,9 +85,3 @@ export function RangePeriod({
</>
)
}
const datetime = new Intl.DateTimeFormat('pt-BR', {
day: '2-digit',
month: '2-digit',
year: '2-digit'
})

57
apps/admin.saladeaula.digital/app/routes/_.$orgid.billing._index/route.tsx
View File

@@ -1,7 +1,7 @@
import type { Route } from './+types/route'
import Fuse from 'fuse.js'
import { DateTime } from 'luxon'
import { DateTime as LuxonDateTime } from 'luxon'
import { Suspense, useMemo } from 'react'
import { BanIcon } from 'lucide-react'
import { Await, useSearchParams } from 'react-router'
@@ -30,6 +30,8 @@ import {
EmptyTitle
} from '@repo/ui/components/ui/empty'
import { Kbd } from '@repo/ui/components/ui/kbd'
import { Currency } from '@repo/ui/components/currency'
import { DateTime } from '@repo/ui/components/datetime'
import { billingPeriod, formatDate } from './util'
import { RangePeriod } from './range-period'
@@ -45,11 +47,15 @@ export async function loader({ context, request, params }: Route.LoaderArgs) {
url: `/orgs/${params.orgid}/subscription`,
context,
request
}).then((r) => r.json())
})
const { billing_day = 1 } = (await subscription.json()) as {
billing_day: number
}
const [startDate, endDate] = billingPeriod(
subscription?.billing_day || 1,
DateTime.now().setZone(tz).toJSDate()
billing_day,
LuxonDateTime.now().setZone(tz).toJSDate()
)
const start = searchParams.get('start') || formatDate(startDate)
const end = searchParams.get('end') || formatDate(endDate)
@@ -61,15 +67,15 @@ export async function loader({ context, request, params }: Route.LoaderArgs) {
}).then((r) => r.json())
return {
subscription,
billing_day,
billing,
startDate: DateTime.fromISO(start, { zone: tz }).toJSDate(),
endDate: DateTime.fromISO(end, { zone: tz }).toJSDate()
startDate: LuxonDateTime.fromISO(start, { zone: tz }).toJSDate(),
endDate: LuxonDateTime.fromISO(end, { zone: tz }).toJSDate()
}
}
export default function Route({
loaderData: { subscription, billing, startDate, endDate }
loaderData: { billing_day, billing, startDate, endDate }
}: Route.ComponentProps) {
const [searchParams, setSearchParams] = useSearchParams()
const search = searchParams.get('s') as string
@@ -120,7 +126,7 @@ export default function Route({
<RangePeriod
startDate={startDate}
endDate={endDate}
billingDay={subscription?.billing_day || 1}
billingDay={billing_day}
/>
<Button
@@ -232,9 +238,11 @@ function List({ items, search }) {
<Abbr>{created_by ? created_by.name : 'N/A'}</Abbr>
</TableCell>
<TableCell>
{datetime.format(new Date(enrolled_at))}
<DateTime>{enrolled_at}</DateTime>
</TableCell>
<TableCell>
<Currency>{unit_price}</Currency>
</TableCell>
<TableCell>{currency.format(unit_price)}</TableCell>
</TableRow>
)
)}
@@ -268,9 +276,11 @@ function List({ items, search }) {
<Abbr>{canceled_by ? canceled_by.name : 'N/A'}</Abbr>
</TableCell>
<TableCell>
{datetime.format(new Date(created_at))}
<DateTime>{created_at}</DateTime>
</TableCell>
<TableCell>
<Currency>{unit_price}</Currency>
</TableCell>
<TableCell>{currency.format(unit_price)}</TableCell>
</TableRow>
)
)}
@@ -284,11 +294,11 @@ function List({ items, search }) {
Total
</TableCell>
<TableCell>
{currency.format(
filtered
<Currency>
{filtered
?.filter((x) => 'course' in x)
?.reduce((acc, { unit_price }) => acc + unit_price, 0)
)}
?.reduce((acc, { unit_price }) => acc + unit_price, 0)}
</Currency>
</TableCell>
</TableRow>
</TableFooter>
@@ -297,18 +307,5 @@ function List({ items, search }) {
)
}
const currency = new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL'
})
const datetime = new Intl.DateTimeFormat('pt-BR', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
const sortBy = (field: 'enrolled_at' | 'created_at') => (a: any, b: any) =>
new Date(a[field]).getTime() - new Date(b[field]).getTime()

171
apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/async-combobox.tsx
View File

@@ -1,171 +0,0 @@
import { useBoolean, useRequest, useToggle } from 'ahooks'
import { CheckIcon, UserIcon, XIcon, AlertTriangleIcon } from 'lucide-react'
import { formatCPF } from '@brazilian-utils/brazilian-utils'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Abbr } from '@repo/ui/components/abbr'
import {
InputGroup,
InputGroupAddon,
InputGroupInput
} from '@repo/ui/components/ui/input-group'
import { initials, cn } from '@repo/ui/lib/utils'
import {
Popover,
PopoverContent,
PopoverTrigger
} from '@repo/ui/components/ui/popover'
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList
} from '@repo/ui/components/ui/command'
import { Spinner } from '@repo/ui/components/ui/spinner'
import { Button } from '@repo/ui/components/ui/button'
interface AsyncComboboxProps {
value: any
title: string
placeholder?: string
onChange: (props: any) => void
onSearch: (search: string) => Promise<any[]>
error?: any
}
export function AsyncCombobox({
title,
placeholder,
value,
onSearch,
onChange,
error
}: AsyncComboboxProps) {
const [open, { set }] = useToggle()
const [searched, { setTrue }] = useBoolean()
const {
data = [],
loading,
runAsync
} = useRequest(onSearch, {
manual: true,
debounceWait: 300,
defaultParams: [''],
onSuccess: setTrue
})
return (
<Popover open={open} onOpenChange={set}>
<PopoverTrigger asChild>
<InputGroup>
<InputGroupInput
readOnly
value={value?.name || ''}
placeholder={title}
className="cursor-pointer"
autoComplete="off"
aria-invalid={!!error}
/>
<InputGroupAddon>
<UserIcon />
</InputGroupAddon>
{value && (
<InputGroupAddon align="inline-end" className="mr-0">
<Button
variant="link"
size="icon-sm"
className="cursor-pointer text-muted-foreground"
onClick={(e) => {
e.preventDefault()
onChange?.(undefined)
set(false)
}}
>
<XIcon />
</Button>
</InputGroupAddon>
)}
{loading && (
<InputGroupAddon align="inline-end">
<Spinner />
</InputGroupAddon>
)}
</InputGroup>
</PopoverTrigger>
<PopoverContent className="lg:w-84 p-0" align="start">
<Command
shouldFilter={false}
className={cn(
!searched && '**:data-[slot=command-input-wrapper]:border-b-0'
)}
>
<CommandInput
placeholder={placeholder}
autoComplete="off"
onValueChange={runAsync}
/>
{searched ? (
<CommandList>
<CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
<CommandGroup>
{data.map(({ id, name, email, cpf }) => (
<CommandItem
key={id}
value={id}
className="cursor-pointer"
disabled={!cpf}
onSelect={() => {
onChange?.({ id, name, email, cpf })
set(false)
}}
>
<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>{email}</Abbr>
</li>
{cpf ? (
<li className="text-muted-foreground text-sm">
{formatCPF(cpf)}
</li>
) : (
<li className="flex gap-1 items-center text-red-400">
<AlertTriangleIcon className="text-red-400" />
Inelegível
</li>
)}
</ul>
</div>
<CheckIcon
className={cn(
'ml-auto',
value?.id === id ? 'opacity-100' : 'opacity-0'
)}
/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
) : null}
</Command>
</PopoverContent>
</Popover>
)
}

117
apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx
View File

@@ -13,7 +13,9 @@ import {
CheckIcon,
BookIcon,
ArrowDownAZIcon,
ArrowDownZAIcon
ArrowDownZAIcon,
AlertTriangleIcon,
UserIcon
} from 'lucide-react'
import { Link, useParams, useFetcher } from 'react-router'
import { Controller, useFieldArray, useForm } from 'react-hook-form'
@@ -22,7 +24,10 @@ import { format } from 'date-fns'
import { ptBR } from 'react-day-picker/locale'
import { zodResolver } from '@hookform/resolvers/zod'
import Fuse from 'fuse.js'
import { formatCPF } from '@brazilian-utils/brazilian-utils'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { Abbr } from '@repo/ui/components/abbr'
import {
Command,
CommandEmpty,
@@ -63,13 +68,13 @@ import {
import { Label } from '@repo/ui/components/ui/label'
import { Calendar } from '@repo/ui/components/ui/calendar'
import { createSearch } from '@repo/util/meili'
import { cn } from '@repo/ui/lib/utils'
import { initials, cn } from '@repo/ui/lib/utils'
import { HttpMethod, request as req } from '@repo/util/request'
import { useIsMobile } from '@repo/ui/hooks/use-mobile'
import { cloudflareContext } from '@repo/auth/context'
import { SearchFilter } from '@repo/ui/components/search-filter'
import { formSchema, type Schema, MAX_ITEMS } from './data'
import { AsyncCombobox } from './async-combobox'
import { redirect } from 'react-router'
export function meta({}: Route.MetaArgs) {
@@ -213,13 +218,109 @@ export default function Route({
fieldState
}) => (
<div className="grid gap-1">
<AsyncCombobox
value={value}
title="Colaborador"
<SearchFilter
align="start"
onChange={onChange}
onSearch={onSearch}
error={fieldState.error}
/>
render={({
id,
name,
email,
cpf,
onSelect,
onClose
}) => (
<CommandItem
key={id}
value={id}
className="cursor-pointer"
disabled={!cpf}
onSelect={() => {
onSelect()
onClose()
}}
>
<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>{email}</Abbr>
</li>
{cpf ? (
<li className="text-muted-foreground text-sm">
{formatCPF(cpf)}
</li>
) : (
<li className="flex gap-1 items-center text-red-400">
<AlertTriangleIcon className="text-red-400" />
Inelegível
</li>
)}
</ul>
</div>
<CheckIcon
className={cn(
'ml-auto',
value?.id === id
? 'opacity-100'
: 'opacity-0'
)}
/>
</CommandItem>
)}
>
{({ loading }) => (
<InputGroup>
<InputGroupInput
readOnly
value={value?.name || ''}
placeholder="Colaborador"
className="cursor-pointer"
autoComplete="off"
aria-invalid={!!fieldState.error}
/>
<InputGroupAddon>
<UserIcon />
</InputGroupAddon>
{value && (
<InputGroupAddon
align="inline-end"
className="mr-0"
>
<Button
variant="link"
size="icon-sm"
className="cursor-pointer text-muted-foreground"
onClick={(e) => {
e.preventDefault()
onChange?.(undefined)
}}
>
<XIcon />
</Button>
</InputGroupAddon>
)}
{loading && (
<InputGroupAddon align="inline-end">
<Spinner />
</InputGroupAddon>
)}
</InputGroup>
)}
</SearchFilter>
<ErrorMessage
errors={formState.errors}
name={name}

129
apps/insights.saladeaula.digital/app/routes/_app.enrollments._index/route.tsx
View File

@@ -1,21 +1,36 @@
import type { Route } from './+types/route'
import { CalendarIcon, PlusCircleIcon } from 'lucide-react'
import { pick } from 'ramda'
import {
CalendarIcon,
PlusCircleIcon,
BuildingIcon,
CheckIcon
} from 'lucide-react'
import { MeiliSearchFilterBuilder } from 'meilisearch-helper'
import { Suspense, useState } from 'react'
import { Await, Outlet, useSearchParams } from 'react-router'
import { formatCNPJ } from '@brazilian-utils/brazilian-utils'
import { cloudflareContext } from '@repo/auth/context'
import { DataTable, DataTableViewOptions } from '@repo/ui/components/data-table'
import { FacetedFilter } from '@repo/ui/components/faceted-filter'
import { RangeCalendarFilter } from '@repo/ui/components/range-calendar-filter'
import { SearchForm } from '@repo/ui/components/search-form'
import { SearchFilter } from '@repo/ui/components/search-filter'
import { Skeleton } from '@repo/ui/components/skeleton'
import { Kbd } from '@repo/ui/components/ui/kbd'
import { ExportMenu } from '@repo/ui/components/export-menu'
import { createSearch } from '@repo/util/meili'
import { headers, sortings, statuses } from '@repo/ui/routes/enrollments/data'
import { cn, initials } from '@repo/ui/lib/utils'
import { CommandItem } from '@repo/ui/components/ui/command'
import { Button } from '@repo/ui/components/ui/button'
import { Separator } from '@repo/ui/components/ui/separator'
import { Badge } from '@repo/ui/components/ui/badge'
import { Abbr } from '@repo/ui/components/abbr'
import { Spinner } from '@repo/ui/components/ui/spinner'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { columns, type Enrollment } from './columns'
@@ -27,6 +42,7 @@ 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'
@@ -40,6 +56,11 @@ export async function loader({ context, request }: Route.LoaderArgs) {
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])
@@ -56,7 +77,7 @@ export async function loader({ context, request }: Route.LoaderArgs) {
})
return {
data: enrollments
enrollments
}
}
@@ -66,11 +87,23 @@ const formatted = new Intl.DateTimeFormat('en-CA', {
day: '2-digit'
})
export default function Route({ loaderData: { data } }: Route.ComponentProps) {
export default function Route({
loaderData: { enrollments }
}: Route.ComponentProps) {
const [searchParams, setSearchParams] = useSearchParams()
const [selectedRows, setSelectedRows] = useState<Enrollment[]>([])
const status = searchParams.get('status')
const rangeParams = useRangeParams()
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 />}>
@@ -78,7 +111,7 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
<h1 className="text-2xl font-bold tracking-tight">Matrículas</h1>
</div>
<Await resolve={data}>
<Await resolve={enrollments}>
{({ hits, page = 1, hitsPerPage, totalHits }) => (
<DataTable
sort={[{ id: 'created_at', desc: true }]}
@@ -159,7 +192,7 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
<RangeCalendarFilter
title="Período"
icon={CalendarIcon}
value={rangeParams}
value={dateRange}
className="lg:flex-1"
options={Object.entries(sortings).map(
([value, label]) => ({
@@ -190,6 +223,88 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
})
}}
/>
<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">