/* Copyright (C) 2023-2026 QuantumNous This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . For commercial licensing, please contact support@quantumnous.com */ import { useQuery } from '@tanstack/react-query' import { type ColumnDef } from '@tanstack/react-table' import { useTranslation } from 'react-i18next' import { getUserGroups } from '@/lib/api' import { formatQuota, formatTimestampToDate } from '@/lib/format' import { cn } from '@/lib/utils' import { Checkbox } from '@/components/ui/checkbox' import { Progress } from '@/components/ui/progress' import { Tooltip, 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' import { type ApiKey } from '../types' import { ApiKeyCell, ModelLimitsCell, IpRestrictionsCell, } from './api-keys-cells' import { DataTableRowActions } from './data-table-row-actions' function getQuotaProgressColor(percentage: number): string { if (percentage <= 10) return '[&_[data-slot=progress-indicator]]:bg-rose-500' if (percentage <= 30) return '[&_[data-slot=progress-indicator]]:bg-amber-500' return '[&_[data-slot=progress-indicator]]:bg-emerald-500' } function useGroupRatios(): Record { const { data } = useQuery({ queryKey: ['user-self-groups'], queryFn: getUserGroups, staleTime: 5 * 60 * 1000, select: (res) => { if (!res.success || !res.data) return {} const ratios: Record = {} for (const [group, info] of Object.entries(res.data)) { if (typeof info.ratio === 'number') { ratios[group] = info.ratio } } return ratios }, }) return data ?? {} } export function useApiKeysColumns(): ColumnDef[] { const { t } = useTranslation() const groupRatios = useGroupRatios() return [ { id: 'select', header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label='Select all' className='translate-y-[2px]' /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label='Select row' className='translate-y-[2px]' /> ), enableSorting: false, enableHiding: false, meta: { label: t('Select') }, }, { accessorKey: 'name', header: ({ column }) => ( ), cell: ({ row }) => (
{row.getValue('name')}
), meta: { label: t('Name'), mobileTitle: true }, }, { accessorKey: 'status', header: ({ column }) => ( ), cell: ({ row }) => { const statusConfig = API_KEY_STATUSES[row.getValue('status') as number] if (!statusConfig) return null return ( ) }, filterFn: (row, id, value) => value.includes(String(row.getValue(id))), meta: { label: t('Status'), mobileBadge: true }, }, { id: 'key', accessorKey: 'key', header: t('API Key'), cell: ({ row }) => , enableSorting: false, meta: { label: t('API Key') }, }, { id: 'quota', accessorKey: 'remain_quota', header: ({ column }) => ( ), cell: ({ row }) => { const apiKey = row.original if (apiKey.unlimited_quota) { return ( ) } const used = apiKey.used_quota const remaining = apiKey.remain_quota const total = used + remaining const percentage = total > 0 ? (remaining / total) * 100 : 0 return ( }>
{formatQuota(remaining)} {formatQuota(total)}
{t('Used:')} {formatQuota(used)}
{t('Remaining:')} {formatQuota(remaining)} ( {percentage.toFixed(1)}%)
{t('Total:')} {formatQuota(total)}
) }, meta: { label: t('Quota') }, }, { accessorKey: 'group', header: ({ column }) => ( ), cell: ({ row }) => { const apiKey = row.original const group = row.getValue('group') as string const ratio = group && group !== 'auto' ? groupRatios[group] : undefined if (group === 'auto') { return ( } > {apiKey.cross_group_retry && ( <> ยท {t('Cross-group')} )} {t( 'Automatically selects the best available group with circuit breaker mechanism' )} ) } return }, meta: { label: t('Group'), mobileHidden: true }, }, { id: 'model_limits', accessorKey: 'model_limits', header: ({ column }) => ( ), cell: ({ row }) => , enableSorting: false, meta: { label: t('Models'), mobileHidden: true }, }, { id: 'allow_ips', accessorKey: 'allow_ips', header: ({ column }) => ( ), cell: ({ row }) => , enableSorting: false, meta: { label: t('IP Restriction'), mobileHidden: true }, }, { accessorKey: 'created_time', header: ({ column }) => ( ), cell: ({ row }) => ( {formatTimestampToDate(row.getValue('created_time'))} ), meta: { label: t('Created'), mobileHidden: true }, }, { accessorKey: 'accessed_time', header: ({ column }) => ( ), cell: ({ row }) => { const accessedTime = row.getValue('accessed_time') as number if (!accessedTime) { return - } return ( {formatTimestampToDate(accessedTime)} ) }, meta: { label: t('Last Used'), mobileHidden: true }, }, { accessorKey: 'expired_time', header: ({ column }) => ( ), cell: ({ row }) => { const expiredTime = row.getValue('expired_time') as number if (expiredTime === -1) { return ( ) } const isExpired = expiredTime * 1000 < Date.now() return ( {formatTimestampToDate(expiredTime)} ) }, meta: { label: t('Expires'), mobileHidden: true }, }, { id: 'actions', cell: ({ row }) => , meta: { label: t('Actions') }, size: 88, }, ] }