mirror of
https://github.com/QuantumNous/new-api.git
synced 2026-09-10 22:20:25 +00:00
perf(web): streamline table actions and destructive dialogs (#5645)
* perf(data-table): autosize action columns - exclude actions columns from shared table width calculations so action cells size to their content. - remove fixed size and w-* width overrides from feature action columns to preserve content-based layout. * perf(data-table): streamline row action controls - expose common edit and status actions directly while moving secondary actions into overflow menus. - add shared row action menu helpers so static and table rows use consistent action controls. - let action columns size to their content instead of relying on fixed widths. * fix(web): localize destructive dialog copy - route delete, reset, and batch update confirmation text through i18n. - add locale entries for affected channel, model, system settings, and user dialogs. * perf(web): unify destructive dialog actions - align delete and cleanup confirmation buttons with the shared destructive variant. - replace custom destructive color overrides with semantic button variants. - clean up lint errors in touched dialog files before committing. * fix(web): add user action success translations - add localized success messages for user delete, status, and role changes. - keep user management toast copy available across all frontend locales. * fix(data-table): prevent mobile badge clipping - expose badge cell slots so mobile card styles can target nested badge wrappers. - reset badge margins in card rows to keep provider icons fully visible on small screens.
This commit is contained in:
+11
-18
@@ -17,11 +17,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { useState } from 'react'
|
||||
import { Pencil, Trash2, Plus } from 'lucide-react'
|
||||
import { Plus } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { ConfirmDialog } from '@/components/confirm-dialog'
|
||||
import { BadgeCell, StaticDataTable } from '@/components/data-table'
|
||||
import { BadgeCell } from '@/components/data-table/core/badge-cell'
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { StatusBadge } from '@/components/status-badge'
|
||||
import { useDeleteProvider } from '../hooks/use-custom-oauth-mutations'
|
||||
import type { CustomOAuthProvider } from '../types'
|
||||
@@ -118,22 +120,13 @@ export function ProviderTable(props: ProviderTableProps) {
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (provider) => (
|
||||
<div className='flex justify-end gap-1'>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() => props.onEdit(provider)}
|
||||
>
|
||||
<Pencil className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() => setDeleteTarget(provider)}
|
||||
>
|
||||
<Trash2 className='text-destructive h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => props.onEdit(provider)}
|
||||
onDelete={() => setDeleteTarget(provider)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
|
||||
+16
-22
@@ -20,7 +20,7 @@ import { useEffect, useMemo, useState } from 'react'
|
||||
import * as z from 'zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { Plus, Edit, Trash2, Save } from 'lucide-react'
|
||||
import { Plus, Trash2, Save } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { toast } from 'sonner'
|
||||
import dayjs from '@/lib/dayjs'
|
||||
@@ -55,7 +55,8 @@ import {
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { DateTimePicker } from '@/components/datetime-picker'
|
||||
import { Dialog } from '@/components/dialog'
|
||||
import { StatusBadge } from '@/components/status-badge'
|
||||
@@ -419,24 +420,14 @@ export function AnnouncementsSection({
|
||||
{
|
||||
id: 'actions',
|
||||
header: t('Actions'),
|
||||
className: 'w-32',
|
||||
cell: (announcement) => (
|
||||
<div className='flex gap-2'>
|
||||
<Button
|
||||
onClick={() => handleEdit(announcement)}
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
<Edit className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDelete(announcement)}
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => handleEdit(announcement)}
|
||||
onDelete={() => handleDelete(announcement)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
@@ -600,13 +591,16 @@ export function AnnouncementsSection({
|
||||
<AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{deleteTarget === 'single'
|
||||
? 'This announcement will be removed from the list.'
|
||||
: `${selectedIds.length} announcements will be removed from the list.`}
|
||||
? t('This announcement will be removed from the list.')
|
||||
: t(
|
||||
'{{count}} announcements will be removed from the list.',
|
||||
{ count: selectedIds.length }
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={confirmDelete}>
|
||||
<AlertDialogAction variant='destructive' onClick={confirmDelete}>
|
||||
{t('Delete')}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
||||
@@ -20,7 +20,7 @@ import { useMemo, useState } from 'react'
|
||||
import * as z from 'zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { Plus, Edit, Trash2, Save } from 'lucide-react'
|
||||
import { Plus, Trash2, Save } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { toast } from 'sonner'
|
||||
import { getBgColorClass } from '@/lib/colors'
|
||||
@@ -54,7 +54,9 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { BadgeCell, StaticDataTable } from '@/components/data-table'
|
||||
import { BadgeCell } from '@/components/data-table/core/badge-cell'
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { Dialog } from '@/components/dialog'
|
||||
import { StatusBadge } from '@/components/status-badge'
|
||||
import { SettingsSwitchField } from '../components/settings-form-layout'
|
||||
@@ -369,24 +371,14 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
|
||||
{
|
||||
id: 'actions',
|
||||
header: t('Actions'),
|
||||
className: 'w-32',
|
||||
cell: (apiInfo) => (
|
||||
<div className='flex gap-2'>
|
||||
<Button
|
||||
onClick={() => handleEdit(apiInfo)}
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
<Edit className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDelete(apiInfo)}
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => handleEdit(apiInfo)}
|
||||
onDelete={() => handleDelete(apiInfo)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
@@ -526,13 +518,16 @@ export function ApiInfoSection({ enabled, data }: ApiInfoSectionProps) {
|
||||
<AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{deleteTarget === 'single'
|
||||
? 'This API shortcut will be removed from the list.'
|
||||
: `${selectedIds.length} API shortcuts will be removed from the list.`}
|
||||
? t('This API shortcut will be removed from the list.')
|
||||
: t(
|
||||
'{{count}} API shortcuts will be removed from the list.',
|
||||
{ count: selectedIds.length }
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={confirmDelete}>
|
||||
<AlertDialogAction variant='destructive' onClick={confirmDelete}>
|
||||
{t('Delete')}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
||||
+10
-18
@@ -17,11 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { useState, useMemo } from 'react'
|
||||
import { Pencil, Plus, Search, Trash2 } from 'lucide-react'
|
||||
import { Plus, Search } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { safeJsonParseWithValidation } from '../utils/json-parser'
|
||||
import { isArray } from '../utils/json-validators'
|
||||
import { ChatDialog, type ChatEntryData } from './chat-dialog'
|
||||
@@ -171,22 +172,13 @@ export function ChatSettingsVisualEditor({
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (chat) => (
|
||||
<div className='flex justify-end gap-2'>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() => handleEdit(chat)}
|
||||
>
|
||||
<Pencil className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() => handleDelete(chat.name)}
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => handleEdit(chat)}
|
||||
onDelete={() => handleDelete(chat.name)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -20,7 +20,7 @@ import { useEffect, useState } from 'react'
|
||||
import * as z from 'zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { Plus, Edit, Trash2, Save } from 'lucide-react'
|
||||
import { Plus, Trash2, Save } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
@@ -46,7 +46,8 @@ import {
|
||||
} from '@/components/ui/form'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { Dialog } from '@/components/dialog'
|
||||
import { SettingsSwitchField } from '../components/settings-form-layout'
|
||||
import { SettingsSection } from '../components/settings-section'
|
||||
@@ -302,24 +303,14 @@ export function FAQSection({ enabled, data }: FAQSectionProps) {
|
||||
{
|
||||
id: 'actions',
|
||||
header: t('Actions'),
|
||||
className: 'w-32',
|
||||
cell: (faq) => (
|
||||
<div className='flex gap-2'>
|
||||
<Button
|
||||
onClick={() => handleEdit(faq)}
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
<Edit className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDelete(faq)}
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => handleEdit(faq)}
|
||||
onDelete={() => handleDelete(faq)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
@@ -406,13 +397,15 @@ export function FAQSection({ enabled, data }: FAQSectionProps) {
|
||||
<AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{deleteTarget === 'single'
|
||||
? 'This FAQ entry will be removed from the list.'
|
||||
: `${selectedIds.length} FAQ entries will be removed from the list.`}
|
||||
? t('This FAQ entry will be removed from the list.')
|
||||
: t('{{count}} FAQ entries will be removed from the list.', {
|
||||
count: selectedIds.length,
|
||||
})}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={confirmDelete}>
|
||||
<AlertDialogAction variant='destructive' onClick={confirmDelete}>
|
||||
{t('Delete')}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
||||
@@ -20,7 +20,7 @@ import { useEffect, useState } from 'react'
|
||||
import * as z from 'zod'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { Plus, Edit, Trash2, Save } from 'lucide-react'
|
||||
import { Plus, Trash2, Save } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { toast } from 'sonner'
|
||||
import {
|
||||
@@ -45,7 +45,8 @@ import {
|
||||
FormMessage,
|
||||
} from '@/components/ui/form'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { Dialog } from '@/components/dialog'
|
||||
import { SettingsSwitchField } from '../components/settings-form-layout'
|
||||
import { SettingsSection } from '../components/settings-section'
|
||||
@@ -319,24 +320,14 @@ export function UptimeKumaSection({ enabled, data }: UptimeKumaSectionProps) {
|
||||
{
|
||||
id: 'actions',
|
||||
header: t('Actions'),
|
||||
className: 'w-32',
|
||||
cell: (group) => (
|
||||
<div className='flex gap-2'>
|
||||
<Button
|
||||
onClick={() => handleEdit(group)}
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
<Edit className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleDelete(group)}
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => handleEdit(group)}
|
||||
onDelete={() => handleDelete(group)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
@@ -445,13 +436,16 @@ export function UptimeKumaSection({ enabled, data }: UptimeKumaSectionProps) {
|
||||
<AlertDialogTitle>{t('Are you sure?')}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{deleteTarget === 'single'
|
||||
? 'This Uptime Kuma group will be removed from the list.'
|
||||
: `${selectedIds.length} Uptime Kuma groups will be removed from the list.`}
|
||||
? t('This Uptime Kuma group will be removed from the list.')
|
||||
: t(
|
||||
'{{count}} Uptime Kuma groups will be removed from the list.',
|
||||
{ count: selectedIds.length }
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={confirmDelete}>
|
||||
<AlertDialogAction variant='destructive' onClick={confirmDelete}>
|
||||
{t('Delete')}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
||||
+11
-29
@@ -20,7 +20,8 @@ import { useState, useMemo } from 'react'
|
||||
import { Pencil, Plus, Trash2 } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { StatusBadge } from '@/components/status-badge'
|
||||
import { safeJsonParseWithValidation } from '../utils/json-parser'
|
||||
import { isObjectRecord } from '../utils/json-validators'
|
||||
@@ -52,9 +53,9 @@ export function AmountDiscountVisualEditor({
|
||||
|
||||
return Object.entries(parsed)
|
||||
.map(([amount, rate]) => ({
|
||||
amount: parseInt(amount, 10),
|
||||
amount: Number.parseInt(amount, 10),
|
||||
discountRate:
|
||||
typeof rate === 'number' ? rate : parseFloat(String(rate)),
|
||||
typeof rate === 'number' ? rate : Number.parseFloat(String(rate)),
|
||||
}))
|
||||
.filter((item) => !isNaN(item.amount) && !isNaN(item.discountRate))
|
||||
.sort((a, b) => a.amount - b.amount)
|
||||
@@ -180,32 +181,13 @@ export function AmountDiscountVisualEditor({
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (discount) => (
|
||||
<div className='flex justify-end gap-2'>
|
||||
<Button
|
||||
type='button'
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
handleEdit(discount)
|
||||
}}
|
||||
>
|
||||
<Pencil className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
type='button'
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
handleDelete(discount.amount)
|
||||
}}
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => handleEdit(discount)}
|
||||
onDelete={() => handleDelete(discount.amount)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
|
||||
+9
-27
@@ -21,7 +21,8 @@ import { Pencil, Plus, Search, Trash2 } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import {
|
||||
formatCreemPrice,
|
||||
formatQuotaShort,
|
||||
@@ -220,32 +221,13 @@ export function CreemProductsVisualEditor({
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (product) => (
|
||||
<div className='flex justify-end gap-2'>
|
||||
<Button
|
||||
type='button'
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
handleEdit(product)
|
||||
}}
|
||||
>
|
||||
<Pencil className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
type='button'
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
handleDelete(product)
|
||||
}}
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => handleEdit(product)}
|
||||
onDelete={() => handleDelete(product)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
|
||||
+23
-30
@@ -19,6 +19,10 @@ For commercial licensing, please contact support@quantumnous.com
|
||||
import { useState, useMemo } from 'react'
|
||||
import { Lightbulb, Pencil, Plus, Search, Trash2 } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { ReactIconByName } from '@/components/react-icon-by-name'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
@@ -26,8 +30,7 @@ import {
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { ReactIconByName } from '@/components/react-icon-by-name'
|
||||
|
||||
import { safeJsonParseWithValidation } from '../utils/json-parser'
|
||||
import { isArray } from '../utils/json-validators'
|
||||
import {
|
||||
@@ -362,32 +365,13 @@ export function PaymentMethodsVisualEditor({
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (method) => (
|
||||
<div className='flex justify-end gap-2'>
|
||||
<Button
|
||||
type='button'
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
handleEdit(method)
|
||||
}}
|
||||
>
|
||||
<Pencil className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
type='button'
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
handleDelete(method)
|
||||
}}
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => handleEdit(method)}
|
||||
onDelete={() => handleDelete(method)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
@@ -395,11 +379,20 @@ export function PaymentMethodsVisualEditor({
|
||||
|
||||
{/* Mobile card view */}
|
||||
<div className='divide-y md:hidden'>
|
||||
{filteredMethods.map((method, index) => {
|
||||
{filteredMethods.map((method) => {
|
||||
const iconName = getEffectiveIconName(method)
|
||||
const methodKey = [
|
||||
method.type,
|
||||
method.name,
|
||||
method.icon,
|
||||
method.min_topup,
|
||||
method.color,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join('-')
|
||||
|
||||
return (
|
||||
<div key={`${method.type}-${index}`} className='p-4'>
|
||||
<div key={methodKey} className='p-4'>
|
||||
<div className='mb-3 flex items-start justify-between'>
|
||||
<div className='flex-1'>
|
||||
<div className='mb-1 font-medium'>{method.name}</div>
|
||||
|
||||
+14
-26
@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { type ChangeEvent, useRef, type SetStateAction, useState } from 'react'
|
||||
import { Plus, Pencil, Trash2 } from 'lucide-react'
|
||||
import { Plus } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { toast } from 'sonner'
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert'
|
||||
@@ -26,7 +26,8 @@ import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { Dialog } from '@/components/dialog'
|
||||
import { SettingsSwitchField } from '../components/settings-form-layout'
|
||||
|
||||
@@ -364,30 +365,17 @@ export function WaffoSettingsSection({
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (_m, idx) => (
|
||||
<div className='flex justify-end gap-1'>
|
||||
<Button
|
||||
type='button'
|
||||
variant='ghost'
|
||||
size='icon'
|
||||
className='h-7 w-7'
|
||||
onClick={() => openEdit(idx)}
|
||||
>
|
||||
<Pencil className='h-3 w-3' />
|
||||
</Button>
|
||||
<Button
|
||||
type='button'
|
||||
variant='ghost'
|
||||
size='icon'
|
||||
className='h-7 w-7'
|
||||
onClick={() =>
|
||||
onPayMethodsChange((prev) =>
|
||||
prev.filter((_, i) => i !== idx)
|
||||
)
|
||||
}
|
||||
>
|
||||
<Trash2 className='h-3 w-3' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => openEdit(idx)}
|
||||
onDelete={() =>
|
||||
onPayMethodsChange((prev) =>
|
||||
prev.filter((_, i) => i !== idx)
|
||||
)
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
|
||||
+9
-4
@@ -220,14 +220,15 @@ export function LogSettingsSection({
|
||||
)
|
||||
const logCleanupProcessed = logCleanupState?.processed ?? 0
|
||||
const logCleanupTotal = logCleanupState?.total ?? 0
|
||||
const logCleanupTaskId = logCleanupTask?.task_id
|
||||
|
||||
useEffect(() => {
|
||||
if (!logCleanupTask || !isActiveLogCleanupTask(logCleanupTask)) return
|
||||
if (!logCleanupTaskId || !logCleanupActive) return
|
||||
|
||||
let cancelled = false
|
||||
const interval = window.setInterval(async () => {
|
||||
try {
|
||||
const res = await getSystemTask(logCleanupTask.task_id)
|
||||
const res = await getSystemTask(logCleanupTaskId)
|
||||
if (cancelled || !res.success || !res.data) return
|
||||
|
||||
setLogCleanupTask(res.data)
|
||||
@@ -253,7 +254,7 @@ export function LogSettingsSection({
|
||||
cancelled = true
|
||||
window.clearInterval(interval)
|
||||
}
|
||||
}, [logCleanupTask?.task_id, logCleanupTask?.status, t])
|
||||
}, [logCleanupActive, logCleanupTaskId, t])
|
||||
|
||||
const onSubmit = async (values: LogSettingsFormValues) => {
|
||||
if (values.LogConsumeEnabled === defaultEnabled) return
|
||||
@@ -558,7 +559,10 @@ export function LogSettingsSection({
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={cleanupServerLogFiles}>
|
||||
<AlertDialogAction
|
||||
variant='destructive'
|
||||
onClick={cleanupServerLogFiles}
|
||||
>
|
||||
{t('Confirm Cleanup')}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
@@ -598,6 +602,7 @@ export function LogSettingsSection({
|
||||
{t('Cancel')}
|
||||
</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
variant='destructive'
|
||||
onClick={handleCleanLogs}
|
||||
disabled={isStartingLogCleanup}
|
||||
>
|
||||
|
||||
+4
-1
@@ -553,7 +553,10 @@ export function PerformanceSection(props: Props) {
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>{t('Cancel')}</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={clearDiskCache}>
|
||||
<AlertDialogAction
|
||||
variant='destructive'
|
||||
onClick={clearDiskCache}
|
||||
>
|
||||
{t('Confirm')}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
||||
+43
-58
@@ -17,8 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { useState, useMemo, useEffect, useCallback, memo } from 'react'
|
||||
import { Pencil, Plus, Trash2, GripVertical, ChevronDown } from 'lucide-react'
|
||||
import { Plus, Trash2, GripVertical, ChevronDown } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { Dialog } from '@/components/dialog'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
@@ -35,8 +39,7 @@ import {
|
||||
} from '@/components/ui/collapsible'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { Dialog } from '@/components/dialog'
|
||||
|
||||
import { safeJsonParse } from '../utils/json-parser'
|
||||
|
||||
type GroupRatioVisualEditorProps = {
|
||||
@@ -95,11 +98,11 @@ function buildGroupPricingRows(
|
||||
})
|
||||
const names = new Set([...Object.keys(ratioMap), ...Object.keys(usableMap)])
|
||||
|
||||
return Array.from(names).map((name) => ({
|
||||
return [...names].map((name) => ({
|
||||
_id: createGroupPricingId(),
|
||||
name,
|
||||
ratio: normalizeRatio(ratioMap[name]),
|
||||
selectable: Object.prototype.hasOwnProperty.call(usableMap, name),
|
||||
selectable: Object.hasOwn(usableMap, name),
|
||||
description: String(usableMap[name] ?? ''),
|
||||
}))
|
||||
}
|
||||
@@ -246,7 +249,7 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
|
||||
delete map[simpleEditData.name]
|
||||
}
|
||||
|
||||
map[name] = parseFloat(value)
|
||||
map[name] = Number.parseFloat(value)
|
||||
|
||||
const field =
|
||||
simpleDialogType === 'groupRatio' ? 'GroupRatio' : 'TopupGroupRatio'
|
||||
@@ -441,26 +444,17 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (group) => (
|
||||
<div className='flex justify-end gap-2'>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() =>
|
||||
handleSimpleEdit('topupGroupRatio', group)
|
||||
}
|
||||
>
|
||||
<Pencil className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() =>
|
||||
handleSimpleDelete('topupGroupRatio', group.name)
|
||||
}
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() =>
|
||||
handleSimpleEdit('topupGroupRatio', group)
|
||||
}
|
||||
onDelete={() =>
|
||||
handleSimpleDelete('topupGroupRatio', group.name)
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
@@ -553,32 +547,23 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (override) => (
|
||||
<div className='flex justify-end gap-2'>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() =>
|
||||
handleOverrideEdit(
|
||||
userGroupData.userGroup,
|
||||
override
|
||||
)
|
||||
}
|
||||
>
|
||||
<Pencil className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() =>
|
||||
handleOverrideDelete(
|
||||
userGroupData.userGroup,
|
||||
override.targetGroup
|
||||
)
|
||||
}
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() =>
|
||||
handleOverrideEdit(
|
||||
userGroupData.userGroup,
|
||||
override
|
||||
)
|
||||
}
|
||||
onDelete={() =>
|
||||
handleOverrideDelete(
|
||||
userGroupData.userGroup,
|
||||
override.targetGroup
|
||||
)
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
@@ -615,7 +600,7 @@ export const GroupRatioVisualEditor = memo(function GroupRatioVisualEditor({
|
||||
<div className='space-y-2'>
|
||||
{autoGroupsList.map((group, index) => (
|
||||
<div
|
||||
key={index}
|
||||
key={group}
|
||||
className='flex items-center gap-2 rounded-md border p-3'
|
||||
>
|
||||
<GripVertical className='text-muted-foreground h-4 w-4' />
|
||||
@@ -826,7 +811,7 @@ function GroupPricingTable({
|
||||
if (!name) continue
|
||||
counts.set(name, (counts.get(name) ?? 0) + 1)
|
||||
}
|
||||
return Array.from(counts.entries())
|
||||
return [...counts.entries()]
|
||||
.filter(([, count]) => count > 1)
|
||||
.map(([name]) => name)
|
||||
}, [rows])
|
||||
@@ -929,7 +914,7 @@ function GroupPricingTable({
|
||||
{
|
||||
id: 'actions',
|
||||
header: t('Actions'),
|
||||
className: 'w-16 text-right',
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (row) => (
|
||||
<Button
|
||||
@@ -1037,7 +1022,7 @@ function SimpleGroupDialog({
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value
|
||||
if (val === '' || !isNaN(parseFloat(val))) {
|
||||
if (val === '' || !isNaN(Number.parseFloat(val))) {
|
||||
setValue(val)
|
||||
}
|
||||
}}
|
||||
@@ -1082,7 +1067,7 @@ function GroupOverrideDialog({
|
||||
|
||||
const handleSave = () => {
|
||||
if (!targetGroup.trim() || !ratio.trim()) return
|
||||
const parsedRatio = parseFloat(ratio)
|
||||
const parsedRatio = Number.parseFloat(ratio)
|
||||
if (isNaN(parsedRatio)) return
|
||||
|
||||
onSave(targetGroup.trim(), parsedRatio, editData?.targetGroup)
|
||||
@@ -1137,7 +1122,7 @@ function GroupOverrideDialog({
|
||||
value={ratio}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value
|
||||
if (val === '' || !isNaN(parseFloat(val))) {
|
||||
if (val === '' || !isNaN(Number.parseFloat(val))) {
|
||||
setRatio(val)
|
||||
}
|
||||
}}
|
||||
|
||||
+12
-21
@@ -16,12 +16,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { type ColumnDef } from '@tanstack/react-table'
|
||||
import { Pencil, Trash2 } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { DataTableColumnHeader } from '@/components/data-table'
|
||||
import type { ColumnDef } from '@tanstack/react-table'
|
||||
import { DataTableColumnHeader } from '@/components/data-table/core/column-header'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { StatusBadge } from '@/components/status-badge'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
|
||||
import {
|
||||
getModeLabel,
|
||||
getModeVariant,
|
||||
@@ -144,22 +144,13 @@ export function buildModelRatioColumns({
|
||||
id: 'actions',
|
||||
header: () => <div>{t('Actions')}</div>,
|
||||
cell: ({ row }) => (
|
||||
<div className='flex justify-end gap-2'>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() => onEdit(row.original)}
|
||||
>
|
||||
<Pencil />
|
||||
</Button>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() => onDelete(row.original.name)}
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => onEdit(row.original)}
|
||||
onDelete={() => onDelete(row.original.name)}
|
||||
/>
|
||||
),
|
||||
enableHiding: false,
|
||||
},
|
||||
|
||||
+1
-2
@@ -683,7 +683,6 @@ const ModelRatioVisualEditorComponent = forwardRef<
|
||||
{
|
||||
columnId: 'actions',
|
||||
side: 'right',
|
||||
className: 'w-24 min-w-24',
|
||||
},
|
||||
]}
|
||||
colgroup={
|
||||
@@ -692,7 +691,7 @@ const ModelRatioVisualEditorComponent = forwardRef<
|
||||
<col className='w-[300px]' />
|
||||
<col className='w-[120px]' />
|
||||
<col className='w-[300px]' />
|
||||
<col className='w-24' />
|
||||
<col className='w-auto' />
|
||||
</colgroup>
|
||||
}
|
||||
renderRow={(row, { getCellClassName }) => (
|
||||
|
||||
@@ -289,7 +289,7 @@ export const ToolPriceSettings = memo(function ToolPriceSettings({
|
||||
{
|
||||
id: 'actions',
|
||||
header: t('Actions'),
|
||||
className: 'w-[80px] text-right',
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (row) => (
|
||||
<Button
|
||||
|
||||
+10
-18
@@ -17,11 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
import { useState, useMemo } from 'react'
|
||||
import { Pencil, Plus, Search, Trash2 } from 'lucide-react'
|
||||
import { Plus, Search } from 'lucide-react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { StaticDataTable } from '@/components/data-table'
|
||||
import { StaticDataTable } from '@/components/data-table/static/static-data-table'
|
||||
import { StaticRowActions } from '@/components/data-table/static/static-row-actions'
|
||||
import { safeJsonParseWithValidation } from '../utils/json-parser'
|
||||
import { isObjectRecord } from '../utils/json-validators'
|
||||
import { RateLimitDialog, type RateLimitEntryData } from './rate-limit-dialog'
|
||||
@@ -182,22 +183,13 @@ export function RateLimitVisualEditor({
|
||||
className: 'text-right',
|
||||
cellClassName: 'text-right',
|
||||
cell: (limit) => (
|
||||
<div className='flex justify-end gap-2'>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() => handleEdit(limit)}
|
||||
>
|
||||
<Pencil className='h-4 w-4' />
|
||||
</Button>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='sm'
|
||||
onClick={() => handleDelete(limit.groupName)}
|
||||
>
|
||||
<Trash2 className='h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
<StaticRowActions
|
||||
editLabel={t('Edit')}
|
||||
deleteLabel={t('Delete')}
|
||||
menuLabel={t('Open menu')}
|
||||
onEdit={() => handleEdit(limit)}
|
||||
onDelete={() => handleDelete(limit.groupName)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user