refactor: refine toolbar controls and model drawer

web/default/src/components/data-table/toolbar/toolbar.tsx

@@ -76,11 +76,6 @@ export type DataTableToolbarProps<TData> = {
    * search input and filter chips.
    */
   additionalSearch?: ReactNode
-  /**
-   * Extra controls displayed immediately after the filter chips, before the
-   * right-aligned action cluster.
-   */
-  afterFilters?: ReactNode
   /**
    * Whether non-table filters (e.g. `additionalSearch` or `expandable`
    * inputs) are currently active. Controls Reset button visibility
@@ -351,7 +346,6 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
           {props.customSearch !== undefined ? props.customSearch : searchInput}
           {props.additionalSearch}
           {filterChips}
-          {props.afterFilters}
           <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
             {expandToggle}
           </div>
@@ -387,7 +381,6 @@ export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
       {props.customSearch !== undefined ? props.customSearch : searchInput}
       {props.additionalSearch}
       {filterChips}
-      {props.afterFilters}
       {expanded && hasExpandable && props.expandable}
 
       <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>

web/default/src/features/channels/components/channels-table.tsx

@@ -409,7 +409,7 @@ export function ChannelsTable() {
             singleSelect: true,
           },
         ],
-        afterFilters: (
+        preActions: (
           <Tooltip>
             <TooltipTrigger
               render={

web/default/src/features/models/components/drawers/model-mutate-drawer.tsx

@@ -123,7 +123,8 @@ export function ModelMutateDrawer({
 }: ModelMutateDrawerProps) {
   const { t } = useTranslation()
   const queryClient = useQueryClient()
-  const isEditing = Boolean(currentRow?.id)
+  const currentModelId = currentRow?.id
+  const isEditing = Boolean(currentModelId)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [pricingMode, setPricingMode] = useState<PricingMode>('per-token')
   const [pricingSubMode, setPricingSubMode] = useState<PricingSubMode>('ratio')
@@ -143,8 +144,13 @@ export function ModelMutateDrawer({
 
   // Fetch model detail if editing
   const { data: modelData } = useQuery({
-    queryKey: modelsQueryKeys.detail(currentRow?.id || 0),
-    queryFn: () => getModel(currentRow!.id),
+    queryKey: modelsQueryKeys.detail(currentModelId || 0),
+    queryFn: () => {
+      if (!currentModelId) {
+        throw new Error('Model ID is required')
+      }
+      return getModel(currentModelId)
+    },
     enabled: open && isEditing,
   })
 
@@ -230,13 +236,13 @@ export function ModelMutateDrawer({
 
   const validateNumber = (value: string) => {
     if (value === '') return true
-    return !isNaN(parseFloat(value))
+    return !Number.isNaN(Number.parseFloat(value))
   }
 
   const handlePromptPriceChange = (value: string) => {
     setPromptPrice(value)
-    if (value && !isNaN(parseFloat(value))) {
-      const ratio = parseFloat(value) / 2
+    if (value && !Number.isNaN(Number.parseFloat(value))) {
+      const ratio = Number.parseFloat(value) / 2
       form.setValue('ratio', ratio.toString())
     } else {
       form.setValue('ratio', '')
@@ -247,12 +253,12 @@ export function ModelMutateDrawer({
     setCompletionPrice(value)
     if (
       value &&
-      !isNaN(parseFloat(value)) &&
+      !Number.isNaN(Number.parseFloat(value)) &&
       promptPrice &&
-      !isNaN(parseFloat(promptPrice)) &&
-      parseFloat(promptPrice) > 0
+      !Number.isNaN(Number.parseFloat(promptPrice)) &&
+      Number.parseFloat(promptPrice) > 0
     ) {
-      const completionRatio = parseFloat(value) / parseFloat(promptPrice)
+      const completionRatio = Number.parseFloat(value) / Number.parseFloat(promptPrice)
       form.setValue('completionRatio', completionRatio.toString())
     } else {
       form.setValue('completionRatio', '')
@@ -398,7 +404,7 @@ export function ModelMutateDrawer({
       try {
         const submitData = {
           ...values,
-          id: isEditing ? currentRow!.id : undefined,
+          id: isEditing ? currentModelId : undefined,
           tags: Array.isArray(values.tags) ? values.tags.join(',') : '',
           status: values.status ? 1 : 0,
           sync_official: values.sync_official ? 1 : 0,
@@ -416,9 +422,10 @@ export function ModelMutateDrawer({
           ...modelData
         } = submitData
 
-        const response = isEditing
-          ? await updateModel({ ...modelData, id: currentRow!.id })
-          : await createModel(modelData)
+        const response =
+          isEditing && currentModelId
+            ? await updateModel({ ...modelData, id: currentModelId })
+            : await createModel(modelData)
 
         if (response.success) {
           // Handle ratio configuration updates in system settings
@@ -496,30 +503,30 @@ export function ModelMutateDrawer({
                 values.price &&
                 values.price !== ''
               ) {
-                priceMap[finalModelName] = parseFloat(values.price)
+                priceMap[finalModelName] = Number.parseFloat(values.price)
               } else if (pricingMode === 'per-token') {
                 if (values.ratio && values.ratio !== '') {
-                  ratioMap[finalModelName] = parseFloat(values.ratio)
+                  ratioMap[finalModelName] = Number.parseFloat(values.ratio)
                 }
                 if (values.cacheRatio && values.cacheRatio !== '') {
-                  cacheMap[finalModelName] = parseFloat(values.cacheRatio)
+                  cacheMap[finalModelName] = Number.parseFloat(values.cacheRatio)
                 }
                 if (values.completionRatio && values.completionRatio !== '') {
-                  completionMap[finalModelName] = parseFloat(
+                  completionMap[finalModelName] = Number.parseFloat(
                     values.completionRatio
                   )
                 }
                 if (values.imageRatio && values.imageRatio !== '') {
-                  imageMap[finalModelName] = parseFloat(values.imageRatio)
+                  imageMap[finalModelName] = Number.parseFloat(values.imageRatio)
                 }
                 if (values.audioRatio && values.audioRatio !== '') {
-                  audioMap[finalModelName] = parseFloat(values.audioRatio)
+                  audioMap[finalModelName] = Number.parseFloat(values.audioRatio)
                 }
                 if (
                   values.audioCompletionRatio &&
                   values.audioCompletionRatio !== ''
                 ) {
-                  audioCompletionMap[finalModelName] = parseFloat(
+                  audioCompletionMap[finalModelName] = Number.parseFloat(
                     values.audioCompletionRatio
                   )
                 }
@@ -615,7 +622,7 @@ export function ModelMutateDrawer({
     },
     [
       isEditing,
-      currentRow,
+      currentModelId,
       queryClient,
       onOpenChange,
       pricingMode,
@@ -728,14 +735,14 @@ export function ModelMutateDrawer({
                   <FormItem>
                     <FormLabel>{t('Vendor')}</FormLabel>
                     <Select
-                      items={[
-                        ...vendors.map((vendor) => ({
+                      items={vendors.map((vendor) => ({
                           value: String(vendor.id),
                           label: vendor.name,
-                        })),
-                      ]}
+                        }))}
                       onValueChange={(value) =>
-                        field.onChange(value ? parseInt(value) : undefined)
+                        field.onChange(
+                          value ? Number.parseInt(value) : undefined
+                        )
                       }
                       value={field.value ? String(field.value) : undefined}
                     >
@@ -797,7 +804,7 @@ export function ModelMutateDrawer({
                     <FormControl>
                       <RadioGroup
                         onValueChange={(value) =>
-                          field.onChange(parseInt(value))
+                          field.onChange(Number.parseInt(value))
                         }
                         value={String(field.value)}
                         className='grid grid-cols-2 gap-4'
@@ -835,12 +842,10 @@ export function ModelMutateDrawer({
               <div className='flex items-center justify-between'>
                 <h3 className='text-sm font-semibold'>{t('Endpoints')}</h3>
                 <Select<string>
-                  items={[
-                    ...Object.keys(ENDPOINT_TEMPLATES).map((key) => ({
+                  items={Object.keys(ENDPOINT_TEMPLATES).map((key) => ({
                       value: key,
                       label: key,
-                    })),
-                  ]}
+                    }))}
                   onValueChange={(v) =>
                     v !== null && handleFillEndpointTemplate(v)
                   }
@@ -991,7 +996,7 @@ export function ModelMutateDrawer({
                                     field.onChange(value)
                                     if (value) {
                                       setPromptPrice(
-                                        (parseFloat(value) * 2).toString()
+                                        (Number.parseFloat(value) * 2).toString()
                                       )
                                     } else {
                                       setPromptPrice('')
@@ -1001,8 +1006,8 @@ export function ModelMutateDrawer({
                               />
                             </FormControl>
                             <FormDescription>
-                              {field.value && !isNaN(parseFloat(field.value))
-                                ? `Calculated price: $${(parseFloat(field.value) * 2).toFixed(4)} per 1M tokens`
+                              {field.value && !Number.isNaN(Number.parseFloat(field.value))
+                                ? `Calculated price: $${(Number.parseFloat(field.value) * 2).toFixed(4)} per 1M tokens`
                                 : t('Multiplier for prompt tokens.')}
                             </FormDescription>
                             <FormMessage />
@@ -1028,9 +1033,9 @@ export function ModelMutateDrawer({
                                     const ratio = form.getValues('ratio')
                                     if (value && ratio) {
                                       const compPrice =
-                                        parseFloat(ratio) *
+                                        Number.parseFloat(ratio) *
                                         2 *
-                                        parseFloat(value)
+                                        Number.parseFloat(value)
                                       setCompletionPrice(compPrice.toString())
                                     } else {
                                       setCompletionPrice('')
@@ -1041,10 +1046,10 @@ export function ModelMutateDrawer({
                             </FormControl>
                             <FormDescription>
                               {field.value &&
-                              !isNaN(parseFloat(field.value)) &&
+                              !Number.isNaN(Number.parseFloat(field.value)) &&
                               promptPrice &&
-                              !isNaN(parseFloat(promptPrice))
-                                ? `Calculated price: $${(parseFloat(promptPrice) * parseFloat(field.value)).toFixed(4)} per 1M tokens`
+                              !Number.isNaN(Number.parseFloat(promptPrice))
+                                ? `Calculated price: $${(Number.parseFloat(promptPrice) * Number.parseFloat(field.value)).toFixed(4)} per 1M tokens`
                                 : t('Multiplier for completion tokens.')}
                             </FormDescription>
                             <FormMessage />
@@ -1053,8 +1058,7 @@ export function ModelMutateDrawer({
                       />
                     </>
                   ) : (
-                    <>
-                      <div className='space-y-4'>
+                    <div className='space-y-4'>
                         <div className='space-y-2'>
                           <Label>{t('Prompt price ($/1M tokens)')}</Label>
                           <Input
@@ -1066,8 +1070,8 @@ export function ModelMutateDrawer({
                             }
                           />
                           <p className='text-muted-foreground text-sm'>
-                            {promptPrice && !isNaN(parseFloat(promptPrice))
-                              ? `Calculated ratio: ${(parseFloat(promptPrice) / 2).toFixed(4)}`
+                            {promptPrice && !Number.isNaN(Number.parseFloat(promptPrice))
+                              ? `Calculated ratio: ${(Number.parseFloat(promptPrice) / 2).toFixed(4)}`
                               : t('Enter Input price to calculate ratio')}
                           </p>
                         </div>
@@ -1084,16 +1088,15 @@ export function ModelMutateDrawer({
                           />
                           <p className='text-muted-foreground text-sm'>
                             {completionPrice &&
-                            !isNaN(parseFloat(completionPrice)) &&
+                            !Number.isNaN(Number.parseFloat(completionPrice)) &&
                             promptPrice &&
-                            !isNaN(parseFloat(promptPrice)) &&
-                            parseFloat(promptPrice) > 0
-                              ? `Calculated ratio: ${(parseFloat(completionPrice) / parseFloat(promptPrice)).toFixed(4)}`
+                            !Number.isNaN(Number.parseFloat(promptPrice)) &&
+                            Number.parseFloat(promptPrice) > 0
+                              ? `Calculated ratio: ${(Number.parseFloat(completionPrice) / Number.parseFloat(promptPrice)).toFixed(4)}`
                               : t('Enter Completion price to calculate ratio')}
                           </p>
                         </div>
-                      </div>
-                    </>
+                    </div>
                   )}
 
                   <Collapsible

web/default/src/features/usage-logs/components/common-logs-filter-bar.tsx

@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 import { useState, useCallback, useMemo } from 'react'
 import { useQueryClient, useIsFetching } from '@tanstack/react-query'
 import { useNavigate, getRouteApi } from '@tanstack/react-router'
-import { type Table } from '@tanstack/react-table'
+import type { Table } from '@tanstack/react-table'
 import { Eye, EyeOff } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useIsAdmin } from '@/hooks/use-admin'
@@ -265,26 +265,28 @@ export function CommonLogsFilterBar<TData>(
   const statsBar = (
     <div className='flex flex-wrap items-center gap-2'>
       <CommonLogsStats />
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <Button
-              variant='ghost'
-              size='icon'
-              onClick={() => setSensitiveVisible(!sensitiveVisible)}
-              aria-label={sensitiveVisible ? t('Hide') : t('Show')}
-              className='text-muted-foreground hover:text-foreground size-7'
-            />
-          }
-        >
-          {sensitiveVisible ? <Eye /> : <EyeOff />}
-        </TooltipTrigger>
-        <TooltipContent>
-          {sensitiveVisible ? t('Hide') : t('Show')}
-        </TooltipContent>
-      </Tooltip>
     </div>
   )
+  const sensitiveToggle = (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            variant='ghost'
+            size='icon'
+            onClick={() => setSensitiveVisible(!sensitiveVisible)}
+            aria-label={sensitiveVisible ? t('Hide') : t('Show')}
+            className='text-muted-foreground hover:text-foreground size-7'
+          />
+        }
+      >
+        {sensitiveVisible ? <Eye /> : <EyeOff />}
+      </TooltipTrigger>
+      <TooltipContent>
+        {sensitiveVisible ? t('Hide') : t('Show')}
+      </TooltipContent>
+    </Tooltip>
+  )
 
   const dateRangeFilter = (
     <LogsFilterField wide>
@@ -410,6 +412,7 @@ export function CommonLogsFilterBar<TData>(
     <LogsFilterToolbar
       table={props.table}
       stats={statsBar}
+      actionStart={sensitiveToggle}
       primaryFilters={
         <>
           {dateRangeFilter}

web/default/src/features/usage-logs/components/logs-filter-toolbar.tsx

@@ -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 { useState, type ComponentProps, type ReactNode } from 'react'
-import { type Table } from '@tanstack/react-table'
+import type { Table } from '@tanstack/react-table'
 import { useMediaQuery } from '@/hooks'
 import { ChevronDown, Loader2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
@@ -44,6 +44,7 @@ interface LogsFilterToolbarProps<TData> {
   mobileFilters?: ReactNode
   mobileFilterCount?: number
   stats?: ReactNode
+  actionStart?: ReactNode
   hasActiveFilters: boolean
   hasAdvancedActiveFilters?: boolean
   advancedFilterCount?: number
@@ -142,6 +143,7 @@ export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) {
           <div className='mt-2 flex flex-col gap-2'>
             {props.stats}
             <div className='flex items-center justify-end gap-1.5'>
+              {props.actionStart}
               <DrawerTrigger asChild>
                 <Button
                   type='button'
@@ -240,6 +242,7 @@ export function LogsFilterToolbar<TData>(props: LogsFilterToolbarProps<TData>) {
       <div className='mt-2 flex flex-wrap items-center gap-2'>
         {props.stats}
         <div className='ms-auto flex flex-wrap items-center justify-end gap-1.5 sm:gap-2'>
+          {props.actionStart}
           <Button
             type='button'
             variant='outline'