Jaymr/new-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(data-table): improve data table layout and badge display (#5460)

Browse Source 
* perf(table): use percentage-based column widths

- compute each column's width as a percentage of total column size instead of a fixed pixel value, letting the colgroup scale fluidly with the table container.

* perf(data-table): reduce unnecessary re-renders across table components

- stabilize commitSearchValue in toolbar by reading table/searchKey via refs, eliminating recreation on every parent render
- store onColumnFiltersChange in a ref so debounce effect is not reset when the caller passes a new function reference each render
- wrap DataTableRow in React.memo with a custom comparator that ignores getColumnClassName reference churn
- memoize selectedValues Set in DataTableFacetedFilter and wrap with React.memo to prevent rerenders on unrelated state changes
- cache cell meta reads in CompactRow and FallbackRow to a single pass per row; memoize hasCompactMeta in MobileCardList
- memoize hideable columns list in DataTableViewOptions and colSpan in DataTableView
- remove tableClassName and colgroup from scroll-sync effect deps; cache toolbar button NodeList via useLayoutEffect to avoid per-keydown DOM queries

* perf(data-table): replace scroll-sync split header with CSS sticky

- remove JS scroll-sync effect and event listener between split header and body containers.
- merge separate header/body tables into a single scrollable table element, reducing DOM complexity.
- apply CSS sticky positioning to the header for a simpler, hardware-accelerated freeze effect.

* fix(data-table): replace opacity muted colors with color-mix

- switch from bg-muted/50 and bg-muted/30 to color-mix(in oklch) to produce opaque blended backgrounds that prevent scroll content from showing through pinned cells.
- expose --table-header-bg CSS variable so pinned header cells inherit the exact same computed color as the thead background.
- add group class to TableRow to enable group-hover selectors on pinned cell styles.

* feat(data-table): support column pinning via meta.pinned

- add pinned?: 'left' | 'right' to ColumnMeta so pinning is declared once in the column definition and applies to both header and body automatically
- DataTableView derives pinnedColumns from meta.pinned at runtime, merged with any explicit pinnedColumns prop; explicit entries take precedence
- add header and meta.pinned: 'right' to all actions columns across channels, users, api-keys, redemption-codes, models, deployments, and subscriptions tables

* style(row-actions): align action buttons to leading edge of column

* refactor(data-table): extract BadgeListCell and centralize badge alignment

- add BadgeListCell component to data-table for badge lists with overflow tooltip, replacing duplicated renderLimitedItems helpers in channels, models, and pricing columns
- move StatusBadge -ml-1.5 alignment into the component itself via a table-cell context selector, so callers no longer need manual offset wrappers
- remove the table-cell-level -ml-1.5 selector from TableCell now that alignment is handled by StatusBadge directly

* style(row-actions): offset action buttons to align with column header text

* refactor(data-table): consolidate mobile meta into ColumnMeta declaration

- move mobileTitle, mobileBadge, mobileHidden into the global ColumnMeta augmentation so the type is shared across the project
- remove the local MobileColumnMeta interface and getCellMeta helper from mobile-card-list.tsx
- direct col.columnDef.meta access is now type-safe without explicit casting

* refactor(data-table): simplify column header and meta config

- auto-render string `header` values via DataTableColumnHeader so sortable/non-sortable columns work without boilerplate function wrappers
- promote mobile layout hints (mobileTitle, mobileBadge, mobileHidden) into the global ColumnMeta type, removing the local MobileColumnMeta cast in mobile-card-list
- migrate all column files from `meta: { label }` to top-level `header: t('...')`, cutting ~180 lines of repetitive template code
- ViewOptions and MobileCardList label resolution now reads string header first, then meta.label as fallback

* feat(status-badge): add text and underline display types

- introduce StatusBadgeType ('badge' | 'text' | 'underline') and StatusBadgeTypeContext so ancestors can override rendering without touching call sites
- mobile card field rows now use the text type via context, showing badges as plain colored text instead of pills
- ProviderBadge gains data-slot='provider-badge' to enable targeted CSS resets in compact layouts
- replace the implicit [[data-slot=table-cell]>&]:-ml-1.5 rule with explicit -ml-1.5 at each column call site

* refactor(data-table): simplify table filtering internals

- derive toolbar search state from the active table filter to avoid render-time ref writes.
- extract faceted filter selection updates into a pure helper for clearer single and multi-select behavior.
- split pinned column resolution into focused helpers so explicit and meta pins merge predictably.

Co-authored-by: t0ng7u <dev@aiass.cc>
This commit is contained in:
QuentinHsu
2026-06-12 23:18:22 +08:00
committed by GitHub
co-authored by t0ng7u
parent 6f415428d3
commit 27b2b2c4b9
37 changed files with 694 additions and 877 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/default/src/features/channels/components/channels-columns.tsx
Vendored
+44 -100
View File
@@ -45,10 +45,10 @@ import {
TooltipTrigger,
} from '@/components/ui/tooltip'
import { ConfirmDialog } from '@/components/confirm-dialog'
import { DataTableColumnHeader } from '@/components/data-table'
import { BadgeListCell } from '@/components/data-table'
import { GroupBadge } from '@/components/group-badge'
import { ProviderBadge } from '@/components/provider-badge'
import { StatusBadge, StatusBadgeList } from '@/components/status-badge'
import { StatusBadge } from '@/components/status-badge'
import { TableId } from '@/components/table-id'
import { TruncatedText } from '@/components/truncated-text'
import { getCodexUsage } from '../api'
@@ -98,22 +98,6 @@ function parseIonetMeta(otherInfo: string | null | undefined): null | {
return null
}
/**
* Render limited items with "and X more" indicator
*/
function renderLimitedItems(
items: React.ReactNode[],
maxDisplay: number = 2
): React.ReactNode {
return (
<StatusBadgeList
items={items}
max={maxDisplay}
renderItem={(item) => item}
/>
)
}
/**
* Upstream update tags (+N / -N) shown on channel name for model-fetchable channels
*/
@@ -314,6 +298,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
size='sm'
copyable={false}
showDot={false}
className='-ml-1.5'
/>
)
}
@@ -349,7 +334,7 @@ function BalanceCell({ channel }: { channel: Channel }) {
return (
<TooltipProvider>
<div className='flex items-center gap-1'>
<div className='-ml-1.5 flex items-center gap-1'>
<Tooltip>
<TooltipTrigger
render={
@@ -476,10 +461,8 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// ID column
{
accessorKey: 'id',
meta: { label: t('ID'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title='ID' />
),
header: t('ID'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const id = row.getValue('id') as number
return <TableId value={id} />
@@ -490,10 +473,8 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Name column
{
accessorKey: 'name',
meta: { label: t('Name'), mobileTitle: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Name')} />
),
header: t('Name'),
meta: { mobileTitle: true },
cell: ({ row }) => {
const isTagRow = isTagAggregateRow(row.original)
const name = row.getValue('name') as string
@@ -603,7 +584,6 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Type column
{
accessorKey: 'type',
meta: { label: t('Type') },
header: t('Type'),
cell: ({ row }) => {
const isTagRow = isTagAggregateRow(row.original)
@@ -615,6 +595,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
variant='blue'
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -718,8 +699,8 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Status column
{
accessorKey: 'status',
meta: { label: t('Status'), mobileBadge: true },
header: t('Status'),
meta: { mobileBadge: true },
cell: ({ row }) => {
const isTagRow = isTagAggregateRow(row.original)
const status = row.getValue('status') as number
@@ -737,6 +718,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
variant='success'
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
} else {
@@ -746,6 +728,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
variant='neutral'
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -823,6 +806,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
variant={config.variant}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -840,42 +824,23 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Models column
{
accessorKey: 'models',
meta: { label: t('Models'), mobileHidden: true },
header: t('Models'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const models = row.getValue('models') as string
const modelArray = parseModelsList(models)
if (modelArray.length === 0) {
return <span className='text-muted-foreground text-xs'>-</span>
}
const modelBadges = modelArray.map((model, idx) => (
<StatusBadge
key={idx}
label={model}
autoColor={model}
size='sm'
className='font-mono'
/>
))
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>
{renderLimitedItems(modelBadges, 2)}
</TooltipTrigger>
{modelArray.length > 2 && (
<TooltipContent
side='top'
className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
>
<div className='flex flex-wrap gap-1'>{modelBadges}</div>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<BadgeListCell
items={modelArray.map((model, idx) => (
<StatusBadge
key={idx}
label={model}
autoColor={model}
size='sm'
className='font-mono'
/>
))}
/>
)
},
size: 200,
@@ -885,32 +850,17 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Group column
{
accessorKey: 'group',
meta: { label: t('Groups'), mobileHidden: true },
header: t('Groups'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const group = row.getValue('group') as string
const groupArray = parseGroupsList(group)
const groupBadges = groupArray.map((g) => (
<GroupBadge key={g} group={g} size='sm' />
))
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>
{renderLimitedItems(groupBadges, 2)}
</TooltipTrigger>
{groupArray.length > 2 && (
<TooltipContent
side='top'
className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
>
<div className='flex flex-wrap gap-1'>{groupBadges}</div>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<BadgeListCell
items={groupArray.map((g) => (
<GroupBadge key={g} group={g} size='sm' />
))}
/>
)
},
filterFn: (row, id, value) => {
@@ -926,14 +876,14 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Tag column
{
accessorKey: 'tag',
meta: { label: t('Tag'), mobileHidden: true },
header: t('Tag'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const tag = row.getValue('tag') as string | null
if (!tag)
return <span className='text-muted-foreground text-xs'>-</span>
return <StatusBadge label={tag} autoColor={tag} size='sm' />
return <StatusBadge label={tag} autoColor={tag} size='sm' className='-ml-1.5' />
},
size: 120,
enableSorting: false,
@@ -942,10 +892,8 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Priority column
{
accessorKey: 'priority',
meta: { label: t('Priority'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Priority')} />
),
header: t('Priority'),
meta: { mobileHidden: true },
cell: ({ row }) => <PriorityCell channel={row.original} />,
size: 100,
},
@@ -953,8 +901,8 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Weight column
{
accessorKey: 'weight',
meta: { label: t('Weight'), mobileHidden: true },
header: t('Weight'),
meta: { mobileHidden: true },
cell: ({ row }) => <WeightCell channel={row.original} />,
size: 90,
enableSorting: false,
@@ -963,10 +911,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Balance column (Used/Remaining)
{
accessorKey: 'balance',
meta: { label: t('Used / Remaining') },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Used / Remaining')} />
),
header: t('Used / Remaining'),
cell: ({ row }) => <BalanceCell channel={row.original} />,
size: 180,
},
@@ -974,10 +919,8 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Response Time column
{
accessorKey: 'response_time',
meta: { label: t('Response'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Response')} />
),
header: t('Response'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const responseTime = row.getValue('response_time') as number
const config = getResponseTimeConfig(responseTime)
@@ -988,6 +931,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
variant={config.variant}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -997,10 +941,8 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Test Time column
{
accessorKey: 'test_time',
meta: { label: t('Last Tested'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Last Tested')} />
),
header: t('Last Tested'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const testTime = row.getValue('test_time') as number
@@ -1037,6 +979,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
// Actions column
{
id: 'actions',
header: () => t('Actions'),
cell: ({ row }) => {
// Check if this is a tag row (has children)
const isTagRow = isTagAggregateRow(row.original)
@@ -1055,6 +998,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
size: 132,
enableSorting: false,
enableHiding: false,
meta: { pinned: 'right' as const },
},
]
}
web/default/src/features/channels/components/data-table-row-actions.tsx
Vendored
+1 -1
View File
@@ -140,7 +140,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
}
return (
<div className='flex items-center justify-end gap-1'>
<div className='-ml-1.5 flex items-center gap-1'>
<Tooltip>
<TooltipTrigger
render={
web/default/src/features/keys/components/api-keys-columns.tsx
Vendored
+22 -40
View File
@@ -29,7 +29,6 @@ import {
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { DataTableColumnHeader } from '@/components/data-table'
import { GroupBadge } from '@/components/group-badge'
import { StatusBadge } from '@/components/status-badge'
import { API_KEY_STATUSES } from '../constants'
@@ -93,26 +92,21 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
enableSorting: false,
enableHiding: false,
size: 40,
meta: { label: t('Select') },
},
{
accessorKey: 'name',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Name')} />
),
header: t('Name'),
cell: ({ row }) => (
<div className='max-w-[200px] truncate font-medium'>
{row.getValue('name')}
</div>
),
size: 180,
meta: { label: t('Name'), mobileTitle: true },
meta: { mobileTitle: true },
},
{
accessorKey: 'status',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Status')} />
),
header: t('Status'),
cell: ({ row }) => {
const statusConfig = API_KEY_STATUSES[row.getValue('status') as number]
if (!statusConfig) return null
@@ -121,12 +115,13 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
label={t(statusConfig.label)}
variant={statusConfig.variant}
copyable={false}
className='-ml-1.5'
/>
)
},
filterFn: (row, id, value) => value.includes(String(row.getValue(id))),
size: 120,
meta: { label: t('Status'), mobileBadge: true },
meta: { mobileBadge: true },
},
{
id: 'key',
@@ -135,14 +130,11 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
cell: ({ row }) => <ApiKeyCell apiKey={row.original} />,
enableSorting: false,
size: 260,
meta: { label: t('API Key') },
},
{
id: 'quota',
accessorKey: 'remain_quota',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Quota')} />
),
header: t('Quota'),
cell: ({ row }) => {
const apiKey = row.original
if (apiKey.unlimited_quota) {
@@ -151,6 +143,7 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
label={t('Unlimited')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -194,13 +187,10 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
)
},
size: 170,
meta: { label: t('Quota') },
},
{
accessorKey: 'group',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Group')} />
),
header: t('Group'),
cell: ({ row }) => {
const apiKey = row.original
const group = row.getValue('group') as string
@@ -236,48 +226,40 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
return <GroupBadge group={group} ratio={ratio} />
},
size: 160,
meta: { label: t('Group'), mobileHidden: true },
meta: { mobileHidden: true },
},
{
id: 'model_limits',
accessorKey: 'model_limits',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Models')} />
),
header: t('Models'),
cell: ({ row }) => <ModelLimitsCell apiKey={row.original} />,
enableSorting: false,
size: 160,
meta: { label: t('Models'), mobileHidden: true },
meta: { mobileHidden: true },
},
{
id: 'allow_ips',
accessorKey: 'allow_ips',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('IP Restriction')} />
),
header: t('IP Restriction'),
cell: ({ row }) => <IpRestrictionsCell apiKey={row.original} />,
enableSorting: false,
size: 160,
meta: { label: t('IP Restriction'), mobileHidden: true },
meta: { mobileHidden: true },
},
{
accessorKey: 'created_time',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Created')} />
),
header: t('Created'),
cell: ({ row }) => (
<span className='text-muted-foreground block truncate font-mono text-xs tabular-nums'>
{formatTimestampToDate(row.getValue('created_time'))}
</span>
),
size: 180,
meta: { label: t('Created'), mobileHidden: true },
meta: { mobileHidden: true },
},
{
accessorKey: 'accessed_time',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Last Used')} />
),
header: t('Last Used'),
cell: ({ row }) => {
const accessedTime = row.getValue('accessed_time') as number
if (!accessedTime) {
@@ -290,13 +272,11 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
)
},
size: 180,
meta: { label: t('Last Used'), mobileHidden: true },
meta: { mobileHidden: true },
},
{
accessorKey: 'expired_time',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Expires')} />
),
header: t('Expires'),
cell: ({ row }) => {
const expiredTime = row.getValue('expired_time') as number
if (expiredTime === -1) {
@@ -305,6 +285,7 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
label={t('Never')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -321,12 +302,13 @@ export function useApiKeysColumns(): ColumnDef<ApiKey>[] {
)
},
size: 180,
meta: { label: t('Expires'), mobileHidden: true },
meta: { mobileHidden: true },
},
{
id: 'actions',
header: () => t('Actions'),
cell: ({ row }) => <DataTableRowActions row={row} />,
meta: { label: t('Actions') },
meta: { pinned: 'right' as const },
size: 88,
},
]
web/default/src/features/keys/components/data-table-row-actions.tsx
Vendored
+1 -1
View File
@@ -190,7 +190,7 @@ export function DataTableRowActions<TData>({
}
return (
<div className='flex items-center justify-end gap-1'>
<div className='-ml-1.5 flex items-center gap-1'>
<Tooltip>
<TooltipTrigger
render={
web/default/src/features/models/components/data-table-row-actions.tsx
Vendored
+3 -1
View File
@@ -62,7 +62,8 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
}
return (
<DropdownMenu>
<div className='-ml-2'>
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button
@@ -134,5 +135,6 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
}}
/>
</DropdownMenu>
</div>
)
}
web/default/src/features/models/components/deployments-columns.tsx
Vendored
+14 -19
View File
@@ -21,7 +21,6 @@ import { Eye, Info, Pencil, Settings2, Timer, Trash2 } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { formatTimestampToDate } from '@/lib/format'
import { Button } from '@/components/ui/button'
import { DataTableColumnHeader } from '@/components/data-table'
import { StatusBadge } from '@/components/status-badge'
import { TableId } from '@/components/table-id'
import { getDeploymentStatusConfig } from '../constants'
@@ -45,10 +44,8 @@ export function useDeploymentsColumns(opts: {
return [
{
accessorKey: 'id',
meta: { label: t('ID'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('ID')} />
),
header: t('ID'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const id = row.original.id
return <TableId value={id} />
@@ -59,10 +56,8 @@ export function useDeploymentsColumns(opts: {
id: 'name',
accessorFn: (row) =>
row.container_name || row.deployment_name || row.name || '',
meta: { label: t('Name'), mobileTitle: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Name')} />
),
header: t('Name'),
meta: { mobileTitle: true },
cell: ({ getValue }) => {
const name = String(getValue() || '-') || '-'
return (
@@ -71,7 +66,7 @@ export function useDeploymentsColumns(opts: {
variant='neutral'
copyText={name}
size='sm'
className='font-mono'
className='-ml-1.5 font-mono'
/>
)
},
@@ -79,8 +74,8 @@ export function useDeploymentsColumns(opts: {
},
{
accessorKey: 'status',
meta: { label: t('Status'), mobileBadge: true },
header: t('Status'),
meta: { mobileBadge: true },
cell: ({ row }) => {
const raw = row.original.status
const key = normalizeDeploymentStatus(raw)
@@ -95,6 +90,7 @@ export function useDeploymentsColumns(opts: {
variant={config.variant}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -114,7 +110,6 @@ export function useDeploymentsColumns(opts: {
},
{
accessorKey: 'provider',
meta: { label: t('Provider') },
header: t('Provider'),
cell: ({ row }) => {
const provider = row.original.provider
@@ -126,6 +121,7 @@ export function useDeploymentsColumns(opts: {
autoColor={String(provider)}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -134,7 +130,6 @@ export function useDeploymentsColumns(opts: {
},
{
accessorKey: 'time_remaining',
meta: { label: t('Time remaining') },
header: t('Time remaining'),
cell: ({ row }) => {
const status = normalizeDeploymentStatus(row.original.status)
@@ -185,8 +180,8 @@ export function useDeploymentsColumns(opts: {
},
{
id: 'hardware',
meta: { label: t('Hardware'), mobileHidden: true },
header: t('Hardware'),
meta: { mobileHidden: true },
accessorFn: (row) =>
row.hardware_info || row.hardware_name || row.brand_name || '',
cell: ({ row }) => {
@@ -220,10 +215,8 @@ export function useDeploymentsColumns(opts: {
},
{
accessorKey: 'created_at',
meta: { label: t('Created'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Created')} />
),
header: t('Created'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const ts =
typeof row.original.created_at === 'number'
@@ -241,6 +234,7 @@ export function useDeploymentsColumns(opts: {
},
{
id: 'actions',
header: () => t('Actions'),
enableHiding: false,
enableSorting: false,
cell: ({ row }) => {
@@ -252,7 +246,7 @@ export function useDeploymentsColumns(opts: {
''
return (
<div className='flex items-center gap-1'>
<div className='-ml-2.5 flex items-center gap-1'>
<Button
variant='ghost'
size='sm'
@@ -305,6 +299,7 @@ export function useDeploymentsColumns(opts: {
)
},
size: 180,
meta: { pinned: 'right' as const },
},
]
}
web/default/src/features/models/components/models-columns.tsx
Vendored
+73 -193
View File
@@ -27,10 +27,10 @@ import {
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { DataTableColumnHeader } from '@/components/data-table'
import { BadgeListCell } from '@/components/data-table'
import { GroupBadge } from '@/components/group-badge'
import { ProviderBadge } from '@/components/provider-badge'
import { StatusBadge, StatusBadgeList } from '@/components/status-badge'
import { StatusBadge } from '@/components/status-badge'
import { TableId } from '@/components/table-id'
import {
getModelStatusConfig,
@@ -48,22 +48,6 @@ function getCompactModelIcon(iconKey: string) {
return getLobeIcon(`${baseIconKey}.Avatar.type={'platform'}`, 20)
}
/**
* Render limited items with "and X more" indicator
*/
function renderLimitedItems(
items: React.ReactNode[],
maxDisplay: number = 2
): React.ReactNode {
return (
<StatusBadgeList
items={items}
max={maxDisplay}
renderItem={(item) => item}
/>
)
}
/**
* Generate models columns configuration
*/
@@ -107,10 +91,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// ID column
{
accessorKey: 'id',
meta: { label: t('ID'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title='ID' />
),
header: t('ID'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const id = row.getValue('id') as number
return <TableId value={id} />
@@ -121,8 +103,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Icon column
{
accessorKey: 'icon',
meta: { label: t('Icon'), mobileHidden: true },
header: t('Icon'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const model = row.original
const iconKey =
@@ -145,10 +127,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Model Name column
{
accessorKey: 'model_name',
meta: { label: t('Model Name'), mobileTitle: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Model Name')} />
),
header: t('Model Name'),
meta: { mobileTitle: true },
cell: ({ row }) => {
const name = row.getValue('model_name') as string
return (
@@ -157,7 +137,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
variant='neutral'
copyText={name}
size='sm'
className='font-mono'
className='-ml-1.5 font-mono'
/>
)
},
@@ -167,10 +147,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Name Rule column
{
accessorKey: 'name_rule',
meta: { label: t('Match Type') },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Match Type')} />
),
header: t('Match Type'),
cell: ({ row }) => {
const rule = row.getValue('name_rule') as 0 | 1 | 2 | 3
const model = row.original
@@ -193,6 +170,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
| 'info'
}
size='sm'
className='-ml-1.5'
/>
)
@@ -209,7 +187,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>{badge}</TooltipTrigger>
<TooltipTrigger render={<div className='-ml-1.5' />}>{badge}</TooltipTrigger>
<TooltipContent
side='top'
className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
@@ -230,8 +208,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Status column
{
accessorKey: 'status',
meta: { label: t('Status'), mobileBadge: true },
header: t('Status'),
meta: { mobileBadge: true },
cell: ({ row }) => {
const status = row.getValue('status') as number
const config =
@@ -243,6 +221,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
variant={config.variant}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -260,7 +239,6 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Vendor column
{
accessorKey: 'vendor_id',
meta: { label: t('Vendor') },
header: t('Vendor'),
cell: ({ row }) => {
const vendorId = row.getValue('vendor_id') as number
@@ -283,8 +261,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Description column
{
accessorKey: 'description',
meta: { label: t('Description'), mobileHidden: true },
header: t('Description'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const description = row.getValue('description') as string
const modelName = row.getValue('model_name') as string
@@ -300,36 +278,17 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Tags column
{
accessorKey: 'tags',
meta: { label: t('Tags'), mobileHidden: true },
header: t('Tags'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const tags = row.getValue('tags') as string
const tagArray = parseModelTags(tags)
if (tagArray.length === 0) {
return <span className='text-muted-foreground text-xs'>-</span>
}
const tagBadges = tagArray.map((tag, idx) => (
<StatusBadge key={idx} label={tag} autoColor={tag} size='sm' />
))
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>
{renderLimitedItems(tagBadges, 2)}
</TooltipTrigger>
{tagArray.length > 2 && (
<TooltipContent
side='top'
className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
>
<div className='flex flex-wrap gap-1'>{tagBadges}</div>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<BadgeListCell
items={tagArray.map((tag, idx) => (
<StatusBadge key={idx} label={tag} autoColor={tag} size='sm' />
))}
/>
)
},
size: 150,
@@ -339,36 +298,17 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Endpoints column
{
accessorKey: 'endpoints',
meta: { label: t('Endpoints'), mobileHidden: true },
header: t('Endpoints'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const endpoints = row.getValue('endpoints') as string
const endpointArray = formatEndpointsDisplay(endpoints)
if (endpointArray.length === 0) {
return <span className='text-muted-foreground text-xs'>-</span>
}
const endpointBadges = endpointArray.map((ep, idx) => (
<StatusBadge key={idx} label={ep} autoColor={ep} size='sm' />
))
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>
{renderLimitedItems(endpointBadges, 2)}
</TooltipTrigger>
{endpointArray.length > 2 && (
<TooltipContent
side='top'
className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
>
<div className='flex flex-wrap gap-1'>{endpointBadges}</div>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<BadgeListCell
items={endpointArray.map((ep, idx) => (
<StatusBadge key={idx} label={ep} autoColor={ep} size='sm' />
))}
/>
)
},
size: 150,
@@ -378,8 +318,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Bound Channels column
{
accessorKey: 'bound_channels',
meta: { label: t('Bound Channels'), mobileHidden: true },
header: t('Bound Channels'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const channels = row.getValue('bound_channels') as Array<{
id: number
@@ -387,36 +327,17 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
type?: number
status?: number
}>
if (!channels || channels.length === 0) {
return <span className='text-muted-foreground text-xs'>-</span>
}
const channelBadges = channels.map((c, idx) => (
<StatusBadge
key={idx}
label={`${c.name} (${c.type})`}
autoColor={c.name}
size='sm'
/>
))
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>
{renderLimitedItems(channelBadges, 2)}
</TooltipTrigger>
{channels.length > 2 && (
<TooltipContent
side='top'
className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
>
<div className='flex flex-wrap gap-1'>{channelBadges}</div>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<BadgeListCell
items={(channels ?? []).map((c, idx) => (
<StatusBadge
key={idx}
label={`${c.name} (${c.type})`}
autoColor={c.name}
size='sm'
/>
))}
/>
)
},
size: 150,
@@ -426,37 +347,16 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Enable Groups column
{
accessorKey: 'enable_groups',
meta: { label: t('Enable Groups'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Enable Groups')} />
),
header: t('Enable Groups'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const groups = row.getValue('enable_groups') as string[]
if (!groups || groups.length === 0) {
return <span className='text-muted-foreground text-xs'>-</span>
}
const groupBadges = groups.map((g) => (
<GroupBadge key={g} group={g} size='sm' />
))
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>
{renderLimitedItems(groupBadges, 2)}
</TooltipTrigger>
{groups.length > 2 && (
<TooltipContent
side='top'
className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
>
<div className='flex flex-wrap gap-1'>{groupBadges}</div>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<BadgeListCell
items={(groups ?? []).map((g) => (
<GroupBadge key={g} group={g} size='sm' />
))}
/>
)
},
size: 150,
@@ -466,50 +366,31 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Quota Types column
{
accessorKey: 'quota_types',
meta: { label: t('Quota Types'), mobileHidden: true },
header: t('Quota Types'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const quotaTypes = row.getValue('quota_types') as number[]
if (!quotaTypes || quotaTypes.length === 0) {
return <span className='text-muted-foreground text-xs'>-</span>
}
const quotaBadges = quotaTypes.map((qt, idx) => {
const config = QUOTA_TYPE_CONFIG[qt]
return (
<StatusBadge
key={idx}
label={config?.label || String(qt)}
variant={
(config?.color === 'error' ? 'danger' : config?.color) as
| 'neutral'
| 'success'
| 'warning'
| 'danger'
| 'info'
}
size='sm'
/>
)
})
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>
{renderLimitedItems(quotaBadges, 2)}
</TooltipTrigger>
{quotaTypes.length > 2 && (
<TooltipContent
side='top'
className='border-border bg-popover max-h-48 max-w-[320px] overflow-y-auto p-2'
>
<div className='flex flex-wrap gap-1'>{quotaBadges}</div>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<BadgeListCell
items={(quotaTypes ?? []).map((qt, idx) => {
const config = QUOTA_TYPE_CONFIG[qt]
return (
<StatusBadge
key={idx}
label={config?.label || String(qt)}
variant={
(config?.color === 'error' ? 'danger' : config?.color) as
| 'neutral'
| 'success'
| 'warning'
| 'danger'
| 'info'
}
size='sm'
/>
)
})}
/>
)
},
size: 150,
@@ -519,8 +400,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Sync Official column
{
accessorKey: 'sync_official',
meta: { label: t('Official Sync'), mobileHidden: true },
header: t('Official Sync'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const syncOfficial = row.getValue('sync_official') as number
return (
@@ -529,6 +410,7 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
variant={syncOfficial === 1 ? 'success' : 'warning'}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -546,10 +428,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Created Time column
{
accessorKey: 'created_time',
meta: { label: t('Created'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Created')} />
),
header: t('Created'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const timestamp = row.getValue('created_time') as number
return (
@@ -564,10 +444,8 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Updated Time column
{
accessorKey: 'updated_time',
meta: { label: t('Updated'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Updated')} />
),
header: t('Updated'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const timestamp = row.getValue('updated_time') as number
return (
@@ -582,12 +460,14 @@ export function useModelsColumns(vendors: Vendor[] = []): ColumnDef<Model>[] {
// Actions column
{
id: 'actions',
header: () => t('Actions'),
cell: ({ row }) => {
return <DataTableRowActions row={row} />
},
size: 100,
enableSorting: false,
enableHiding: false,
meta: { pinned: 'right' as const },
},
]
}
web/default/src/features/pricing/components/pricing-columns.tsx
Vendored
+31 -96
View File
@@ -19,15 +19,9 @@ For commercial licensing, please contact support@quantumnous.com
import { type ColumnDef } from '@tanstack/react-table'
import { useTranslation } from 'react-i18next'
import { getLobeIcon } from '@/lib/lobe-icon'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { DataTableColumnHeader } from '@/components/data-table'
import { DataTableColumnHeader, BadgeListCell } from '@/components/data-table'
import { GroupBadge } from '@/components/group-badge'
import { StatusBadge, StatusBadgeList } from '@/components/status-badge'
import { StatusBadge } from '@/components/status-badge'
import { DEFAULT_TOKEN_UNIT, QUOTA_TYPE_VALUES } from '../constants'
import {
getDynamicDisplayGroupRatio,
@@ -53,36 +47,6 @@ export interface PricingColumnsOptions {
showRechargePrice?: boolean
}
function renderLimitedTags(
items: string[],
maxDisplay: number = 3
): React.ReactNode {
return (
<StatusBadgeList
items={items}
max={maxDisplay}
getKey={(item) => item}
renderItem={(item) => (
<StatusBadge label={item} autoColor={item} size='sm' copyable={false} />
)}
/>
)
}
function renderLimitedGroupBadges(
groups: string[],
maxDisplay: number = 2
): React.ReactNode {
return (
<StatusBadgeList
items={groups}
max={maxDisplay}
getKey={(group) => group}
renderItem={(group) => <GroupBadge group={group} size='sm' />}
/>
)
}
export function usePricingColumns(
options: PricingColumnsOptions = {}
): ColumnDef<PricingModel>[] {
@@ -124,7 +88,6 @@ export function usePricingColumns(
// Type column
{
accessorKey: 'quota_type',
meta: { label: t('Type') },
header: t('Type'),
cell: ({ row }) => {
const isTokenBased = row.original.quota_type === QUOTA_TYPE_VALUES.TOKEN
@@ -133,6 +96,7 @@ export function usePricingColumns(
label={isTokenBased ? t('Token') : t('Request')}
variant={isTokenBased ? 'info' : 'neutral'}
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -269,7 +233,6 @@ export function usePricingColumns(
// Cached price column (Vercel AI Gateway style)
{
id: 'cached_price',
meta: { label: t('Cached') },
header: t('Cached'),
cell: ({ row }) => {
const model = row.original
@@ -344,7 +307,6 @@ export function usePricingColumns(
// Vendor column
{
accessorKey: 'vendor_name',
meta: { label: t('Vendor') },
header: t('Vendor'),
cell: ({ row }) => {
const model = row.original
@@ -373,27 +335,21 @@ export function usePricingColumns(
// Tags column
{
accessorKey: 'tags',
meta: { label: t('Tags') },
header: t('Tags'),
cell: ({ row }) => {
const tags = parseTags(row.original.tags)
if (tags.length === 0) {
return <span className='text-muted-foreground/50 text-xs'>—</span>
}
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>
{renderLimitedTags(tags, 2)}
</TooltipTrigger>
{tags.length > 2 && (
<TooltipContent side='top' className='max-w-[280px] p-2'>
<span className='text-xs'>{tags.join(', ')}</span>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<BadgeListCell
items={tags.map((tag) => (
<StatusBadge
key={tag}
label={tag}
autoColor={tag}
size='sm'
copyable={false}
/>
))}
/>
)
},
size: 140,
@@ -403,27 +359,21 @@ export function usePricingColumns(
// Endpoints column
{
accessorKey: 'supported_endpoint_types',
meta: { label: t('Endpoints') },
header: t('Endpoints'),
cell: ({ row }) => {
const endpoints = row.original.supported_endpoint_types || []
if (endpoints.length === 0) {
return <span className='text-muted-foreground/50 text-xs'>—</span>
}
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>
{renderLimitedTags(endpoints, 2)}
</TooltipTrigger>
{endpoints.length > 2 && (
<TooltipContent side='top' className='max-w-[280px] p-2'>
<span className='text-xs'>{endpoints.join(', ')}</span>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<BadgeListCell
items={endpoints.map((ep) => (
<StatusBadge
key={ep}
label={ep}
autoColor={ep}
size='sm'
copyable={false}
/>
))}
/>
)
},
size: 130,
@@ -433,31 +383,16 @@ export function usePricingColumns(
// Enable Groups column
{
accessorKey: 'enable_groups',
meta: { label: t('Groups') },
header: t('Groups'),
cell: ({ row }) => {
const groups = row.original.enable_groups || []
if (groups.length === 0) {
return <span className='text-muted-foreground/50 text-xs'>—</span>
}
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<div />}>
{renderLimitedGroupBadges(groups, 2)}
</TooltipTrigger>
{groups.length > 2 && (
<TooltipContent side='top' className='max-w-[280px] p-2'>
<div className='flex flex-wrap gap-1'>
{groups.map((group) => (
<GroupBadge key={group} group={group} size='sm' />
))}
</div>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<BadgeListCell
items={groups.map((group) => (
<GroupBadge key={group} group={group} size='sm' />
))}
tooltipClassName='max-w-[280px] p-2'
/>
)
},
size: 130,
web/default/src/features/redemption-codes/components/data-table-row-actions.tsx
Vendored
+3 -1
View File
@@ -77,7 +77,8 @@ export function DataTableRowActions<TData>({
const canToggle = !isUsed && !isExpired
return (
<DropdownMenu modal={false}>
<div className='-ml-2'>
<DropdownMenu modal={false}>
<DropdownMenuTrigger
render={
<Button
@@ -136,5 +137,6 @@ export function DataTableRowActions<TData>({
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
)
}
web/default/src/features/redemption-codes/components/redemptions-columns.tsx
Vendored
+20 -34
View File
@@ -25,7 +25,6 @@ import {
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { DataTableColumnHeader } from '@/components/data-table'
import { MaskedValueDisplay } from '@/components/masked-value-display'
import { StatusBadge } from '@/components/status-badge'
import { TableId } from '@/components/table-id'
@@ -39,7 +38,6 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
return [
{
id: 'select',
meta: { label: t('Select') },
header: ({ table }) => (
<Checkbox
checked={table.getIsAllPageRowsSelected()}
@@ -63,10 +61,8 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
},
{
accessorKey: 'id',
meta: { label: t('ID'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('ID')} />
),
header: t('ID'),
meta: { mobileHidden: true },
cell: ({ row }) => {
return (
<TableId value={row.getValue('id') as number} className='w-[60px]' />
@@ -76,10 +72,8 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
},
{
accessorKey: 'name',
meta: { label: t('Name'), mobileTitle: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Name')} />
),
header: t('Name'),
meta: { mobileTitle: true },
cell: ({ row }) => {
return (
<div className='max-w-[150px] truncate font-medium'>
@@ -91,10 +85,8 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
},
{
accessorKey: 'status',
meta: { label: t('Status'), mobileBadge: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Status')} />
),
header: t('Status'),
meta: { mobileBadge: true },
cell: ({ row }) => {
const redemption = row.original
const statusValue = row.getValue('status') as number
@@ -106,6 +98,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
label={t('Expired')}
variant='warning'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -121,6 +114,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
label={t(statusConfig.labelKey)}
variant={statusConfig.variant}
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -143,10 +137,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
{
id: 'code',
accessorKey: 'key',
meta: { label: t('Code') },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Code')} />
),
header: t('Code'),
cell: function CodeCell({ row }) {
const redemption = row.original
const key = redemption.key
@@ -167,10 +158,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
},
{
accessorKey: 'quota',
meta: { label: t('Quota') },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Quota')} />
),
header: t('Quota'),
cell: ({ row }) => {
const quota = row.getValue('quota') as number
return (
@@ -178,6 +166,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
label={formatQuota(quota)}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
},
@@ -185,10 +174,8 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
},
{
accessorKey: 'created_time',
meta: { label: t('Created'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Created')} />
),
header: t('Created'),
meta: { mobileHidden: true },
cell: ({ row }) => {
return (
<div className='min-w-[160px] font-mono text-sm'>
@@ -200,10 +187,8 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
},
{
accessorKey: 'expired_time',
meta: { label: t('Expires'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Expires')} />
),
header: t('Expires'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const expiredTime = row.getValue('expired_time') as number
if (expiredTime === 0) {
@@ -212,6 +197,7 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
label={t('Never')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -228,10 +214,8 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
},
{
accessorKey: 'used_user_id',
meta: { label: t('Redeemed By'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Redeemed By')} />
),
header: t('Redeemed By'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const userId = row.getValue('used_user_id') as number
const redemption = row.original
@@ -272,7 +256,9 @@ export function useRedemptionsColumns(): ColumnDef<Redemption>[] {
},
{
id: 'actions',
header: () => t('Actions'),
cell: ({ row }) => <DataTableRowActions row={row} />,
meta: { pinned: 'right' as const },
size: 88,
},
]
web/default/src/features/subscriptions/components/data-table-row-actions.tsx
Vendored
+3 -1
View File
@@ -38,7 +38,8 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
const { setOpen, setCurrentRow, complianceConfirmed } = useSubscriptions()
return (
<DropdownMenu>
<div className='-ml-2'>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant='ghost' className='h-8 w-8 p-0' />}
>
@@ -76,5 +77,6 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
)
}
web/default/src/features/subscriptions/components/subscriptions-columns.tsx
Vendored
+22 -41
View File
@@ -20,7 +20,6 @@ import { useMemo } from 'react'
import { type ColumnDef } from '@tanstack/react-table'
import { useTranslation } from 'react-i18next'
import { formatQuota } from '@/lib/format'
import { DataTableColumnHeader } from '@/components/data-table'
import { GroupBadge } from '@/components/group-badge'
import { StatusBadge } from '@/components/status-badge'
import { TableId } from '@/components/table-id'
@@ -36,20 +35,16 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
{
accessorFn: (row) => row.plan.id,
id: 'id',
meta: { label: t('ID'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('ID')} />
),
header: t('ID'),
meta: { mobileHidden: true },
cell: ({ row }) => <TableId value={row.original.plan.id} />,
size: 60,
},
{
accessorFn: (row) => row.plan.title,
id: 'title',
meta: { label: t('Plan'), mobileTitle: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Plan')} />
),
header: t('Plan'),
meta: { mobileTitle: true },
cell: ({ row }) => {
const plan = row.original.plan
return (
@@ -68,10 +63,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
{
accessorFn: (row) => row.plan.price_amount,
id: 'price',
meta: { label: t('Price') },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Price')} />
),
header: t('Price'),
cell: ({ row }) => (
<span className='font-semibold text-emerald-600'>
${Number(row.original.plan.price_amount || 0).toFixed(2)}
@@ -81,10 +73,7 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
},
{
id: 'duration',
meta: { label: t('Validity') },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Validity')} />
),
header: t('Validity'),
cell: ({ row }) => (
<span className='text-muted-foreground'>
{formatDuration(row.original.plan, t)}
@@ -94,10 +83,8 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
},
{
id: 'reset',
meta: { label: t('Quota Reset'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Quota Reset')} />
),
header: t('Quota Reset'),
meta: { mobileHidden: true },
cell: ({ row }) => (
<span className='text-muted-foreground'>
{formatResetPeriod(row.original.plan, t)}
@@ -108,10 +95,8 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
{
accessorFn: (row) => row.plan.sort_order,
id: 'sort_order',
meta: { label: t('Priority'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Priority')} />
),
header: t('Priority'),
meta: { mobileHidden: true },
cell: ({ row }) => (
<span className='text-muted-foreground'>
{row.original.plan.sort_order}
@@ -122,32 +107,30 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
{
accessorFn: (row) => row.plan.enabled,
id: 'enabled',
meta: { label: t('Status'), mobileBadge: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Status')} />
),
header: t('Status'),
meta: { mobileBadge: true },
cell: ({ row }) =>
row.original.plan.enabled ? (
<StatusBadge
label={t('Enable')}
variant='success'
copyable={false}
className='-ml-1.5'
/>
) : (
<StatusBadge
label={t('Disable')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
),
size: 80,
},
{
id: 'payment',
meta: { label: t('Payment Channel'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Payment Channel')} />
),
header: t('Payment Channel'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const plan = row.original.plan
return (
@@ -176,10 +159,8 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
},
{
id: 'total_amount',
meta: { label: t('Received amount'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Received amount')} />
),
header: t('Received amount'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const total = Number(row.original.plan.total_amount || 0)
return (
@@ -192,10 +173,8 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
},
{
id: 'upgrade_group',
meta: { label: t('Upgrade Group'), mobileHidden: true },
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Upgrade Group')} />
),
header: t('Upgrade Group'),
meta: { mobileHidden: true },
cell: ({ row }) => {
const group = row.original.plan.upgrade_group
if (!group) {
@@ -209,7 +188,9 @@ export function useSubscriptionsColumns(): ColumnDef<PlanRecord>[] {
},
{
id: 'actions',
header: () => t('Actions'),
cell: ({ row }) => <DataTableRowActions row={row} />,
meta: { pinned: 'right' as const },
size: 80,
},
],
web/default/src/features/system-settings/models/model-ratio-table-columns.tsx
Vendored
+1 -2
View File
@@ -72,7 +72,6 @@ export function buildModelRatioColumns({
enableSorting: false,
enableHiding: false,
size: 40,
meta: { label: t('Select') },
},
{
accessorKey: 'name',
@@ -113,7 +112,7 @@ export function buildModelRatioColumns({
variant={getModeVariant(row.original.billingMode)}
copyable={false}
showDot={false}
className='px-0'
className='-ml-1.5 px-0'
/>
),
filterFn: (row, id, value) =>
web/default/src/features/usage-logs/components/columns/common-logs-columns.tsx
Vendored
+9 -36
View File
@@ -35,7 +35,6 @@ import {
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { DataTableColumnHeader } from '@/components/data-table'
import { StatusBadge, type StatusBadgeProps } from '@/components/status-badge'
import { LOG_TYPE_ALL_VALUE } from '../../constants'
import type { UsageLog } from '../../data/schema'
@@ -265,9 +264,7 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
const columns: ColumnDef<UsageLog>[] = [
{
accessorKey: 'created_at',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Time')} />
),
header: t('Time'),
cell: ({ row }) => {
const log = row.original
const timestamp = row.getValue('created_at') as number
@@ -295,7 +292,6 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
},
enableHiding: false,
size: 180,
meta: { label: t('Time') },
},
]
@@ -303,10 +299,8 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
columns.push(
{
id: 'channel',
header: t('Channel'),
accessorFn: (row) => row.channel,
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Channel')} />
),
cell: function ChannelCell({ row }) {
const { sensitiveVisible, setAffinityTarget, setAffinityDialogOpen } =
useUsageLogsContext()
@@ -404,14 +398,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
</TooltipProvider>
)
},
meta: { label: t('Channel') },
},
{
id: 'user',
header: t('User'),
accessorFn: (row) => row.username,
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('User')} />
),
cell: function UserCell({ row }) {
const { sensitiveVisible, setSelectedUserId, setUserInfoDialogOpen } =
useUsageLogsContext()
@@ -461,16 +452,13 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
</button>
)
},
meta: { label: t('User') },
}
)
}
columns.push({
accessorKey: 'token_name',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Token')} />
),
header: t('Token'),
cell: function TokenNameCell({ row }) {
const { sensitiveVisible } = useUsageLogsContext()
const log = row.original
@@ -520,16 +508,12 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
</div>
)
},
meta: { label: t('Token') },
size: 160,
})
columns.push(
{
accessorKey: 'model_name',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Model')} />
),
header: t('Model'),
cell: function ModelCell({ row }) {
const log = row.original
if (!isDisplayableLogType(log.type)) return null
@@ -545,14 +529,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
</div>
)
},
meta: { label: t('Model'), mobileTitle: true },
meta: { mobileTitle: true },
},
{
accessorKey: 'use_time',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Timing')} />
),
header: t('Timing'),
cell: ({ row }) => {
const log = row.original
if (!isTimingLogType(log.type)) return null
@@ -656,14 +637,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
</div>
)
},
meta: { label: t('Timing') },
},
{
accessorKey: 'prompt_tokens',
header: ({ column }) => (
<DataTableColumnHeader column={column} title='Tokens' />
),
header: 'Tokens',
cell: ({ row }) => {
const log = row.original
if (!isDisplayableLogType(log.type)) return null
@@ -707,14 +685,11 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
</div>
)
},
meta: { label: 'Tokens' },
},
{
accessorKey: 'quota',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Cost')} />
),
header: t('Cost'),
cell: ({ row }) => {
const log = row.original
if (!isDisplayableLogType(log.type)) return null
@@ -762,7 +737,6 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
</div>
)
},
meta: { label: t('Cost') },
},
{
@@ -820,7 +794,6 @@ export function useCommonLogsColumns(isAdmin: boolean): ColumnDef<UsageLog>[] {
</>
)
},
meta: { label: t('Details') },
size: 180,
maxSize: 200,
}
web/default/src/features/usage-logs/components/columns/drawing-logs-columns.tsx
Vendored
+9 -25
View File
@@ -38,7 +38,6 @@ import {
} from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { formatTimestampToDate } from '@/lib/format'
import { DataTableColumnHeader } from '@/components/data-table'
import { StatusBadge } from '@/components/status-badge'
import { MJ_TASK_TYPES } from '../../constants'
import {
@@ -87,9 +86,7 @@ export function useDrawingLogsColumns(
const columns: ColumnDef<MidjourneyLog>[] = [
{
accessorKey: 'submit_time',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Submit Time')} />
),
header: t('Submit Time'),
cell: ({ row }) => {
const log = row.original
const submitTime = row.getValue('submit_time') as number
@@ -109,7 +106,6 @@ export function useDrawingLogsColumns(
)
},
size: 180,
meta: { label: t('Submit Time') },
},
]
@@ -121,9 +117,7 @@ export function useDrawingLogsColumns(
columns.push({
accessorKey: 'action',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Type')} />
),
header: t('Type'),
cell: ({ row }) => {
const action = row.getValue('action') as string
return (
@@ -133,17 +127,15 @@ export function useDrawingLogsColumns(
icon={getDrawingTypeIcon(action)}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
meta: { label: t('Type') },
})
columns.push({
accessorKey: 'mj_id',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Task ID')} />
),
header: t('Task ID'),
cell: ({ row }) => {
const mjId = row.getValue('mj_id') as string
@@ -162,7 +154,7 @@ export function useDrawingLogsColumns(
</div>
)
},
meta: { label: t('Task ID'), mobileTitle: true },
meta: { mobileTitle: true },
})
columns.push(
@@ -176,9 +168,7 @@ export function useDrawingLogsColumns(
if (isAdmin) {
columns.push({
accessorKey: 'code',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Submit Result')} />
),
header: t('Submit Result'),
cell: ({ row }) => {
const code = row.getValue('code') as number
@@ -188,10 +178,10 @@ export function useDrawingLogsColumns(
variant={mjSubmitResultMapper.getVariant(String(code))}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
meta: { label: t('Submit Result') },
})
}
@@ -199,9 +189,7 @@ export function useDrawingLogsColumns(
createProgressColumn<MidjourneyLog>({ headerLabel: t('Progress') }),
{
accessorKey: 'image_url',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Image')} />
),
header: t('Image'),
cell: function ImageCell({ row }) {
const log = row.original
const imageUrl = row.getValue('image_url') as string
@@ -232,13 +220,10 @@ export function useDrawingLogsColumns(
</>
)
},
meta: { label: t('Image') },
},
{
accessorKey: 'prompt',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Prompt')} />
),
header: t('Prompt'),
cell: function PromptCell({ row }) {
const log = row.original
const prompt = row.getValue('prompt') as string
@@ -269,7 +254,6 @@ export function useDrawingLogsColumns(
</>
)
},
meta: { label: t('Prompt') },
size: 200,
maxSize: 220,
},
web/default/src/features/usage-logs/components/columns/task-logs-columns.tsx
Vendored
+7 -21
View File
@@ -25,7 +25,6 @@ import { getUserAvatarFallback, getUserAvatarStyle } from '@/lib/avatar'
import { formatTimestampToDate } from '@/lib/format'
import { cn } from '@/lib/utils'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { DataTableColumnHeader } from '@/components/data-table'
import { StatusBadge } from '@/components/status-badge'
import { TASK_ACTIONS, TASK_STATUS } from '../../constants'
import { taskActionMapper, taskStatusMapper } from '../../lib/mappers'
@@ -94,9 +93,7 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
const columns: ColumnDef<TaskLog>[] = [
{
accessorKey: 'submit_time',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Submit Time')} />
),
header: t('Submit Time'),
cell: ({ row }) => {
const log = row.original
const submitTime = row.getValue('submit_time') as number
@@ -117,17 +114,14 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
)
},
size: 180,
meta: { label: t('Submit Time') },
},
]
if (isAdmin) {
columns.push(createChannelColumn<TaskLog>({ headerLabel: t('Channel') }), {
id: 'user',
header: t('User'),
accessorFn: (row) => row.username || row.user_id,
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('User')} />
),
cell: function UserCell({ row }) {
const { sensitiveVisible, setSelectedUserId, setUserInfoDialogOpen } =
useUsageLogsContext()
@@ -163,16 +157,13 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
</button>
)
},
meta: { label: t('User') },
})
}
columns.push(
{
accessorKey: 'task_id',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Task ID')} />
),
header: t('Task ID'),
cell: ({ row }) => {
const log = row.original
const taskId = row.getValue('task_id') as string
@@ -193,7 +184,7 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
</div>
)
},
meta: { label: t('Task ID'), mobileTitle: true },
meta: { mobileTitle: true },
},
createDurationColumn<TaskLog>({
submitTimeKey: 'submit_time',
@@ -204,9 +195,7 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
}),
{
accessorKey: 'status',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Status')} />
),
header: t('Status'),
cell: ({ row }) => {
const status = row.getValue('status') as string
return (
@@ -215,17 +204,15 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
variant={taskStatusMapper.getVariant(status)}
size='sm'
copyable={false}
className='-ml-1.5'
/>
)
},
meta: { label: t('Status') },
},
createProgressColumn<TaskLog>({ headerLabel: t('Progress') }),
{
accessorKey: 'fail_reason',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Details')} />
),
header: t('Details'),
cell: function DetailsCell({ row }) {
const log = row.original
const failReason = row.getValue('fail_reason') as string
@@ -295,7 +282,6 @@ export function useTaskLogsColumns(isAdmin: boolean): ColumnDef<TaskLog>[] {
</>
)
},
meta: { label: t('Details') },
size: 200,
maxSize: 220,
}
web/default/src/features/users/components/data-table-row-actions.tsx
Vendored
+2 -2
View File
@@ -136,7 +136,7 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
}
return (
<>
<div className='-ml-2'>
<DropdownMenu>
<DropdownMenuTrigger
render={
@@ -294,6 +294,6 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
user={{ id: user.id, username: user.username }}
onSuccess={triggerRefresh}
/>
</>
</div>
)
}
web/default/src/features/users/components/users-columns.tsx
Vendored
+19 -40
View File
@@ -27,7 +27,6 @@ import {
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip'
import { DataTableColumnHeader } from '@/components/data-table'
import { GroupBadge } from '@/components/group-badge'
import { LongText } from '@/components/long-text'
import { StatusBadge } from '@/components/status-badge'
@@ -67,26 +66,21 @@ export function useUsersColumns(): ColumnDef<User>[] {
enableSorting: false,
enableHiding: false,
size: 40,
meta: { label: t('Select') },
},
{
accessorKey: 'id',
header: ({ column }) => (
<DataTableColumnHeader column={column} title='ID' />
),
header: t('ID'),
cell: ({ row }) => {
return (
<TableId value={row.getValue('id') as number} className='w-[60px]' />
)
},
size: 80,
meta: { label: t('ID'), mobileHidden: true },
meta: { mobileHidden: true },
},
{
accessorKey: 'username',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Username')} />
),
header: t('Username'),
cell: ({ row }) => {
const username = row.getValue('username') as string
const displayName = row.original.display_name
@@ -121,13 +115,11 @@ export function useUsersColumns(): ColumnDef<User>[] {
},
enableHiding: false,
size: 220,
meta: { label: t('Username'), mobileTitle: true },
meta: { mobileTitle: true },
},
{
accessorKey: 'status',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Status')} />
),
header: t('Status'),
cell: ({ row }) => {
const user = row.original
const requestCount = user.request_count
@@ -142,7 +134,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
return (
<Tooltip>
<TooltipTrigger render={<div className='cursor-help' />}>
<TooltipTrigger render={<div className='-ml-1.5 cursor-help' />}>
<StatusBadge
label={t(statusConfig.labelKey)}
variant={statusConfig.variant}
@@ -162,14 +154,12 @@ export function useUsersColumns(): ColumnDef<User>[] {
},
enableSorting: false,
size: 120,
meta: { label: t('Status'), mobileBadge: true },
meta: { mobileBadge: true },
},
{
id: 'quota',
accessorKey: 'quota',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Quota')} />
),
header: t('Quota'),
cell: ({ row }) => {
const user = row.original
const used = user.used_quota
@@ -183,6 +173,7 @@ export function useUsersColumns(): ColumnDef<User>[] {
label={t('No Quota')}
variant='neutral'
copyable={false}
className='-ml-1.5'
/>
)
}
@@ -225,13 +216,10 @@ export function useUsersColumns(): ColumnDef<User>[] {
)
},
size: 170,
meta: { label: t('Quota') },
},
{
accessorKey: 'group',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Group')} />
),
header: t('Group'),
cell: ({ row }) => {
const group = row.getValue('group') as string
return <GroupBadge group={group} />
@@ -242,13 +230,10 @@ export function useUsersColumns(): ColumnDef<User>[] {
return group.includes(searchValue)
},
size: 140,
meta: { label: t('Group') },
},
{
accessorKey: 'role',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Role')} />
),
header: t('Role'),
cell: ({ row }) => {
const roleValue = row.getValue('role') as number
const roleConfig = USER_ROLES[roleValue as keyof typeof USER_ROLES]
@@ -271,13 +256,10 @@ export function useUsersColumns(): ColumnDef<User>[] {
},
enableSorting: false,
size: 120,
meta: { label: t('Role') },
},
{
id: 'invite_info',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Invite Info')} />
),
header: t('Invite Info'),
cell: ({ row }) => {
const user = row.original
const affCount = user.aff_count || 0
@@ -347,13 +329,11 @@ export function useUsersColumns(): ColumnDef<User>[] {
},
size: 240,
enableSorting: false,
meta: { label: t('Invite Info'), mobileHidden: true },
meta: { mobileHidden: true },
},
{
accessorKey: 'created_at',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Created At')} />
),
header: t('Created At'),
cell: ({ row }) => {
const ts = row.getValue('created_at') as number | undefined
return (
@@ -363,13 +343,11 @@ export function useUsersColumns(): ColumnDef<User>[] {
)
},
size: 180,
meta: { label: t('Created At'), mobileHidden: true },
meta: { mobileHidden: true },
},
{
accessorKey: 'last_login_at',
header: ({ column }) => (
<DataTableColumnHeader column={column} title={t('Last Login')} />
),
header: t('Last Login'),
cell: ({ row }) => {
const ts = row.getValue('last_login_at') as number | undefined
return (
@@ -379,12 +357,13 @@ export function useUsersColumns(): ColumnDef<User>[] {
)
},
size: 180,
meta: { label: t('Last Login'), mobileHidden: true },
meta: { mobileHidden: true },
},
{
id: 'actions',
header: () => t('Actions'),
cell: ({ row }) => <DataTableRowActions row={row} />,
meta: { label: t('Actions') },
meta: { pinned: 'right' as const },
},
]
}