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()