mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-09-06 17:46:23 +00:00
perf(web): improve frontend table rendering and pinned columns/UI table (#5405)
* refactor(web): centralize data table implementation - route all TanStack table setup through a shared data-table hook to remove repeated state and row model wiring. - move table rendering, static table wrappers, empty states, and primitive exports behind the data-table module. - update feature tables and configuration editors to share the same table UX while preserving their existing workflows. * refactor(web): trim data table public API - remove unused data-table exports and dead static table helper types. - keep internal table header, skeleton, empty state, and faceted filter helpers private to the data-table module. - route feature imports through the data-table barrel to avoid subpath coupling. * refactor(web): unify table rendering components - centralize static table headers, bodies, empty states, and shared class names behind the data-table package. - migrate settings, pricing, channel, key, subscription, and model tables to the shared table APIs. - remove data-table exports for low-level table primitives so feature code uses one supported abstraction. * perf(web): keep list tables fixed within page content - make shared data table pages fill available height and scroll row data inside the table body. - add a fixed content layout mode so selected list pages avoid page-level scrolling. - apply the fixed table behavior to keys, logs, channels, models, users, redemptions, and subscriptions. * perf(web): refine table pagination controls - show total row counts instead of redundant page range text. - tighten visible page buttons so pagination fits constrained table widths. - align pagination controls and tune text hierarchy for clearer scanning. * perf(web): stabilize model pricing table columns - keep model pricing columns at fixed widths so headers do not collapse in narrow layouts. - truncate long model names and pricing summaries within their cells instead of squeezing adjacent columns. * refactor(web): simplify data table rendering internals - split table body rendering into focused helpers for loading, empty, and row states. - extract static table row and cell class resolution to reduce branching in the main component. - reuse a single pagination page-size option list to avoid duplicated constants. * perf(pricing): reduce dynamic pricing table render work - reuse dynamic pricing field metadata instead of rebuilding it inside table columns. - precompute formatted dynamic prices per tier and group to avoid repeated entry mapping for each cell. - simplify select option construction in related dialogs while preserving the same choices. * refactor(web): streamline pricing table rendering - reuse translated endpoint select options between trigger data and menu items. - precompute dynamic pricing maps per group so table cells only resolve formatted values. - add local dynamic pricing type aliases to keep helper signatures readable. * refactor(web): merge pricing table imports * refactor(web): merge upstream ratio table imports * refactor(web): merge channel selector table imports * refactor(web): simplify tiered pricing select items * refactor(web): reuse model ratio row state * refactor(web): rely on table view row defaults * refactor(web): reuse pagination state values * refactor(web): hoist pagination size select items * refactor(web): clarify static table body rows * refactor(web): extract table page pagination rendering * fix(web): remove direct hast type dependency - rely on Shiki transformer contextual typing for line nodes. - allow frontend typecheck to pass without an undeclared hast package. * refactor(web): trim data table hook return API - return only the TanStack table instance from useDataTable. - keep internal state handling private because callers do not consume it directly. * refactor(web): keep static table empty row private - stop exporting the internal StaticDataTableEmptyRow helper. - keep the public static table API focused on the table component and column type. * refactor(web): hide data table view props from barrel * refactor(web): remove stale long text lint override * fix(web): keep pinned table columns opaque - apply pinned column background classes after custom column classes. - use an opaque hover background so scrolled content cannot show through fixed cells. * refactor(data-table): organize shared table components - group table primitives, page composition, toolbar controls, static tables, and hooks by responsibility. - split shared view types, row rendering, header rendering, and pinned-column styling out of the main table view. - keep the public data-table barrel stable while documenting the new ownership boundaries. * fix(web): stabilize split table column sizing - derive default colgroup widths from visible columns when split headers or header sizing are enabled. - apply a fixed table layout with computed minimum width so header and body columns stay aligned. - keep split-header containers from leaking horizontal overflow and avoid extra pinned-column borders. * fix(web): set stable table utility column widths - assign fixed widths to selection columns so shared colgroup sizing keeps checkbox cells compact. - size id columns in redemption and user tables to keep split headers aligned with body rows. * fix(web): align model metadata icon cells - render compact provider avatars in the metadata icon column instead of wide wordmarks. - position icons in a fixed-size wrapper so they line up with the existing icon header alignment. * fix(status-badge): hide status dot by default * fix(web): prevent user invite info overlap - give the invite info and created-at columns explicit widths so table sizing reserves enough space. - allow invite badges to wrap within the cell instead of spilling into adjacent columns. * perf(data-table): cache pinned column class resolution - reuse the pinned column lookup while table props stay stable to reduce repeated per-render work. - share the resolved column class handler across unified and split-header table layouts. - localize page-number screen reader labels so pagination remains accessible in every locale. * refactor(data-table): tighten static table modes - make StaticDataTable distinguish data-driven and children-only usage through explicit prop shapes. - remove unsupported columns-without-data fallback after confirming no repository callers rely on it. - default manual table modes away from unused local row models to reduce repeated table work. * fix(data-table): make pinned edit column opaque - use an opaque muted background for the active action column so sticky cells do not reveal scrolled content underneath. * fix(data-table): prevent narrow column overlap - apply stable header sizing to remaining desktop data table pages so constrained layouts scroll instead of compressing cells. - add explicit widths for key, quota, badge, and timestamp columns that contain fixed-format content. - constrain masked values and timestamp cells with truncation to keep content inside its assigned column. * fix(table): align table cell content with headers - remove extra inline padding from masked table text buttons so values start at the cell edge. - tag status badges and offset leading badges inside table cells to match header text alignment. * fix(table): prevent admin list column overflow - widen redemption and subscription table columns so masked codes, timestamps, and localized headers fit. - localize subscription ID headers and add Received amount translations across supported locales. * fix(provider-badge): unify provider icon spacing - add a shared provider badge component for icon and status label layout. - reuse it in channel type and model vendor columns so OpenAI icons align consistently.
This commit is contained in:
QuentinHsu
+111
-113
@@ -36,15 +36,8 @@ import {
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
} from '@/components/ui/sheet'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { ConfirmDialog } from '@/components/confirm-dialog'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import {
|
||||
sideDrawerContentClassName,
|
||||
sideDrawerFormClassName,
|
||||
@@ -245,112 +238,117 @@ export function UserSubscriptionsDialog(props: Props) {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='rounded-md border'>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>{t('Plan')}</TableHead>
|
||||
<TableHead>{t('Status')}</TableHead>
|
||||
<TableHead>{t('Validity')}</TableHead>
|
||||
<TableHead>{t('Total Quota')}</TableHead>
|
||||
<TableHead className='text-right'>{t('Actions')}</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className='py-8 text-center'>
|
||||
{t('Loading...')}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : subs.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={6}
|
||||
className='text-muted-foreground py-8 text-center'
|
||||
>
|
||||
{t('No subscription records')}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
subs.map((record) => {
|
||||
const sub = record.subscription
|
||||
const now = Date.now() / 1000
|
||||
const isExpired =
|
||||
(sub.end_time || 0) > 0 && sub.end_time < now
|
||||
const isActive = sub.status === 'active' && !isExpired
|
||||
const total = Number(sub.amount_total || 0)
|
||||
const used = Number(sub.amount_used || 0)
|
||||
<StaticDataTable
|
||||
data={loading ? [] : subs}
|
||||
getRowKey={(record) => record.subscription.id}
|
||||
emptyClassName={loading ? 'py-8' : 'text-muted-foreground py-8'}
|
||||
emptyContent={
|
||||
loading ? t('Loading...') : t('No subscription records')
|
||||
}
|
||||
columns={[
|
||||
{
|
||||
id: 'id',
|
||||
header: t('ID'),
|
||||
cell: (record) => <TableId value={record.subscription.id} />,
|
||||
},
|
||||
{
|
||||
id: 'plan',
|
||||
header: t('Plan'),
|
||||
cell: (record) => {
|
||||
const sub = record.subscription
|
||||
|
||||
return (
|
||||
<TableRow key={sub.id}>
|
||||
<TableCell>
|
||||
<TableId value={sub.id} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className='font-medium'>
|
||||
{planTitleMap.get(sub.plan_id) ||
|
||||
`#${sub.plan_id}`}
|
||||
</div>
|
||||
<div className='text-muted-foreground text-sm'>
|
||||
{t('Source')}: {sub.source || '-'}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<SubscriptionStatusBadge sub={sub} t={t} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className='text-sm'>
|
||||
<div>
|
||||
{t('Start')}: {formatTimestamp(sub.start_time)}
|
||||
</div>
|
||||
<div>
|
||||
{t('End')}: {formatTimestamp(sub.end_time)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{total > 0 ? `${used}/${total}` : t('Unlimited')}
|
||||
</TableCell>
|
||||
<TableCell className='text-right'>
|
||||
<div className='flex justify-end gap-1'>
|
||||
<Button
|
||||
size='sm'
|
||||
variant='outline'
|
||||
disabled={!isActive}
|
||||
onClick={() =>
|
||||
setConfirmAction({
|
||||
type: 'invalidate',
|
||||
subId: sub.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('Invalidate')}
|
||||
</Button>
|
||||
<Button
|
||||
size='sm'
|
||||
variant='destructive'
|
||||
onClick={() =>
|
||||
setConfirmAction({
|
||||
type: 'delete',
|
||||
subId: sub.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('Delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
return (
|
||||
<div>
|
||||
<div className='font-medium'>
|
||||
{planTitleMap.get(sub.plan_id) || `#${sub.plan_id}`}
|
||||
</div>
|
||||
<div className='text-muted-foreground text-sm'>
|
||||
{t('Source')}: {sub.source || '-'}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
header: t('Status'),
|
||||
cell: (record) => (
|
||||
<SubscriptionStatusBadge sub={record.subscription} t={t} />
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 'validity',
|
||||
header: t('Validity'),
|
||||
cell: (record) => {
|
||||
const sub = record.subscription
|
||||
|
||||
return (
|
||||
<div className='text-sm'>
|
||||
<div>
|
||||
{t('Start')}: {formatTimestamp(sub.start_time)}
|
||||
</div>
|
||||
<div>
|
||||
{t('End')}: {formatTimestamp(sub.end_time)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'quota',
|
||||
header: t('Total Quota'),
|
||||
cell: (record) => {
|
||||
const sub = record.subscription
|
||||
const total = Number(sub.amount_total || 0)
|
||||
const used = Number(sub.amount_used || 0)
|
||||
return total > 0 ? `${used}/${total}` : t('Unlimited')
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
header: t('Actions'),
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (record) => {
|
||||
const sub = record.subscription
|
||||
const now = Date.now() / 1000
|
||||
const isExpired =
|
||||
(sub.end_time || 0) > 0 && sub.end_time < now
|
||||
const isActive = sub.status === 'active' && !isExpired
|
||||
|
||||
return (
|
||||
<div className='flex justify-end gap-1'>
|
||||
<Button
|
||||
size='sm'
|
||||
variant='outline'
|
||||
disabled={!isActive}
|
||||
onClick={() =>
|
||||
setConfirmAction({
|
||||
type: 'invalidate',
|
||||
subId: sub.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('Invalidate')}
|
||||
</Button>
|
||||
<Button
|
||||
size='sm'
|
||||
variant='destructive'
|
||||
onClick={() =>
|
||||
setConfirmAction({
|
||||
type: 'delete',
|
||||
subId: sub.id,
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('Delete')}
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
|
||||
+6
-6
@@ -36,9 +36,9 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
|
||||
{
|
||||
accessorFn: (row) => row.plan.id,
|
||||
id: 'id',
|
||||
meta: { label: 'ID', mobileHidden: true },
|
||||
meta: { label: t('ID'), mobileHidden: true },
|
||||
header: ({ column }) => (
|
||||
<DataTableColumnHeader column={column} title='ID' />
|
||||
<DataTableColumnHeader column={column} title={t('ID')} />
|
||||
),
|
||||
cell: ({ row }) => <TableId value={row.original.plan.id} />,
|
||||
size: 60,
|
||||
@@ -103,7 +103,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
|
||||
{formatResetPeriod(row.original.plan, t)}
|
||||
</span>
|
||||
),
|
||||
size: 80,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.plan.sort_order,
|
||||
@@ -117,7 +117,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
|
||||
{row.original.plan.sort_order}
|
||||
</span>
|
||||
),
|
||||
size: 80,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorFn: (row) => row.plan.enabled,
|
||||
@@ -188,7 +188,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
|
||||
</span>
|
||||
)
|
||||
},
|
||||
size: 100,
|
||||
size: 150,
|
||||
},
|
||||
{
|
||||
id: 'upgrade_group',
|
||||
@@ -205,7 +205,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
|
||||
}
|
||||
return <GroupBadge group={group} />
|
||||
},
|
||||
size: 100,
|
||||
size: 120,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
|
||||
@@ -16,18 +16,10 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useMemo } from 'react'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import {
|
||||
type SortingState,
|
||||
type VisibilityState,
|
||||
getCoreRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from '@tanstack/react-table'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { DataTablePage } from '@/components/data-table'
|
||||
import { DataTablePage, useDataTable } from '@/components/data-table'
|
||||
import { getAdminPlans } from '../api'
|
||||
import { useSubscriptionsColumns } from './subscriptions-columns'
|
||||
import { useSubscriptions } from './subscriptions-provider'
|
||||
@@ -36,8 +28,6 @@ export function SubscriptionsTable() {
|
||||
const { t } = useTranslation()
|
||||
const columns = useSubscriptionsColumns()
|
||||
const { refreshTrigger } = useSubscriptions()
|
||||
const [sorting, setSorting] = useState<SortingState>([])
|
||||
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['admin-subscription-plans', refreshTrigger],
|
||||
@@ -50,15 +40,11 @@ export function SubscriptionsTable() {
|
||||
|
||||
const plans = useMemo(() => data || [], [data])
|
||||
|
||||
const table = useReactTable({
|
||||
const { table } = useDataTable({
|
||||
data: plans,
|
||||
columns,
|
||||
state: { sorting, columnVisibility },
|
||||
onSortingChange: setSorting,
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
withFilteredRowModel: false,
|
||||
withFacetedRowModel: false,
|
||||
})
|
||||
|
||||
return (
|
||||
@@ -71,6 +57,7 @@ export function SubscriptionsTable() {
|
||||
'Click "Create Plan" to create your first subscription plan'
|
||||
)}
|
||||
skeletonKeyPrefix='subscriptions-skeleton'
|
||||
applyHeaderSize
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
+15
-11
@@ -34,7 +34,7 @@ function SubscriptionsContent() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<SectionPageLayout>
|
||||
<SectionPageLayout fixedContent>
|
||||
<SectionPageLayout.Title>
|
||||
{t('Subscription Management')}
|
||||
</SectionPageLayout.Title>
|
||||
@@ -52,16 +52,20 @@ function SubscriptionsContent() {
|
||||
</div>
|
||||
</SectionPageLayout.Actions>
|
||||
<SectionPageLayout.Content>
|
||||
{!complianceConfirmed ? (
|
||||
<Alert variant='destructive' className='mb-4'>
|
||||
<AlertDescription>
|
||||
{t(
|
||||
'Subscription plan creation and changes are locked until the administrator confirms compliance terms in Payment Gateway settings.'
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : null}
|
||||
<SubscriptionsTable />
|
||||
<div className='flex h-full min-h-0 flex-col gap-4'>
|
||||
{!complianceConfirmed ? (
|
||||
<Alert variant='destructive' className='shrink-0'>
|
||||
<AlertDescription>
|
||||
{t(
|
||||
'Subscription plan creation and changes are locked until the administrator confirms compliance terms in Payment Gateway settings.'
|
||||
)}
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : null}
|
||||
<div className='min-h-0 flex-1'>
|
||||
<SubscriptionsTable />
|
||||
</div>
|
||||
</div>
|
||||
</SectionPageLayout.Content>
|
||||
</SectionPageLayout>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user