133 lines
4.1 KiB
TypeScript
Vendored
133 lines
4.1 KiB
TypeScript
Vendored
import { useMemo, useState } from 'react'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
import {
|
|
type SortingState,
|
|
type VisibilityState,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
getPaginationRowModel,
|
|
getSortedRowModel,
|
|
useReactTable,
|
|
} from '@tanstack/react-table'
|
|
import { useMediaQuery } from '@/hooks'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table'
|
|
import {
|
|
DataTablePagination,
|
|
TableSkeleton,
|
|
TableEmpty,
|
|
MobileCardList,
|
|
} from '@/components/data-table'
|
|
import { PageFooterPortal } from '@/components/layout'
|
|
import { getAdminPlans } from '../api'
|
|
import { useSubscriptionsColumns } from './subscriptions-columns'
|
|
import { useSubscriptions } from './subscriptions-provider'
|
|
|
|
export function SubscriptionsTable() {
|
|
const { t } = useTranslation()
|
|
const columns = useSubscriptionsColumns()
|
|
const { refreshTrigger } = useSubscriptions()
|
|
const isMobile = useMediaQuery('(max-width: 640px)')
|
|
const [sorting, setSorting] = useState<SortingState>([])
|
|
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['admin-subscription-plans', refreshTrigger],
|
|
queryFn: async () => {
|
|
const result = await getAdminPlans()
|
|
return result.data || []
|
|
},
|
|
placeholderData: (prev) => prev,
|
|
})
|
|
|
|
const plans = useMemo(() => data || [], [data])
|
|
|
|
const table = useReactTable({
|
|
data: plans,
|
|
columns,
|
|
state: { sorting, columnVisibility },
|
|
onSortingChange: setSorting,
|
|
onColumnVisibilityChange: setColumnVisibility,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
getSortedRowModel: getSortedRowModel(),
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<div className='space-y-3 sm:space-y-4'>
|
|
{isMobile ? (
|
|
<MobileCardList
|
|
table={table}
|
|
isLoading={isLoading}
|
|
emptyTitle={t('No subscription plans yet')}
|
|
emptyDescription={t(
|
|
'Click "Create Plan" to create your first subscription plan'
|
|
)}
|
|
/>
|
|
) : (
|
|
<div className='overflow-hidden rounded-md border'>
|
|
<Table>
|
|
<TableHeader>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<TableRow key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<TableHead key={header.id} colSpan={header.colSpan}>
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext()
|
|
)}
|
|
</TableHead>
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
</TableHeader>
|
|
<TableBody>
|
|
{isLoading ? (
|
|
<TableSkeleton
|
|
table={table}
|
|
keyPrefix='subscriptions-skeleton'
|
|
/>
|
|
) : table.getRowModel().rows.length === 0 ? (
|
|
<TableEmpty
|
|
colSpan={columns.length}
|
|
title={t('No subscription plans yet')}
|
|
description={t(
|
|
'Click "Create Plan" to create your first subscription plan'
|
|
)}
|
|
/>
|
|
) : (
|
|
table.getRowModel().rows.map((row) => (
|
|
<TableRow key={row.id}>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<TableCell key={cell.id}>
|
|
{flexRender(
|
|
cell.column.columnDef.cell,
|
|
cell.getContext()
|
|
)}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<PageFooterPortal>
|
|
<DataTablePagination table={table} />
|
|
</PageFooterPortal>
|
|
</>
|
|
)
|
|
}
|